HTML/CSS のどんな質問にも優しく答えるｽﾚ 44
- ： Name_Not_Found [sage] 2020/07/04(土) 15:05:38.01ID:???
- ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバーを取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（を取った場合も）
立てられない事が予め分かっている場合は、付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるｽﾚ 43
ttps://mevius.5ch.net/test/read.cgi/hp/1583911920/">ttps://mevius.5ch.net/test/read.cgi/hp/1583911920/
■関連スレ
Webサイト制作初心者用質問スレ part251
ttp://mevius.5ch.net/test/read.cgi/hp/1564414228/l50
■HTML
HTML Living Standard 日本語訳
ttp://http://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
ttp://http://triple-underscore.github.io/selectors4-ja.html - ： Name_Not_Found [sage] 2020/07/04(土) 18:33:27.82ID:???
- 1おつ
- ： Name_Not_Found [sage] 2020/07/04(土) 21:36:35.58ID:???
- いちおつ
- ： Name_Not_Found [age] 2020/07/05(日) 03:11:42.91ID:???
- form中の内容をget、postで送るときに一部のデータだけ送ることができないかということで悩んでいます
form中にinput[type="text"]な要素A、Bの2つがあり
getボタンを押したときはAのみ
postボタンを押したときはA、B両方を送信できないかと考えています
Bの方はそこそこ長い文が入る可能性がありgetにBが含まれるとURLが汚くなってしまうのが嫌でこのようなことができないかと考えました
自分で調べてみたところJavaScriptを使う手法は見つかったのですが非JSな環境でも動くようにしたいと考えています
よろしくお願いします - ： Name_Not_Found [sage] 2020/07/05(日) 03:26:28.95ID:???
- それはいくらなんでもスレ違いなので
余所でやってください。 - ： Name_Not_Found [sage] 2020/07/05(日) 03:36:11.92ID:???
-
inputのform属性を使ってみるとか - ： Name_Not_Found [sage] 2020/07/05(日) 10:22:27.05ID:???
-
あ？優しくしてくれないつもりか - ： Name_Not_Found [sage] 2020/07/05(日) 11:23:39.65ID:???
- getとpostでそれぞれformつくりゃええがな
- ： Name_Not_Found [age] 2020/07/05(日) 12:43:22.45ID:???
-
すいません
HTML or CSSに関係したスレかと思って質問してしまったのですが
HTML and CSSのスレだったようでスレチ失礼しました
別のスレに行きます
>>8
スレチにも関わらずありがとうございます
試してみます - ： Name_Not_Found [sage] 2020/07/05(日) 13:01:54.16ID:???
-
いや、スレチではない - ： Name_Not_Found [sage] 2020/07/05(日) 13:43:28.70ID:???
-
試してないけど、これ動くのかな？
ttp://https://jsfiddle.net/0y2xhws4/ - ： Name_Not_Found [sage] 2020/07/05(日) 14:46:45.95ID:???
- せっかくですけど試してから報告してくれます？
- ： Name_Not_Found [sage] 2020/07/05(日) 14:48:53.48ID:???
- もっとお母さんのようにやさしく包み込めや
- ： Name_Not_Found [sage] 2020/07/05(日) 14:49:49.63ID:???
- ママーーーー！！
- ： Name_Not_Found [] 2020/07/05(日) 15:14:47.70:3nMZck6y
- ママ！おぱい飲みたい！
- ： Name_Not_Found [sage] 2020/07/05(日) 15:44:28.14ID:???
- 家に帰ってママのおっぱいでも吸ってな坊や
HAHAHA！！ - ： Name_Not_Found [] 2020/07/05(日) 16:41:10.70:oHogugHk
- wordpressに<header>タグというのがあるみたいなんですが、これはワードプレス特有のものでしょうか？タグというのは自分で定義出来るんですか？
- ： Name_Not_Found [sage] 2020/07/05(日) 16:52:05.02ID:???
- ハッ！狂ったベイビーはママのおっぱいでもしゃぶりながらお家で寝んねしてな！
- ： Name_Not_Found [sage] 2020/07/05(日) 16:53:50.64ID:???
-
おいおいやめろよ。テキサスの母親が泣いちまうぞ？
ttp://http://www.htmq.com/html5/header.shtml - ： Name_Not_Found [] 2020/07/05(日) 17:00:42.27:oHogugHk
-
それ必要なんですか？
divでいいんじゃないでしょうか？
SEO的にメリットがあるとか？ - ： Name_Not_Found [sage] 2020/07/05(日) 18:09:57.32ID:???
-
お前がそう思うんならそうなんだろう
お前ん中ではな！ （くわっ - ： Name_Not_Found [sage] 2020/07/05(日) 18:11:49.99ID:???
-
とかいって<html>タグとか<body>タグは使っちゃうんだろ？
なんでかな〜？ - ： Name_Not_Found [sage] 2020/07/05(日) 18:54:35.96ID:???
- 構造化できない人はぜーーーーんぶdivで良いんだよ^^
- ： Name_Not_Found [sage] 2020/07/05(日) 20:01:24.10ID:???
-
別に使わなくても動くし、使いたいやつは使うだけ。
それがHTMLファイブ。 - ： Name_Not_Found [] 2020/07/05(日) 20:37:17.08:oHogugHk
- はい
- ： Name_Not_Found [] 2020/07/05(日) 20:42:15.85:3nMZck6y
- 憶測だけどheaderタグで書いとけばコード見た時にどこでヘッダー書いてあるか一目瞭然だからだろう
ちなみにfooterもあるよな - ： Name_Not_Found [sage] 2020/07/05(日) 20:47:54.48ID:???
- とりあえず、これでも読めや
ドキュメントと Web サイトの構造 - ウェブ開発を学ぶ | MDN
ttp://https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure - ： Name_Not_Found [sage] 2020/07/05(日) 20:57:14.90ID:???
- 知った風にマウンティング取ったり小難しいサイト貼ったりしてても
section、article、asideあたりの使い分け方を明確に説明できるやつなんてこのスレにはいないんだよなぁ - ： Name_Not_Found [sage] 2020/07/05(日) 21:11:54.56ID:???
- そんなお前は、先ず日本語からな
- ： Name_Not_Found [sage] 2020/07/05(日) 21:30:16.30ID:???
-
知った風に言うなや - ： Name_Not_Found [sage] 2020/07/05(日) 21:32:55.99ID:???
- 全ては視覚障者の為だけに構造化やるんだぞ
それ以外は特に何も影響ないんだからな
わかったかこのやろう - ： Name_Not_Found [sage] 2020/07/06(月) 02:47:34.35ID:???
- 英語圏のやつらですら
article、asideの使い分けできてないので - ： Name_Not_Found [sage] 2020/07/06(月) 06:27:32.93ID:???
-
ここの連中は説明出来ないんじゃなくて説明する必要がない
そんなもんそれこそ少し調べりゃ腐るほど出てくるしurl貼りゃ良いだけ
わざわざここに自力で書き込むだけ時間と労力の無駄 - ： Name_Not_Found [sage] 2020/07/07(火) 10:03:13.18ID:???
-
非JS環境って実在したの！？ - ： Name_Not_Found [sage] 2020/07/07(火) 14:32:15.67ID:???
- 非js環境なんていくらでもあるだろ
CMSの投稿部分みたいな独自システムとか楽天とかamazonとか - ： Name_Not_Found [sage] 2020/07/07(火) 14:36:18.26ID:???
- HTMLで正しくマクアップするのはいってみりゃ
車も走ってないような田舎の島において
真昼間に信号が赤だから誰もいないけどルール守って渡らずまつ感じだな
渡りたれば渡ればいいし、渡っても別に何か起こるわけでもない - ： Name_Not_Found [sage] 2020/07/07(火) 16:56:12.64ID:???
-
curlとか使ったことないの！？ - ： Name_Not_Found [sage] 2020/07/07(火) 21:36:46.66ID:???
-
あるに決まってんだろ
こちとらペチパーだぞ - ： Name_Not_Found [sage] 2020/07/07(火) 22:59:36.73ID:???
- ぺ、ペチパー？
- ： Name_Not_Found [sage] 2020/07/08(水) 00:08:14.19ID:???
- そういやpuppeteerか出来てから
あんまり使わなくなったなあcurl
やっぱヘッドレスブラウザが便利だわ - ： Name_Not_Found [sage] 2020/07/08(水) 09:37:18.88ID:???
- puppeteer使って何してるのさ
- ： Name_Not_Found [sage] 2020/07/08(水) 11:36:46.96ID:???
- curlとは用途が違うだろ
api叩いてみるのにpuppeteerやらplaywright使ってたら笑う - ： Name_Not_Found [sage] 2020/07/08(水) 18:29:10.42ID:???
- なんでー
つかAPI叩くのにはsequelとかのGUIツール使っちゃうなあ
パペッティア？読み方わかんないけど
ヘッドレスブラウザは確かに便利やな
シェルのワンライナーでいきなりは使えないから
多少面倒はあるけど - ： Name_Not_Found [sage] 2020/07/08(水) 18:30:10.36ID:???
- 間違えた
sequelはdbのフロントエンドだった
postmanだな、API叩きに使うのは - ： Name_Not_Found [sage] 2020/07/08(水) 18:52:10.75ID:???
- > シェルのワンライナーでいきなりは使えないから
> 多少面倒はあるけど
やっぱそう思う？
シェルから簡単にブラウザレンダリング後のhtml取れたら便利かなと思って簡単なラッパーコマンドをnodeで作ったことあるんだよね…
需要あるのか…？
たいしたもんじゃないけど開発再開しようかな。 - ： Name_Not_Found [sage] 2020/07/08(水) 23:44:09.54ID:???
-
自分も同じようなの作ってつかってるw
みんな考えることは同じだなあ - ： Name_Not_Found [sage] 2020/07/09(木) 03:15:11.63ID:???
- とは別人だが試してみたら動かなかったな
- ： Name_Not_Found [sage] 2020/07/09(木) 03:20:53.83ID:???
- 漏れは、VSCode の拡張機能・Rest Client を使う
マウス操作だから、テストしやすい - ： Name_Not_Found [sage] 2020/07/09(木) 09:54:53.45ID:???
- rubyガイジと同じ拡張機能使ってるなんて癪だわ…
- ： Name_Not_Found [sage] 2020/07/09(木) 10:03:46.06ID:???
- vscodeのは
中身は.NETコアなんだろか？ - ： Name_Not_Found [] 2020/07/09(木) 16:46:25.79:GssH/3nM
- 画像の下に2カラムで文字を表示させることは可能でしょうか? 画像の左下にタイトル 右下に説明を入れたいのですが
- ： Name_Not_Found [] 2020/07/09(木) 18:32:00.92:/ZqFWejT
-
<p><span>タイトル</span><span>説明</span></p>
こういう書き方もあるけど？ - ： Name_Not_Found [] 2020/07/09(木) 20:07:37.95:GssH/3nM
-
できました！ありがとうございます
spanで できるんですね - ： Name_Not_Found [] 2020/07/09(木) 20:56:58.51:GssH/3nM
- ttp://https://www.admiretheweb.com/inspiration/think-global-health/
すみません、こちらのサイトのように改行しながら文字を横並びにする方法を教えていただけないでしょうか？ - ： Name_Not_Found [sage] 2020/07/09(木) 23:41:55.45ID:???
- ソースみたらええがな
- ： Name_Not_Found [sage] 2020/07/09(木) 23:46:36.68ID:???
-
どの辺のことを言ってるのか知らんが、こういうことか？
ttp://https://jsfiddle.net/u90yo16a/ - ： Name_Not_Found [] 2020/07/10(金) 01:34:54.91:X21e09zf
-
後はクラス要素入れて微調整したりしてくれよ - ： Name_Not_Found [] 2020/07/10(金) 23:36:47.04:9qbDyTmI
- >>無事作成できました ありがとうございます
- ： Name_Not_Found [] 2020/07/15(水) 04:52:58.03:BIvsxFX2
- ちょっとtableで聞きたいんだけどtbodyで囲んだtrを横並びに置くって出来るの？
行１
行2
だったときに
行１行2
ってすること - ： Name_Not_Found [sage] 2020/07/15(水) 05:55:43.96ID:???
-
こういうこと？
ttp://https://jsfiddle.net/fn8tmb0z/
trをinline-blockにしてもいいけど
どちらかといえばflexだよね - ： Name_Not_Found [] 2020/07/15(水) 14:50:56.36:BIvsxFX2
-
なるほど、よくわかったわありがとう - ： Name_Not_Found [] 2020/07/15(水) 18:42:14.88:BIvsxFX2
-
ついでなんだけど、trの中にもう一つthとtdでやった方がいいんじゃないかって思ったんだけど
このflexでやるメリットはあるの？ - ： Name_Not_Found [sage] 2020/07/15(水) 18:47:55.68ID:???
- そもtableなのか？その情報
- ： Name_Not_Found [] 2020/07/15(水) 20:21:51.61:BIvsxFX2
- ttps://my-best.com/7996
このサイトのランキングでテーブルのところで使ってるんだけど - ： Name_Not_Found [sage] 2020/07/15(水) 20:30:04.20ID:???
- 表としてのセマンティクスに拘らず
帳票のようなある意味レイアウト目的の表になるなら
正しさは求めてもしかたない
望んだ形になることだけを目指して
HTMLとCSSを存分にごにょこにょするしかない - ： Name_Not_Found [] 2020/07/15(水) 21:46:15.06:4la6hvr8
- すみませんこちらのサイトttp://https://unlimitedchaos.net/css-parallel-images-and-contents-responsive/のフッターを真似て作りたいのですが3カラムフッターがどうしても作れません
アドバイスお願いします - ： Name_Not_Found [sage] 2020/07/15(水) 22:41:39.29ID:???
-
そもそもthとtdじゃタグの意味が違うし、単に横並びにするためだけにthを使うべきじゃない
ttp://https://developer.mozilla.org/ja/docs/Web/HTML/Element/th
のサイトでは、ちゃんとthをヘッダー（見出し）として使ってる
thを使わずスマホ対応も考えるなら、flexの方が少ないコードでフレキシブルにできて何かと便利
ttp://https://jsfiddle.net/0tmqd369/
th使ってフレキシブルにするなら、こんな感じ
ttp://https://jsfiddle.net/4o586dp2/
いずれも画面幅が変われば縦並びなる - ： Name_Not_Found [sage] 2020/07/15(水) 22:48:03.41ID:???
-
そのサイトはwordpressとbootstrapで出来てて、3カラム部分はfloat使ってるみたいだけど
どうやって真似て作って、どの辺が上手く行かないの？ - ： Name_Not_Found [] 2020/07/15(水) 22:51:39.09:4la6hvr8
-
worldpressで真似て作ってるのですが横に均等に羅列ができません
1カラム33%ずつで3等分されてるようですが… - ： Name_Not_Found [] 2020/07/15(水) 23:14:57.48:BIvsxFX2
-
いやそういう事じゃなく、trにthとtdを二つ作れば横並びになるし最後のtrだけ一つ作れば２・２・１綺麗にテーブル出来るじゃないのって事 - ： Name_Not_Found [sage] 2020/07/15(水) 23:34:01.94ID:???
- セマンティクス糞食らえ派
- ： Name_Not_Found [sage] 2020/07/15(水) 23:58:13.76ID:???
-
いやだから、そもそもがthを使わない前提での質問だったし、横並びのためだけにthを使わず
ちゃんと見出しとしてのthが必要であれば、横並びにflexは使わなくてもいいよって話だよ。
あなたの作りたいものは見出しとしてのthは必要なの？
最初の条件で答えたflexを、勝手に前提条件を変えて要らないだろって言われても困るわｗ - ： Name_Not_Found [sage] 2020/07/16(木) 00:16:33.16ID:???
-
簡略化すれば何かしらヒントになるかも？
ttp://https://jsfiddle.net/a8Lbtu4x/ - ： Name_Not_Found [] 2020/07/16(木) 00:41:01.32:zyOebkF6
-
luxeritasで作ってみたのですがフッターが左中央右と指定されていて
中央に要素を配置するとカラムの横幅をwidthで値を指定しても左右に空間ができてしまいます
やはりPHPを弄るしか方法は無いんですかね？ - ： Name_Not_Found [] 2020/07/16(木) 00:51:56.45:zyOebkF6
- 一度参考サイトのフッターをコピペしてwidthを指定すると出来るんですがどういう構造なんでしょうか…
- ： Name_Not_Found [] 2020/07/16(木) 01:01:55.90:AqK+cNZN
-
いやだから・・・提示したサイトの方で使ってるからthを、それなのにtrの中にthとtd入れてflexを使ってるのは何故なのかって聞いてるんだけどさ - ： Name_Not_Found [sage] 2020/07/16(木) 01:13:41.79ID:???
-
テキトーに再現してみた。
ttp://https://lisp-trpg.ddo.jp/trpg/onj/upload/upl/RnrOB5gdOhFwni5UIZr4/index.html - ： Name_Not_Found [sage] 2020/07/16(木) 01:50:20.74ID:???
-
だったら最初からまとめてそう言いなさいよ。
この流れじゃ後付けが多すぎて、そうは読めないっての。
で、何故flex使ってるかは、開発者ツール使ってflex外せば分かるが
flex使って、セルの横幅決めたりして綺麗に幅一杯に埋まるようにしてたり
多分コードを減らしたりもしてる。
あとtbodyのflexはtrを横並びにしてるけど、trをflexにするのは
thとtdを横並びにするのと関係はない。 - ： Name_Not_Found [sage] 2020/07/16(木) 02:10:01.45ID:???
-
模写元がどれだけカスタマイズしてるか分からないけど
同じテーマ使ってるっぽいから、どうにかなるんじゃない？
でも、さすがにそれだけの情報だけじゃ、よく分からんから
状況が再現できるコードでも貼ってくれりゃいいんだけど - ： Name_Not_Found [] 2020/07/16(木) 16:17:16.52:V+F4nj+E
- >>79
floatタグで横いっぱいに要素を並べることができましたありがとうございます
floatタグでレス73のアイデアと77のアイデアを結合できないでしょうか? - ： Name_Not_Found [sage] 2020/07/16(木) 16:35:25.85ID:???
- 昔かよ
- ： Name_Not_Found [sage] 2020/07/16(木) 16:45:21.95ID:???
- 今はflex使うんだろうなぁ
IE対応するのであれば面倒そうだけどと - ： Name_Not_Found [sage] 2020/07/16(木) 17:25:49.99ID:???
-
は、3つのdivにまとめて指定してるdisplay: inline-block;でブロックを横並びにしてるので
そのinline-blockを消して、そこへ新たにfloat: left;を追加すればいいんじゃない？ - ： Name_Not_Found [] 2020/07/16(木) 22:31:06.30:V+F4nj+E
-
自分では解決できなかったのでttp://https://shu-sait.com/footer-menu-yokonarabi/
こちらのサイトの方を参考に作り替えてみます
上記のサイトのフッターを配置してみると左右ぴったりに配置することができました
何が間違っていたのかわからなかったのですが… - ： Name_Not_Found [] 2020/07/16(木) 22:35:10.15:V+F4nj+E
- もう一点質問があるのですがttp://https://jsfiddle.net/vintagedopeme0522/brqpL3zm/1/
こちらの縦並びのメニューをワードごとに大きさを変えて2列3列に並べる場合 inline-blockを使えばよいのでしょうか? - ： Name_Not_Found [sage] 2020/07/16(木) 23:12:08.22ID:???
-
書かれた通りにやれば出来るんだが、解決できないってのは
何を言われてるのか分からないってこと？
というか、その参考サイトはfloatじゃなくてflex使ってるんだが
いったい何をどうやってるのかサッパリだな…。 - ： Name_Not_Found [sage] 2020/07/16(木) 23:54:32.28ID:???
-
ちょっと何言ってるか分からない
横並びの1行じゃなくて2列とか3列にしたいの？
あとワードごとに大きさを変えるって、各ブロックの横幅を変えたいってこと？ - ： Name_Not_Found [] 2020/07/16(木) 23:57:48.70:V+F4nj+E
-
cssを調整した際にworldpressで固定されてる左側のコンテンツのレイアウトが崩れてしまうなどがありまして…
おそらくhtmlのクラス名がかぶっていると思うのですが - ： Name_Not_Found [] 2020/07/17(金) 00:03:44.58:iqDiHOmy
-
ボックスを横に2列3列とならべて できればボックスの大きさをワードの長さごとに変えたいのですが
以前も挑戦したのですが ul li class を使う方法しかなくできませんでした
bootstrapであれば可能なようですが扱いきれず困ってます
ul li を使わずにワードを2列 3列に並べる方法はありますでしょうか? - ： Name_Not_Found [sage] 2020/07/17(金) 00:06:14.70ID:???
- ttp://https://lisp-trpg.ddo.jp/trpg/onj/upload/upl/S9JSXcTUqLcRTFfU26ee/a.html
- ： Name_Not_Found [sage] 2020/07/17(金) 00:08:06.39ID:???
-
アンカー忘れてたわ。こういうこと？ - ： Name_Not_Found [sage] 2020/07/17(金) 00:37:28.73ID:???
-
aとbrのみ
ttp://https://lisp-trpg.ddo.jp/trpg/onj/upload/upl/b2EYd2FCtbPpZACexSpR/b.html - ： Name_Not_Found [sage] 2020/07/17(金) 01:04:37.44ID:???
-
更に謎は深まるばかりなんだが、こういうのを作りたいってこと？
ttps://www.webdlab.com/labs/dropdownmenu-3/sample3/ - ： Name_Not_Found [] 2020/07/17(金) 01:09:56.83:iqDiHOmy
-
こういうことです！ 最後の位置のみ揃えることはできますでしょうか？ - ： Name_Not_Found [sage] 2020/07/17(金) 01:26:53.97ID:???
- あの説明でよく正解に辿り着いたな…ｗ
- ： Name_Not_Found [sage] 2020/07/17(金) 01:48:54.62ID:???
- 各行の最後のブロックを左揃えにしたいのか、右揃えにしたいのか
各行の他のブロックの位置は変えていいのか、変えちゃダメなのか
それとも各行の全体を右寄せにしたいのか - ： Name_Not_Found [sage] 2020/07/17(金) 06:54:32.70ID:???
-
恐らく、正解は・・・両端ぞろえ！！
ttp://https://lisp-trpg.ddo.jp/trpg/onj/upload/upl/Eqzq1PAgm2M98oVuCKjE/b.html - ： Name_Not_Found [sage] 2020/07/17(金) 09:07:07.36ID:???
- みんなのエスパー力に感動
- ： Name_Not_Found [] 2020/07/17(金) 10:28:38.51:JmSrocuP
-
ありがとうございます aにクラス名をつけることは可能でしょうか? 別の要素に影響してしまい困りました… - ： Name_Not_Found [] 2020/07/17(金) 10:43:24.11:JmSrocuP
- >>92
class名変更で実装できましたありがとうございます - ： Name_Not_Found [] 2020/07/17(金) 11:33:37.75:JmSrocuP
-
すみません divに固有のクラス名をつけてcssを適用することはできますでしょうか? - ： Name_Not_Found [] 2020/07/17(金) 11:53:34.40:JmSrocuP
- ttp://https://jsfiddle.net/ubmc2dt9/1/
クラス名を変更して無事実装できましたありがとう互います
font-size: 14px;
width: calc((100% - 60px) / 7); このcssの仕組みがわからないのですが教えてください - ： Name_Not_Found [sage] 2020/07/17(金) 12:24:38.61ID:???
- 横にきっちり並べたい要素が7個
横幅100％を7で割ったものが一つの要素の幅になる。ただ、今回は要素間に10pxの左マージンを入れた。
最初の要素以外に左マージン10pxつけると左マージンは全60pxになる。
故に100％の幅から60px引いて7分割
最初の要素以外に左マージン10pxつければ
7つの要素の幅＋左マージン60px＝
100％ - ： Name_Not_Found [sage] 2020/07/17(金) 15:23:01.64ID:???
- > できればボックスの大きさをワードの長さごとに変えたい
これはもう要らないのかな？ - ： Name_Not_Found [] 2020/07/17(金) 18:25:04.64:nrVkm5ZW
-
ありがとうございます - ： Name_Not_Found [] 2020/07/17(金) 18:25:45.64:nrVkm5ZW
-
102のコードを改変しても可能でしょうか？ - ： Name_Not_Found [sage] 2020/07/17(金) 19:52:06.61ID:???
- まぁ、見た目はともかく出来るといえば出来るよね
ttp://https://jsfiddle.net/ct8v2jLh/ - ： Name_Not_Found [sage] 2020/07/18(土) 18:46:15.95ID:???
- 浦島太郎です。
<head>の中に <style> というのをおいてログイン入力画面とか、
名前登録みたいなのを作っているのですが、やっぱりｃｓｓというのは
必ず使うべきものなんですか？
ちなみに <style> は100行程度です。 - ： Name_Not_Found [sage] 2020/07/18(土) 19:03:27.51ID:???
-
はい
別のファイルにしても良いです - ： Name_Not_Found [sage] 2020/07/18(土) 19:16:58.23ID:???
- ttp://https://deshinon.com/2019/03/06/background-oshare-kopipe/
上記のようなサイトでCODE PEN等で紹介されているコードを
自身のサイトに反映させたいと考えていますが上手くいきません。
cssとjsについては丸コピペして「xxx.css」「xxx.js」として保存、
htmlについては、BODY内に
<link rel="stylesheet" type="text/css" href="xxx.css">
と記述してcssを呼び出しています。
結果としてテキストや表組みはちゃんと反映されますが、
背景画像などの動きをつける部分が反映されません。
特定のサンプルで起きるわけではなく、複数のサンプルを試しても
上手くいかないので、こちらの実装の仕方が間違っていると考えられます。
html css jsで成り立っているサンプルを実装する手法で
上記の手順で間違っている箇所があったら教えてくださればありがたいです。 - ： Name_Not_Found [sage] 2020/07/18(土) 19:31:48.26ID:???
-
見てないけど
画像のパスも変えないといかんのじゃね？ - ： Name_Not_Found [sage] 2020/07/18(土) 19:54:21.44ID:???
-
ありがとうございます。
例えば
ttp://https://codepen.io/CapMousse/pen/EJaHk/
このサンプルコードですと、相対パスですべて書かれており、
html css jsを全て同階層に置けば動作すると考えています。
ですが実際にコードをコピペしてxxxx.html xxxx.css xxxx.jsの
３ファイルに貼っても動作しません。
根本的に考え方が間違っているのでしょうか・・・ - ： Name_Not_Found [sage] 2020/07/18(土) 20:02:08.92ID:???
- どうせhtmlファイルダブルクリックで開いてんだろ
- ： Name_Not_Found [sage] 2020/07/18(土) 20:23:52.73ID:???
-
同一階層に置いただけじゃ動かんぞ
htmlファイルにcssを反映させるためには基本的にheadタグ内に
link rel="stylesheet" href="xxx.css"
みたいな感じで書く
JavaScriptは基本的に
script src="xxx.js"></scriptこれを
/body直前に追加する - ： Name_Not_Found [sage] 2020/07/18(土) 21:13:56.16ID:???
-
解決しました。
jsファイルを呼び出すためのscriptタグを置く位置が間違っていました（headタグ内に置いていた）。
色々ありがとうございました。 - ： Name_Not_Found [] 2020/07/19(日) 22:58:47.63:zfUWI/E2
- ttp://https://tympanus.net/Development/HoverEffectIdeas/
すみません上記のサイトのLayla Zoe Oscar Bubba のいずれかを実装したいのですが構造が難しく自作できませんでした
cssで作成可能でしょうか? - ： Name_Not_Found [sage] 2020/07/20(月) 00:43:27.31ID:???
-
できるよ
ttp://https://jsfiddle.net/qoeLrsj6/ - ： Name_Not_Found [] 2020/07/20(月) 15:58:56.47:AtByoekJ
-
ありがとうございます 実装できました - ： Name_Not_Found [] 2020/07/23(木) 17:46:46.81:eLEo4guL
- すみません以前こちらで質問したものですがttp://https://jsfiddle.net/2ubgdv1r/ コードを1段追加しようとした際
うまく反映できませんなぜでしょうか? - ： Name_Not_Found [sage] 2020/07/23(木) 18:56:20.42ID:???
-
classの一文字目に数字は使えないよ - ： Name_Not_Found [] 2020/07/23(木) 19:29:14.21:eLEo4guL
-
h1 class 21〜24の部分のみ追加したのですが…
CSSのクラス名が適応されません…
何処が間違ってるのでしょうか？ - ： Name_Not_Found [] 2020/07/23(木) 20:44:23.14:eLEo4guL
-
すみません理解できましたありがとうございます
ttp://https://jsfiddle.net/6081tskL/ - ： Name_Not_Found [] 2020/07/23(木) 21:40:29.92:eLEo4guL
- 画像内の下部に帯を透過させてその上に文字を設置したいのですがこの場合画像→帯を下に設置してpositionで下部に設置するのでしょうか?
- ： Name_Not_Found [] 2020/07/23(木) 21:48:35.87:6qya1rK1
-
それがいいんでね？
positionをrelativeにしたfigure要素の中にimg要素置いて
positionをabsoluteにしたfigcaption要素の中に文字書いて
下にくっつければ - ： Name_Not_Found [sage] 2020/07/24(金) 03:31:04.32ID:???
- こんな感じ？
ttp://https://jsfiddle.net/fgbux4ma/ - ： Name_Not_Found [sage] 2020/07/24(金) 09:33:22.32ID:???
- 数ページ程度のサイトを構築する場合、CSSファイルの記述順はどのようにするといいでしょうか
以下のAの記述はサイトの上からの表示順に合わせてCSSを上から記述し、
Bは全ページ共通のCSSを上にまとめてその下に特定のページでのみ使うCSSを記述しています
このどちらか、あるいは別の記述順か、どのような記述順がいいのでしょうか
A
<*----- ヘッダー ----- *>
<* ヒーロー *>
<*----- メイン ----- *>
<* 商品ページ *>
<* お知らせ *>
<* お問い合わせ *>
<*----- フッター ----- *>
B
<*----- ヘッダー ----- *>
<*----- メイン ----- *>
<*----- フッター ----- *>
<* ヒーロー *>
<* 商品ページ *>
<* お知らせ *>
<* お問い合わせ *> - ： Name_Not_Found [] 2020/07/24(金) 12:49:26.48:9EAiIz9z
-
投げやりなわけではなく
適当でいいよ、好きな順で
CSSは結構な行数になるから
順に書いたところで、一覧できるわけじゃない
だから後から記述箇所を見つけるときは
どうせセレクタ等で検索することになるので
生CSSではなく、SASSなどを使うなら
ファイル分けてあった方がやりやすいね
で、ファイル名は一覧できるから順に並んだ方がいい
ので、ファイル名に番号振ったりして整頓するといい - ： Name_Not_Found [sage] 2020/07/24(金) 19:10:15.74ID:???
- この板は企業サイトのソースを貼って「これどうなってんの？」と質問するのはアリですか？
模写コーディングをしていてpng画像をSVGフィルタとしてアニメーションさせて動かすというソースが再現できず途方に暮れています - ： Name_Not_Found [sage] 2020/07/24(金) 19:22:28.50ID:???
- ソース直貼りじゃなくて、自分で動かそうとしてる部分のソースをここに貼って
ttp://https://jsfiddle.net/
あとは模写元の企業サイトのURLを貼る - ： 128 [sage] 2020/07/24(金) 20:28:00.98ID:???
- です
該当部分を抜き出したコードがこちらになります
ttp://https://jsfiddle.net/v6fhn3qc/
再現したいのはこちらのサイトの背景の上に波紋が広がるようなアニメーションエフェクトです。
ttp://https://chiran-omoiire.com/
こちらのpng画像が<feImage>タグ内に指定されており、エフェクトのもとになっているとは思うのですが虹色の静止画が立体的なアニメーションになる仕組みが分からず、またコピペしても再現できません。
ttp://https://imgur.com/a/6xANL9Y
result="ripple"をググっても引っかからないですし、試しにresult="blur"にしてみても変化なしです。
javascriptは関係ないですよね。。。 - ： Name_Not_Found [sage] 2020/07/25(土) 00:18:41.18ID:???
- こういうのってaftereffectsとかで作ったのを
書き出してたりしないのかな？ - ： Name_Not_Found [sage] 2020/07/25(土) 00:34:52.30ID:???
- 回答するスキルもってないけど調べてみたらこういうのあったよ
ttp://https://www.sejuku.net/blog/63968
ttp://http://semooh.jp/jquery/cont/doc/easing/
ttp://https://techmemo.biz/javascript/jquery-ripples/
ttp://https://on-ze.com/demo/jquery-ripples/
jQueryじゃない？？ - ： Name_Not_Found [sage] 2020/07/25(土) 07:15:54.91ID:???
- ttp://https://triple-underscore.github.io/SVG11/filters.html#feDisplacementMapElement
ttp://https://triple-underscore.github.io/SVG11/filters.html#FilterPrimitiveInAttribute
調べてみたけど変形は feDisplacementMapElement要素。
in2="ripple" で result="ripple" の要素を参照して、
画像の色を変形情報として波紋っぽく変換してるんだと思う。
あと、filter要素はフィルタの定義をしてるだけなので、
cssでフィルタを適用しないといけない。
filter要素のid使って
filter: url(#filter-ripple-1)
で適用されるはず。 - ： 128 [sage] 2020/07/25(土) 07:20:00.10ID:???
-
おっしゃる通り、ロゴ部分のアニメーションはAffterEffectなどで作ったものを書き出していると思われます
これは便利ですね。.jsファイルの方を書き換えることができればオープニングアニメーションとして波紋を出すということも再現できそうです。
ありがとうございます。
再現しようと思えばjQuery経由で再現できそうですが、立体的なSVGフィルタの仕組みは未解決ですのでわかる方がいましたら是非ご教示願いたいです。 - ： 128 [sage] 2020/07/25(土) 07:26:19.78ID:???
- >133
リロってませんでした
詳しいご解説ありがとうございます！
虹色を立体データに変換して再現しているわけですね。
元ソースのCSSの方も一度確かめて今からやってみます。 - ： Name_Not_Found [sage] 2020/07/25(土) 11:17:34.88ID:???
- コンソールに表示される
ttp://https://www.pixijs.com/
を使っているとかではないの？ - ： Name_Not_Found [] 2020/07/25(土) 20:25:05.19:CDxgIMOS
-
すみません作っていただいてありがとうございます参考にします
帯の透明度を上げて背景をもう少しはっきりさせたいのですがopacityでいいのでしょうか? - ： Name_Not_Found [sage] 2020/07/25(土) 20:43:49.11ID:???
- androidのchomeで見ると<p>画像.pngテキストテキスト</p>これが
画像png
テキストテキスト
と1段ずれて表示されるのですがPCではきちんと表示されています - ： Name_Not_Found [sage] 2020/07/25(土) 20:58:55.62ID:???
-
rgbaは（R、G、B、透明度）だよ - ： Name_Not_Found [sage] 2020/07/25(土) 21:15:59.44ID:???
-
background-color: rgba( 0, 0, 0, .5);
これの.5（0.5の0を省略）を変更して調整してみ
色は並んでる0三つの値を変更
色選択ツール - CSS: カスケーディングスタイルシート | MDN
ttp://https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Colors/Color_picker_tool - ： Name_Not_Found [] 2020/07/25(土) 23:08:34.89:CDxgIMOS
- すみませんttp://https://jsfiddle.net/nm12pbeL/に、ttp://https://martto.net/luxeritas-theme/customize/7774/のPattern5 先頭にFontAwesomeアイコンを表示
2つの横並び画像の上ににそれぞれ見出しのデザインを作りたいのですがどうすればよいでしょうか? - ： Name_Not_Found [] 2020/07/25(土) 23:12:48.66:CDxgIMOS
- >>140
ありがとうございます 調節してみます - ： Name_Not_Found [sage] 2020/07/26(日) 03:05:46.93ID:???
-
こんな感じ？
ttp://https://jsfiddle.net/7se1dxvy/ - ： Name_Not_Found [] 2020/07/26(日) 10:58:02.99:0ih6AqYz
-
ありがとうございます。 <h>タグが増えすぎてしまってCSSが効かなくなってしまった場合 他の<>タグで代用できるものはありますでしょうか？ - ： Name_Not_Found [] 2020/07/26(日) 12:37:52.06:0ih6AqYz
-
一つ一つの画像幅を広げることがどうしてもできません教えていただけませんか? - ： Name_Not_Found [] 2020/07/26(日) 13:55:22.34:0ih6AqYz
- ttp://https://jsfiddle.net/vg2qda18/ この状態からttp://https://gray-code.com/html_css/wrap-text-around-image/の完成形ボックスにしたいのですが<p>で文字要素を3つ並べればよいのでしょうか?
- ： Name_Not_Found [sage] 2020/07/26(日) 16:20:02.00ID:???
-
タグには意味があるから、見出しは基本的にh1〜6のタグ。
他の見出しと区別する場合はclassで個別に指定。
一つ一つの画像幅って、それぞれ画像ごとに違う幅を指定したいって話なのか
単に全ての画像を同じ大きさの幅に広げたいだけなのか。
ちょっと何言ってるか分からなかったが、こういうこと？
ttp://https://jsfiddle.net/rdakune2/
あと、質問は1つにまとめて。 - ： Name_Not_Found [] 2020/07/26(日) 16:41:04.73:0ih6AqYz
-
それぞれの画像幅を調節したいのですがどうすれば良いでしょうか？ - ： Name_Not_Found [] 2020/07/26(日) 16:51:00.19:0ih6AqYz
-
作っていただいてありがとうございます 質問一つにまとめるよう気を付けます。すみません、class名指定忘れてました。cssを個別に使うときはclass指定したほうが良いですかね… - ： Name_Not_Found [sage] 2020/07/26(日) 18:20:10.18ID:???
-
面倒臭いからまとめるけど、やりたいのってこういうこと？
ttp://https://jsfiddle.net/2pny7wzk/ - ： Name_Not_Found [] 2020/07/26(日) 19:33:44.80:4qVvrd61
-
説明不足で済みません。ttp://https://jsfiddle.net/7se1dxvy/ こちらのボックスを等間隔で幅を広げようと調整しようと試みたのですが、widthを広げた際ボックスが覆いかぶさってしまい同じ大きさで横に並べることができませんでした。お力をお貸しくださいお願いします。 - ： Name_Not_Found [sage] 2020/07/26(日) 19:56:52.29ID:???
-
やりたいことは別件なの？
質問は1つずつ。解決したら解決したって言ってよ。
解決したら次の質問な。
で、自分で試みたっていう上手く行かなかったコードを貼ろうよ。
何が悪いのか、何を勘違いしてるのか分からないと解説のしようがないし
誰かが正解だけ書いて、それをコピペしたところで、勘違いしたままじゃ
全く身にならないよ。 - ： Name_Not_Found [] 2020/07/26(日) 21:46:15.48:4qVvrd61
-
すみません今後気をつけます。先ほどの質問なのですがttp://https://jsfiddle.net/7se1dxvy/
このように.aligncenter {width: 120px;}で画像のwidthを広げようとしたのですが画像がかぶさってしまいます rightやleftでボックスとボックスに隙間を作ろうとしたのですがposition: absolute;が原因で調節することができません。
自分でも調べてみたのですがどうしても解決できません。アドバイスお願いします。 - ： Name_Not_Found [] 2020/07/26(日) 21:57:35.98:4qVvrd61
- section {
display: flex;
flex-wrap: wrap;
width: 220px;
} 今まで勉強してみた中で要素を二つ並べた際は二つの要素を足したwidth横幅を指定してその中に1要素の幅をそれぞれ指定するという認識でした。
今回も同様にsection(二つを合わせたwidth横幅を指定して）それぞれの横幅を変更しようとしたのですがどうしてもうまくいきません…
posisionについて勉強不足だとおもうのですが… - ： Name_Not_Found [sage] 2020/07/26(日) 22:59:17.19ID:???
-
自分がいじった内容を保存したかったら、画面左上のsaveを押して。
保存するとURL変わるから、そのURL貼っておくれ。
で、figureのmax-widthとmin-widthをどちらも100pxで固定しちゃってるから
そりゃimgのwidthを拡大縮小しても、親要素のfigureが固定されてたら
伸縮しようがないから、とりあえずmax-widthを大きくしてみ。
その辺はpositionあんま関係ないと思われ。 - ： Name_Not_Found [] 2020/07/26(日) 23:38:29.41:4qVvrd61
-
すみませんsave わすれてました。 ttp://https://jsfiddle.net/vgh1obfp/3/ 画像幅を広げた状態で要素を横並びしたいのですが、要素が下に回り込んでしまいます。原因がわかりません、アドバイスお願いします。 - ： Name_Not_Found [sage] 2020/07/26(日) 23:54:30.75ID:???
-
やっと何言ってるか分かった
sectionの子要素のdivを横並びにする場合は主にこんな感じだと思うけど、やりたいことに合ってる？
1. sectionのwidth:220px;を削除（画面幅を小さくすると縦並びに）
2. sectionのflex-wrapをnowrapにしてwidth:220px;を削除（画面幅を小さくしても横並びのまま）
3. sectionのwidthを420px以上にする（420px＝（200px+divの左右のマージン5px）×2） - ： Name_Not_Found [sage] 2020/07/27(月) 00:03:57.92ID:???
- ちなみに2のflex-wrap: nowrap;は初期値だから
sectionのflex-wrapとwidthの両方を削除してもおｋ - ： Name_Not_Found [] 2020/07/27(月) 00:25:19.02:alsfth1t
-
ありがとうございます。やっと問題が解決しました。flex-wrapだと縦並びでnowrapだと横並びになるのはなぜでしょうか?
仕組みが理解できません… - ： Name_Not_Found [] 2020/07/27(月) 00:37:03.81:alsfth1t
- 要素を並べる際はflex はじめにflexに目をつけるべきでした…
flexやfloatやdisplay:inline-block それぞれの利点や使い方などを未だにあやふやにしてる状態なのが駄目なんですかね…
flexは最新で1番スマートにCSSを簡潔に実装できるという認識はあるのですが。 - ： Name_Not_Found [sage] 2020/07/27(月) 00:40:43.12ID:???
-
flex-wrapはwrap（折り返し）、nowrap（折り返さない）だから
sectionにflex-wrap:wrap;で、尚且つwidth: 220pxを設定してるのに
imgのwidthが200pxもあると2つ横並びじゃsection内に収まらないから
自動的に折り返されて縦並びになる
だから、widthを削除（初期値autoに）するか、強制的にnowrapで
折り返させないようにするか、sectionのwidthを、imgのwidthとmarginの
合計以上の値にすればいい - ： Name_Not_Found [sage] 2020/07/27(月) 00:46:01.72ID:???
-
ケースバイケースで使い分ければ良いとは思うんだけど
フレキシブルなサイトを作ろうと思ったらflexが便利だからなぁ。
今いじってるのはフレキシブル対応できてるとは言い難いけどｗ - ： Name_Not_Found [sage] 2020/07/27(月) 08:26:20.74ID:???
- テス
- ： Name_Not_Found [] 2020/07/27(月) 08:27:41.40:rHdM8kwJ
- <body>
<div class="hako" id="hako"></div>
<div class="aaa" id="aaa"></div>
<scr ipt>
$(function(){
$("#hako").click(function(){
$("#aaaa").fadeOut();
});
</scr pt>
</body>
これで箱消えないんですがなぜ何ですか・・・ - ： Name_Not_Found [sage] 2020/07/27(月) 08:36:47.80ID:???
- <body>
<p>
If you click on this paragraph
you'll see it just fade away.
</p>
<scr pt>
これフェードアウトしませんもう意味が分かりません…
$("p").click(function () {
$("p").fadeOut("slow");
});
</scri pt> - ： Name_Not_Found [sage] 2020/07/27(月) 09:11:30.60ID:???
- できました、CDN読み込んでませんでした
もうー - ： Name_Not_Found [sage] 2020/07/27(月) 09:23:44.26ID:???
- 早いうちにエラーメッセージ読むくせつけといたほうがいいよ。
今回のだったら $ is not defined みたいなメッセージ出てたはず。 - ： Name_Not_Found [sage] 2020/07/27(月) 10:33:14.47ID:???
- ここはHTML/CSS質問スレなので、jQueryとかは他所で質問した方が早い
- ： Name_Not_Found [] 2020/07/27(月) 12:15:43.08:dHnzPzJ8
- >>162
なるほどautoで設定するというのは思いつきませんでした。 wrap（折り返し）、nowrap（折り返さない）覚えておきます。
画像の場合wrap nowrapなのでしょうか? 文字も同様でしょうか? - ： Name_Not_Found [sage] 2020/07/27(月) 14:07:44.54ID:???
-
便宜上、imgって書いてるけど、sectionのflex-wrapは直下の子要素divに対してのものなので
別にimgに限った話じゃないよ。
文字っていうのが、flexが設定された親要素の子要素のp要素って意味ならflex-wrapは適用される。
というか、親要素のflexコンテナー直下にある子要素のflexアイテムに適用される。
ttp://https://jsfiddle.net/ethjp8rk/
要素内の文字列の折り返し方法って意味なら、white-space等で指定。
あと、勘違いしてるかもだけど、プロパティごとに設定できる値は違うから、wrapとnowrapが
どんなプロパティにも使えるわけじゃないので、念のため。
とりあえずflexについてはこの辺りを参考に。
ttp://https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Flexbox
ttps://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet - ： Name_Not_Found [] 2020/07/27(月) 18:11:06.96:dHnzPzJ8
-
詳しくおしえていただきありがとうございます。white-spaceについて調べてみます。
プロパティごとに設定できる値は違うということは使えない場合別のclassで代用するという認識でよいのでしょうか?
どちらも拝見させてもらいブックマークしました。ありがとうございます。 - ： Name_Not_Found [sage] 2020/07/27(月) 18:51:32.26ID:???
-
プロパティをセレクタか何かと勘違いしてる気が…。
余計なこと言って混乱させて悪いが、先ずはCSSの基本的な用語を憶えよう。
CSS の基本 - ウェブ開発を学ぶ | MDN
ttp://https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/CSS_basics
今、話してるwrapとかnowrapはプロパティ値で、flex-wrapがプロパティ。
flex-wrapで利用できるプロパティ値はwrap、nowrap、wrap-reverseの3つ。
詳しくは以下で
flex-wrap - CSS: カスケーディングスタイルシート | MDN
ttp://https://developer.mozilla.org/ja/docs/Web/CSS/flex-wrap - ： Name_Not_Found [sage] 2020/07/27(月) 19:44:37.49ID:???
- wordpressで動いているPCサイトは、すべてのタグにclassが書かれていたら
cssファイルを触るだけでスマホ用サイトにすることは可能なのでしょうか？ - ： Name_Not_Found [sage] 2020/07/27(月) 20:18:33.70ID:???
- 可能。
次 - ： Name_Not_Found [] 2020/07/27(月) 21:54:07.84:dHnzPzJ8
-
アドバイスありがとうございます。紹介してくださったサイトを見て勉強してみます。 - ： Name_Not_Found [] 2020/07/27(月) 22:41:17.46:dHnzPzJ8
- すみませんデロッパツールでボタンを押し込んだ色を確認したいのですが どうすれば押し込んだ時の色がわかるのでしょうか?
- ： Name_Not_Found [sage] 2020/07/27(月) 23:22:39.96ID:???
-
とりあえず、これでも読んでみて
初心者向け！Chromeの検証機能（デベロッパーツール）の使い方
ttps://saruwakakun.com/html-css/basic/chrome-dev-tool
【デベロッパーツール】hover状態やactive状態のままcssを調整する方法！
ttps://clrmemory.com/blog/web/developer-tool-hover/ - ： Name_Not_Found [sage] 2020/07/27(月) 23:36:29.64ID:???
-
Elementsタブで対象の要素を右クリック、
そのメニューからForce stateを選び、
サブメニューから:activeを選ぶ。
解除するときは↑をまたやる。 - ： Name_Not_Found [sage] 2020/07/27(月) 23:59:35.79ID:???
-
Wordpress で、Bootstrap は使えないの？ - ： Name_Not_Found [sage] 2020/07/28(火) 00:18:49.85ID:???
-
テーマをbootstrapで作ることは可能。 - ： Name_Not_Found [] 2020/07/28(火) 18:51:05.03:4s+I9u6i
-
教えてくださったサイトを見て解決できました。ありがとうございます。 - ： Name_Not_Found [] 2020/07/30(木) 04:54:37.00:MAJO3W9c
- div.blogtitle > a:link,a:visited{color:white;text-decoration:none;}
div.blogtitle > a:hover{text-decoration:underline;}
サイトタイトルを囲んでいるdiv.blogtitleの中にあるリンクだけ、色を白くしたいです
しかしサイト全体に適用されてしまいます
なぜでしょうか？ - ： Name_Not_Found [] 2020/07/30(木) 05:41:00.55:ideNSv+i
-
カンマで区切ったら
また最初から親子セレクタ書かにゃいかんの - ： Name_Not_Found [] 2020/07/30(木) 06:28:14.35:MAJO3W9c
- どうやって複数指定するのでしょうか？
- ： Name_Not_Found [sage] 2020/07/30(木) 07:54:53.21ID:???
-
- ： Name_Not_Found [] 2020/07/30(木) 09:14:54.47:ideNSv+i
-
カンマの後で改行してみれば気づかないか？
カンマの後ろのセレクタは全てのa要素になっている - ： Name_Not_Found [] 2020/07/30(木) 09:56:53.54:MAJO3W9c
- 複数のアンカーを指定するにはどう書けばいいのでしょうか？
- ： Name_Not_Found [sage] 2020/07/30(木) 10:28:16.39ID:???
-
- ： Name_Not_Found [] 2020/07/30(木) 10:42:58.42:MAJO3W9c
- そうではなくて、複数指定する術はないのかという質問です
- ： Name_Not_Found [] 2020/07/30(木) 11:34:11.70:MAJO3W9c
- サイドバーのナビゲーションに対してh3を使うのはおかしいと思うんですが、div意外で適当なものはあるでしょうか
ウィジェット全体はnavでいいとして、「カテゴリ一覧」といったナビゲーションのタイトル部分です - ： Name_Not_Found [] 2020/07/30(木) 11:35:45.60:QHzfwoPG
-
万人にわかるように質問してよー
複数ってなんのことよー - ： Name_Not_Found [] 2020/07/30(木) 11:36:47.77:QHzfwoPG
-
なんでおかしいと思ったのん？ - ： Name_Not_Found [] 2020/07/30(木) 11:47:34.93:MAJO3W9c
-
本文部分で見出しはh4くらいまで使うと思うので - ： Name_Not_Found [] 2020/07/30(木) 11:55:47.60:QHzfwoPG
-
ttp://https://momdo.github.io/html/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements
6つじゃ足りなくなるような人は
セクション毎に1から始めても良いんだぜ
セクショニングに矛盾しないように書くんだぜ - ： Name_Not_Found [] 2020/07/30(木) 12:17:25.74:MAJO3W9c
- そういうやり方もあるんですね
逆に混乱しそうだから、無難にdivにしておきます、、、 - ： Name_Not_Found [sage] 2020/07/30(木) 12:49:09.93ID:???
- 見出しだったらdivなんか使わずにh1に適当なclass名つけて
個別にスタイル指定すりゃいいのに
この程度で混乱するとか大丈夫か - ： Name_Not_Found [sage] 2020/07/30(木) 16:07:18.05ID:???
- 個人的にはむしろdivにする方が混乱する
（ネスト的な意味で） - ： Name_Not_Found [sage] 2020/07/30(木) 17:32:40.89ID:???
-
アウトラインを表示するツールを使ってみたほうが良いよ
ようはアウトラインが綺麗にできてるかどうかだから - ： Name_Not_Found [] 2020/07/30(木) 17:36:58.47:K+cFYQgo
- 質問があるのですが
- ： Name_Not_Found [] 2020/07/30(木) 17:38:15.55:K+cFYQgo
- ttp://https://jsfiddle.net/vintagedopeme0522/wzbpkafg/7/ こちらのフッターリストをttp://https://shu-sait.com/footer-menu-yokonarabi/ こちらのサイトのフッターのように並べるのは非常に難しいのでしょうか?
Bootstrapは使わずに別の要素で代用しようと思っております - ： Name_Not_Found [] 2020/07/30(木) 17:59:00.08:MAJO3W9c
- 記事部分とサイドバーを黄金比にしたいです
サイトの横幅は960pxがいいと聞いたので、これを黄金比に分割したいです。
flex-basisで62%と38%にしましたが、これは黄金比になっているでしょうか？
960*0.618=593.28
593.28/960=0.618 - ： Name_Not_Found [sage] 2020/07/30(木) 18:24:15.32ID:???
-
とりあえず、これでも嫁
ttps://liskul.com/cr_goldenratio-3739 - ： Name_Not_Found [sage] 2020/07/30(木) 18:29:59.37ID:???
- 日本人なら黄金比より白銀比使え！
- ： Name_Not_Found [sage] 2020/07/30(木) 19:25:06.89ID:???
-
どの部分だよｗ
フッターメニューの作り方のサイトのフッターのようにって
ややこしすぎるわｗｗ - ： Name_Not_Found [] 2020/07/30(木) 20:07:14.01:XS4Vfimb
-
すみません、フッターのみにbootsstrapを適応することは出来るのでしょうか？
bootsstrapを今回を機に勉強してみようと思っております - ： Name_Not_Found [sage] 2020/07/30(木) 20:13:14.31ID:???
- 俺もbootstrapについて聞きたいけど
12分割するということはわかるけど、もともとどういうレイアウトのためのものなの？
レスポンシブをするためのbootstrapなのか、
pcで2カラム・3カラムを表現するための12カラムなのか。 - ： Name_Not_Found [] 2020/07/30(木) 20:15:41.11:XS4Vfimb
- ttp://https://jsfiddle.net/vintagedopeme0522/wzbpkafg/7/の3カラムを
- ： Name_Not_Found [] 2020/07/30(木) 20:17:26.88:XS4Vfimb
- ttp://https://shu-sait.com/footer-menu-yokonarabi/のフッターのように作り替えたいです。
boostrapの真ん中のカラムだけ別の要素に作り替えて実装することは可能でしょうか？ - ： Name_Not_Found [sage] 2020/07/30(木) 20:45:23.24ID:???
- YouTube で「たにぐちまこと bootstrap」で検索すれば？
- ： Name_Not_Found [] 2020/07/30(木) 21:23:20.40:QHzfwoPG
-
出来なくはないが
あまりお勧めはできない
bootstrapは身も心もbootstrapに捧げないと
あんまり幸せになれない
あと
bootstrapが想定しているようなデザインシステムではないサイトでも
あまり活躍はしない - ： Name_Not_Found [] 2020/07/30(木) 21:26:10.98:QHzfwoPG
- んで
カラム並べ程度のことだけだったら
bootstrapにとられる手間の方が圧倒的に多いと思う - ： Name_Not_Found [] 2020/07/30(木) 21:54:21.52:XS4Vfimb
- 何度も質問すみません ttp://https://jsfiddle.net/vintagedopeme0522/xzq2gr5L/7/ こちらの3カラムの高さが揃えられませんアドバイスお願いします
- ： Name_Not_Found [sage] 2020/07/30(木) 22:27:41.02ID:???
-
適応することはできない。
適用、の間違いだろう。 - ： Name_Not_Found [sage] 2020/07/30(木) 23:39:50.60ID:???
- inline-blockの揃え方を検索
- ： Name_Not_Found [sage] 2020/07/31(金) 05:32:41.41ID:???
- inline-blockで高さ指定してないのに
高さが揃うわけが無かろう - ： Name_Not_Found [sage] 2020/07/31(金) 05:42:10.97ID:???
- というか、メディアクエリでflex使ってるならinline-blockじゃなくflex使った方がいいだろ
各flexアイテムに高さ指定しなくても、flexアイテム内要素に合うよう伸縮するんだから - ： Name_Not_Found [] 2020/07/31(金) 16:17:30.00:eM6eIZ1R
- 8の倍数でサイトを作ると楽と聞きましたが、テンプレとなる倍数はどんな数値がいいでしょうか？これだときりが悪いような気がするです、、、。
サイト幅は960です
--px8:8px;
--px16:16px;
--px32:32px;
--px64:64px;
--px128:128px;
--px256:256px;
--px512:512px;
--px1024:1024px;
--px2048:2048px;
--px960:960px; - ： Name_Not_Found [sage] 2020/07/31(金) 16:29:56.08ID:???
- textarea内の文字列の左右寄せは
text-align:○○でてきるのですが、
上下はどう記載すればよろしいのでしょうか？ - ： Name_Not_Found [sage] 2020/07/31(金) 16:31:57.10ID:???
- vertical-align
- ： Name_Not_Found [sage] 2020/07/31(金) 16:34:49.70ID:???
-
text-bottomで下いかないんです - ： Name_Not_Found [sage] 2020/07/31(金) 17:29:01.80ID:???
-
CSSだけじゃ出来ないっぽい
ttp://https://codepen.io/desandro/pen/gICqd - ： Name_Not_Found [sage] 2020/07/31(金) 17:51:24.96ID:???
-
フォントの種類、フォントサイズ、
最大文字数、ラッパーの幅、高さなど考慮してのようにやるしか今のところはないと思う。
一行だけなら別だけども - ： Name_Not_Found [] 2020/07/31(金) 20:16:13.17:38Rt8NI/
- >>219
教えてくださったサイトのおかげで解決できました、ありがとうございます。 - ： Name_Not_Found [sage] 2020/07/31(金) 20:56:19.82ID:???
- 誰も教えてないのに？
- ： Name_Not_Found [] 2020/08/01(土) 05:26:07.80:bkI+Kz1x
- フォントサイズにも8の倍数を使うのでしょうか？
- ： Name_Not_Found [sage] 2020/08/01(土) 12:15:37.16ID:???
- フォントは16px以上にしとくが無難
iphoneでform入力するときイラっとしなくていい - ： Name_Not_Found [] 2020/08/01(土) 15:15:19.50:TbBM/PNh
- ttp://https://oshiete.goo.ne.jp/qa/9768913.html この質問を参考に画像の上にオーバーレイ広告を設置したいのですが、
WordPressで設置予定のため以前自作したjsがつかえません。 cssとhtmlのみで画像の上に広告を配置することはできますでしょうか? - ： Name_Not_Found [] 2020/08/01(土) 15:25:45.59:TbBM/PNh
- jsなしで離れたWordPressの固定要素に要素をかぶせることはできるのでしょうか?
- ： Name_Not_Found [] 2020/08/01(土) 15:52:00.19:TbBM/PNh
- すみません<img src>~</img><p class="overlay">オーバーレイテキスト</p>で実装できたのですが、右上に×を表示させて非表示にするためにはjsが必要なのでしょうか?
- ： Name_Not_Found [sage] 2020/08/01(土) 16:18:42.54ID:???
- チェックボックス隠しといて表示のONOFF切り替えりゃイケんじゃね
- ： Name_Not_Found [] 2020/08/01(土) 22:12:59.32:IMZZx7Ap
- ttp://https://jsfiddle.net/vintagedopeme0522/t4nadv92/1/
このコードをworldpressで使用した際 固定されるのはなぜでしょうか? - ： Name_Not_Found [sage] 2020/08/01(土) 22:35:46.15ID:???
- position: fixed;
- ： Name_Not_Found [] 2020/08/01(土) 23:40:45.43:7BLzz9e9
-
すみません実装できました バーがおかしくなってたようです - ： Name_Not_Found [sage] 2020/08/01(土) 23:48:01.82ID:???
- dialogタグ使えっていう
- ： Name_Not_Found [sage] 2020/08/01(土) 23:54:02.01ID:???
- 徹頭徹尾、何言ってんのか分からんｗ
- ： Name_Not_Found [sage] 2020/08/02(日) 00:00:53.54ID:???
- 何これ？エロ広告？
- ： Name_Not_Found [sage] 2020/08/02(日) 02:24:37.91ID:???
- 竜頭蛇尾
押置だべ - ： Name_Not_Found [] 2020/08/02(日) 12:53:03.39:8BTjp7/S
- ConoHa WINGでブログを始めようとする素人ですが、かんたんセットアップというので進めていたら
WordPressパスワードが入らず＜文字や数字を変えてもダメ＞途方に暮れています。どなたか詳しい方お教えください。 - ： Name_Not_Found [sage] 2020/08/02(日) 16:40:22.43ID:???
- なぜConohaに聞かないのか、コミュ症なの？
- ： Name_Not_Found [sage] 2020/08/02(日) 16:42:34.53ID:???
- マルチは無視しよう
- ： Name_Not_Found [sage] 2020/08/02(日) 16:57:55.79ID:???
- なんだよ、マルチー牛かいな
- ： Name_Not_Found [sage] 2020/08/02(日) 17:26:20.01ID:???
- よろしくお願いします。
左から、番号、テキスト、数値×4列、計6列の表を作ることになり、
番号はth、数値のセルが多いのでtdを text-align : rightにしました。
問題は2列目のテキストで、これを中央揃え&太字にしようと指定しても
太字にはなりましたが右揃えのままでした。どうやればいいのでしょうか？
あと、2列目もthにするのは有りなのでしょうか？ - ： Name_Not_Found [sage] 2020/08/02(日) 18:46:43.43ID:???
-
こういうこと？
ttp://https://jsfiddle.net/7b2zved5/ - ： Name_Not_Found [sage] 2020/08/02(日) 19:49:48.51ID:???
- Web系への転職を考えてCSS設計を学び始めたのですが、
学ぶとしたらFLOCSSか、それとも最近出てきたPRECSSのどちらがいいでしょうか - ： Name_Not_Found [sage] 2020/08/02(日) 19:55:43.83ID:???
-
スタイルはセレクタで要素を特定して適用するじゃろ？
そんでセレクタは要素名だけではなく
classやidなども使えるのだよ - ： Name_Not_Found [sage] 2020/08/02(日) 19:56:08.74ID:???
-
まずはピュアCSSをきちんと - ： Name_Not_Found [sage] 2020/08/02(日) 20:29:18.06ID:???
-
ピュアCSSというと、これといった設計手法などを使わないCSSの記述のことでしょうか
それでしたらある程度学習を済ませており、就活の際のアピールにでもなればと思いまして、
さらにCSSの設計手法を学ぼうと思っています
また、ポートフォリオサイトなどを作っている際も、自分ルールなCSS設計をするよりも
何かしらのCSS設計手法を学んだほうが制作効率がいいのかなとも思っています
なにかアドバイスがありましたらお願いいたします - ： Name_Not_Found [sage] 2020/08/02(日) 21:01:11.33ID:???
-
ありがとうございます。不勉強なもので :nth-child() 今日初めて知りました。
1列目も中央揃えにするには :nth-child(-n+2)でいいですかね。
CSSに↓を書いて
td.center{
text-align : center;
}
2列目の各セルを<td class="center">としても何も起こらなかったので質問させてもらいました。 - ： Name_Not_Found [sage] 2020/08/02(日) 21:26:14.34ID:???
-
:first-childでいいんじゃね？ - ： Name_Not_Found [sage] 2020/08/02(日) 21:29:44.14ID:???
-
マルチブラウザ対応の難点を押さえてれば
あんま細かいこと気にしなくていい予感 - ： Name_Not_Found [sage] 2020/08/02(日) 21:50:22.09ID:???
-
どうもです
擬似クラス1から勉強しますわ - ： Name_Not_Found [sage] 2020/08/02(日) 22:22:33.01ID:???
-
FLOCSSもPRECSSも、しょせんは自分ルールなCSS設計のうちの一つにしか過ぎないんだよ
こんなとこでうだうだやってないで、全部試して好きなの使えよ
転職できたらできたで、職場にルールがあればそれを使わないといかんのだし - ： Name_Not_Found [] 2020/08/02(日) 22:36:14.81:wVx5940i
- ttp://https://jsfiddle.net/vintagedopeme0522/8Lw7avjk/1/
作成予定のサイトはメジャーリーガーのことをまとめるサイトなのですが、ここのアダルトサイトで見つけたRSSリーダー縦スクロールを作成したいです。
RSSについて調べてみてプラグインも入れたのですが、デザインがいまいちでした。自サイトのRSSを縦スクロールで実装するアドバイスをください。お願いします。 - ： Name_Not_Found [] 2020/08/02(日) 22:48:20.29:wVx5940i
- ttp://https://yuruyururoad.jp/2017/09/12/feedwind/ のようなものはあるのですが自作することは難しいのでしょうか?
- ： Name_Not_Found [] 2020/08/02(日) 23:06:15.94:wVx5940i
- ttp://https://on-ze.com/archives/1615 このコードにttp://https://gray-code.com/html_css/view-scroll-bar-to-element/ で紹介しているoverflow: scroll; を追加できれば再現可能でしょうか?
- ： Name_Not_Found [sage] 2020/08/02(日) 23:57:41.29ID:???
-
BEM（MindBEMding）とかだろ - ： Name_Not_Found [sage] 2020/08/03(月) 00:35:12.71ID:???
-
自分で色々考えて作ってみて、ここまでやってみたけど、どうしても上手く行かない
って状態になってから質問して下さい。
質問が雑過ぎて答えようが無い上に、思いついた端から質問を連投されても困ります。 - ： Name_Not_Found [] 2020/08/03(月) 00:54:24.46:lPDNPAmV
-
PHPで文字を出力することは出来るのですがCSSと合わせて縦スクロールを追加する事が出来ません…
明日コードを載せてみます… 連投してすみません - ： Name_Not_Found [] 2020/08/03(月) 03:49:26.47:D4j/4m1r
- spanとdivの違いってなんですか？
cssでブロック要素の切り替えは出来るし、使い分ける意味があまり、、、
cssが読まれなかった場合でも表示が崩れないように心がけるべきでしょうか - ： Name_Not_Found [sage] 2020/08/03(月) 04:07:15.42ID:???
- 逆に聞きたいけどspanをcssでブロック要素にする意味は？
元々ブロック要素のdivを最初から使えばいいじゃない
その理由が適切だと説明できるなら好きなようにすればいいんじゃない？
あとさんざんこのスレでも出てるけどアクセシビリティを無視するのならいくらでも好きなように書けばいいよ - ： Name_Not_Found [sage] 2020/08/03(月) 06:47:09.83ID:???
- 基本的にspanは文章内とかにインラインでしか使わないわな
汎用コンテナーとしてのdivがあるにも関わらず、spanをわざわざブロック要素にして使うとか
むしろ恥ずかしくて出来ない - ： Name_Not_Found [] 2020/08/03(月) 09:03:16.02:MowOAdyO
- JavascriptでRSSを取得してCSSで外側を装飾する場合
HTMLでコンテンツを作ってそれをjsで動的にしてCSSで装飾するという認識でいいのでしょうか？
コードを調べた際、PHPとCSSで完結してるものがあり、そこにCSSで手を入れるというのは素人には難しいのかなと思いました。 - ： Name_Not_Found [] 2020/08/03(月) 09:04:29.72:MowOAdyO
- すみませんCSSで装飾を付け加えるでした。
- ： Name_Not_Found [sage] 2020/08/03(月) 14:49:36.44ID:???
- javascriptだろうがphpだろうが、HTMLとして出力されたものに対して
CSSでデザインをいじる事に、難易度の違いは無い - ： Name_Not_Found [age] 2020/08/03(月) 15:56:30.71ID:???
- めちゃくちゃ初歩的な質問かもしれませんが、Webサイトの模写をする際の重要な点としてpxは正確に合わせると初学者用の動画で説明されてたのですがpxを合わせるには地道に調整して合わせていくしかないのでしょうか？
もしそうだとしたら経験者の方は文字や幅の大きさを見て大体これは何pxだなというふうに判断しているのでしょうか？ - ： Name_Not_Found [] 2020/08/03(月) 16:01:34.01:sTKeLVkR
- すみませんageになってませんでした
- ： Name_Not_Found [sage] 2020/08/03(月) 16:12:32.87ID:???
- 開発者ツールとかで模写元のソースを確認しちゃ駄目なの？
- ： Name_Not_Found [] 2020/08/03(月) 16:29:28.46:sTKeLVkR
-
答えは極力見ずに模写をして、終わった後に答え合わせをしましょうとのことでした
それで実際に模写コーディングをしてみよう思ったもののpxの指定で詰まってしまいました
動画とかだと当たり前のようにここは何pxにしましょうと教えてくれますが実際に自分でコーディングするとなると値の見極めがすごく難しいなと思ってしまいました - ： Name_Not_Found [sage] 2020/08/03(月) 16:55:27.07ID:???
- 答えは見ずに、ってことは開発者ツール以外のプラグイン等も使うなってことだろうから
目視で比較するしかないかもね。模写元とウィンドウを2つ並べるとかして。
でもまぁ、模写元が全てpx単位で作られてるならともかく、他の単位が混在してたりすると
完全一致は無理だから、多少の誤差は許容される「正確に合わせる」だと思うけどね。
ただ、多少の誤差がレイアウト全体に大きく影響する場合もあるから、ある程度の正確さは
求められるだろうけど。 - ： Name_Not_Found [sage] 2020/08/03(月) 18:26:28.51ID:???
- どっちかというと
既存サイトのキャプチャー画像からコーディングしてみる方が
訓練になりそうじゃね - ： Name_Not_Found [age] 2020/08/03(月) 18:27:54.25ID:???
- セレクタで 内容が◯◯の場合 というのはありあますか？
ミス防止のためユーザスタイルシートで特定の単語だけ強調したいのですが、他人の作ったシステムなのでクラスなどを与えることが出来なくて困ってます
ご存じの方いらっしゃいましたらご教示お願い致します - ： Name_Not_Found [sage] 2020/08/03(月) 18:47:16.83ID:???
- cssのセレクタだけじゃ条件分岐は無理
- ： Name_Not_Found [age] 2020/08/03(月) 18:49:37.13ID:???
-
有難うございます
別の方法を模索します - ： Name_Not_Found [sage] 2020/08/03(月) 18:50:22.05ID:???
- 疑似クラス使えば、ある程度は条件分岐みたいなことは出来るけど
内容で条件分けは無理だね - ： Name_Not_Found [] 2020/08/03(月) 18:51:43.63:D4j/4m1r
- 親要素のボックスに以下のflexを設定しています
display:flex;justify-content:space-between;flex-wrap:wrap;
しかし、子要素がなぜか縦にストレッチしてしまいます
サイドバーの高さに合わせてストレッチされるようです
space-betweenを使いつつ、縦ストレッチを解除することは出来るでしょうか
ちなみにjustify-content:flex-start;を指定しても、ストレッチされることに変化はなかったです - ： Name_Not_Found [sage] 2020/08/03(月) 18:53:08.66ID:???
-
あれ？
条件分岐は無理とありますが、
p[class*="foo"]
p要素のclass属性値がfooの場合、などは
可能なので「contentの値が◯◯の場合」は条件分岐というようなものではないような
そのセレクタの有無はわからないですが
まあなさそうですが - ： Name_Not_Found [sage] 2020/08/03(月) 19:07:15.40ID:???
-
後半何言ってるか分からんが、とにかくclass指定できないみたいなケースで
条件分岐は無理って話 - ： Name_Not_Found [sage] 2020/08/03(月) 19:11:37.82ID:???
-
align-itemsで検索 - ： Name_Not_Found [] 2020/08/03(月) 19:47:48.23:D4j/4m1r
-
ありがとう
align-contentでできましたです - ： Name_Not_Found [sage] 2020/08/03(月) 20:05:08.47ID:???
-
そっちを忘れてたｗ - ： Name_Not_Found [] 2020/08/03(月) 20:57:22.16:D4j/4m1r
- display:flex;で並べた子要素なんですが、子要素同士の縦のマージンはどうやって指定すればいいでしょうか？子要素にmargin-bottomでもいいんですが、何かやりようがありますか？
ttps://i.imgur.com/PFSHLRx.jpg - ： Name_Not_Found [sage] 2020/08/03(月) 21:47:42.77ID:???
- align-contentでspace-betweenやspace-aroundにする以外は
margin-bottomでいいんじゃない？ - ： Name_Not_Found [] 2020/08/04(火) 05:28:32.06:CEo59waj
- aligin contentは親要素の縦幅を設定していないと使えないですよね
横は幅固定なのでいいんですが、縦の場合は幅可変ですよね - ： Name_Not_Found [] 2020/08/04(火) 10:54:57.39:CEo59waj
- ttps://i.imgur.com/TcUlFsL.jpg
こんな感じにmargin-bottomを指定しましたが、最下部まで広げてしまうのが余計なのですが、どうしたらいいでしょうか？
align-content:space-between;だと、余白の広さがコンテナの縦幅によって変化します
常に１０ｐｘ程度にしたいです - ： Name_Not_Found [sage] 2020/08/04(火) 11:26:28.39ID:???
-
上マージンにして
nthで最初の行だけゼロにするのはどうよ - ： Name_Not_Found [sage] 2020/08/04(火) 11:32:08.21ID:???
- 全体の幅が固定ならいいけど、flexだと横幅が変わると列数が変わるから
最初の行だけって指定は難しくね？ - ： Name_Not_Found [] 2020/08/04(火) 12:08:10.21:fVy2EeC4
- すみませんフッターをレスポンシブにしたいのですが幅を狭めてスマホで見るとフッターメニューが見切れて消えてしまいます。縦並びで実装したいのですがアドバイスお願いします。
- ： Name_Not_Found [] 2020/08/04(火) 12:08:36.78:fVy2EeC4
- ttp://https://jsfiddle.net/vintagedopeme0522/egf0ksdq/8/
- ： Name_Not_Found [] 2020/08/04(火) 12:13:58.03:CEo59waj
- 子要素の幅は固定です
親要素も固定です
ですから、１行に入る子の数は決まっています - ： Name_Not_Found [] 2020/08/04(火) 12:26:32.76:CEo59waj
- ttp://http://www.dolceproof.jp/topic/reference/referencecss/nth-childn
最後の行のみだと どういう指定にしたらいいんでしょうか
１行にはいるのは５つの子です - ： Name_Not_Found [] 2020/08/04(火) 12:32:38.85:CEo59waj
- ちなみに行の数はきまっていないです
列の数は決まっています
しかし、レスポンシブにするなら後々問題は出るでしょうね - ： Name_Not_Found [sage] 2020/08/04(火) 12:41:22.66ID:???
- 連投すんなや
- ： Name_Not_Found [sage] 2020/08/04(火) 12:43:46.00ID:???
- メディアクエリでスマホ用にCSS書け
- ： Name_Not_Found [] 2020/08/04(火) 12:44:32.86:CEo59waj
- nth-last-child(-n+5)
でいけました - ： Name_Not_Found [sage] 2020/08/04(火) 13:09:47.58ID:???
-
お前、思いついた端から質問連投するなって言われてただろ
ここはLINEじゃねぇんだよ
質問は1レスにまとめろや - ： Name_Not_Found [sage] 2020/08/04(火) 14:03:04.45ID:???
- ちなんでないし
- ： Name_Not_Found [] 2020/08/04(火) 14:10:19.17:7G0+geFq
- ttp://http://www.sample.cfbx.jp/wp-admin/customize.php?url=http%3A%2F%2Fwww.sample.cfbx.jp%2F
すみませんフッターをスマホサイズにした際どうしても縦並びにできませんアドバイスくださいお願いします。 - ： Name_Not_Found [sage] 2020/08/04(火) 14:16:02.14ID:???
- はマルチ
- ： Name_Not_Found [] 2020/08/04(火) 16:06:45.02:CEo59waj
- flexboxで最後の列のみを取得する場合はリストを追加しないとだめなんでしょうか
<li><div>item</div><div>item</div></li>
<li><div>item</div><div>item</div></li> - ： Name_Not_Found [sage] 2020/08/04(火) 16:21:48.79ID:???
- 取得って何だ
- ： Name_Not_Found [sage] 2020/08/04(火) 21:47:17.20ID:???
- レスポンシブ対応なら、Bootstrap を使えば？
- ： Name_Not_Found [] 2020/08/05(水) 11:13:49.80:YMPhsBWl
-
取得というか、cssの対象にしたいんです
listにしたらまあ出来ましたが、これでいいんでしょうか？ - ： Name_Not_Found [] 2020/08/05(水) 11:20:16.07:YMPhsBWl
- windows10で絶対パスが読み込めないのですが、なぜでしょうか
C:\Users\name\Desktop\img\file.JPG
htmlファイル配下において以下のようにして読み込むことは可能でしたから、バックスラッシュの問題ではないようです。
img\file.JPG - ： Name_Not_Found [sage] 2020/08/05(水) 12:11:09.58ID:???
- windows10関係無いだろ
それだけキーワードが分かってるなら「html ローカル 絶対パス」とかで
検索してから質問しろ - ： Name_Not_Found [sage] 2020/08/05(水) 12:18:27.75ID:???
-
classとか疑似クラス使わずにliタグ使う意味は？ - ： Name_Not_Found [] 2020/08/05(水) 12:25:19.37:YMPhsBWl
-
擬似クラスというのはnth-last-childのことでしょうか？
最後の列を取得する場合、flexboxの場合はそれぞれがインライン要素ですから、最後の列だけ取得するというのは難しいかなと思います
しかし、リストはブロックですから、最後の列だけ取得するのは容易でした
インライン要素の場合nth-last-child(3)とすることで最後から３つまでを取得することが出来ますが、列に入る要素の数が変わると使えませんよね - ： Name_Not_Found [sage] 2020/08/05(水) 13:54:10.49ID:???
- また訳の分からんことを…。
li使ったら出来たってのも意味不明だし。 - ： Name_Not_Found [] 2020/08/05(水) 14:00:44.35:YMPhsBWl
- そうですね、たしかに意味不明でした
flexboxの場合は先頭から順番に数えればいいだけですね
要素が１列に４つ、行が４行目までだった場合は13個目を指定するだけですね - ： Name_Not_Found [sage] 2020/08/05(水) 14:05:17.74ID:???
-
flexコンテナの子要素のflexアイテムはインライン要素では無いし、のliで囲ってるdivもブロック要素だが
インライン要素だとかブロック要素だとか言うなら、ブロック要素であるdivを使わず、リスト項目では無いものに
liタグを使う意味が無いし、ulやolを使わずli単独で使うものではない
あと、nth-last-child(3)は最後から3番目を指定するだけで3つまでを指定するものじゃないから
> 列に入る要素の数が変わると使えませんよね
viewport幅によって最終行のflexアイテムの数が変わる場合の指定方法の話をしてるんだろうが
そんなもんnth-last-child（あるいはnth-last-of-type）とメディアクエリ使えば、どうとでもなる - ： Name_Not_Found [sage] 2020/08/05(水) 17:08:02.93ID:???
- もう本人が納得してるなら、それでいいんじゃない？
なんか相手にするだけ時間の無駄になりそうｗ - ： Name_Not_Found [] 2020/08/06(木) 15:21:42.15:e5zc34N+
- 画像の下に説明文があり説明文にマウスが乗った際 opacityをかけるほうほうはありますでしょうか？
- ： Name_Not_Found [] 2020/08/06(木) 15:52:19.18:e5zc34N+
- すみませんttp://https://jsfiddle.net/tsc38m1r/ このコンテンツについて質問なのですが何故URLをつけた説明のみした線が表示されるのでしょうか？
画像にマウスが乗った際も説明文にマウスオーバー変化をつけたいのですが text-descripcion がききません
解決策を教えてもらえないでしょうか？ - ： Name_Not_Found [] 2020/08/06(木) 16:38:58.42:wOuRb+I6
-
もう自分で答え書いちゃってるよそれ
マウスが乗ったとき（hover）
画像のopacityを0にすればいい
CSSで - ： Name_Not_Found [] 2020/08/06(木) 16:40:50.69:wOuRb+I6
- そんでtext-descriptionてなんぞ？
- ： Name_Not_Found [] 2020/08/06(木) 16:47:40.87:+/4NC5fx
-
説明文のした線を消して画像またはテキストにマウスが乗った際にtext-descripcion underlineでした線と文字色変更をしたいのですが。
上記のものだとマウスが乗る前にした線がでてしまい画像マウスオーバーしてもした線と文字色変更ができません。
アドバイスください、お願いします。 - ： Name_Not_Found [] 2020/08/06(木) 16:58:36.18:wOuRb+I6
- text-decorationかな？
- ： Name_Not_Found [sage] 2020/08/06(木) 17:41:55.13ID:???
-
俺もそうだと思うわ
文字列をリンクにするとブラウザが頼んでもねーのに勝手に下線を付けるんだわ。他にもブラウザは勝手に余計なことばかりする。
特にサファリとかいう糞の塊 - ： Name_Not_Found [sage] 2020/08/06(木) 17:55:29.33ID:???
- a要素の中にp要素入れてるからだろ
a要素に入れていいのはテa要素以外のインライン要素とテキストだけ
<a><p></p></a>じゃなくて<p><a></a><p>にしろ - ： Name_Not_Found [] 2020/08/06(木) 20:20:07.99:x/6SsYNW
-
一つ問題が解決しました。ありがとうございます。画像にマウスが乗った際、文字のリンクの色を変更できないでしょうか？ - ： Name_Not_Found [sage] 2020/08/06(木) 20:31:58.66ID:???
- できるが、それ以前に無駄なp要素とか不要なもの多過ぎ
解決した部分を織り込んで、汚いソースを整理してこい
話はそれからだ - ： Name_Not_Found [] 2020/08/06(木) 20:40:22.30:x/6SsYNW
- した線の色だけはマウスオーバーで変更できるのですが文字色だけ画像をマウスオーバーしても文字色が変化しません…
- ： Name_Not_Found [] 2020/08/06(木) 20:41:53.78:x/6SsYNW
- wordpressでいらない要素を削除したんですが強制的についてきて…どうすればよいのでしょうか。
- ： Name_Not_Found [sage] 2020/08/06(木) 20:42:43.26ID:???
- これだけ「した線」を連呼するのって何かポリシーでもあるのかな
- ： Name_Not_Found [sage] 2020/08/06(木) 20:53:39.42ID:???
-
wordpressのどこで編集してるのか知らんが、wpautopで検索して自動整形を無効化してこい
その上でjfiddleにコピペしたまんまじゃなくて、不要なものを削除して整理してから書き込めよ - ： Name_Not_Found [] 2020/08/06(木) 21:24:18.79:x/6SsYNW
- ttp://https://jsfiddle.net/n9p7qtvw/1/ 不要なタグを消してきました、アドバイスお願いします。
- ： Name_Not_Found [sage] 2020/08/06(木) 21:30:38.58ID:???
- 何も書かれてない空のa要素は何なんだ
- ： Name_Not_Found [sage] 2020/08/06(木) 21:47:50.38ID:???
-
ヒント
兄要素:hover <結合子> 弟要素 - ： Name_Not_Found [] 2020/08/06(木) 22:04:49.19:x/6SsYNW
- flex-child:hover ＋p ですかね
- ： Name_Not_Found [sage] 2020/08/06(木) 22:08:21.81ID:???
- 聞く前にやってみればいいじゃん
- ： Name_Not_Found [] 2020/08/06(木) 22:26:28.85:iIEnBw9v
- 難しくてわかりません…
- ： Name_Not_Found [sage] 2020/08/06(木) 22:31:37.24ID:???
- ヒント以前に検索とかしてみたのかね？
「css hover 別の要素」でググれば、すぐ分かるだろ - ： Name_Not_Found [sage] 2020/08/06(木) 22:36:14.66ID:???
-
ドットが足りないし
プラスが全角だし
プラスの後ろに半角スペースが無い - ： Name_Not_Found [] 2020/08/06(木) 23:28:47.70:wOuRb+I6
-
リンクの下線は
いわゆるデフォルトスタイルじゃない？
Safariに限らず - ： Name_Not_Found [] 2020/08/07(金) 05:43:29.77:c7hNF/2z
- nth-child(n+5)だと5番目以降の子要素を指定出来ますが、どうしてこの式で5番目以降という意味になるんでしょうか？
nとはなんですか？ - ： Name_Not_Found [sage] 2020/08/07(金) 07:13:10.67ID:???
- 5番目以降じゃない。
nに0から数字足したら括弧内はいくつになる？
それが答えだ。 - ： Name_Not_Found [sage] 2020/08/07(金) 07:15:27.97ID:???
-
構文の関数表記とセレクターの例に解説あるから、とりあえず読んでこい
ttp://https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child
これに限らず、基本的には developer.mozilla.org にあるはずなので「これなんだっけ」ってなったらまずキーワードに site:developer.mozilla.org つけてググるかな
和訳が変だったり、そもそも和訳されてないこともあるが - ： Name_Not_Found [sage] 2020/08/07(金) 07:20:48.47ID:???
-
:nth-child() - CSS: カスケーディングスタイルシート | MDN
ttp://https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child
> n はすべての正の整数で、0から始まります。
とりあえずHTMLとかCSSで分からないことは、例えば「css nth-child mdn」で検索して
MDNの解説を読んでみよう - ： Name_Not_Found [sage] 2020/08/07(金) 07:21:08.92ID:???
- おわ、かぶったｗ
失礼しました - ： Name_Not_Found [] 2020/08/07(金) 07:35:03.88:c7hNF/2z
-
nにはインクリメントが入るんですね - ： Name_Not_Found [] 2020/08/07(金) 09:47:57.44:c7hNF/2z
- ttps://i.imgur.com/jqLVohu.jpg
ttp://https://ideone.com/z4VvTH
ｆlexで並べたボックスから中身がはみ出てしまいます
対策はないでしょうか？
調べて子要素にmin-width:0;を指定しましたが、変化はなかったです - ： Name_Not_Found [] 2020/08/07(金) 10:17:46.24:W4/guscT
-
それは英文法の問題なんだ
あいつらの言語は、スペースで区切られないと
改行しないんだ
どうしても折りたい場合は
強制改行（br要素）を使うか
white-space、word-brake、word-wrapを使うんだ - ： Name_Not_Found [] 2020/08/07(金) 11:44:28.57:c7hNF/2z
-
おおう 本当ですね
ありがとぅ - ： Name_Not_Found [sage] 2020/08/07(金) 15:44:25.32ID:???
- ｐｈｐって言語ってどうなの？斜陽なの？
HTMLを理解したら入門にどんな言語が後々役たちそうですか？ - ： Name_Not_Found [sage] 2020/08/07(金) 15:57:40.49ID:???
- JavaScript
- ： Name_Not_Found [sage] 2020/08/07(金) 17:56:12.13ID:???
-
phpはWordPressある限りしばらくは大丈夫だと思う - ： Name_Not_Found [] 2020/08/07(金) 19:53:53.40:U76a8xtt
- ttp://https://codepen.io/sadsfff/pen/mdPyXJz
マウスホバー時に左上のボタンが消えるようにしたいのですがどうすればよいでしょうか? - ： Name_Not_Found [sage] 2020/08/07(金) 19:55:00.66ID:???
-
ありがとう、CSSフイン域分かる程度なんだけど市lt借りやってから
JavaScript言ったほうがいいかしら？ - ： Name_Not_Found [sage] 2020/08/07(金) 19:55:45.18ID:???
-
CSS雰囲気分かる程度なんですけどしっかりやってから
JavaScriptやったほうがいいかしら - ： Name_Not_Found [sage] 2020/08/07(金) 19:57:55.83ID:???
- まずはタイポ無く日本語を入力することから始めたほうがいいんじゃね？
- ： Name_Not_Found [] 2020/08/07(金) 20:05:07.72:c7hNF/2z
- width1000px height1000pxのボックスを作り、その中に画像を入れています
画像は100px 100pxです
これを余白を埋めるようにしたいのですが、なんのCSSを使うのでしょうか？
調べてみたのですが、object-fit:fill;ではだめなようです - ： Name_Not_Found [] 2020/08/07(金) 20:38:16.66:U76a8xtt
- すみません先ほど質問したものなのですがttp://https://codepen.io/sadsfff/pen/mdPyXJz マウスオーバーで画像を拡大しながらホバー色を変化させようとしたのですが。
ttp://https://weconet.co.jp/css_image_zoom/ このサイトを参考にして作っているとホバー色変更とホバー拡大がお互いぶつかり合ってしまい。両方を生かすことができません、1行目の<figure class="effect-oscar">
と2行目の<div class="category">を入れ替えると画像の拡大はできるのですが、ホバー色の変化を再現できません。拡大しながら、マウスオーバーでホバー色の変更をするためにはどこを訂正すればよいでしょうか? - ： Name_Not_Found [] 2020/08/07(金) 21:16:09.19:U76a8xtt
- ttp://https://codepen.io/sadsfff/pen/mdPyXJz 解決できました。
figureにclass設定しても効かないのでしょうか? - ： Name_Not_Found [] 2020/08/07(金) 21:34:40.45:c7hNF/2z
- です
これは画像ではないですが、こんな感じで文字のボックスがはみ出ます
これも残り領域にフィットさせたかったのですが、何を指定すればよいでしょうか
object-fitではないようです
ttps://i.imgur.com/xNH6Nog.jpg
ttp://https://ideone.com/yEtg3w - ： Name_Not_Found [sage] 2020/08/07(金) 21:38:33.09ID:???
-
img { width: 100%; } - ： Name_Not_Found [sage] 2020/08/07(金) 21:43:13.79ID:???
-
.outerのheightは500px固定にしなきゃいけないの？ - ： Name_Not_Found [sage] 2020/08/07(金) 21:43:58.08ID:???
-
ウホッ！ウホッウホッ！
(ソースがないウホ！だからゴリラの第ゴリラ感で答えるウホ！)
ウホッホ！ウッホ！ウホウホ！
(画像はbackground-imageを使うウホッ！)
ウホッウホッ！ウッホ！
(backgroundについてはググれウホッ)
ウホッウホッ！ウホッ！
(ウホッウホッ！ウホッ！) - ： Name_Not_Found [sage] 2020/08/07(金) 21:46:33.73ID:???
-
ウホッウホッウホウホ！ウホウホ！
(ttp://http://www.netyasun.com/home/background-manual.html) - ： Name_Not_Found [sage] 2020/08/07(金) 21:47:55.62ID:???
- js質問スレのノリを持ち込むな
- ： Name_Not_Found [sage] 2020/08/07(金) 21:51:37.45ID:???
- どうもここんとこ自分で解決しようとしない愚か者ばかりが目立つ
- ： Name_Not_Found [] 2020/08/07(金) 21:52:32.28:U76a8xtt
- 何度もすみませんttp://https://jsfiddle.net/c2r10shv/拡大まではできたのですがoverflow hiddenではみ出さないようにできません。3時間やっても無理です、アドバイスください。お願いします。
- ： Name_Not_Found [] 2020/08/07(金) 21:57:05.30:U76a8xtt
- ttp://https://jsfiddle.net/vintagedopeme0522/2sowqL0b/36/ ログインしてませんでしたすみません…
- ： Name_Not_Found [] 2020/08/07(金) 22:33:36.18:jMEzpgrG
-
いつも - ： Name_Not_Found [sage] 2020/08/08(土) 02:20:24.06ID:???
-
figure:hoverでfigureごと拡大してるからだろ
figure:hoverでimgだけ拡大させろ - ： Name_Not_Found [sage] 2020/08/08(土) 02:22:43.55ID:???
- 要はの応用だな
- ： Name_Not_Found [] 2020/08/08(土) 02:40:00.20:ibmb0nFZ
- >>364
すみません技術不足でして自分なりに初めから作り変えました。ttp://https://jsfiddle.net/vintagedopeme0522/2sowqL0b/65/
どうしても<span>aaa</span>にマウスを載せても画像がズームされません。おそらく画像と<span>aaa</span>が一体化してないせいだと思ってます。
画像からだと<span>aaa</span>のマウスオーバーは機能するのに逆はなぜ機能しないのでしょうか? - ： Name_Not_Found [] 2020/08/08(土) 02:43:28.75:ibmb0nFZ
- マウスオーバーなど要素をいくつも一つのコンテンツに組み込むのが大変苦手です。
- ： Name_Not_Found [sage] 2020/08/08(土) 03:05:39.93ID:???
-
<span>aaa</span>には何も効いてないだろ？
.quaternary2のbackground-colorがhoverで変わっただけ
そういうのは孫要素のimgとか子要素のspanじゃなく親要素に
マウスhoverで子とか孫要素をtransformさせりゃいいんだよ
これもの応用 - ： Name_Not_Found [] 2020/08/08(土) 05:29:39.81:1I/1YXIK
-
そうですね
たとえばflexboxで同じ幅で並べたいことなどありますよね
ブログの記事一覧などで
ttp://http://hacks.beck1240.com/
こんな感じです - ： Name_Not_Found [] 2020/08/08(土) 05:39:56.85:1I/1YXIK
-
background imageを使うのはなぜでしょうか - ： Name_Not_Found [sage] 2020/08/08(土) 05:59:57.67ID:???
-
それじゃ.boxも.textareaもガチガチに固定されてるのに、残りの領域ってのはどこにあるのよ？
.textareaからはみ出させないってだけなら、フォントサイズを小さくするか
overflowではみ出した分は隠すか、スクロール表示させるしかないんじゃね？ - ： Name_Not_Found [] 2020/08/08(土) 06:19:51.53:1I/1YXIK
- 残りの領域というのはboxの高さ-boxの高さ＝３００ｐｘです
この領域を埋めるCSSがあったと思うんですが、思い出せません - ： Name_Not_Found [sage] 2020/08/08(土) 07:22:05.85ID:???
- 問題：
X - X == 300 となる X を求めよ。(15点) - ： Name_Not_Found [sage] 2020/08/08(土) 07:26:24.48ID:???
- 全てのテキストがはみ出さず、ぎっちり埋め込めるプロパティなんかあったら
俺も知りたいｗ - ： Name_Not_Found [] 2020/08/08(土) 09:46:37.03:3upbSFFB
-
どれだけ調べてもわかりません。すみませんヒントをください。 - ： Name_Not_Found [] 2020/08/08(土) 09:54:20.98:3upbSFFB
- ttp://https://jsfiddle.net/vintagedopeme0522/2sowqL0b/77/
間違ってると思うのですが、どこを変えればよいのでしょうか? - ： Name_Not_Found [] 2020/08/08(土) 09:58:17.86:1I/1YXIK
-
問題はテキストではなくてボックスがはみ出ることです
ボックスがはみ出なければテキストは切り取られますから
数値指定ではなく、残りの領域に自動的にフィットさせてくれるプロパティがあったと思うのですが、、、 - ： Name_Not_Found [] 2020/08/08(土) 10:26:22.33:3upbSFFB
- ttp://https://jsfiddle.net/vintagedopeme0522/2sowqL0b/92/
このサイトさんを参考にしてhtmlの配列を書き換えたのですが
ttp://https://www.puzzle-web.jp/archive/1877/、今度は画像がはみ出してしまいホバーもずれてしまいます… - ： Name_Not_Found [] 2020/08/08(土) 11:01:25.04:3upbSFFB
- ttp://https://jsfiddle.net/vintagedopeme0522/2sowqL0b/103/ コードを整理してみたのですが
figure.snip:hover figcaption,
figure.snip.hover figcaption {
background-color:#000;
} でサンプルだとこの要素に-webkit-transform: translateY(0);
transform: translateY(0); 自分の場合色を変更したいのでback groundを入れたのですが、色は変わらず…
なぜだかわかりません… - ： Name_Not_Found [] 2020/08/08(土) 11:28:39.42:3upbSFFB
- figure.snip:hover img + figure.snip h2 {background-color: brown;} と追記してみたのですができません、
figure.snip:画像をホバーした際にfigure.snip h2の色を変える どこが間違ってるのでしょうか - ： Name_Not_Found [] 2020/08/08(土) 11:47:02.56:3upbSFFB
- figure.snip:hover h2 {background-color: brown;} ようやくできましたありがとうございます。
- ： Name_Not_Found [sage] 2020/08/08(土) 11:52:30.74ID:???
- グリッドレイアウトでサイトデザインをしています。
似たようなレイアウトで画像だけ異なるものを並べていきます。
その際に１つの要素を使って、背景画像だけ違うものを並べていく方法はないでしょうか？
自分が試したのは
１）<img src="">でそれぞれの画像を配置していく
→画像の大きさがそれぞれ異なるのでレイアウトがぐちゃぐちゃになってしまう
２）背景画像として設定する
→レイアウトは整うが、背景画像ごとにcssで要素を設定していくため、
画像の種類が多くなるとbox12、box13...と要素の種類がどんどん増えてしまう
そのため、要素box1(背景画像はimg1)、要素box1(背景画像はimg2)みたいに
html側で要素の背景だけを変えて対応させる方法など、スマートなやり方は
ないかと悩んでいます。
皆様はこういう場合どういう手法を使っていますでしょうか？ - ： Name_Not_Found [] 2020/08/08(土) 11:55:01.44:3upbSFFB
- 親要素を順に書いていって：hover<結合子> 実装させたい要素を書くって事ですかね
実装させたい要素には親要素は書かず、共通したhtmlは省いて最小にした要素を入れる - ： Name_Not_Found [sage] 2020/08/08(土) 12:09:18.64ID:???
-
なんか独自解釈で変な理解のしかたしてる気がしないでも無いが
もうしょうがねぇから
ttp://https://jsfiddle.net/vq4mjc03/
元ソースが整理されて無くて分かりづらかったから、HTML部分はほぼそのままで
動きは多少変えたけど、CSSは1から書き換えた
これなら何が悪かったのか理解できるか？ - ： Name_Not_Found [sage] 2020/08/08(土) 12:12:35.47ID:???
-
ありがとうございます。実現したいのはこういうレイアウトです。
↓box1 ↓box2
┏━━━┳━━━┓
┃画像1 ┃文章 ┃
┣━━━╋━━━┫
┃画像2 ┃文章 ┃
┣━━━╋━━━┫
┃画像3 ┃文章 ┃
┣━━━╋━━━┫
┃画像4 ┃文章 ┃
┣━━━╋━━━┫
： ：
これをbox1とbox2の要素だけ使って構成したいということです。
img widthとheightを使って画像のサイズを全部同じにして
画像は<img src="">で設置して、文字をかぶせたい場合は
position:absolute とか使うのがいいんですかね… - ： Name_Not_Found [sage] 2020/08/08(土) 12:14:48.20ID:???
-
すいません勘違いしてました。 - ： Name_Not_Found [sage] 2020/08/08(土) 12:19:58.21ID:???
-
いや、だから.textareaに
overflow:hidden;とかoverflow:scroll;とかoverflow:auto;
じゃダメなの？
あとoverflowとセットでこれも
height: 300px;
box-sizing: border-box; - ： Name_Not_Found [sage] 2020/08/08(土) 12:39:16.46ID:???
-
俺なら疑似要素使う - ： Name_Not_Found [] 2020/08/08(土) 12:44:20.15:1I/1YXIK
-
なんだか気持ち悪くて、、、
見た目はそれでいいんですけどね - ： Name_Not_Found [sage] 2020/08/08(土) 12:50:44.44ID:???
-
gridだと、こういうこと？
ttp://https://jsfiddle.net/wzL6nhu8/ - ： Name_Not_Found [sage] 2020/08/08(土) 12:52:31.58ID:???
-
ありがとうございます。疑似要素ということはbefore after等だと思いますが、
これらを用いても結局はcss側で画像1,2,3,4...と設定してあげないといけないわけですよね。
html側でやるとしたらimgタグでサイズ調整してcssのグリッドレイアウトを乱さないように
調節してあげるしかない感じでしょうか。
imgタグで画像のサイズ指定してしまうと、スマホなどでグリッドレイアウトが変わったとたん
に
レイアウトが破綻してしまうんですよね… - ： Name_Not_Found [sage] 2020/08/08(土) 12:56:52.00ID:???
-
ありがとうございます、そんな感じです。
ただこの場合、画像を（はみ出した部分は切れてもいいので）
要素のサイズ目いっぱいに表示しようとした場合に枠から飛び出して表示されて
しまいますよね。
背景画像に指定すれば要素からはみ出た部分は表示されないので、
そちらの方が有効かなと思った次第です。
わかりにくくすみません。 - ： Name_Not_Found [sage] 2020/08/08(土) 13:00:14.43ID:???
-
だったらobject-fitをcoverにすりゃいいだけじゃね？ - ： Name_Not_Found [sage] 2020/08/08(土) 13:07:37.11ID:???
-
それだ！
これで解決できそうですありがとうございます。
まだまだ自分の知らない便利なタグがあるんですね。 - ： Name_Not_Found [sage] 2020/08/08(土) 13:14:22.70ID:???
-
細かいとこだけどobject-fitはCSSのプロパティね
タグはHTMLの方なので、言い方はちゃんと区別した方がいいかも - ： Name_Not_Found [] 2020/08/08(土) 14:51:51.52:3upbSFFB
-
実装したかったものはマウスオーバーで拡大と同時にキャプションの色を変更なので… - ： Name_Not_Found [sage] 2020/08/08(土) 15:17:15.86ID:???
-
質問変わってるじゃねぇか - ： Name_Not_Found [sage] 2020/08/08(土) 15:22:59.57ID:???
- こんなぐちゃぐちゃした質問に答えてやるおまえら
優しいな - ： Name_Not_Found [sage] 2020/08/08(土) 15:31:38.26ID:???
-
つうかの
これとか
figure.snip:hover figcaption,
figure.snip.hover figcaption
これの
figure.snip:hover img,
figure.snip.hover img
.hover（どっとhover）って何だよ
:hover（コロンhover）なら、その行は不要だろ - ： Name_Not_Found [sage] 2020/08/08(土) 16:25:33.66ID:???
- 最近の異常な質問者、LINEの感覚で聞いてるよな・・
質問者としての態度が、ちょっと怖いわ - ： Name_Not_Found [sage] 2020/08/08(土) 16:57:27.65ID:???
-
それな
注意されても殆ど改めないし、あまりにも酷いのでスルーしてもいいんだが
答えそのものじゃなく、もうなるべくヒントしか与えないようにしてる - ： Name_Not_Found [] 2020/08/08(土) 17:19:17.36:CX3G+LM1
- すみません先ほどのコードを消してしまいました ttp://https://codepen.io/sadsfff/pen/LYNEoNO
キャプションの文字までマウスオーバー時に動くのですが固定できますでしょうか? - ： Name_Not_Found [] 2020/08/08(土) 17:23:23.10:CX3G+LM1
-
根本は画像の上にキャプションを置いてマウスホバー時にキャプションの色と画像を拡大するってことでしたが、どうしてもここで教わったコードを改変することができず簡単なサイトのものを自分で一から訂正して先ほど作りました。 - ： Name_Not_Found [] 2020/08/08(土) 17:38:45.37:CX3G+LM1
- 初心者なので結合子と調べてもわかりません
サイトを駆け回って5時間くらいでようやく理解できましたし
できれば答えと解説付きで教えてもらえませんか？お願いします - ： Name_Not_Found [sage] 2020/08/08(土) 17:49:29.82ID:???
-
動いてないが - ： Name_Not_Found [sage] 2020/08/08(土) 17:56:11.56ID:???
-
理解できたんならええやん - ： Name_Not_Found [sage] 2020/08/08(土) 17:57:41.90ID:???
- 相手する奴もスレ荒しということを意識して自重してくれ
- ： Name_Not_Found [sage] 2020/08/08(土) 17:58:00.38ID:???
-
質問だらけでどこの何の答えが欲しいのか分からん - ： Name_Not_Found [sage] 2020/08/08(土) 18:05:11.83ID:???
- し尿垂れ流しのような異常な質問を続けていることを、本人が気付いていない様子
- ： Name_Not_Found [] 2020/08/08(土) 18:09:29.86:CX3G+LM1
-
多少左にずれてるように見えるのですが目の錯覚でしょうか… - ： Name_Not_Found [sage] 2020/08/08(土) 18:38:04.22ID:???
- object要素を使って音声ファイルを再生させる時、メディアプレーヤの
操作パネルみたいなのが出ますが、あれとボックスの間の黒バックを
消す（例えばバックを黒でなくbodyの背景色と一緒にするとか、ボックスを
環境によらずパネルのサイズと一致させるみたいな）方法ってあるでしょうか。
素人のサイトなんで黒バックが見えてもどうという事はないんですが、簡単に
消せるものなら消しておきたいです。 - ： Name_Not_Found [sage] 2020/08/08(土) 19:57:34.32ID:???
-
objectじゃなきゃダメ？
音声ファイルならaudioタグ使った方が、その悩みを解決できるんじゃない？ - ： 410 [sage] 2020/08/08(土) 20:28:44.68ID:???
-
ありがとうございます。
その線も考えたんですが、使ってるhtml/cssテンプレートが
xhtml 1.0 transitionalだし、そこにhtml5の要素を混ぜるのは
どうかという気がしたので。
特に問題も出ないし、素人のサイト程度ならそれでも許される
のであればそうしようと思います。 - ： Name_Not_Found [] 2020/08/08(土) 20:53:19.08:t+132G7y
-
気にし過ぎな気もするけど
doctype変えちゃえばいいじゃん
びみょーーにボックスの解釈変わるとこあるけど
差して問題にもならんじゃろ - ： 410 [sage] 2020/08/09(日) 07:37:59.93ID:???
-
ありがとうございます。
試したところ見た目も変わりなく、lintにかけてみてもhtml5仕様からの
逸脱は素人でも修正できる程度のようでした。のアドバイス通り
audio要素を使ってプレーヤーの見た目も良くなりました。
これを機会にhtml5の勉強にも手を付けようと思います。
ありがとうございました。 - ： Name_Not_Found [sage] 2020/08/09(日) 16:20:57.07ID:???
-
答え教わっても成長できないよ
ヒントをもとに自分で理解して成長するんだよ - ： Name_Not_Found [] 2020/08/09(日) 18:46:59.51:m2h3L0xD
- ttp://https://codepen.io/sadsfff/pen/LYNEoNO すみません左右flexで並べたのですが右側が機能しませんなぜでしょうか?
- ： Name_Not_Found [] 2020/08/09(日) 19:56:34.24:6V1Y2vLk
- 失礼します。
雨が降る表現ってHTMLで作れますか？
つまり、そういうコードがあるのかなって話ですが - ： Name_Not_Found [sage] 2020/08/09(日) 20:04:22.93ID:???
- 背景にアニメーションGIFを置けば終わり
- ： Name_Not_Found [sage] 2020/08/09(日) 20:06:17.38ID:???
- js使わないと無理じゃね
ttp://https://daniellaharel.com/raindrops/ - ： Name_Not_Found [sage] 2020/08/09(日) 20:21:11.57ID:???
-
HTMLのみじゃ無理
CSSのみで雨が降るアニメーションサンプル集 | ONE NOTES
ttps://1-notes.com/css-rain-animation/ - ： Name_Not_Found [sage] 2020/08/09(日) 20:26:03.54ID:???
- へえCSSだけでできるんだなあ
- ： Name_Not_Found [sage] 2020/08/09(日) 20:30:00.94ID:???
-
機能してます。 - ： Name_Not_Found [] 2020/08/09(日) 20:41:26.32:6V1Y2vLk
- おお、ありがとうございます！
- ： Name_Not_Found [sage] 2020/08/09(日) 22:00:29.92ID:???
- 今は大抵のことはcssで出来るよなぁ
パワプロみたいなバッティングゲームをcssとhtmlのみで作ってるのを見たことがあるが驚いたわ - ： Name_Not_Found [sage] 2020/08/09(日) 22:03:03.93ID:???
- こないだCSSオンリーのマインスイーパ見かけた。
ほんとにJS一切なしだった。 - ： Name_Not_Found [sage] 2020/08/09(日) 22:13:00.99ID:???
- そういうのってIEで動くの？
- ： Name_Not_Found [sage] 2020/08/09(日) 22:15:09.93ID:???
- IE？何それ？食べられるの？
- ： Name_Not_Found [] 2020/08/10(月) 12:07:33.08:JO6ePjR0
- cssで要素名をつけない場合とつける場合、の使い分けってなんでしょうか？
div.classname{}
.classname{} - ： Name_Not_Found [] 2020/08/10(月) 12:09:58.98:JO6ePjR0
- list-style:none;はformに指定してもいいのでしょうか？
form要素にもlistと同じcssを適用したい場合、このように書いていますが、、、
共通する部分があるということですが
form.search-form , ul{
list-style:none;margin:0;padding:var(--px16);
border:1px solid red;
} - ： Name_Not_Found [sage] 2020/08/10(月) 12:15:39.48ID:???
-
精細度が変わる
div.classname{ color: blue; }
.classname{ color: red; }
ってすると
divようその時だけ青くなるっしょ - ： Name_Not_Found [sage] 2020/08/10(月) 12:22:47.20ID:???
- .alert {color:red;font-weight:bold;}
てすれば
赤く強調したいとこならどこでも使える（spanでもpでも） - ： Name_Not_Found [] 2020/08/10(月) 12:28:45.84:JO6ePjR0
- 優先度が違うってことですね
- ： Name_Not_Found [] 2020/08/10(月) 12:49:40.66:JO6ePjR0
- flexboxの解除について
ttp://https://teratail.com/questions/174792
こちらのページの最初の画像にあるように、最下部だけ回り込まないようにしたいです。最下部にページ送りを設定したいからです
つまりfloatのclearみたいなものはないでしょうか？ - ： Name_Not_Found [] 2020/08/10(月) 14:50:44.13:38PvAAmv
-
ページ送りのdivを作ってwidthを100%指定するとか
flexを設定した要素の外にページ送りを作るとか - ： Name_Not_Found [sage] 2020/08/10(月) 15:20:03.41ID:???
- 要素セレクタって後付でここをこうしたいけどHTMLいじるのめんどくせってときにくらいしか使わないよね？
あと一括でimgにmax-width:100%付けたりaにtext-decoration:none付けたりするくらいで - ： Name_Not_Found [] 2020/08/10(月) 15:57:09.50:JO6ePjR0
-
うーん、別にしたほうがいいみたいですね - ： Name_Not_Found [sage] 2020/08/10(月) 22:39:28.70ID:???
-
場合による
今の何でもかんでもクラスつければいいじゃんシステムでない場合はそこそこ使う - ： Name_Not_Found [] 2020/08/11(火) 00:21:47.35:euG0tmw+
- 基本的にflexboxは同じ役割をするグループをするものをキレイに並べるためのものだから
違う機能のパーツは含めないほうがいいかも - ： Name_Not_Found [age] 2020/08/11(火) 14:41:54.13ID:???
- すみませんコロナの影響で大学の観光学部目指すのやめてpython学んでaiかweb系に行こうと思ってhtml勉強してるのですがshift2でやっても半角の真っ直ぐなダブルコーテーション打てないですかま機種のせいですか？ progateで練習してますがちゃんとしたダブルコーテーション直接打てないので登録していちいち変換してます。
- ： Name_Not_Found [sage] 2020/08/11(火) 16:18:39.69ID:???
-
全角と半角はわかってんの？ - ： Name_Not_Found [sage] 2020/08/11(火) 16:33:49.46ID:???
-
ダブルクォーテーションな
お前アホっぼいから無理だわ - ： Name_Not_Found [sage] 2020/08/11(火) 16:43:13.86ID:???
-
チー牛、自己紹介乙 - ： Name_Not_Found [sage] 2020/08/11(火) 16:47:04.21ID:???
- もしかして、スマホかタブレットでやってんのかな、、
- ： Name_Not_Found [] 2020/08/11(火) 18:28:49.52:0yU6Gsnr
-
まず、全角と半角の区別を覚えよう
半角入力するときは、必ず半角モードにしてから入力
決して全角入力からの変換はしないように、癖をつけよう
で次に、コーデング用の書体をインストールしよう
Rictyがおすすめ
モニタで間違えずに読めることを重視した書体で、とても見やすい
書体幅も意図的に半角を全角の半分にしてあるので間違えにくい
最後に、コーデングに適したエディタを使おう
今はVSCodeが人気、他にもAtomやSublimeなど
機能は色々あるけど、入力補完、マルチカーソル、editorconfigを使えるものがおすすめ
エディタを変えたら、上記の書体に変更するのを忘れずに - ： Name_Not_Found [sage] 2020/08/11(火) 19:53:16.01ID:???
- ここHTML/CSSの質問スレなんだが
文字入力の質問とか馬鹿すぎて心配になるわ
大学で教わってきなさいな - ： Name_Not_Found [sage] 2020/08/11(火) 20:20:59.03ID:???
- つかshift2って何？
- ： Name_Not_Found [sage] 2020/08/12(水) 00:37:10.26ID:???
- SHIFT押しながら2
- ： Name_Not_Found [sage] 2020/08/12(水) 01:09:32.87ID:???
- そういうことか！
日本語キーボード使ってないから
すっかり忘れてた - ： Name_Not_Found [sage] 2020/08/12(水) 04:41:12.65ID:???
-
どんな質問にもやさしく応えるのがこのスレの主旨なのだ
それに慣れた奴ほど意外に知らない基本事項って結構あるもんだぜ - ： Name_Not_Found [sage] 2020/08/12(水) 05:42:59.54ID:???
-
違う
「HTML/CSSのどんな質問」が理解できない？ - ： Name_Not_Found [] 2020/08/12(水) 10:22:36.94:ecoqwzIl
- pタグの中にdivはokだったでしょうか？
wordpressのブロックエディタでは、１ブロックにpタグが自動的についてきます(´・ω・`)、、、
タグを独自にしたいのなら、ブロックをカスタマイズする必要がありそうです - ： Name_Not_Found [] 2020/08/12(水) 10:23:41.27:dcwvEswM
-
p要素の中にブロックが置かれると
そこでpは終わる - ： Name_Not_Found [] 2020/08/12(水) 11:06:28.19:ecoqwzIl
-
ブロック同士でもやはり駄目なんですよね。
自分でブロックをカスタムするしかないようです。 - ： Name_Not_Found [] 2020/08/12(水) 22:38:46.45:GcIs3avQ
- ちょっと聞きたいんだけど、HTMLのidって使いまわし禁止だよね？
- ： Name_Not_Found [age] 2020/08/13(木) 00:17:23.95ID:???
- ありがとうございました 英字キーボードでやってみます
- ： Name_Not_Found [sage] 2020/08/13(木) 09:01:47.09ID:???
- 英字キーボードと言ってるが大丈夫か・・・？
日本語配列でもUS配列でもどちらでもいいけど文字入力の状態が日本語入力のままではだめというのは分かってるのだろうか - ： Name_Not_Found [sage] 2020/08/13(木) 09:05:17.91ID:???
-
1つのページ内でid名は1つだけ、な。 - ： Name_Not_Found [] 2020/08/13(木) 10:00:44.50:nQ0LwsCC
-
スマホからタブレットの
バーチャルキーボードのことではなかろうか - ： Name_Not_Found [] 2020/08/13(木) 19:11:02.14:pTXEjxK1
-
やっぱそうだよね、なんでページ内に同じid名付けてるのか・・・HTMLの素人が作ったのかな・・・ - ： Name_Not_Found [sage] 2020/08/13(木) 19:40:06.78ID:???
- まれによくある
- ： Name_Not_Found [sage] 2020/08/14(金) 09:53:24.68ID:???
- クッソ長いソースコードで、複数人の手が加わってそうなったの見たことある。
- ： Name_Not_Found [sage] 2020/08/14(金) 23:57:11.79ID:???
- 怪しげなサイトから落とした圧縮ファイルの中にあったHTMLファイルをなんとなくバイナリエディタで開いたら
末尾の「</html> 0x0D 0x0A」の後に「PK 0x03 0x04 …」で始まるzipファイルらしきバイナリがくっついてたんだけどこれなんぞ？
HTMLコードの中からこのzipファイルを読み込んで何かできるHTML仕様があるの？ - ： 462 [sage] 2020/08/15(土) 00:10:14.05ID:???
- その怪しげな部分だけ切り出してzipファイルとして保存してから解凍したら、
普通のテキストファイルとインターネットショートカットファイルが出てきた。 - ： Name_Not_Found [sage] 2020/08/15(土) 07:48:50.18ID:???
- 怪しげなバイナリとHTMLの仕様になんの関連があるの？
WHATWGの仕様でも読んできたら？ - ： Name_Not_Found [sage] 2020/08/15(土) 08:10:37.59ID:???
- ここはHTMLの仕様の話しかしてない場所だからな
スレタイをみるな - ： Name_Not_Found [sage] 2020/08/15(土) 08:30:51.44ID:???
- 知らないなら無理して書き込まなくていいのにw
- ： Name_Not_Found [] 2020/08/15(土) 19:16:18.37:JrEtzpe0
- ttp://https://ideone.com/AGlPbv
htmlタグでこのような中央寄せのボックスを作りたいです
しかし、inner2を作らずにinnerにpaddingやmarginを設定して余白を設定すると、1000px以上にひろがってしまいます。
そこでinnner2が必要なわけですが、outerとinnerのみでできないでしょうか？ - ： Name_Not_Found [] 2020/08/15(土) 19:18:21.96:JrEtzpe0
- ttps://i.imgur.com/SbkZBCI.jpg
画像どす - ： Name_Not_Found [sage] 2020/08/15(土) 20:00:48.09ID:???
-
ttp://https://jsfiddle.net/1uvc58gw/
CSSのbox-sizingについての知識が足りてないだけじゃね？ - ： Name_Not_Found [sage] 2020/08/15(土) 20:07:17.15ID:???
-
box-sizing - CSS: カスケーディングスタイルシート | MDN
ttp://https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing - ： Name_Not_Found [] 2020/08/15(土) 20:22:16.48:JrEtzpe0
- ↑いえ、これだと1000px以上に広がってしまいます。
autoで中央寄せにしているボックスは、1000px以上にはしたくないのです。 - ： Name_Not_Found [sage] 2020/08/15(土) 21:05:09.09ID:???
-
広がってないが
ttps://i.imgur.com/OuFUwkd.png - ： Name_Not_Found [] 2020/08/15(土) 21:18:40.54:JrEtzpe0
- いえ、ブルーのセクションを広げたくないのです。
ここを1000px固定にしたいです。 - ： Name_Not_Found [sage] 2020/08/15(土) 21:26:35.48ID:???
-
いや、だからブルーのinnerは1000px固定になってるやん - ： Name_Not_Found [] 2020/08/15(土) 21:36:32.66:JrEtzpe0
- 見た目上は広がってしまっていますよね
- ： Name_Not_Found [sage] 2020/08/15(土) 21:40:51.35ID:???
-
青いとこはwidth+padding+border=1000pxで固定
黄色いとこはinnerのmarginの左右がautoでinnerをouter内で左右中央寄せ
見た目上もinner2を入れた状態と同じ挙動だよ
ttp://https://jsfiddle.net/68x7c0hs/ - ： Name_Not_Found [sage] 2020/08/15(土) 22:06:26.79ID:???
-
これ、値がデカいから分かりにくいんだと思うけど
1000pxを300pxぐらいで確認してみれば？
ちゃんと300px固定になるから - ： Name_Not_Found [] 2020/08/15(土) 23:34:41.01:mWUGbd3m
- ttp://https://jsfiddle.net/vintagedopeme0522/1cebxu82/ 小さなキャプションを右上左上に追加したいのですが、<figcaption></figcaption>
にクラス名をつけられません この場合<span>タグなどで囲んで<span class>でクラス指定するのが正解ですか? - ： Name_Not_Found [sage] 2020/08/15(土) 23:47:32.93ID:???
- つけられるが
- ： Name_Not_Found [] 2020/08/15(土) 23:58:55.26:mWUGbd3m
-
教えていただきありがとうございます <figcaption class=クラス名></figcaption>でcss指定できますでしょうか? - ： Name_Not_Found [] 2020/08/16(日) 00:03:24.11:gJ1wE+4l
- ttp://https://www.it-swarm.dev/ja/jquery/css%E3%81%A7%E7%94%BB%E5%83%8F%E3%81%AE%E4%B8%8B%E3%81%AB%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%92%E9%85%8D%E7%BD%AE%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%81%AF%EF%BC%9F/1044670572/
このサイトさんにも解説してました見落としで、すみません。
figcaptionの代わりに<span>でも代用可能なようですが、画像=figcaptionになるのですかね。 - ： Name_Not_Found [sage] 2020/08/16(日) 00:33:51.90ID:???
- figureとfigcaptionに限らず、大抵の場合、タグ自体に意味があるわけだが
代用しなくていいものを別のもので代用して、見た目が意図通りになってれば何でもいい
というのであれば、好きなようにすればいい
<figure>: 任意のキャプション付きの図要素 - HTML: HyperText Markup Language | MDN
ttp://https://developer.mozilla.org/ja/docs/Web/HTML/Element/figure
<figcaption>: 図キャプション要素 - HTML: HyperText Markup Language | MDN
ttp://https://developer.mozilla.org/ja/docs/Web/HTML/Element/figcaption
captionの意味・使い方・読み方 | Weblio英和辞書
ttp://https://ejje.weblio.jp/content/caption - ： Name_Not_Found [sage] 2020/08/16(日) 05:10:33.37ID:???
-
何かを仕込もうとしてるのかも
そのファイルの拡張子が、.html で、
ダブルクリックすると、ブラウザが起動して、
その時に、そのバイナリが動くのかも - ： Name_Not_Found [] 2020/08/16(日) 05:55:00.30:vCCvyY8m
-
border-boxはpaddingもwidth煮含めるんですね
あどうでｓもる - ： Name_Not_Found [] 2020/08/16(日) 13:16:28.75:avvKjdbG
-
参考になりました。サイトまで教えてくださりありがとうございます。 - ： Name_Not_Found [] 2020/08/16(日) 19:41:39.77:vCCvyY8m
- wordpressでcssを切り替えたいのですが、トップページとカテゴリ一覧ページで切り替えることが出来ます。
is_category()関数を使用することで判定出来ます。
しかし、これはcssの別ファイルを用意するしかないでしょうか？
cssファイルの一部のみをis_category用に適用されると言ったことは出来ないでしょうか？ - ： Name_Not_Found [] 2020/08/16(日) 19:46:00.63:vCCvyY8m
- 中身がある場合はスタイル適用、ない場合はスタイルを適用しない という設定は可能でしょうか？
- ： Name_Not_Found [] 2020/08/16(日) 20:17:37.90:vCCvyY8m
- empty効かないですね なぜか
- ： Name_Not_Found [] 2020/08/16(日) 20:30:49.65:vCCvyY8m
- 多分、改行があると駄目みたいですね
- ： Name_Not_Found [sage] 2020/08/16(日) 23:28:19.50ID:???
- これは酷い
- ： Name_Not_Found [sage] 2020/08/17(月) 02:20:57.40ID:???
- 普通にbodyにID付けときゃええやん思たけど
これってCSS設計的には古いの？ - ： Name_Not_Found [sage] 2020/08/17(月) 02:23:10.26ID:???
- bodyにはIDをつけるなっていう古からの教えが
- ： Name_Not_Found [sage] 2020/08/17(月) 02:54:07.66ID:???
- bodyにclassつけるのは珍しくない気が
- ： Name_Not_Found [sage] 2020/08/17(月) 04:15:55.33ID:???
- ボディにクラスとかどういう要素を加えるんだ？
- ： Name_Not_Found [sage] 2020/08/17(月) 05:24:45.64ID:???
- 下層ページにunderとか
- ： Name_Not_Found [] 2020/08/17(月) 08:13:41.27:pPLgnHQg
- 自分はhtml 要素の方によくやるな
クラスつけるの - ： Name_Not_Found [] 2020/08/17(月) 14:21:57.08:6UBKFdBO
- ttp://https://codepen.io/sadsfff/pen/LYNEoNO すみません一番下のキャプションの末尾を…にしたいのですが、text-overflow: ellipsis; /* 末尾に「…」を付加する */
「-webkit-line-clamp: 何行まで表示するか」2行で省略したい場合は、「-webkit-line-clamp: 2」 どちらの方法でもダメでした、原因がわかりません。 - ： Name_Not_Found [sage] 2020/08/17(月) 16:07:48.46ID:???
- 質問する前にmdn読め
- ： Name_Not_Found [] 2020/08/17(月) 20:34:34.02:Yy9pNfcb
-
読んでみたのですがどうしても分かりません… - ： Name_Not_Found [sage] 2020/08/17(月) 20:53:53.85ID:???
- どのページを読んでわからなかったの？
- ： Name_Not_Found [sage] 2020/08/17(月) 21:03:27.11ID:???
- 読めば簡単に分かるのに
実は読んでない疑惑 - ： Name_Not_Found [] 2020/08/17(月) 21:24:20.43:Yy9pNfcb
-
text-overflow: ellipsis; について読みました…
まだまだ素人に毛が生えたようなものなので、どこが間違っているのか分かりません…
教えてくださいお願いします。 - ： Name_Not_Found [sage] 2020/08/17(月) 21:32:31.03ID:???
-
特に難しい説明はないはずだから
1. たぶんどこかで誤字してるか
2. 記号の類が過不足してるか
3. セレクタが間違ってるか
のどれかだよ
1と2はコード眺めてても見つからないからvalidatorにかけよう
linterのあるエディタを使うこともお勧めする
3はとりあえず
背景色とか罫線とかのスタイルを追加してみて、それが適用されるなら問題ない
されないなら間違ってる - ： Name_Not_Found [sage] 2020/08/17(月) 22:28:39.99ID:???
- こっちが想像してるページと同じかどうか怪しいが
本当に隅々まで読んで分からないなら
もう諦めた方がいいレベルの話だな - ： Name_Not_Found [] 2020/08/18(火) 10:15:07.51:FvIbKlnm
- wordpressでコードを折りたたみたいのですが、アドオンを使わずに折りたたむ事はできるでしょうか？
- ： Name_Not_Found [] 2020/08/18(火) 11:38:31.41:FvIbKlnm
- ↑上に関連してですが、wordpressなどでコードを表示するアドオンがありますが、ここにスクロールを設定するのが普通なんでしょうか？
- ： Name_Not_Found [sage] 2020/08/18(火) 12:31:01.42ID:???
- 質問する前にスレタイ読め
- ： Name_Not_Found [sage] 2020/08/18(火) 12:41:33.96ID:???
-
WordPress(ワードプレス)でWebProg 質疑応答スレ 01
ttps://medaka.5ch.net/test/read.cgi/php/1324538866/ - ： Name_Not_Found [sage] 2020/08/20(木) 18:34:09.14ID:???
- タブレットの縦長、横長、スマホの横はpcの縮小版、スマホの縦はレスポンシブで表示させたい場合、
ブレイクポイントはどのあたりに設定すれば良いでしょうか？ - ： Name_Not_Found [sage] 2020/08/20(木) 21:47:26.56ID:???
- その辺は現在色々出てる各フレームワークを見れば大体わかるんじゃないかな？
- ： Name_Not_Found [sage] 2020/08/20(木) 22:18:09.15ID:???
- ちゃんとCSSフレームワークって言ってあげないと無駄にAngularとかのコード完全解析しそうな予感
- ： Name_Not_Found [sage] 2020/08/20(木) 22:51:21.67ID:???
- 786px以上でいけんちゃん
- ： Name_Not_Found [sage] 2020/08/20(木) 23:50:49.19ID:???
-
cssフレームワークは使わず、
自分でcssを書こうと思っています。
ありがとうございます。
そのあたりで試行錯誤したいと思います。 - ： Name_Not_Found [sage] 2020/08/21(金) 03:21:29.59ID:???
-
フレームワーク使わなくてもいいから平均値とかわからないなら
一度それらが使ってる数値を見て参考にしとけばってこと - ： Name_Not_Found [sage] 2020/08/21(金) 07:35:01.18ID:???
- role属性ってつけると、ブラウザが解釈して何かUIなどが変わったりするの？
検索エンジンのための意味付けのようなもの？ - ： Name_Not_Found [sage] 2020/08/21(金) 10:34:02.96ID:???
-
WAI-ARIAの基本 - ウェブ開発を学ぶ | MDN
ttp://https://developer.mozilla.org/ja/docs/Learn/Accessibility/WAI-ARIA_basics
> WAI-ARIA 属性の重要な点は、ブラウザーのアクセシビリティ API（スクリーンリーダーはここから情報を取得する）によって提供される情報を除いて
> それらはウェブページに何の影響も与えないという点です。
> WAI-ARIA はウェブページの構造や DOM に影響を与えませんが、 CSS の要素選択で利用することが可能です。 - ： Name_Not_Found [sage] 2020/08/21(金) 16:49:37.03ID:???
-
レスどうも、WAI-ARIA見てみました(全然わからん)
divやspanなど、そのものの意味が無いものに対して付加するのが始まりって感じ？
<header role="banner">とか
<nav role="navigation">とかソース見るとあるけど、「ある」と「無い」でどこに違いが出るの？
cssの要素選択ができるということはclassみたいな扱いができるってことかな。
header.bannerみたいな。
たくさんできた仕様で現在ではあまり使われていないものなのかな。 - ： Name_Not_Found [sage] 2020/08/21(金) 17:43:44.64ID:???
-
WAI-ARIAは「Web Accessibility Initiative - Accessible Rich Internet Applications」の略
Webアクセシビリティとかで調べてみるといい
あとは、こういうのとか
WAI-ARIAを活用したフロントエンド実装 - role属性、aria属性の基礎知識 | CodeGrid
ttps://app.codegrid.net/entry/wai-aria-1
CSSの要素選択は、その例だとセレクタはheader[role="banner"] - ： Name_Not_Found [sage] 2020/08/21(金) 19:17:33.34ID:???
- アクセシビリティを外観にまつわる機能として判断してるようじゃ理解できないだろうな
むしろ目が見えない人などのために存在してるんだから - ： Name_Not_Found [sage] 2020/08/21(金) 23:18:35.68ID:???
- アクセシビリティといえば
日系企業ランキングを思い出す…
あの惨劇はもう10年以上前だったろうか - ： Name_Not_Found [sage] 2020/08/22(土) 12:15:02.67ID:???
-
Bootstrap のブレイクポイントの変数定義では、
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default; - ： Name_Not_Found [sage] 2020/08/22(土) 15:49:36.30ID:???
-
今はもっと少なくても良さそうなもんだ - ： Name_Not_Found [] 2020/08/22(土) 16:07:41.99:UFsz4By5
- ttp://http://www.hook-net.jp/smee/haremkingdom/fd/
こちらのサイトのように画像と文字の境界線をなくすためにはjsが必要でしょうか? - ： Name_Not_Found [sage] 2020/08/22(土) 16:20:43.37ID:???
- ちょっと何言ってるか分かんない
- ： Name_Not_Found [] 2020/08/22(土) 17:47:35.91:UFsz4By5
-
すみません画像と文字を一つのボックスに横並べして画像のふちを白でぼかしたいんですが
その場合グラデーションを使えばよいのでしようか？ - ： Name_Not_Found [sage] 2020/08/22(土) 17:59:50.30ID:???
- 手っ取り早いのが縁を白でぼかした画像を作成すること
- ： Name_Not_Found [sage] 2020/08/22(土) 18:04:22.71ID:???
- だよな。レイアウトはもちろんテーブルタグだ
- ： Name_Not_Found [sage] 2020/08/22(土) 19:46:47.81ID:???
-
惨劇ってなんすか？ - ： Name_Not_Found [] 2020/08/22(土) 21:30:44.60:UFsz4By5
- ttp://https://codepen.io/sadsfff/pen/abNBrrM
グラデーションをつけて片側をすけさせることまでできたのですが同時に画像をぼやけさせることができません。
ttp://https://cruw.co.jp/blog/2019/02/css-blur/ この場合+を使うと実装できますか? - ： Name_Not_Found [] 2020/08/22(土) 21:40:24.27:UFsz4By5
- 画像にfilter: blur(5px);を加えると境界線ができグラデーションの意味がなくなってしまいます
グラデーションと画像ぼかしを境界線が見えない形で実装できないのでしょうか… - ： Name_Not_Found [sage] 2020/08/22(土) 21:41:44.74ID:???
- またこのひとか
- ： Name_Not_Found [sage] 2020/08/22(土) 23:00:59.38ID:???
- 上に透明なdiv重ねてそのdivにbackdropfilter blurかけりゃいいじゃん
- ： Name_Not_Found [] 2020/08/22(土) 23:53:26.90:0lfiVAzr
- すみません、htmlとjava初心者です。
こちらの質問の
ttp://https://teratail.com/questions/286638#reply-406826
背景の赤い枠を下まで伸ばすにはどうしたらいいか教えてください - ： Name_Not_Found [] 2020/08/23(日) 00:08:29.81:wdKbLCbE
-
100vhでどうよ - ： Name_Not_Found [sage] 2020/08/23(日) 00:10:12.16ID:???
- まったく関係ないいんだけど
529を見て知りたかったことあったので
ttp://https://cruw.co.jp/
このページみたいに
画像が出てから色が出てシュッとなるやつって
jQだと思うんだけど説明してるサイトとかってありますか？
これのネーミングなんて言えばいいのかわからなくて
ググってもイメージ通りものにたどり着かなくて - ： Name_Not_Found [sage] 2020/08/23(日) 00:11:13.26ID:???
- ↑
画像が先に出てからじゃないや
色がでて画像がでてくる - ： Name_Not_Found [] 2020/08/23(日) 00:13:05.42:1JN6CSRO
-
.item {
display: inline-block;
width: 30%;
height: 100vh;
margin: 10px;
font-size: 20px;
background: rgba(255, 0, 0, 0.4);
}
としてみたのですが変化なしですね・・ - ： Name_Not_Found [sage] 2020/08/23(日) 00:50:36.54ID:???
- intersectionobserberで擬似要素と画像をコントロールしとんちゃうか
- ： Name_Not_Found [sage] 2020/08/23(日) 01:56:32.50ID:???
- さよか
- ： Name_Not_Found [sage] 2020/08/23(日) 05:04:32.52ID:???
-
審査員のひとりに
富士通のアクセシビリティに一家言ある人がいて
数年後に控えたJIS X 8341-3を
勝手に前倒しで審査項目に導入したので
ほとんどのサイトのランクが
前年と比べて100、200以上変動した
上がったところはいいけど
下がったところは代理店も制作会社もそれなりに
上からお叱りやペナを受けることになって非難轟々
その年を最後に日経企業サイトランキングは消滅した
という昔話です - ： Name_Not_Found [sage] 2020/08/23(日) 07:45:31.76ID:???
- この世界じゃよくあることだ
すぐ収まるのもこの世界らしい - ： Name_Not_Found [] 2020/08/23(日) 09:36:05.13:obkittuk
- Web系に転職したく勉強をしています
モバイル用にハンバーガーメニューを設置したいのですが、
HTMLにPC用とモバイル用で別のnavを2つ設置してメディアクエリで
それらの表示を切り替えるのはありでしょうか
それとも重複的な記述はHTML的にはよろしくないのでしょうか - ： Name_Not_Found [sage] 2020/08/23(日) 10:00:48.59ID:???
- HTMLとしてはわりとどうでもいいというか
そこまで気にするもんでもないと思うが
運用する上で同じものが二つあるのは厄介だな
片方忘れられたりするリスクがある - ： Name_Not_Found [sage] 2020/08/23(日) 11:59:10.13ID:???
- サーバサイドで書き換え
- ： Name_Not_Found [sage] 2020/08/24(月) 00:06:32.19ID:???
- HTMLって勉強するようなものか？
- ： Name_Not_Found [sage] 2020/08/24(月) 00:40:37.85ID:???
- はい
- ： Name_Not_Found [sage] 2020/08/24(月) 02:05:40.81ID:???
-
あなたはこの世に生まれた状態ですでにhtml5を話すことができていたのですか？ - ： Name_Not_Found [sage] 2020/08/24(月) 02:27:41.51ID:???
- HTMLで会話はしないだろ
- ： Name_Not_Found [sage] 2020/08/24(月) 03:01:34.71ID:???
-
はい - ： Name_Not_Found [sage] 2020/08/24(月) 03:48:49.29ID:???
-
それは素晴らしい
これからもhtml5の布教に努めなさい
ブッダより - ： Name_Not_Found [sage] 2020/08/24(月) 03:56:51.14ID:???
- レスポンシブ対応には、Bootstrap
- ： Name_Not_Found [sage] 2020/08/24(月) 18:14:16.89ID:???
- idやclass名にアンダースコアやハイフンって
一般的には使っていいのでしょうか？
アンダースコアって使わないほうが良いですか？ - ： Name_Not_Found [sage] 2020/08/24(月) 19:14:25.87ID:???
-
はい - ： Name_Not_Found [sage] 2020/08/24(月) 19:57:04.32ID:???
-
使っていいよ - ： Name_Not_Found [sage] 2020/08/25(火) 00:26:13.97ID:???
-
場合による - ： Name_Not_Found [sage] 2020/08/25(火) 00:38:04.25ID:???
-
ええで
ただ人によってアンダーバー派閥とハイフン派閥に分かれるので
人に渡す時は気をつけな - ： Name_Not_Found [sage] 2020/08/25(火) 11:25:39.08ID:???
- アンダースコア、クラス名で使いすぎると
一定数以上は無効になったりしたんだけど
今は大丈夫なん？
それ経験してからは、自分で命名規則決められるとこではラクダ型にするうにしてる
ハイフンはダブルクリックでコピーしにくいし - ： Name_Not_Found [sage] 2020/08/25(火) 11:38:54.49ID:???
- すみませんHTML/CSSの勉強を始めてまだ一か月弱の初心者なのですが
最近練習でメニューバーを作るのですがリストの箇条書き「・」の部分を
CSS display:blockで適用すると「・」が消えて
さらに list-style-type:none;で消すと 「・」消えるんですが
display:blockとlist-style-type;none;
どちらが一般的なのでしょうか
よろしくお願いいたします。 - ： Name_Not_Found [sage] 2020/08/25(火) 11:49:25.19ID:???
- display:;はリストのマーカー消すためのプロパティじゃないからマーカー消す目的なら後者
- ： Name_Not_Found [sage] 2020/08/25(火) 12:04:02.31ID:???
-
素早い回答ありがとうございます。
メモしたので覚えておきます。 - ： Name_Not_Found [sage] 2020/08/25(火) 12:27:18.27ID:???
- なぜdisplay:blockで消えるのかという疑問を抱かないからお前はその程度なんだよ
- ： Name_Not_Found [sage] 2020/08/25(火) 12:30:26.34ID:???
- 疑問はすでにあったけど、消える原理が分からんから放置してた
- ： Name_Not_Found [sage] 2020/08/25(火) 12:32:27.24ID:???
- 消える原理ググったら納得したので解決した
- ： Name_Not_Found [sage] 2020/08/25(火) 12:35:41.52ID:???
- 優しく答えるスレなんだから優しく答えてやれよ
- ： Name_Not_Found [sage] 2020/08/25(火) 23:31:08.52ID:???
-
BEMとかいうクソ妖怪人間のせいでアンダースコア
ダブルアンダースコアとかいう宗教が増殖してて嘆かわしいよな - ： Name_Not_Found [sage] 2020/08/25(火) 23:32:12.28ID:???
- なんでブロックになると消えるのかいまだに理由はよく知らない
- ： Name_Not_Found [sage] 2020/08/26(水) 00:46:02.59ID:???
- たしか、liを検証ツールで見るとinline-blockでもblockでもinlineでもなかったような気がする。inline-blockもしくはinlineでも消えるっけ？
明日試してみよう。おやすみ - ： Name_Not_Found [sage] 2020/08/26(水) 03:11:08.01ID:???
-
消えてはいないんだ
見えていないだけなんだ
心の目（開発ツール）を駆使してよーく見るんだ - ： Name_Not_Found [sage] 2020/08/26(水) 05:32:51.11ID:???
-
__, --、つまり、2つ連続で使う時だけは、BEM, MindBEMding のルールに従うこと！
BEMは、Block, Element, Modifier
B__E, B__M
E--M - ： Name_Not_Found [sage] 2020/08/26(水) 06:41:55.75ID:???
-
それ7年ぐらい前にファイル名でやってる人いたな・・
意識高い系で会社散々かき回して、鬱になってやめたけど、アンダースコア2つ並んだのは見たことが無かったから
色々大変だったわ。 - ： Name_Not_Found [sage] 2020/08/26(水) 09:41:30.60ID:???
- 意識高いというかADHDだったのでは？
- ： Name_Not_Found [sage] 2020/08/26(水) 17:23:41.67ID:???
- アスペルガーやね。
自分のルールを押し通そうとして、上手くいかなかったら発狂するタイプ
職人気質だけど社会的協調はできないのがアスペの特徴 - ： Name_Not_Found [sage] 2020/08/27(木) 00:50:05.03ID:???
- Wアンダースコアー嫌い
- ： Name_Not_Found [] 2020/08/27(木) 22:08:03.00:9NHxOE+D
- ttp://http://www.hook-net.jp/smee/haremkingdom/fd/
すみませんボックスの中に画像を入れて画像をボックスの枠から少しはみ出させたいのですが。その際にボーダー戦を残すことができません。
opasityでは線が薄くなってしまいます、解決策はありますか？
ttp://https://codepen.io/sadsfff/pen/abNBrrM - ： Name_Not_Found [sage] 2020/08/27(木) 22:49:26.57ID:???
- 参考サイトのどの部分のことを言っているのか分からないぞ
STORYのところ？ - ： Name_Not_Found [] 2020/08/27(木) 23:27:16.19:9NHxOE+D
-
すみません、ストーリーの部分です。 - ： Name_Not_Found [sage] 2020/08/28(金) 00:01:59.22ID:???
- レスポンシブについての質問です
サーバーにアップロードしてスマートフォンで確認したらきちんと対応出来ていますが
Chromeの横幅を小さくしてもタブレットの方は効きますがスマートフォンサイズは効いてくれません
Chromeの横幅を小さくしたらきちんとスマートフォンの表示を出来るようにしたいので、考えられる原因を教えてほしいです。
使用しているviewportとメディアクエリの設定です
<meta name="viewport" content="width=device-width,initial-scale=1">
@media screen and (max-width: 1024px) { ｝
@media screen and (max-width: 480px) { ｝ - ： Name_Not_Found [sage] 2020/08/28(金) 00:10:58.14ID:???
-
自己解決しました - ： Name_Not_Found [sage] 2020/08/28(金) 00:49:21.11ID:???
- headerタグは必ず入れないといけないのでしょうか？
- ： Name_Not_Found [] 2020/08/28(金) 01:03:20.77:5scTvCil
-
デロッパツールで見ても分かりません ボックスシャドウで画像と同じ色をボーダー線に重ねてある可能性もあったのですが。
重なり合った時のみボーダーを付けることなど可能なのでしょうか - ： Name_Not_Found [] 2020/08/28(金) 01:14:32.10:5scTvCil
- 一つ考えたのですが、画像を透過(opacity)でボーダーを目立たせようとすると今度は画像が薄くなってしまう。
そこで画像の透明度はなるべく抑えてボーダーにシャドウを付けてみるというのが正解だと思いました。あってますでしょうか？ - ： Name_Not_Found [sage] 2020/08/28(金) 01:59:56.13ID:???
- png画像が半透明になってるんじゃないの
- ： Name_Not_Found [] 2020/08/28(金) 02:12:30.93:aUSiMZq2
-
確かに！画像の背景をよく見ると半透明加工のようなものが見えますね - ： Name_Not_Found [sage] 2020/08/28(金) 02:19:45.51ID:???
- 可能だからって何でもかんでもCSSでやるのは
時間の無駄ってことがよく分かるな - ： Name_Not_Found [sage] 2020/08/28(金) 03:36:35.84ID:???
- まあ何ができて何ができないとかこれやったら他にどういう影響が出るかそれもまた勉強ってことよｗ
ノウハウはこうして蓄積されていくわけで - ： Name_Not_Found [sage] 2020/08/28(金) 05:12:15.12ID:???
- pcのfirefoxとiphoneのsafariしか確認していないけど、
safariだけmarginかpaddingで意図通りにならない時ってある？
今は直ったんだけど、marginかな・・ - ： Name_Not_Found [] 2020/08/28(金) 12:30:46.70:aUSiMZq2
- ttp://https://www.peko-step.com/tool/alphachannel.html こちらのサイトを使って背景を透過させてみるとボーダー境界線は
残り文字をはっきり残すこともできました。ところが重ねた部分のボーダーが消えています。
参考サイトの文字をttp://https://www.peko-step.com/tool/alphachannel.htmlにドロップしてみると、背景を不透明に加工しているものと別に画像の文字も透過されておりました。
画像文字の透明度を変更せずに文字の中のみ透過させる方法を模索してます。 - ： Name_Not_Found [sage] 2020/08/28(金) 13:44:25.54ID:???
-
特に - ： Name_Not_Found [sage] 2020/08/28(金) 14:19:01.94ID:???
-
％がよろしくないのかなーと思ったことはある
特に右側 - ： Name_Not_Found [sage] 2020/08/29(土) 14:51:51.23ID:???
- 凄い初歩的な質問かもしれませんが
<divclass="form-group">の
form-group て別にこれにしないといけない理由てあるんですか？
これ自体に効果はないですよね？ - ： Name_Not_Found [sage] 2020/08/29(土) 15:24:58.57ID:???
- ない。
ない。 - ： Name_Not_Found [sage] 2020/08/29(土) 15:44:21.97ID:???
-
そうなんですね
一応フォーム作成しますよって意味でただClassに何組みたいなもんで儀礼みたいなものと解釈していいんですよね？
この値なんだろうと思って2時間以上調べてたんですけど出てこないんで困ってました。 - ： Name_Not_Found [sage] 2020/08/29(土) 15:48:49.90ID:???
- .form-groupがCSSで定義されていれば効果はあるし、定義されていなければ効果はない
bootstrapやbootstrapとの互換を謳うフレームワークでは定義されていることもあるから、class="form-group"を宣言しないとデザインが崩れたり、変わったりする可能性は普通にある - ： Name_Not_Found [sage] 2020/08/29(土) 16:48:04.72ID:???
-
ありがとうございます。
もっと調べてみたらありました。
どうやら、ラベルやフォーム部分をグルーピングし、余白などの見た目を整えてくれる。と書いてありました。 - ： Name_Not_Found [sage] 2020/08/29(土) 18:11:44.19ID:???
- <!--[if lt IE 9]>
もうこの時代、そろそろこの仕組みっていらないよね？ - ： Name_Not_Found [sage] 2020/08/29(土) 18:28:56.56ID:???
-
それは個人で決めることよ - ： Name_Not_Found [sage] 2020/08/29(土) 18:58:55.99ID:???
-
ぉぅ、悩んでみるわ。
でもIE9なんてアクセス無いしなぁ - ： Name_Not_Found [sage] 2020/08/29(土) 19:12:53.95ID:???
- h1って1ページ1個というのはhtml5の時代でも同じですか？
ロゴにh1を使ったら、sectionやarticle配下にはh2から使うべきでしょうか？
それともsectionやarticleごとにh1, h2と使うべきでしょうか？ - ： Name_Not_Found [sage] 2020/08/29(土) 19:40:53.00ID:???
-
これとか読んでみるといいかも
HTMLのセクションとアウトラインを理解する
ttps://dekiru.net/article/12895/ - ： Name_Not_Found [sage] 2020/08/29(土) 20:00:04.68ID:???
-
読んで見ました。
ざっくりした部品ごとにh1から降りていっても良い、という感じですね。
どっちでも良いとなると迷いますね
引き継いだ内容(前任は蒸発)
よくある左上のロゴがH1になっていて、そのbackground-imageで画像を指定、テキストは-9999px移動をしているのですが、
imgタグを使うのと何が違うのでしょう？
imgタグにはロゴの意味付けがないからh1を使ってロゴに意味付けをしたということかと推測しますが、
これは現代風のやり方なのでしょうか？ - ： Name_Not_Found [sage] 2020/08/29(土) 22:59:55.60ID:???
- よくあるような画像の横にテキスト複数行のレイアウトを
flexで行う場合について質問です。
--------------------
｜画像｜ テキストテキストテキスト
｜ ｜ テキスト
--------------------
今まで画像エリアとテキストエリアの横幅をそれぞれ%で指定していたのですが、
画像エリアの横幅のみを指定しても崩れない方法ありますか？
<div class="flex">
<p class="left"><img src="hoge.png"></p>
<p class="right">あああああああ</p>
</div>
<div class="flex">
<p class="left"><img src="hoge.png"></p>
<p class="right">あああああああああああああああああああああああああああああああああああああああああああああああ</p>
</div>
テキストエリアも横幅指定しないとテキスト量によって画像エリアが狭くなったりしてしまいます。 - ： Name_Not_Found [sage] 2020/08/29(土) 23:08:03.89ID:???
-
よくやるけど
あんまり深く考えてないよ
どうとでも振る舞えるので少し楽かな、くらい - ： Name_Not_Found [sage] 2020/08/29(土) 23:09:34.31ID:???
-
テキストの方は
calc(100%-画像幅px)
じゃダメかね？ - ： Name_Not_Found [sage] 2020/08/29(土) 23:18:14.41ID:???
-
.left { flex:none }でどう？ - ： Name_Not_Found [] 2020/08/29(土) 23:21:11.27:4QaaxTss
- Font Awesomeのアイコンを要素の途中に入れることは可能でしょうか? ttp://https://cree.fun/2917/
上記サイトの最近のコラムのように作りたいのですが、矢印をFont Awesomeで代用するつもりです。
子テーマを自作してheader.phpにもキットコードは書いてます。
通常<i class="fas fa-arrow-right"></i>で呼び出せるはずですが<div>flexの中に挿入できますでしょうか? - ： Name_Not_Found [sage] 2020/08/29(土) 23:28:57.91ID:???
-
.flex{display:flex;flex-flow:row nowrap;}
.left{flex:0 0 30%;}
.right{flex:0 0 auto;} - ： Name_Not_Found [] 2020/08/30(日) 00:28:33.64:u2wvgT27
- ttp://https://codepen.io/sadsfff/pen/abNBrrM
すみませんコードはこれであっているはずなのに</a>たぐがいらないとwordpressから言われます、消したらレイアウトが崩れてしまうのですが、どこがダメなのでしょうか? - ： Name_Not_Found [sage] 2020/08/30(日) 00:57:34.23ID:???
-
合ってない - ： Name_Not_Found [sage] 2020/08/30(日) 10:51:28.93ID:???
-
a helf？ - ： Name_Not_Found [] 2020/08/30(日) 18:25:31.77:u2wvgT27
- ttp://http://www.fmovie.cfbx.jp/ 親テーマのphpファイルにhtmlを直接書いたのですが、ロードしたときにp要素がむき出しになってしまいます。
原因はわかりますでしょうか? - ： Name_Not_Found [] 2020/08/30(日) 18:28:03.81:u2wvgT27
- ttp://https://codepen.io/spc-blog-nakamura/pen/mqRVoO
ソースはこちらです - ： Name_Not_Found [sage] 2020/08/30(日) 18:47:54.59ID:???
- 質問の意味が分からない
- ： Name_Not_Found [sage] 2020/08/30(日) 18:49:16.08ID:???
- いい加減そろそろコテハンつけてくれない？
- ： Name_Not_Found [sage] 2020/08/30(日) 18:52:29.31ID:???
- とりあえずスレ違いだから
WordPressスレで聞いた方が早い気はする - ： Name_Not_Found [] 2020/08/30(日) 19:07:55.38:rxkpfiM8
- データベースのGUIクライアント管理ソフトの、閲覧機能だけを提供するようなwebサイトを
作るのに適したサービス、ツール、フレームワーク等はないでしょうか？
目的としては自前で管理しているデータベースを外部ユーザーに公開したいのですが
その際簡易的な全文検索だけでなく各項目の条件を厳密に組み合わせて検索したり
結果を表形式で提示したりしたいです
最悪フルスクラッチでやる覚悟はありますが
既存のサービスやフレームワークで良いものがあれば紹介して頂けると助かります
私の技術レベルはnode.jsとpostgresqlを使用した簡易的なサイト作成を自力でしたことがある程度です
若干スレの範疇からはオーバーする内容だとは思いますがここまで広範な質問内容だと
ガッチリはまる質問スレが見つからなかったのでweb制作関連で一番基本的なこちらのスレで質問させて頂きました - ： Name_Not_Found [sage] 2020/08/30(日) 19:18:57.04ID:???
- スレチ過ぎ
- ： Name_Not_Found [sage] 2020/08/30(日) 19:31:35.30ID:???
- 一般的なECショッピングサイトが、「データベースを外部ユーザーに公開している」状態だから、検索・閲覧・購入機能が実現できているよね？
どう表示させるか、とか、どう検索できるか、はサイトによるだろうけど、基本的なところは共通してるし要件を満たしているのでは？
そういうサイトはどういう技術が使われているか調べれば同じように参考に出来るのでは？ - ： Name_Not_Found [sage] 2020/08/30(日) 19:39:30.11ID:???
- BIツールみたいなのを期待してるのかな
- ： Name_Not_Found [sage] 2020/08/30(日) 20:11:07.56ID:???
- CSS3はいつCSS4になりますか？
- ： Name_Not_Found [sage] 2020/08/30(日) 20:34:32.52ID:???
-
phpMyAdminから
書き込み機能を削ればいいんでない？ - ： Name_Not_Found [sage] 2020/08/30(日) 21:03:32.60ID:???
-
Drupalでいいんじゃね
使えるならだけど - ： Name_Not_Found [sage] 2020/08/30(日) 21:28:51.30ID:???
- そんなもんフロントでjs用のdbクライアントライブラリ使ってあとはui実装するだけじゃんアホくさ。
- ： Name_Not_Found [sage] 2020/08/30(日) 21:29:48.91ID:???
- 大先生が来たぞ！
- ： 615 [] 2020/08/31(月) 00:19:34.72:IQPbkJR0
- 皆さんご意見ありがとうございます
ひとまずさん、さんが具体的な名前を出して下さってるので
それから調べてみようと思います - ： Name_Not_Found [sage] 2020/08/31(月) 06:15:40.35ID:???
- ハンバーガーメニューを調べていると
どこもcssで横棒をbefore, afterで三本並べているのですが、
画像やfont awesomeとかは使わなずにCSSだけで実現するほうが良いの？ - ： Name_Not_Found [sage] 2020/08/31(月) 06:53:37.07ID:???
-
好みの問題じゃね？
俺はほぼ使わんな、fontawesome
棒３つ並べてクルクル回すくらいなら
やることに流行り廃りも少ないから
以前書いたのモジュール化して貼るだけで済むしね - ： Name_Not_Found [sage] 2020/08/31(月) 06:56:51.11ID:???
-
どっちがいいと一概に言えるものでもないと思うけど、
cssさえ読み込んでいれば表示される、というメリットはあるのではなかろうか - ： Name_Not_Found [sage] 2020/08/31(月) 09:48:23.12ID:???
-
まあブラウザの影響を考慮すると画像でやるよりCSSでやった方がやりやすいのもあろうな
最近はアニメーションも凝ったの多くなったし - ： Name_Not_Found [sage] 2020/08/31(月) 10:57:47.55ID:???
-
Ruby on Rails が、すべてのフレームワークの基本。
全文検索は、Elasticsearch とかだろ
「rails 全文検索」で検索！ - ： Name_Not_Found [sage] 2020/08/31(月) 11:08:48.33ID:???
-
意味が分からないけど、
「javascript innerhtml textcontent 違い」で検索！
PHP のスレで聞いた方がよい - ： Name_Not_Found [] 2020/08/31(月) 18:54:14.22:Ve7LqIdX
-
ありがとうございます。ギャラリーページをphpで自作してみます。 - ： Name_Not_Found [sage] 2020/08/31(月) 18:59:26.17ID:???
- リストを入れ子にして以下のようにしたいんだけど、２．のあとに改行が入ってしまいます。
inline-blockを使うと、改行は入らないけど、２．がｚｚｚｚｚの行になってしまいます。
上手い手はありませんか。
１．ａａａａａａａａａａ
２． ・ｘｘｘｘｘ
・ｙｙｙｙｙｙ
・ｚｚｚｚｚ
３．ｂｂｂｂｂｂｂ
４．ｃｃｃｃ - ： Name_Not_Found [sage] 2020/08/31(月) 19:23:51.60ID:???
-
現状、どうやって書いてるの？
ttp://https://jsfiddle.net/aqmb2tgL/ - ： Name_Not_Found [sage] 2020/08/31(月) 20:59:47.56ID:???
-
まさにそのページにあるような結果がほしくて、そのように書きました。
が、それをhtmlファイルにしてブラウザで見ると、「２．」の次の行に「・ｘｘｘｘｘ」が来ます。
IEでもchromeでも。 - ： Name_Not_Found [sage] 2020/08/31(月) 23:02:27.97ID:???
-
IEは確かにそうなるけど、ウチのchrome、edge、firefoxはならないね - ： Name_Not_Found [sage] 2020/08/31(月) 23:20:35.00ID:???
-
それでは、これでどうかね？
ttp://https://jsfiddle.net/aqmb2tgL/1/ - ： Name_Not_Found [sage] 2020/09/01(火) 10:27:27.72ID:???
- どこへ逃げようというのかね？
- ： Name_Not_Found [sage] 2020/09/01(火) 18:23:41.39ID:???
-
俺は棒を3つ作るのがアホくさく感じたからFontawesomeやらSVGやらで対応してる｡
確かにCSSさえ読めれば表示できるというメリットもあるけど､そんなレガシーブラウザの対応はしたくない｡ - ： Name_Not_Found [sage] 2020/09/01(火) 18:26:28.26ID:???
-
Win7のIE11および、Chromeではなります。
バージョン: 85.0.4183.83（Official Build） （64 ビット）
> vertical-align: top;
ありがとう。いけました。
text-topでもいけました。デフォルトはbaselineなんでしょうね。 - ： Name_Not_Found [sage] 2020/09/01(火) 18:57:23.17ID:???
- 一般的にhtmlのIDは大文字から初めて、classは小文字から始めるの？
なにかクセづけたほう良いことある？ - ： Name_Not_Found [sage] 2020/09/01(火) 19:02:02.19ID:???
- JavaScriptでiframeElement.contentDocument.replace(url)した後に、iframeElement.contentDocumentがnullになってしまうんだけど、なんで？
仕方ないからiframeElement.outerHTMLに<iframe ...>を割り当ててからreplaceしてるんだけど気持ち悪いんで
追記
replace取っ払っちゃった
ついでに宣伝 (無保証、そもそもテスト版)
ttp://https://strnote.com - ： Name_Not_Found [] 2020/09/01(火) 19:17:27.75:XD5ej53o
- 質問です｡
いつもCSSフレームワーク使って書いてますが
力をつけるために､次はフレームワーク無しでサイトを作ってみようと思います｡
特に仕事で企業サイト等を作っている方に聞きたいのですが､作る際にCSSフレームワークは何か使ってますか？ - ： 640 [sage] 2020/09/01(火) 19:20:14.19ID:???
- 細かい話だけど、
AbcDef
abc-def
Abc-Def
abc_def
Abc_Def
色々どれが正解かわからないし、世界も無いと思うけど、
宗教や派閥みたいに色々あって悩む・・・ - ： Name_Not_Found [sage] 2020/09/01(火) 20:08:37.12ID:???
- もういっそ日本語使いたい。
- ： Name_Not_Found [sage] 2020/09/01(火) 20:33:12.52ID:???
- レスポンシブのスマホ時に表示されるdivで
<div id="hoge" class="fuga">
divにidとclassが記載されている場合
div.fuga{display: block} だと表示されないけど
div#hoge{display: block}
div#hoge.fuga{display: block}なら表示されるのは仕様？ - ： Name_Not_Found [sage] 2020/09/01(火) 20:36:39.76ID:???
- ごめん自決した orz
- ： Name_Not_Found [sage] 2020/09/01(火) 21:40:59.59ID:???
-
HTMLのidやクラス名は基本小文字
キャメルケースとか使うのはプログラミングの話で、HTMLでは基本使わない
Twitterとかfacebookとか見ればわかるけど、もうクラス名も自動生成する時代で、意味なんてない
大量のdivタグと自動生成された無意味な文字の羅列が使われる時代だから、細かく気にするだけ時間の無駄
コンテンツの充実に頭と時間を使うほうがいい - ： Name_Not_Found [sage] 2020/09/01(火) 21:41:50.35ID:???
-
htmlとCSSで一番普及してるのはkebab-caseだよ
idもclassも大文字は基本的に使わない - ： Name_Not_Found [sage] 2020/09/01(火) 22:51:43.45ID:???
- ケバブ？
肉巻いて焼くあれがモチーフになってるルール？ - ： Name_Not_Found [sage] 2020/09/01(火) 23:18:35.06ID:???
- ハイフンがケバブの串ってことやね
- ： Name_Not_Found [sage] 2020/09/01(火) 23:22:06.67ID:???
-
成仏してくれ - ： Name_Not_Found [sage] 2020/09/01(火) 23:25:16.42ID:???
- 参考。
+ JavaScript の質問用スレッド vol.142 +
ttps://mevius.5ch.net/test/read.cgi/hp/1568622157/939
939 Name_Not_Found sage 2019/12/25(水) 19:25:10.04 ID:???
My big dickみたいに複数の単語から成る名前を識別子にするとき、どうスペースを詰めるかという方法論であり、言語によって強制されてたりどうでもよかったりする。
ちなみにJavaScriptはどうでもいい族。
また言語では強制していないが、コーディングスタイルやはたまた開発チーム内のローカルルールで決められていることもままある。
だからあなたがクリスマスに独りで開発していて、コーディングスタイルなんて気にしない人であれば、全部小文字でもまったく問題ない。
ちなみに…
MY_BIG_DICK 定数用途
my_big_dick 変数用途 スネークケース
MyBigDick jsクラス名など アッパーキャメルケース
myBigDick 変数用途 キャメルケース
my-big-dick CSSクラス名など ケバブケース - ： Name_Not_Found [sage] 2020/09/02(水) 05:18:14.48ID:???
-
ユニコードなら通るんじゃないか？ - ： Name_Not_Found [sage] 2020/09/02(水) 05:31:18.11ID:???
- BEMなんか名前でどこに適応しているCSSなのか位置関係がわかりやすいし良いと思うが
そんなに評判よくないの？ - ： Name_Not_Found [sage] 2020/09/02(水) 08:17:36.15ID:???
- エスペラント語が普及しない理屈と同じようなもんだ
- ： Name_Not_Found [sage] 2020/09/02(水) 09:22:30.49ID:???
- どういう意味やねん
- ： Name_Not_Found [sage] 2020/09/02(水) 10:45:35.74ID:???
- BEM記法も全てのケースで有用というわけではない
特定のエコシステムの中で活躍するもの
なのでその界隈では浸透するけど
そうじゃないところでは全く喋られない
的な話ではなかろか
エスペラント語だって
世界のどこかでは活躍してる（のか？） - ： Name_Not_Found [sage] 2020/09/02(水) 12:50:14.38ID:???
-
に書いてある通り
VSCode の拡張機能・change-case でも見れば？
ttp://https://github.com/wmaurer/vscode-change-case
Ruby on Rails でも、Bootstrap を使うのが多い
YouTube に、たにぐちまことの動画がある - ： Name_Not_Found [] 2020/09/02(水) 17:55:57.11:DViKKMOw
- ttp://https://codepen.io/takayuki-kojima/pen/jXWpYm
要素を横並びにしたいのですが方法がわかりません、どうすればよいでしょうか? - ： Name_Not_Found [sage] 2020/09/02(水) 18:01:04.59ID:???
-
リンク先を見て、その質問の意味が分かると思いますか？ - ： Name_Not_Found [sage] 2020/09/02(水) 18:13:34.61ID:???
-
ふれぇぇぇぇっくす！ - ： Name_Not_Found [] 2020/09/02(水) 20:19:17.23:DViKKMOw
- ttp://https://codepen.io/rohanrit/pen/QPPbzx
ギャラリー画像にスライダーをつけるコンテンツを作りたいのですが、画像クリック後に自動スライダーを設置する場合
どのような要素が必要なのでしょうか? - ： Name_Not_Found [sage] 2020/09/02(水) 20:33:59.20ID:???
- 真っ赤な目
黒いボディー - ： Name_Not_Found [sage] 2020/09/02(水) 20:45:33.71ID:???
- それはライダー
- ： Name_Not_Found [sage] 2020/09/02(水) 20:47:17.41ID:???
- 仮面スライダーブラックフレックス
- ： Name_Not_Found [sage] 2020/09/02(水) 21:16:30.89ID:???
- 正対した相手に向かって跳び上がり、自らの両足で相手頭部を挟み込んで、そのままバク宙のような形で回転しつつ、そうして巻き込んだ相手の脳天をマットに叩きつける
- ： Name_Not_Found [sage] 2020/09/02(水) 21:35:51.35ID:???
- それはフランケンシュタイナー
- ： Name_Not_Found [sage] 2020/09/02(水) 21:39:28.69ID:???
- よく分かったなプオタかよ
- ： Name_Not_Found [sage] 2020/09/02(水) 22:11:19.23ID:???
- オタじゃなくてもそんくらい分かるわ！
- ： Name_Not_Found [sage] 2020/09/03(木) 06:20:08.10ID:???
- ボルトとかつかむヤツな
- ： Name_Not_Found [sage] 2020/09/03(木) 07:20:18.18ID:???
- プライヤーかいな
- ： Name_Not_Found [sage] 2020/09/03(木) 08:25:05.11ID:???
- 髪乾かすやつな
- ： Name_Not_Found [sage] 2020/09/03(木) 08:41:23.54ID:???
- 節子！プライヤーちゃう！ドライヤーや！
- ： Name_Not_Found [sage] 2020/09/03(木) 08:43:46.40ID:???
- キュウリとか大根に使っている時に指まで切っちゃったわ。
- ： Name_Not_Found [sage] 2020/09/03(木) 09:47:41.16ID:???
- それはスライサー
- ： Name_Not_Found [sage] 2020/09/03(木) 09:54:22.74ID:???
- この身体の青は正義の心、赤は悪の心
そう、俺の名は
↓ - ： Name_Not_Found [sage] 2020/09/03(木) 11:27:45.10ID:???
- 待ちたまえ君たち！
- ： Name_Not_Found [sage] 2020/09/03(木) 13:07:21.57ID:???
- しつこい
- ： Name_Not_Found [sage] 2020/09/03(木) 13:57:06.30ID:???
-
キカイダー
メタルダー - ： Name_Not_Found [] 2020/09/03(木) 17:44:25.37:LDFDi8nB
- ttp://https://codepen.io/mmgolden/pen/YrGddm
ギャラリークリック後にcssのみで自動スライドつけることは不可能でしょうか? - ： Name_Not_Found [sage] 2020/09/03(木) 19:30:06.20ID:???
- PCサイトをレスポンシブしようとしているのですが、
レスポンシブ用cssを追加して
@media screen and (max-width: 559px) {
*{
max-width: 100%;
margin: 0;
padding: 0;
}
}
をしてもsectionのpaddingが反応しないのはなぜでしょうか？
この状態で
section{
padding: 0;
}
を足しても変化はないのですが、
cssのパスを厳密に書くとpaddingが0になりますが、そこまで厳格で無くてもcssは効くと思っていたので不思議です - ： Name_Not_Found [sage] 2020/09/03(木) 19:48:02.21ID:???
-
セレクタの優先順位は意識してる？ - ： Name_Not_Found [sage] 2020/09/03(木) 20:14:54.54ID:???
-
セレクタの優先順位・・・聞いたことがあります。
10点、100点とかそういうのですね。
一度調べてみます。
横着してとりあえず
*{
}
で上書きしてから、個別に調整していこうと考えていました。 - ： Name_Not_Found [sage] 2020/09/03(木) 20:59:04.77ID:???
-
コードは見てないけど
こないだ使ったswiperっていの良かったよ そんなに使い込んでないけど
カルッセル以外の動きもいくつか実装されてたし - ： Name_Not_Found [sage] 2020/09/03(木) 21:00:19.19ID:???
-
画面幅が560位上というオチではなく？ - ： Name_Not_Found [] 2020/09/04(金) 02:39:23.94:rTVyuxwM
- レスポンシブのためにviewport宣言書かないとスマホで見た時にCSSでレスポンシブ設定にしてもならないの？
- ： Name_Not_Found [sage] 2020/09/04(金) 15:31:56.28ID:???
- デスクトップファーストかモバイルファーストかによって変わる
- ： Name_Not_Found [sage] 2020/09/04(金) 15:40:31.97ID:???
- 都民ファーストです！
- ： Name_Not_Found [] 2020/09/04(金) 20:06:28.21:rTVyuxwM
- ついでなんだけどHTMLメール作るのってHTMLブラウザで読み込んでそれをコピーしてメール本文に張り付けるだけで出来ちゃうの？
- ： Name_Not_Found [sage] 2020/09/04(金) 20:27:03.66ID:???
- htmlメールがなかったら
かなりのフィッシング詐欺やウイルス被害が防げたのに、
OutlookかOutlook Expressかもしれないけど、どこが一番最初にやり出したんだろうね。 - ： Name_Not_Found [sage] 2020/09/04(金) 22:22:16.31ID:???
-
簡単にやるならそれでOK
ガチでやるなら各種メーラーで確認を - ： Name_Not_Found [sage] 2020/09/05(土) 19:53:59.76ID:???
- jsfiddleなどで任意のサイズの画像を使った例をあげて質問をしたいのですが、
どのように画像を容易すれば良い？
具体的には
<div>
<h1>アイキャッチ</h1>
</div>
でh1のbackgroundに900x244pxのアイキャッチ画像があって
margin: 0;
width: 900px;
height: 244px;
background-image: url('URL');
background-repeat: no-repeat;
text-indent: -99999px;
それをレスポンシブに変えたときに
width: 100%;
max-width: 100%;
height: auto;
background-size: contain;
にすると横幅が可変しても画像の横が170pxぐらいに固定されて右側と下側に余白ができてしまいます。
background-size: coverにすると
横幅に連動しますが、h1の高さが48pxに固定されて下が隠れてしまいます。
imgタグのような縦横比連動にしたいのですが、どのようにすれば良いでしょうか？ - ： Name_Not_Found [sage] 2020/09/05(土) 20:35:45.26ID:???
-
ここでも結構使われてるけど
ttp://https://picsum.photos/
ってのがある
とりあえず、W900xH244の場合
ttp://https://picsum.photos/900/244
を画像のURLとして貼り付ける - ： Name_Not_Found [sage] 2020/09/05(土) 20:39:54.27ID:???
-
ありがとうございます、こういうサービスがあれば良いなと思っていました - ： Name_Not_Found [sage] 2020/09/05(土) 21:47:52.03ID:???
-
ttp://https://jsfiddle.net/809n4g21/
padding-topおよびpadding-bottomを%で指定すると、親要素の横幅に対しての値になる
これを利用すれば、一定のアスペクト比を保つボックスを確保できる - ： Name_Not_Found [sage] 2020/09/06(日) 03:17:27.77ID:???
-
できました！感激です！
afterの疑似要素にされている理由がわからなくて
h1要素に混ぜても動いたのですが、何かafterにするメリットはあるのでしょうか？
あとline-height: 0 があると無いとで余白が大きく違うのですが、
これはh1内の文字が無い「高さ0」の状態で計算されたpadding-bottom(top)が余白として足される仕組みですか？ - ： Name_Not_Found [sage] 2020/09/06(日) 04:43:00.33ID:???
- 前スレでも似たような話があったな
ttp://https://jsfiddle.net/6obtvLkj/
背景画像の比率を保ったまま、レスポンシブ対応する
ttps://taneppa.net/responsive_background_image/ - ： Name_Not_Found [sage] 2020/09/06(日) 23:05:56.49ID:???
- 例えばHTMLとCSSだけでハンバーガーメニュー作るとかよく使うCSSアニメーションだったりなんて物は
仕事にしている人はあらかじめ保存してコピペ手直しで実装できるようにしているんですか？ - ： Name_Not_Found [sage] 2020/09/06(日) 23:17:35.28ID:???
- そうだよ。
ほとんどは、そこらへんのサイトでコピペで使えるなんとか集と同じノリ - ： Name_Not_Found [sage] 2020/09/06(日) 23:24:39.19ID:???
- やっぱりそうですか
仕事で同じものいちから書くなんて手間ですしね
ただ知識の裏付けがないと融通利かなくなるって感じですかね - ： Name_Not_Found [sage] 2020/09/07(月) 02:04:22.87ID:???
- 面倒なやつは時間かければ自分で書けるけど
仕事で使うには効率考えてもあるし
なにより仕事でコード書くとかかったるい面倒だからコピペって感じかなぁ
自分のサイトならいくらでも面倒なコード書くけどね - ： Name_Not_Found [sage] 2020/09/07(月) 02:05:45.24ID:???
- HTMLとCSSのソースは著作権ないんだっけ
プログラムになると特許とかあるから面倒だとかなんだとか - ： Name_Not_Found [sage] 2020/09/07(月) 06:20:54.23ID:???
- どこかのお嬢ちゃんが会社ごっこしているサイトは
ソースでまるパクリがバレたけど、
法的な根拠はどうなんだろうね
楽譜の4小節までokとかあるけど、そんな範疇かもよ - ： Name_Not_Found [sage] 2020/09/07(月) 06:39:11.36ID:???
- HTMLならOKとかJSだからだめとかそういうものじゃない
誰が作っても同じようなものになるものについては著作権は無い - ： Name_Not_Found [sage] 2020/09/07(月) 08:48:36.01ID:???
- プログラムとかパクってもコンパイルするやつならわかんねーし
逆コンパイルしたら違法だし - ： Name_Not_Found [sage] 2020/09/07(月) 10:48:27.37ID:???
- コンパイルされててもパクリ証明はできるし、パクリ検証のためのリバースエンジニアリングは違法でないよ
- ： Name_Not_Found [sage] 2020/09/07(月) 12:36:54.64ID:???
-
Bootstrap で出来ないの？
>楽譜の4小節までokとかあるけど、
そんな決まりはない。都市伝説
最近、米国人が、何音かまでのすべての組み合わせを、web で公表した。
公表することで、音の組み合わせを、誰かに独占されることを防ぐ
これによって、誰かに訴えられても、それ以降に作られたものは、大丈夫になった - ： Name_Not_Found [sage] 2020/09/07(月) 13:36:12.58ID:???
- レイアウトに著作権がなく、アイコンとか画像や小説なんかには著作権が発生するんだっけか
- ： Name_Not_Found [sage] 2020/09/07(月) 13:53:30.01ID:???
-
Bootstrapないと何もできないの？ - ： Name_Not_Found [sage] 2020/09/07(月) 15:05:39.40ID:???
- 「このレイアウトは私の思想を表現したものだ！！」と言い張ったら
どこまで話聞いてもらえるんだろうか - ： Name_Not_Found [sage] 2020/09/07(月) 16:36:03.10ID:???
- progateのHTMLの道場コースやってるんだけど、明らかに合ってると思うのに間違ってるって言われるんだけどバグ？
赤い線で囲ってるところを直してくださいって書いてあるもののマス目を表示して確認しても完璧に合ってるようにしか見えない
赤い線で囲ってある部分以外にも全体を何度見直してみても間違いが分からない
何で間違ってる部分の答えを教えてくれないんだろう… - ： Name_Not_Found [sage] 2020/09/07(月) 16:47:26.91ID:???
-
自己解決しました
どうやら背景色の指定が間違ってたみたい
Color Pickで背景色調べたのが間違いだった
rgbaの値は調べられないらしくてrgbの値を入れてたのが原因でした - ： Name_Not_Found [] 2020/09/07(月) 16:49:20.90:JiMj+qCQ
- そこまで出来ててプロゲートやってるんだね
- ： Name_Not_Found [sage] 2020/09/07(月) 18:35:02.34ID:???
- フルスクラッチで正しいHTMLで書いてるやつおるん？
- ： Name_Not_Found [sage] 2020/09/07(月) 18:45:00.00ID:???
- 初心に戻るのはいつでも良いことよ。
俺も今日1年ぶりに有料会員に戻ったけど・・・退会してもカード番号保存されているのかよ、怖いなぁ。 - ： Name_Not_Found [sage] 2020/09/07(月) 20:17:55.86ID:???
- 初心に戻るのはいいけどHTMLとCSSに関してはprogateって特別良いところとかなくね？
むしろ今どきナビをfloatで横並びにしてて微妙に思える - ： Name_Not_Found [sage] 2020/09/07(月) 20:23:44.60ID:???
-
こっそりflexboxコースが爆誕してる - ： Name_Not_Found [sage] 2020/09/07(月) 23:30:52.43ID:???
-
新規で作るならflexboxだけど
古いサイトのメンテなら必ずfloatにぶち当たる
知識として知っておかないといけないやつよ
まぁほぼほぼ100％、IEのせいだけど
あれが駆逐されない - ： Name_Not_Found [sage] 2020/09/08(火) 07:53:51.84ID:???
- cssとかだいぶん慣れてきた感じなんだけど、
jQueryとかjavascriptを使わないならタグにidは使わず、
セレクタもクラスだけで記述した方が良い？
jQueryやjavascriptにて識別するようになって初めて
IDを使うようにしたら良い？
2020年のトレンドがどうかわからないけど、
昔から現場で今もやってる人がいれば教えてくだしあ - ： Name_Not_Found [sage] 2020/09/08(火) 08:27:26.80ID:???
-
結局のところ、働く場所、仕事の内容によって命名規則などのルールは違うから好きにすりゃいいと思う。 - ： Name_Not_Found [sage] 2020/09/08(火) 08:47:42.94ID:???
-
cssのセレクタでタグとクラスしか使わないという硬い意思を持つなら
なにより、getElementByIdなど使わないという硬い意志が必要 - ： Name_Not_Found [sage] 2020/09/08(火) 08:57:21.32ID:???
- 要素のstyle属性、important による指定を除くと、idセレクタを含むCSSはidセレクタを含むCSSでしか上書きできない
ということを踏まえると、
仕事で書くCSSではid使わない方向になりましたね - ： Name_Not_Found [sage] 2020/09/08(火) 09:01:33.34ID:???
-
クラスで代替できるからイラネなのか
じゃJavaScript使うまでは不要になるんだな - ： Name_Not_Found [sage] 2020/09/08(火) 09:31:38.18ID:???
- ページ内リンクもあるよ
- ： Name_Not_Found [sage] 2020/09/08(火) 12:48:37.60ID:???
-
ほとんどの要素にクラスついてるとJSでもクラス名で取得で済むから
id要らないことのほうが多いよ
ページ内リンク用以外では、YouTubeのAPIとか特定のJS用だけしか使わない - ： Name_Not_Found [sage] 2020/09/08(火) 15:05:52.98ID:???
-
良いか悪いかは自分で決めたらいいけど
URI目的以外では
IDなくても特に困ることはないと思うよ - ： Name_Not_Found [sage] 2020/09/08(火) 15:07:14.44ID:???
- あ、いや
for属性とか使うためにもIDは必要だったわ
すまんこ - ： Name_Not_Found [sage] 2020/09/08(火) 15:20:41.55ID:???
- 使わざるを得ない状況の時だけ使えばいいよ
- ： Name_Not_Found [sage] 2020/09/08(火) 16:05:30.39ID:???
- 全部の要素にID付けとくといいよ。
別段困らんし。
付けるときに困るけど。 - ： Name_Not_Found [sage] 2020/09/08(火) 18:17:51.45ID:???
- 719です、色々ご意見ありがとうございました。
使うようになって初めて、その部分にidつけようかなと思います。 - ： Name_Not_Found [sage] 2020/09/08(火) 23:39:39.61ID:???
- そういやこの数年ほとんどid使わなくなったわ
優先順位も結局、細かくクラス名つけりゃいいじゃんで
話終わっちゃうしな - ： Name_Not_Found [sage] 2020/09/09(水) 00:38:52.02ID:???
- です
ありがとう。でもrightにはメンテ性落ちるから画像幅すら指定したくない
ありがと。でもrightに背景色付けるとrightエリアの幅がバラバラにみえちまうね。惜しい
ボックスをテキストが突き抜けるんだけど。
ttp://https://jsfiddle.net/401srjkp/ - ： Name_Not_Found [sage] 2020/09/09(水) 01:51:04.60ID:???
- displayがblockは左右いっぱいの箱からで
inline-blockは左右いっぱいではなく横に並べられる箱という認識で良い？
他に違いってどんなのがある？ - ： Name_Not_Found [sage] 2020/09/09(水) 01:51:49.64ID:???
- × 左右いっぱいの箱からで
○ 左右いっぱいの箱で - ： Name_Not_Found [sage] 2020/09/09(水) 03:31:07.78ID:???
-
.rightのflex: 0 0 auto;をflex: 1 1 auto;に - ： Name_Not_Found [sage] 2020/09/09(水) 06:01:36.64ID:???
- そういやflex: 1 1 auto;はflex: auto;と同義だったな
- ： Name_Not_Found [sage] 2020/09/09(水) 11:46:58.90ID:???
-
ああ、ありがとう！！！！！ - ： Name_Not_Found [sage] 2020/09/11(金) 04:37:35.63ID:???
- レスポンシブ化をするときに
width:100%
を使うと思っていて、
max-width: 100%もあるようですが、
width: 100%でもはみ出て(横スクロールが出て)しまう時はどのような状況でしょうか？
どう使い分ければ良いでしょうか？ - ： Name_Not_Found [sage] 2020/09/11(金) 08:32:23.70ID:???
- 100vwにしよう（提案
- ： Name_Not_Found [sage] 2020/09/11(金) 10:47:29.12ID:???
- 同じくレスポンシブするときに横の幅や余白は%で指定すれば良いのですが、
縦の余白（margin、padding）がスマホとPCでいちいち指定しなくても同じようにできないでしょうか？
vwだとスマホはいいのですが、PCが画面幅バラバラに対応できないとおもうのですが。 - ： Name_Not_Found [sage] 2020/09/11(金) 11:55:02.57ID:???
-
そもそも今の時代、％なんて使われないぞ
CSS2とかbootstrap全盛時代の古いやり方
今はメディアクエリ＋固定幅か、どうしても動的に変化させたい時はflexboxを使う - ： Name_Not_Found [sage] 2020/09/11(金) 12:04:12.50ID:???
- vw は絶対に、文字・画像が読めないまま
絶対に大きさが変わらないから、何も出来ないまま - ： Name_Not_Found [sage] 2020/09/11(金) 13:09:23.68ID:???
-
日本語でOK - ： Name_Not_Found [sage] 2020/09/11(金) 17:51:34.70ID:???
-
例えばどこのサイト？
可変に対応していない方が古く感じるんだが。
その方法だと、決め打ちって事？
スマホ端末やブラウザで横幅が違うんだから最適化できなくない？ - ： Name_Not_Found [sage] 2020/09/11(金) 17:56:18.96ID:???
- うん今、有名どころチェックしたがやはりどこも%で指定だわ。（flexももちろん使って）
の参考サイトが楽しみだわ - ： Name_Not_Found [sage] 2020/09/11(金) 18:16:14.18ID:???
- 738ですが、
vwというのがあるのは勉強になりました。
width:100%とmax-widthの違いって何でしょうか？
どちらもデバイスの横まで一杯になるので何に違いがあるかよくわからないです。 - ： Name_Not_Found [sage] 2020/09/11(金) 18:34:58.38ID:???
-
スクロールバーだったかな
なんか違ってた - ： Name_Not_Found [sage] 2020/09/11(金) 18:51:42.69ID:???
-
困った時のMDN
max-width - CSS: カスケーディングスタイルシート | MDN
ttp://https://developer.mozilla.org/ja/docs/Web/CSS/max-width
とりあえず以下でブラウザの横幅を動かしてみりゃ分かる
ttp://https://jsfiddle.net/yda4mu7z/ - ： Name_Not_Found [sage] 2020/09/12(土) 00:40:42.93ID:???
- max-widthはデカさの最低保証
min-widthは小ささの最低保証 - ： Name_Not_Found [sage] 2020/09/12(土) 05:20:18.36ID:???
-
えっ、逆では？ - ： Name_Not_Found [sage] 2020/09/12(土) 11:20:24.87ID:???
- って思うじゃん
- ： Name_Not_Found [sage] 2020/09/12(土) 14:14:18.32ID:???
-
jQueryはクラスを使うのが一番相性がいい
jQueryはCSSのセレクタを使ってスタイルではなくコードを適用するもの
つまりCSSの使い方とjQueryの使い方は似ているものとなる - ： Name_Not_Found [sage] 2020/09/12(土) 19:29:37.17ID:???
-
idはどういう時に使ってるの？
javascript(jQuery除く)を使わないといけない時？ - ： Name_Not_Found [sage] 2020/09/12(土) 21:05:19.69ID:???
-
URIとして必要な時か
for属性のターゲットとして必要な時じゃなかろか - ： Name_Not_Found [sage] 2020/09/12(土) 21:56:08.10ID:???
-
URI？ブックマークって言うやつ？ - ： Name_Not_Found [sage] 2020/09/12(土) 22:50:44.39ID:???
-
Uniform Resource Identifyer
ネット上のリソースのありかを示す書式のこと - ： Name_Not_Found [sage] 2020/09/12(土) 22:51:47.82ID:???
- ありかじゃないか
リソースを一意に識別するための書式 - ： Name_Not_Found [sage] 2020/09/13(日) 00:58:05.67ID:???
- uriとurlの違いを分かりやすくガンダムで例えて
- ： Name_Not_Found [sage] 2020/09/13(日) 01:02:10.76ID:???
- ジオン軍とジオング
- ： Name_Not_Found [sage] 2020/09/13(日) 01:09:08.31ID:???
- つまりジュディ・オングって事？
- ： Name_Not_Found [sage] 2020/09/13(日) 02:32:41.91ID:???
- クソ面白くない
うまいこと言った気になってるバカを想像すると激寒
早く死ね - ： Name_Not_Found [] 2020/09/13(日) 08:07:22.92:GI9n+iMp
- 質問です
文字を入れるinline-block要素のheightが固定、min-widthが設定されているというとき
まずheightの限界にまでぶち当たってからwidthが広がっていく、というふうにはできないでしょうか？
例 min-width: 1em; max-width:10em; height:3em;のとき
┏━┓
┃ド┃
┃ッ┃
┃グ┃
┗━┛
となってほしいのに
┏━━━┓
┃ドッグ┃
┗━━━┛
とまず横に広がってしまう - ： 762続き [] 2020/09/13(日) 08:14:09.24:GI9n+iMp
- の質問の補足ですが
例えば「あいうえおかきくけこさし」という文字列があったとすると
┏━━━━━━━━━━┓
┃あいうえおかきくけこ┃
┃さし ┃
┗━━━━━━━━━━┛
とmax-width:10em;を先に満たしてしまおうとするのではなく
┏━━━━┓
┃あいうえ┃
┃おかきく┃
┃けこさし┃
┗━━━━┛
とheight:3em;の範囲内で最小のwidthに収まるサイズになってほしいです - ： Name_Not_Found [sage] 2020/09/13(日) 09:00:15.47ID:???
-
縦書きは素直に縦書きしよう（提案 - ： 762 [] 2020/09/13(日) 09:07:18.30:GI9n+iMp
-
すみません、は途中で送信してしまいましたがのほうが肝です - ： Name_Not_Found [sage] 2020/09/13(日) 10:42:51.29ID:???
- そりゃあ
横書きしてんだから
許す限り横に広がるだろ - ： Name_Not_Found [sage] 2020/09/13(日) 10:43:47.26ID:???
- まずは
お前にとって都合の良い改行箇所がどこかを
ブラウザに伝えにゃならんのよ - ： Name_Not_Found [sage] 2020/09/13(日) 12:07:07.74ID:???
-
ありがとうございます。
とても参考になります。
でも偉そうにイメージだけで高説してないで
具体的なコードで示してもらえませんでしょうか - ： Name_Not_Found [sage] 2020/09/13(日) 12:19:00.08ID:???
-
> idはどういう時に使ってるの？
いまはIDは使わない。もともとIDはJavaScriptから参照するときに
速いという特性があった。しかしそれはもう20年以上前の話、1990年代の話
今では体感できる違いが全くなくなった - ： Name_Not_Found [sage] 2020/09/13(日) 12:19:22.53ID:???
-
偉そうだった？ごめん
優しく書いたつもりだったんだが
開業したいところに<br>って書きなよ
繰り返しになっちゃうけど
ブラウザはお前の書いた通りにしか動かないよ
お前の意図までは汲んでくれない - ： Name_Not_Found [sage] 2020/09/13(日) 12:52:56.02ID:???
- > 開業したいところに<br>って書きなよ
ないわーｗ あの要件でこんなことやるやつは素人だろｗ
素人は答えんな - ： Name_Not_Found [sage] 2020/09/13(日) 13:00:41.26ID:???
-
いえいえ こちらこそごめんなさい
ところでテキストにbrって・・デバイス変わったら
それに合わせて改行位置も変わるように対応する意図とずれてませんでしょうか
私の意図汲んで欲しいのはブラウザではなく回答者様なんです......(;;) - ： Name_Not_Found [sage] 2020/09/13(日) 13:03:38.97ID:???
- 質問者よりレベル低い回答者？
- ： Name_Not_Found [sage] 2020/09/13(日) 13:05:12.51ID:???
- 開業届けに<br>って書けばいいんだ
- ： Name_Not_Found [sage] 2020/09/13(日) 13:44:57.16ID:???
-
他にやりようもなくね？
お、あいうえお、で改行するんやな？まかせろ！
なんて実装系、なんかある？ - ： 762 [] 2020/09/13(日) 14:06:22.24:GI9n+iMp
- う、うーん…なんか変な人が住み着いてるようなので去りますね
- ： Name_Not_Found [sage] 2020/09/13(日) 14:12:22.26ID:???
- ウエメセの質問者だな
jsで文字数を取得して3で割って文字数ごとに<br>を挿入するぐらいしかやりようなくね？ - ： Name_Not_Found [sage] 2020/09/13(日) 14:18:24.46ID:???
- brっつーか、要素の幅と高さを動的に変えれば済む話だけどな
どちらにしてもHTML/CSSの話ではない
スレチ - ： Name_Not_Found [sage] 2020/09/13(日) 14:23:09.53ID:???
- 右隣に置いた要素の幅を最大化したら制約を満たす範囲でうまいこと潰れてくれるとかあってもいいのにな。
- ： Name_Not_Found [sage] 2020/09/13(日) 14:41:27.22ID:???
-
わしもそれしか思い付かん - ： Name_Not_Found [sage] 2020/09/13(日) 17:18:54.92ID:???
- 可変のさせ方の質問に対し
固定幅想定のbr回答はおかしい - ： Name_Not_Found [sage] 2020/09/13(日) 19:22:42.18ID:???
-
他にやりようもなくね？
質問の想定していることは
ブラウザのレンダリングにはないものだもの
まるで手で静的に書けといっているようにも見えるが
わりと的確に答えていると思うな
わかってないくせに
それに突っかかる質問者もどうかしてるかと - ： Name_Not_Found [sage] 2020/09/13(日) 19:56:39.02ID:???
-
id="hogehoge"って
昔、同一ページ内のジャンプ内に使っていたけど、
<h2 id="hogehoge">
<a href="#hogehoge">
HTML2, HTML3とかいつからかあったか知らないけど、
本来のidってどういう使い方で生まれたっけ？
いつのまにかjavascriptの変数格納用に使われ出したよね - ： Name_Not_Found [sage] 2020/09/13(日) 20:01:06.31ID:???
-
変数格納に使ったことはないけど
DOMの概念には既にあったよIDは
要素を一意に特定する識別子として
最初に触れたのが96年でそれ以前はわかんないや - ： Name_Not_Found [sage] 2020/09/13(日) 20:09:47.39ID:???
- 既存のサイトに、緊急のお知らせみたいにz-index:10とかで
position: abusoluteで表示させたいとき、
その枠はdiv, span, 他に何か適切なタグってある？ - ： Name_Not_Found [sage] 2020/09/13(日) 20:10:59.92ID:???
-
aside - ： Name_Not_Found [sage] 2020/09/13(日) 20:14:43.52ID:???
-
あ、さいですかー、ありがとう。 - ： Name_Not_Found [sage] 2020/09/13(日) 20:16:45.89ID:???
-
上手いこと言った気になってんじゃねえぞ！ - ： Name_Not_Found [sage] 2020/09/13(日) 20:29:52.68ID:???
-
ごめん・・・ - ： Name_Not_Found [sage] 2020/09/13(日) 23:24:06.92ID:???
- なにをうまいこと
- ： Name_Not_Found [sage] 2020/09/14(月) 01:13:12.57ID:???
- ふふっ
- ： Name_Not_Found [sage] 2020/09/14(月) 06:56:06.67ID:???
- 調子のんなよ？
- ： Name_Not_Found [sage] 2020/09/14(月) 06:57:54.55ID:???
-
これは陰キャ - ： Name_Not_Found [sage] 2020/09/14(月) 09:48:12.19ID:???
- BMI計算サイトみたいなのを作りたい
知識０からなんの勉強すればいい？
htmlとJavascriptってのでいいんですｋ？ - ： Name_Not_Found [sage] 2020/09/14(月) 10:38:47.42ID:???
- いいですよ
- ： Name_Not_Found [sage] 2020/09/14(月) 10:39:12.00ID:???
-
作る必要がないんじゃね？
ttp://https://keisan.casio.jp/exec/system/1161228732 - ： 794 [sage] 2020/09/14(月) 12:45:48.56ID:???
-
ありがとう
他にも計算したいことがあるのよね
将来的には数値を入力してもらって別の表から値を持ってきたりしたい - ： Name_Not_Found [sage] 2020/09/14(月) 14:37:30.12ID:???
- 外側から見て、中身を想像して作ってみるのも
結構勉強になるしね - ： Name_Not_Found [sage] 2020/09/14(月) 16:04:57.00ID:???
- あるから作らなくていいんじゃない
作りたいから作るんだ - ： Name_Not_Found [sage] 2020/09/14(月) 16:39:10.17ID:???
- あ？文句あんの？
- ： 794 [sage] 2020/09/14(月) 16:41:36.42ID:???
- あたりをお手本に勉強してみて
つまづいたらまたきますわー
excelだけの人卒業するやで〜 - ： Name_Not_Found [sage] 2020/09/14(月) 18:19:41.78ID:???
- cssの書式を1行に整形できるサイトってある？
複数行で整形するのはwebサイトや、エディタのプラグインであるけど
サクっと1行にしたい時があって・・・。
エディタの正規表現でもできそうだけど
大量のセレクタがあったら上手くできる自信無いわ。 - ： Name_Not_Found [sage] 2020/09/14(月) 18:20:31.75ID:???
- 1行ってのはセレクタごとね。
1行にするほうが見やすい時があるし。 - ： Name_Not_Found [sage] 2020/09/14(月) 18:34:54.45ID:???
- 置換で\nを消せばいいだけだろ
- ： Name_Not_Found [sage] 2020/09/14(月) 18:56:09.81ID:???
- chromeでソースファイル開いてやるとこになかったっけ
- ： Name_Not_Found [sage] 2020/09/14(月) 19:21:45.59ID:???
-
scssでスタイル指定をcompactにすればいいんじゃね - ： Name_Not_Found [sage] 2020/09/14(月) 23:18:13.33ID:???
- cssを含んだ更新しても反映されないのはスーパーリロードで良いけど、
cssの最低保持期間ってどれくらいなんだろう - ： Name_Not_Found [sage] 2020/09/14(月) 23:39:08.29ID:???
- HTTP キャッシュ - HTTP | MDN
ttp://https://developer.mozilla.org/ja/docs/Web/HTTP/Caching - ： Name_Not_Found [sage] 2020/09/15(火) 04:42:32.30ID:???
- floartを使った左のdivにメニュー、右のdivにコンテンツのサイトで
レスポンシブにしたとき、floatをnoneにすると
メニューが上に来てしまうと思いますが、
htmlが変えずにcssだけでコンテンツを上にすることはできるのでしょうか？ - ： Name_Not_Found [sage] 2020/09/15(火) 05:38:59.44ID:???
- floatスペルミスでした
- ： Name_Not_Found [sage] 2020/09/15(火) 07:35:48.78ID:???
-
gridで - ： Name_Not_Found [sage] 2020/09/15(火) 08:00:58.93ID:???
-
無理。だからhtmlの段階からそれを想定して順番に書くあとは
rightとleftで調整 - ： Name_Not_Found [sage] 2020/09/15(火) 11:10:45.86ID:???
- floatのご利用は計画的に
- ： Name_Not_Found [sage] 2020/09/15(火) 11:58:56.01ID:???
- 上手いこと言った気になってんじゃねえぞ！
- ： Name_Not_Found [sage] 2020/09/15(火) 12:00:42.56ID:???
- SassMeister
ttp://https://www.sassmeister.com/
このサイトで、Sass メニューの、CSS Output を、compact, compressed にしても、1行にならない。
なぜ？
h1{
font-size: 20px;
color: blue;
}
p{font-size:20px;
color:red;} - ： Name_Not_Found [sage] 2020/09/15(火) 13:09:57.26ID:???
-
えー
上下の入れ替えなんてgridで出来んじゃん
IE11でも問題なく - ： Name_Not_Found [sage] 2020/09/15(火) 13:29:25.18ID:???
- flexのorderでも出来るな
入れ替え出来ないとか、いつの時代の話をしているのか - ： Name_Not_Found [sage] 2020/09/15(火) 15:50:59.25ID:???
-
君、わかってない。
floatはレイアウトの為に使うものおして質問してるのに
gridやflexを前提で回答ってズレてるよ。
まあfloatの時代を知らないんだろうから仕方あるまい。 - ： Name_Not_Found [sage] 2020/09/15(火) 15:52:41.31ID:???
- つまりgridやflexを使うレイアウトなのであれば
最初からfloat自体を使わないんだよ。
たぶん意味不明だろうけど、これは最近始めた人には絶対理解できないと思うわ - ： Name_Not_Found [sage] 2020/09/15(火) 16:11:57.28ID:???
- floatでレスポンシブを実現しているサイトで、floatをnoneにした時の話って書いてあるだろうに
文章読めないにも程があるな - ： Name_Not_Found [sage] 2020/09/15(火) 16:19:57.18ID:???
- 今年の7月からHTML/CSSの勉強を始めた者としては
おまえらが呪文を唱えてる様に見えるぜ - ： Name_Not_Found [sage] 2020/09/15(火) 16:27:27.30ID:???
- floatを使った2カラムレイアウトで、スマホ表示時はメディアクエリでfloat: none;にして
divを縦並びにしたけど、その順番を上下逆にしたいって話じゃなくて？
だとすればメディアクエリでgridかflex使えば出来るやん。 - ： Name_Not_Found [sage] 2020/09/15(火) 17:07:43.19ID:???
- メディアクエリでgridかflex使うのがいいと思うけど、
あえてどっちも使わないでやるとしたらposition:absolute使えばできるのかな？
コンテンツの量が増減したら崩れるけど - ： Name_Not_Found [sage] 2020/09/15(火) 17:47:20.93ID:???
- 809です
「htmlが変えずにcssだけでコンテンツを上にすることはできるのでしょうか？」
というのが聞きたいことだったので、
flex, glidを使うことで対応できるということで道が開けました。
flexはちょっとだけ使ったことがあります。
古いサイトの対応にはまだまだ追われそうです。 - ： Name_Not_Found [sage] 2020/09/15(火) 17:54:01.68ID:???
- こういうこと？
ttp://https://jsfiddle.net/L0613t4p/ - ： Name_Not_Found [sage] 2020/09/15(火) 18:08:29.09ID:???
-
もう最高です、思わず失禁しました。
ゆっくりコードを確認したいと思います。
ありがとうございます。 - ： Name_Not_Found [sage] 2020/09/15(火) 18:11:04.89ID:???
-
jsfiddleってスニペット機能ってある？手打ちでhtml打ってる？ - ： Name_Not_Found [sage] 2020/09/15(火) 19:04:00.07ID:???
-
なんでかはここではなく、そのサイトの中の人にきいたらよかろ
おれはこっちで試したら1行にできたけど
ttp://https://sass.js.org/ - ： Name_Not_Found [sage] 2020/09/15(火) 19:15:22.80ID:???
-
テンプレ拾ってきて不要なもん削除して単純化させてもいいんだけど
逆に面倒なので、適当に手打ち
スニペットっていうか初期画面でboilerplateってのは出てくるけど
とりあえず「jsfiddle 2 column layout」とかでググって誰かが作ったのを
探すしかないかも - ： Name_Not_Found [sage] 2020/09/15(火) 20:15:23.68ID:???
-
gridかflex使えるならPCの段階でとっくに使ってるはずで
float使ってわざわざレイアウトやらなきゃいかん状況なのかと思ってたら
俺が間違ってたみたいごめんな
エスパーむずいわ - ： Name_Not_Found [sage] 2020/09/15(火) 20:45:20.67ID:???
- まぁ、html変えずにってcssだけでって条件なら、元のソースを極力いじらずに
既存サイトをどうにか改造したいって話だろうからな
変に深読みしすぎ - ： Name_Not_Found [sage] 2020/09/16(水) 00:06:11.91ID:???
- 10年もののサイトのリニューアルで
HTMLの一部が
今後も使い続けるCMSのプログラム内に
ハードコーディングされちゃってて変えられない
みたいなことやったばかりな俺にタイムリーな話題だ
grid様々だったわ - ： Name_Not_Found [sage] 2020/09/16(水) 00:28:29.32ID:???
- HTMLいじれないCSSの上書きのみでなんとかしろ
っていう案件は結構あるからなぁ
そんなことするより今時なサイトに改修した方がいいですよ
っていうけどお金かかるんでしょ？で聞く耳持たない - ： Name_Not_Found [sage] 2020/09/16(水) 01:53:23.08ID:???
-
gridよりflexのほうが理解しやすいなぁ
orderで優先順位決めるだけだし。
gridってもっと複雑な用途に使うのかな - ： Name_Not_Found [sage] 2020/09/16(水) 03:31:20.22ID:???
-
この程度だったらflexの方が簡単だし楽だね
gridはアイテム同士を結合したり出来るから、もっと複雑なレイアウトが可能だけど
コードが長くなりがちで、ぱっと見で分かりにくいってのはある
でも作るだけならジェネレーターとか使えば楽だよ - ： Name_Not_Found [] 2020/09/16(水) 09:53:28.82:kNtEw5oy
- BEM記法なんだけどElementとModifierは「--」(ハイフン二つ)でつなぐのか「_」(アンダーバー一つ)でつなぐのかどっちだろう。
BEMのサイト？見るとアンダーバー一つになってるけど↓
ttp://https://en.bem.info/methodology/quick-start/
qiitaにはハイフン二つと書いてるのもある↓
ttp://https://qiita.com/Takuan_Oishii/items/0f0d2c5dc33a9b2d9cb1
取り決めが変わったのかな - ： Name_Not_Found [sage] 2020/09/16(水) 10:29:03.59ID:???
- BEM(MindBEMding)についてややこしくない説明をしてみた
ttp://https://qiita.com/masaki632d/items/0e6eb00e9d8611c4d8b7
MindBEMding では、__, -- のどちらも2つを使うことで、
元々の単語内に、1つを使えるようにしている - ： Name_Not_Found [] 2020/09/16(水) 10:54:20.88:kNtEw5oy
-
の一つ目のサイトのModifierのFeaturesに↓が書いてある
＞The modifier name is separated from the block or element name by a single underscore (_).
ElementとModifierをハイフン二つで繋いで作ったのあるからアンダーバー一つに変わるとそれに合わせて完成したのを変更するの面倒だけど
アンダーバーかハイフンかどっちだったか迷うことが自分はあるから、アンダーバーにまとまると迷わなくなって助かる - ： Name_Not_Found [sage] 2020/09/16(水) 13:15:54.59ID:???
- 画面作りの初心者なんで思う事だろうけど
divとかのwidth/height指定に対して、実際の幅がpaddingやらボーダー幅を加算した値になるってのが納得できない
なんでだ？ - ： Name_Not_Found [sage] 2020/09/16(水) 13:32:48.04ID:???
- お前がbox-sizing: border-box;してないから。
- ： Name_Not_Found [sage] 2020/09/16(水) 16:36:47.00ID:???
- おう、ありがとう
- ： Name_Not_Found [sage] 2020/09/16(水) 17:18:43.38ID:???
-
flexは基本的に「並び」のコントロール
だからその順序は縦でも横でも、HTMLに書かれた通りになる
gridは「配置」
昔のテーブルレイアウトをCSSで再現した感じ
要素をどこに配置するのかをCSSで決めるので
HTMLに並び順を支配されない
という違い
複雑であるかどうかは別として
レスポンシブで役立つケースが多いな、自分は
スマホ幅だとどうしても
PCと同じレイアウトで大きさを変えるだけでは
無理な場面があるので - ： Name_Not_Found [sage] 2020/09/16(水) 22:51:07.40ID:???
- box-sizingっていつぐらいから使われだしたの？
- ： Name_Not_Found [sage] 2020/09/16(水) 23:16:32.93ID:???
- 俺も昔はmarginが打ち消し合ってとか面倒臭いことになってたけど、
border-boxとかあったら良かったなぁ - ： Name_Not_Found [sage] 2020/09/16(水) 23:51:09.31ID:???
-
ttp://https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing
これ見ると、chrome10とかsafari5.1とかでベンダープレフィクスなしで
使えるようになってるから、2011年ごろかな - ： Name_Not_Found [sage] 2020/09/16(水) 23:55:16.04ID:???
- CSSなどない時代、テーブルで
レイアウトしてた人にはgridの方が馴染みやすいかも - ： Name_Not_Found [sage] 2020/09/16(水) 23:57:47.50ID:???
-
おっちゃん達は非常に懐かしく感じてる - ： Name_Not_Found [sage] 2020/09/17(木) 00:31:02.12ID:???
- テーブルレイアウトからヒント得て作ったCSSだろうなと思ってる
- ： Name_Not_Found [sage] 2020/09/17(木) 16:58:17.18ID:???
- MDNのWeb ComponentsのUsing custom elementsでサンプルとして出てるpopup-info-box
index.htmlに手を加えて</form>の直後に<popup-info-box>をいれると、formの中に記述してある元々のコンポーネントが動作しなくなる
直後ではなく間に<br>とか入れると動く
これがchrome, firefox, edgeの全てで同じように動かなくなる
だから仕様なんだと思うけど、どういう仕様のために動かないの？ - ： Name_Not_Found [sage] 2020/09/17(木) 17:33:58.80ID:???
-
2つめのpopup-infoの<span class="info">がopacity:0で上の要素に被ってる
そのせいで:hoverが効いてないっぽい
１つめのpopup-info上でinspect elementすると、
２つめのpopup-infoの<span class="info">に行っちゃう - ： Name_Not_Found [sage] 2020/09/17(木) 18:01:28.38ID:???
-
なるほど！opacityを01切り替えて表示させる作りだから実際には消えてないんだ
スッキリ
ありがとうございました - ： Name_Not_Found [sage] 2020/09/19(土) 10:10:42.04ID:???
- ローカルのhtmlで
import xxxx from "./xxxx.js";
するとCORSでブロックされてしまうんですが、回避する方法って
と書いてから検索タグが思い付きました
回避する方法って無いのですね
ダメじゃんモジュール化 - ： Name_Not_Found [sage] 2020/09/19(土) 11:26:05.78ID:???
- 理解度が足りないのを他のせいにするのは人としてどうかと思う
- ： Name_Not_Found [sage] 2020/09/19(土) 12:26:51.29ID:???
-
理解度といわれるならば方法があるのですね
どうかお教えください - ： Name_Not_Found [sage] 2020/09/19(土) 19:50:56.58ID:???
- import自体をやめて大人しくscriptタグ書くなり、ローカルにサーバー環境作るなり、ブラウザの設定を変えるなり、手段は色々あるのにここで文句たれてるから馬鹿にされるんだよｗ
- ： Name_Not_Found [sage] 2020/09/19(土) 20:03:13.81ID:???
- 素人にダウンロードさせて使わせるって可能性を頭から除外していて草
そもそもimport使うのにscriptも知らん奴とか、並のオツムじゃそういう発想は出てこないね - ： Name_Not_Found [sage] 2020/09/19(土) 20:45:37.32ID:???
- ttp://https://www.irasutoya.com/
こういうイラストの発表すHP作りたいんですけど
このサイトってHTMLだけですよね？
作るにあたって最初から作る自信がないので
雛形でいいもの有りませんか？
HTMLは多少理解できる程度です。 - ： Name_Not_Found [sage] 2020/09/19(土) 20:59:19.44ID:???
-
このサイトはbloggerだと思う
<meta content='blogger' name='generator'/>
こういう既存のサービス使うほうが、初心者には良いと思うよ
特に検索に対応とか言い出すとサーバーサイド言語が要るし、言うほど簡単ではない - ： Name_Not_Found [sage] 2020/09/19(土) 23:04:52.35ID:???
- VSCode の拡張機能、open in browser では、ローカルファイル・アクセスだから、CORS 制限あり
file:///C:/Users/Owner/Documents/test.htm
一方、Live Server では、サーバーを立てているから、CORS にならない
ttp://http://127.0.0.1:5500/test.htm
同様に、コマンドプロンプト・PowerShell から、
1-liner で、Ruby で作られた遅いウェブサーバー、WEBrick を起動すると、
ruby -run -e httpd . -p 8080
これも、サーバー経由だから、CORS にならない
ttp://http://localhost:8080/test.htm - ： Name_Not_Found [sage] 2020/09/19(土) 23:28:38.62ID:???
-
じゃあ最初からそう書けよガイジ - ： Name_Not_Found [sage] 2020/09/20(日) 01:18:56.94ID:???
-
ド素人なんですが、Bloggerという無料サイトで作ってるわけですね？
ライブドアブログを持ってるんですけど
それと同じように無料で作れてサイトのアカウントも作れるっていうことでしょうか？
そこにある雛形を作って制作シたのだろうということであってますか？ - ： Name_Not_Found [sage] 2020/09/20(日) 01:32:07.97ID:???
- キーワード教えてもらったら
おうむ返しで聞く前に
ぐぐれかす - ： Name_Not_Found [sage] 2020/09/20(日) 02:11:11.86ID:???
- rubyｶﾞｲｼﾞの発作レスのタイミング笑うわｗｗｗ
- ： Name_Not_Found [sage] 2020/09/20(日) 02:43:40.37ID:???
-
よくある間違いだけど
いきなり完成を目指さないで今手元にあるもので
出来ることからやってった方がいいんじゃない？
bloggerだよって教えてもらったら
とりあえずbloggerのサイト行ってどんなものか試してみてさ
それに何でもかんでも人に聞いてやってたら
出来上がるものは誰かが既に作ったものになって
そんなの自分がやる意味全くないしね - ： Name_Not_Found [sage] 2020/09/20(日) 09:08:46.14ID:???
- >>864
ご忠告ありがとうございます。
勉強してからまた出直してまいります - ： Name_Not_Found [sage] 2020/09/20(日) 12:02:48.75ID:???
- この質問するの正直恥ずかしいんですけど
最近HTML/CSSのレイアウトで、CSSプロパティのpositionを習得して
馬鹿の一つ覚えみたいに見出しから文章の配置をpositionで指定して
後から追加したコンテンツを配置すると見事にレイアウト崩れが起きてしまって
何でもかんでも positionで指定するんじゃないなと身体で覚えました。
文章配置/画像配置/コンテンツの配置は適材適所のプロパティで配置したほうが無難なのでしょうか？
position以外のプロパティも覚えなきゃとは思うのですが
自由に配置したい floatやってもなんかこの位置で配置じゃない！と歯がゆいので
positionを習得したら、ステップアップするために、何を学べばいいのでしょうか
拙い文章で申し訳ありませんが、ご指導のほどよろしくお願いします。 - ： Name_Not_Found [sage] 2020/09/20(日) 12:21:21.84ID:???
- 体系的に学ぶのが手っ取り早いからHTMLとCSSの参考書買おう
- ： Name_Not_Found [sage] 2020/09/20(日) 12:27:25.72ID:???
- なんか覚える順序がおかしいと思う・・・
- ： Name_Not_Found [sage] 2020/09/20(日) 13:44:38.28ID:???
- よっぽどフリーダムなデザインで作りたいのだろうか、、
- ： Name_Not_Found [sage] 2020/09/20(日) 14:07:12.63ID:???
- ホームページのグローバルナビで、要素と要素の間に入れ込むときに、下の要素と被せたいときはどうしたらよい？
今はグローバルナビのスペースが白く隙間になってる状態
よろしくお願いします - ： Name_Not_Found [sage] 2020/09/20(日) 14:43:49.65ID:???
- 何言ってんのかサッパリ分からんから、とりあえず↓にソース貼って
ttp://https://jsfiddle.net/ - ： Name_Not_Found [sage] 2020/09/20(日) 15:39:00.94ID:???
-
そこの要素を指定しているそれの親にさっき出てた例のアレを指定するか、
下の要素に上にいくようにmargin-top:-100pxとかして被せたらいいんじゃないかって思うかも。
でもさっきグオーバルナビのスペースは俺が黒く塗っておいたわ - ： Name_Not_Found [sage] 2020/09/20(日) 15:42:45.07ID:???
-
ケースバイケースでその時々でベターなcssをチョイスして
ジョインしてアサインした時のマインドセットでメンティーされてトゥゲザーしようか - ： Name_Not_Found [sage] 2020/09/20(日) 16:34:34.24ID:???
-
レイアウトに使って良いのはflexとmarginとpaddingだけ、って縛りを付けてレイアウトしてみたら？
だいぶマシになると思うよ
とりあえず、positionはpositionでなければ対処出来ない場合以外は、基本的には使わないって覚えておけばいい - ： Name_Not_Found [sage] 2020/09/20(日) 18:04:48.57ID:???
- 使ったことないけど、
GUIのホームページ作成ソフト(書いてて何か恥ずかしい)で
イラストレーターのように自由に配置できる仕組みって
もしかしたらbodyをrelativeにして、全部absoluteなんだろうか - ： Name_Not_Found [sage] 2020/09/20(日) 18:42:46.26ID:???
- ビルダーのどこでも配置懐かしいなｗ
- ： Name_Not_Found [sage] 2020/09/20(日) 19:04:33.72ID:???
-
そうだよ
後先考えなければなんでもできる
素人もできる - ： Name_Not_Found [sage] 2020/09/20(日) 19:04:37.39ID:???
- fireworksでスライス設定して書き出すとtableで出力されてたな
- ： Name_Not_Found [sage] 2020/09/20(日) 19:14:31.68ID:???
- 2000年頃とか20年くらい前だとテーブルでサイトをレイアウトとか普通にやってるのいたな
- ： Name_Not_Found [sage] 2020/09/20(日) 19:15:08.05ID:???
- flex について、wrap指定して折り返された要素が、折り返されていない要素と同じ大きさになるようするためにいい方法お聞きしてもいいでしょうか
■が横並びにするdiv要素で、幅については最低幅、最大幅の範囲で可変です
理想は
■■■■
■
となり、全ての■が同じ幅になってほしい
ですが、普通にやろうとすると折り返された■は当然最大幅まで伸びてしまいます。
■■■■
■←折り返されたこいつは伸びてしまう
折り返されていない■と、折り返された■を同じ幅にそろえるよい方法などありますでしょうか？
それとも、jsでゴリっとやるしかなさそうですかね - ： Name_Not_Found [sage] 2020/09/20(日) 19:41:00.85ID:???
-
いたというか、それが当たり前だったよ
IE6もNN4もCSSをまともに解釈とレンダリング出来なかったから
今みたいにCSSでレイアウトするようになったのは
JIS X 8341-3が発表されたたのと
MTのデフォルトテンプレートがCSSレイアウトされてたのが大きい
それでもしばらくは
企業サイトとかは見た目重視でテーブルレイアウトを続けたけど
その後、SEOの概念が生まれて
CSSレイアウトがテーブルレイアウトを圧倒するようになって
テーブルは終わったどころか、害悪扱いにまで成り下がった
このスレでも、表ですらtable要素を嫌う人が一定数いた - ： Name_Not_Found [sage] 2020/09/20(日) 19:54:45.22ID:???
-
JS使うくらいならgrid使えば？
メディアクエリと組み合わせればどうとでもなると思う - ： Name_Not_Found [sage] 2020/09/20(日) 20:56:31.75ID:???
-
flex: 1 1 auto;
max-width:
min-width:
とかじゃだめ？ - ： Name_Not_Found [sage] 2020/09/20(日) 21:00:32.40ID:???
- あ、だめか
- ： Name_Not_Found [sage] 2020/09/20(日) 21:49:27.03ID:???
-
floatだな - ： Name_Not_Found [sage] 2020/09/20(日) 22:42:28.97ID:???
-
状況が再現できないんだけど、可変な幅って%指定だったりするの？ - ： Name_Not_Found [sage] 2020/09/20(日) 23:30:35.98ID:???
- レスありがとうございます、 gridはまだ試したことなかったので確認してみます。
floatは盲点でした、そちらも試してみます。
こんな感じです。画面の大きさ次第で再現可能かと思います。
ttp://https://jsfiddle.net/y1Lxwujd/ - ： Name_Not_Found [sage] 2020/09/21(月) 00:33:36.90ID:???
-
末尾にダミーでflexアイテムをいくつか入れて、ダミーをvisibility: hidden;にして
メディアクエリを使って色んなパターンに対応させるって手がある
ただし、これだとコンテナ下部にダミー分の余白が出来たりするから
その辺をどうするかって問題もあるので、まぁ参考までに - ： Name_Not_Found [sage] 2020/09/21(月) 00:52:43.69ID:???
- メディアクエリは無くてもイケるか
ttp://https://jsfiddle.net/78aqbfxr/
枠線が無けりゃ余白も気にならないんだけど
ちょっと惜しいね - ： Name_Not_Found [sage] 2020/09/21(月) 01:06:22.22ID:???
- 透明な空箱を作っておくってこと？
- ： Name_Not_Found [sage] 2020/09/21(月) 01:10:08.60ID:???
-
そうそう - ： Name_Not_Found [sage] 2020/09/21(月) 11:39:21.07ID:???
-
を改造して余白を消してみた
ttp://https://jsfiddle.net/eL6vhutk/
ただ、この例では上手く行ってるけど、flexアイテムの文字数を揃えないと
横幅が揃わないので、汎用性は低いかもね - ： Name_Not_Found [sage] 2020/09/21(月) 19:48:34.75ID:???
- そんなSEO的にもセマンティクス的にも問題ありそうなことするくらいなら、
素直にJSで実装する方が良い気もするけどな
実装に10分も掛からないだろうし - ： Name_Not_Found [sage] 2020/09/21(月) 21:52:38.64ID:???
- まぁ、でもHTML/CSSスレだし
だから誰もJS書かないしｗ - ： Name_Not_Found [sage] 2020/09/21(月) 22:13:42.15ID:???
- 質問者ですが、様々なレスありがとうございました。
それぞれ試したところ、grid layoutとメディアクエリでそれっぽくできました
ttp://https://jsfiddle.net/wobn687y/
問題なければひとまずこれで行こうと思います。
ありがとうございます。 - ： Name_Not_Found [sage] 2020/09/21(月) 23:15:16.78ID:???
- 根気あるなあ
- ： Name_Not_Found [sage] 2020/09/22(火) 17:52:03.74ID:???
- 普段はゴシックで
h1とかで、ここぞという時に極太明朝(無理なら普通の明朝)を使いたいのですが、
クラスに mincho を作って
.class{font-family: ****}
<span class="mincho">強調したい文字</span>
としたいのですが、
いろいろなデバイスに対応させるためにwebフォントを使わないのであれば、
明朝体を持っていないandroidは抜きとして、どんなfont-familyを羅列すれば良いのでしょうか？
win10、iphoneは持っています。 - ： Name_Not_Found [sage] 2020/09/22(火) 19:15:24.13ID:???
-
これでいいだろ
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; - ： Name_Not_Found [sage] 2020/09/22(火) 19:32:13.07ID:???
-
ぉぉぅ、ありがとう。
何やらiphoneだとh1-h6タグで使ったらboldになるみたいね。
android用のwebフォントって重いというのは、あれどういう仕組み？
アウトラインフォントの全データダウンロードなんて考えにくいけど、そういう方法なのか、
例えばgoogleフォントならcssで読み込んだコードで使う分だけ、1文字単位でフォントデータをgetリクエストするの？ - ： Name_Not_Found [sage] 2020/09/22(火) 19:51:59.25ID:???
-
>何やらiphoneだとh1-h6タグで使ったらboldになるみたいね。
それは単にデフォルトスタイルだろう
hnのデフォは太字だ
あんま関係な基本的にウェブフォントは1フォント丸っと落としてる
Googleフォントもバラけてはくるけど、最終的にワンセット落ちてるはず
モリサワのウェブフォントは
使ってる文字だけのサブセットだったはず - ： Name_Not_Found [sage] 2020/09/22(火) 20:09:28.39ID:???
- SVGフォントという手も
- ： Name_Not_Found [sage] 2020/09/22(火) 20:23:31.26ID:???
-
ぅゎぁ、ちょっと見たけどややこしそう・・・
そっか、まるっと落としているのか。どれくらいのデータ量と思ったら15MBぐらいorz
これは大きいな、日本語フォントだから仕方無いけど。
仕組みとして、headタグのwebフォント用cssを読んだ時点でフォント落としているの？
android用の明朝フォントデータ量で、windowsやiOSに影響出したくないし
phpでandroidを認識したらcss読ませるタグを書くってのは良い案？ - ： Name_Not_Found [sage] 2020/09/22(火) 20:48:45.68ID:???
-
cssファイルではないよ。フォントファイルな。
フォントファイルの読み込み方法は二通りって
1つはcssファイルから読み込む方法
もう一つはheadタグにフォントファイル読み込み記述を書く
cssファイルにはphpは使えないので後者だな。
UA判別でいいと思うよ - ： Name_Not_Found [sage] 2020/09/22(火) 21:58:21.15ID:???
-
何が面倒かと言えば、例えば全てのIPAフォントをSVGフォントに変換するのは容易いが、使われている文字以外の大量のSVGフォント定義を除去しないとサイズが悪夢
今なら何か除去を自動化するツールとかあるんじゃないかなぁ - ： Name_Not_Found [sage] 2020/09/22(火) 23:15:11.73ID:???
-
そんな面倒なものをなんで私にわざわざ勧めるんですか？
初心者だからってバカにしないで！ - ： Name_Not_Found [sage] 2020/09/22(火) 23:15:45.15ID:???
- テキスト入力して、フォントファイルアップロードしたら、
使う分だけのファイルが生成されたサブセットがダウンロードできるサイトがあれば良いのにね - ： Name_Not_Found [sage] 2020/09/22(火) 23:53:52.37ID:???
- サブセットフォントメーカーは？
更新のたびに生成するの面倒だけど - ： Name_Not_Found [sage] 2020/09/22(火) 23:55:29.85ID:???
- cssのfont-size, borderとかpadding、line-heightなどで、
開発ツールで10px, 110%, 1.2emとか気ままに決めている自分が、
これで良いのか悩んでいるのですが、
スマホ縦持ちも視野に入ると、marginをpxより％なのかなとか
モヤモヤしてしまいます。
誰か「そういう時はこういうルールにすれば色々悩まなくて良いよ」とかあれば教えてください。 - ： Name_Not_Found [sage] 2020/09/23(水) 00:06:25.91ID:???
-
モリサワのウェブフォントはそれに近い
その書体が指定されてる要素で使われてる文字だけの
フォントのサブセットが落ちてくる
たとえば↑だったら
あ、う、え、お、か、き、こ、さ、し、す…
など使ってない文字は入ってない - ： Name_Not_Found [sage] 2020/09/23(水) 00:07:17.39ID:???
-
スマホはvwにすれば悩まないよ - ： Name_Not_Found [sage] 2020/09/23(水) 03:03:59.44ID:???
-
webフォントを使わない、という条件からすると厳密にはアウトではあるけど
フォントファイルがテキストなので「強調したい文字」の限定された文字数において「自分で必要なフォントだけを取り込める柔軟性」という特性を持つSVGフォントは、選択肢として別にバカにしたものじゃない
主に一般には存在しない異体字フォントを提供するために使われるテクニックだけど頭から除外するのもどうかと思った - ： Name_Not_Found [sage] 2020/09/23(水) 03:09:05.47ID:???
- 空気読める人ならわかるけど
は、なりすましなので注意ね - ： Name_Not_Found [sage] 2020/09/23(水) 08:23:56.68ID:???
- 早く振り込んで
- ： Name_Not_Found [sage] 2020/09/24(木) 01:47:19.86ID:???
-
ワレアホか - ： Name_Not_Found [sage] 2020/09/24(木) 10:30:05.73ID:???
-
あ？ - ： Name_Not_Found [sage] 2020/09/24(木) 12:17:24.70ID:???
- WEB components の質問
ttp://https://pastebin.pl/view/b2947a05
で、id="NG" のタグがうまく(id="OK"のように)レンダリングできないのは仕様？
仕様なら、どこを見れば載ってる？ - ： Name_Not_Found [sage] 2020/09/24(木) 12:21:02.64ID:???
-
あ、HTML,CSSのスレか
+ JavaScript の質問用スレッド vol.141 +
ttps://mevius.5ch.net/test/read.cgi/hp/1559474974/
のほうに質問しなおします - ： Name_Not_Found [sage] 2020/09/25(金) 00:39:27.86ID:???
-
ヤッパリワレアホけ - ： Name_Not_Found [sage] 2020/09/25(金) 07:17:23.98ID:???
- cssで
section.hoge {}
section.hoge ul.fuga { margin: 0}
みたいな値が入っていない行だとvscodeが「Do not use empty rulesets」とメッセージを出すんだけど、
こういうようなツリー構造の確認用に書いておくのはNG？
ファイルサイズが増えること以外はデメリット無い？
パース的な処理に少なくとも負荷がかかるからやめれってことかな・・
4000行中、200行ぐらいは空値になってる。 - ： Name_Not_Found [sage] 2020/09/25(金) 07:30:41.80ID:???
-
ツリー構造の確認なんてできないのでは？ - ： Name_Not_Found [sage] 2020/09/25(金) 08:17:19.54ID:???
-
でないよ？scssでもcssでも
設定かも - ： Name_Not_Found [sage] 2020/09/25(金) 08:39:22.12ID:???
- 919です。
vscodeもプラグイン入れてデフォルトなので、ちょっとわからないのですが、
たくさんのcss行があって
値が無い {}の行がたくさんあることは、パース的にレンダリングの負荷になっているかが気になっています。
実際のcssではcssパス的に6〜10層以上までなることがあるので。
{}の行を設けることによって、今からその下のパスのセレクタを書くための目印にしています。 - ： Name_Not_Found [] 2020/09/25(金) 08:43:21.42:8PtQ+kvE
-
さして困ることもないとは思うけど
そういう目的なら、生のCSSを書かないで
SASS使ったらいいじゃない - ： Name_Not_Found [sage] 2020/09/25(金) 09:12:35.61ID:???
-
sass採用したら
今の1セレクタ1行で4000行もあるから、何万行にもなっちゃうｗ
小さい規模のサイトでは良いかも知れないけどね。 - ： Name_Not_Found [sage] 2020/09/25(金) 10:16:57.64ID:???
-
それに慣れてしまうといずれ負荷になる scssなら気を付けたほうがいい。
気持ちはわかるがそもそもの構造として全部階層を書く書い方自体をやめたほうがいい。
クラスの概念、使い方に反する。
そもそも昔からやってる人は空セレクターは絶対放置しなかった。
何故ならIE6でバグになるから。 - ： Name_Not_Found [sage] 2020/09/25(金) 18:52:22.03ID:???
- tableタグで
算数 国語
田中
鈴木
とある場合、
theadは算数と国語を包むの？
算数と国語、田中と鈴木のどちらもthを使うの？
でもその場合、田中と鈴木の右に二重線を引きたいときかぶるよね・・・
tableタグって無くても良いタグが多いので逆にややこしい・・ - ： Name_Not_Found [] 2020/09/25(金) 19:02:19.27:8PtQ+kvE
-
scssの行数なんて別に増えても良くね？
それよりも,922の問題を
手放しで解決できるメリットの方が大きいんじゃないかな
手書き生CSSでそれだけ書いてるなら
確率的に潜在しているであろうCSS的表記揺れなども
一律に正規化できるし
あと、言うても数万行くらいなら
よほど非力なハードでなければコンパイルはそれほど困らんよ
前に、1つのファイルに吐かれたCSS3.5万行くらいを
拡張子scssに変えて編集して再コンパイル
という変なことやったけど、わりとスムーズだった - ： Name_Not_Found [] 2020/09/25(金) 19:05:09.85:8PtQ+kvE
-
極端なことを言えば
縦横の表は想定外なんだよ
ほんで実際には
算数国語はthead tr th
田中鈴木はtbody tr th:nth-child(1)
と区別すればいいんじゃないかな - ： Name_Not_Found [] 2020/09/25(金) 19:37:37.08:cVTy5T/5
- 質問
画面幅512pxのページをスマホで開いたときに
スマホの幅いっぱいに拡大して表示されるにはviewportをどうすればいいですか？
<meta name="viewport" content="width=512, initial-scale=1"> - ： Name_Not_Found [sage] 2020/09/25(金) 21:43:14.33ID:???
- 君のその端末で
<meta name="viewport" content="width=device-width,initial-scale=1.0">
だとどうなる？ - ： Name_Not_Found [sage] 2020/09/26(土) 07:56:55.18ID:???
- 明朝体にするために
.mincho {font-style: 日本語フォントずらずら・・・}
とcssに書いているとして、
1：htmlタグで明朝体にしたいところに class="mincho"を入れるか、
2：セレクタのプロパティに「font-style: 日本語フォントずらずら・・・」
この2択になるの？
font styleがとても長いから、各セレクタに記述するのも雑多な感じになるし訂正時も多いと面倒だし(置換があるけど)
htmlタグにminchoと入れぐらいなら、css側で記述したいし、第3の方法ってある？ - ： Name_Not_Found [sage] 2020/09/26(土) 09:06:55.09ID:???
-
クラス名なんだから好きにしろ、としか
serifとか - ： Name_Not_Found [sage] 2020/09/26(土) 09:24:35.87ID:???
-
SCSSが使えるなら、フォント指定をmixinにして必要なところにinclude
フォント指定の修正はmixinの修正だけで済む - ： Name_Not_Found [] 2020/09/26(土) 09:38:15.89:EXu96pT5
-
他のスタイルは平気でズラズラ書くのに
フォントだけ嫌がるなんて差別です！ - ： Name_Not_Found [sage] 2020/09/26(土) 12:34:34.13ID:???
- そもそもデザインにおいて明朝とゴシックがそんなに混在するってのはクソ素人丸出し。
bodyタグに明朝+セリフ書体指定してベースを明朝にするか見出しだけ明朝ならまだわかるけどな。 - ： Name_Not_Found [sage] 2020/09/26(土) 12:56:05.10ID:???
- 見出しだけ明朝ってポスターかよ
- ： Name_Not_Found [sage] 2020/09/26(土) 13:10:16.69ID:???
- 小説や書籍は本文が明朝で定番だが
webは本文に明朝は読みにくい。解像度が低いから。 - ： Name_Not_Found [sage] 2020/09/26(土) 13:17:42.93ID:???
-
デザインの知見ないのに絡むのやめなよ・・
ttps://i.imgur.com/SlNIsEE.png - ： Name_Not_Found [] 2020/09/26(土) 13:49:56.08:Cn1qDlBy
-
それももう過去の話になりつつあるような気もする
サイトにもよるけどB2Cだと特に
ドットバイドット以上で見てる人が優勢になってきているように感じる
解析結果見てる限りでは - ： Name_Not_Found [] 2020/09/26(土) 13:51:02.36:Cn1qDlBy
-
文字詰も装飾も
クラシックだなあ - ： Name_Not_Found [sage] 2020/09/26(土) 14:05:51.02ID:???
- 見出し：明朝
本文：ゴシック
なんて普通にあるって事を言いたかったから張った画像。
ポスターだけなんて思い込みだよ - ： Name_Not_Found [sage] 2020/09/26(土) 14:09:36.38ID:???
-
まあ確かにそうだが
そもそも日本語の小説とか圧倒的に縦書き。
左から右に流れる文字組は海外からの輸入文化だから
サンセリフの方が相性が良い - ： Name_Not_Found [] 2020/09/26(土) 15:27:38.16:Cn1qDlBy
-
それにしては
海外系はセリフ多くね？
ブラウザのデフォルトCSSもセリフだし - ： Name_Not_Found [sage] 2020/09/26(土) 23:19:46.93ID:???
- そりゃ帝政ローマ時代から使われてたTRAJANとか16世紀に活版印刷で使われだしたGaramondとか
欧文だってセリフ体のほうがはるかに歴史が長いもの
20世紀入ってからのHelveticaやFuturaやDINよりなじみは深いだろう - ： Name_Not_Found [sage] 2020/09/26(土) 23:48:37.09ID:???
- マンガのフキダシはここ30年以上ずっと漢字がゴシックでかなが明朝らしい。
なんでかは知らん。 - ： Name_Not_Found [sage] 2020/09/26(土) 23:58:22.00ID:???
- ほんとだ今そばにある雑誌見たらそうなってる
意識しないと分からないもんだな - ： Name_Not_Found [sage] 2020/09/27(日) 00:20:50.06ID:???
-
このスレを甘く見てたわ
ここでもそれくらいの書体くらいは知っている人いるんだな - ： Name_Not_Found [] 2020/09/27(日) 03:06:22.95:0XWcJcWd
-
今は慣例
まず、昔の漫画の活版印刷だと
明朝体漢字の細い横線が掠れてしまうことがあって
ゴシック体を使うことになった
とはいえ平仮名もゴシック体にしてしまうと
喋り言葉を装って物語を文字で説明するという
漫画の吹き出しという独特のタイポグラフィでは
説明臭さが出過ぎる、喋り特有の機微がほしい
と、当時は判断されて
結果、混ざった書体を使うことになったんよ
それがスタンダードになって読者にも定着した - ： Name_Not_Found [sage] 2020/09/27(日) 03:35:10.38ID:???
- んでも漫画向けにコミックフォントなんてのも
デジタル漫画制作ツールの中に入ってるので
それをそのまま使ってる人が多い - ： Name_Not_Found [] 2020/09/27(日) 03:36:12.18:0XWcJcWd
- 90年代に個人・同人作家が
ワープロやPCで自分でセリフ文字を書き
それを写植するようになり始めた時期には
ゴシック体のみのものが多く見られた
これは明ゴ混ざった書体や
イラレやクォークのような書体を混ぜられるソフトが
同人、個人層にはまだ流通していなかったため
これに違和感を持つ者は描き手、読み手両者にあって
プロもアマチュアも、この時初めてセリフ文字の
タイポグラフィの重要性に気づいた
と言っても過言ではない
その後、ネットが普及し、PCも印刷技術も進化して
PC作画が当たり前になり、様々な書体を
自由に使えるようになった昨今では
明ゴ混ざった昔ながらのアンチGだけでなく
あえて明朝のみ、ゴシックのみを使うなどの演出が
セリフ文字に施されるようになったのである - ： Name_Not_Found [] 2020/09/27(日) 03:36:48.44:0XWcJcWd
- 以上、すげー早口で喋ってるように読んでくれ
- ： Name_Not_Found [sage] 2020/09/27(日) 05:25:00.81ID:???
- 勉強になった
- ： Name_Not_Found [sage] 2020/09/27(日) 10:08:13.71ID:???
- なるほど
- ： Name_Not_Found [age] 2020/09/27(日) 18:04:13.40ID:???
- js/css初心者です。
HTMLのテーブルにリアルタイムに行(tr)を追加するページを作っています。
(1秒間に最大数十行追加、一定行以上は削除する)
新しく追加した行が一定時間だけハイライトされるように、trに対してanimationスタイルを適用して赤から無色にbackground-colorが変化するようにしています。
ただ、セル(td)には列単位で一部個別のbackground-colorが適用されており、優先順位の関係で上記のtrに対するアニメーションが反映されません。
反映されない理由は理解しています。
アニメーションでなはく永続的なものであれば、スクリプトでtd側をtransparentにしたりクラスを除去したり等で回避できるかと思いますが、trのアニメーション終了後はセルのbackground-colorで表示させたいです。
個々のtdに対してanimationさせたり、setTimerやイベントでクラスを操作しないと無理でしょうか？ - ： Name_Not_Found [sage] 2020/09/27(日) 19:47:43.50ID:???
-
> 今の1セレクタ1行で4000行もあるから、何万行にもなっちゃうｗ
CSSつかうとそうなるよね。行数が増えてメンテナンスが不可能になっちゃう
そういうときにSCSSを使うんだよ
半分以下になるはずだよ - ： Name_Not_Found [sage] 2020/09/27(日) 22:50:49.60ID:???
- 適当にpx, %, emとか使ってしまうんだけど、
フォントはremだけでええんか？ - ： Name_Not_Found [sage] 2020/09/27(日) 23:15:41.53ID:???
-
確かに、この数千行の左側なんて同じ文字列の繰り返しで600KBもファイルあるしなぁ。
apacheでdeflateしてるから実際は数十KBだろうけど。 - ： Name_Not_Found [sage] 2020/09/28(月) 03:38:48.00ID:???
- そういう意味ならsass使っても変わらんな最後にcss吐くんだから
- ： Name_Not_Found [sage] 2020/09/28(月) 06:27:43.70ID:???
-
td には属さない、tr だけの範囲を作れば？
tdの外側で、trの内側の範囲
その部分だけは、trのアニメが使えるのでは？ - ： Name_Not_Found [sage] 2020/09/28(月) 15:58:48.46ID:???
-
だよな。は何とんちんかんな事言ってんだって思った - ： Name_Not_Found [sage] 2020/09/28(月) 16:06:15.03ID:???
-
赤から無色の変化分部はtrの背景色でするのではなく、
before疑似要素で背景専用のオーバーレイ要素を作りそれを一番上になるようにレイヤーを重ねる
ざっくりでこんな感じで
tr{
position:relative;
}
tr:before{
content:'';
posirion:absolute;
top:0;
left:0
z-index:3;
background-color: rgba(100,100,255,1.0);
} - ： Name_Not_Found [sage] 2020/09/28(月) 16:06:50.95ID:???
- ↑アンカーミスッタ
宛て - ： 954 [sage] 2020/09/28(月) 21:07:07.80ID:???
- ありがとうございます。
tdの外にspanで囲むということでしょうか？
それでもspanのbackground-colorが優先されtrのアニメーションは適用されませんでした。
また1セル(td)=1データという形の表にしたいのでtdは使いたいです。
GASを使っているためか、trのposition=relativeが効かない問題が出ており::beforeが変なところに出てしまっていますが、
それはまた別問題として、このtr::beforeでオーバーレイさせるという方法で、tr 1行の背景色が反映される仕組みがよくわかりません。
contentが空の状態だとこの疑似要素のbackground-colorは表示されませんでした。
例えばcontentのところに何らかの文字を入れると、その文字分だけ背景色が表示されます。
trの行頭から行末までぴったり色を重ねるというのはこの方法でできるのでしょうか？？
以下のような単純なHTMLで試しています。
tr.test_row {
position: relative;
}
tr.test_row::before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 3;
background-color: rgba(100,100,255,1.0);
}
<table border="1">
<tr class="test_row"><td>あ</td><td>い</td><td>う</td></tr>
</table>
まだ知識が浅く、的外れな質問をしてしまっていたらすみません。 - ： Name_Not_Found [sage] 2020/09/28(月) 21:36:00.87ID:???
- tableでマウスオーバーでtrのカラーを変えるのはできるけど、
縦ってどうすれば実現できるの？ - ： Name_Not_Found [sage] 2020/09/28(月) 22:39:56.97ID:???
-
tr.test_row::beforeにwidthやheightを指定する必要があるよ - ： Name_Not_Found [sage] 2020/09/28(月) 22:47:06.39ID:???
- うちはオール電化だわ
- ： Name_Not_Found [sage] 2020/09/28(月) 22:57:14.60ID:???
-
ほい。GASは関係ないかと。
tr.test_row {
display:block;
position: relative;
background-color: #f5f5f5;
}
tr.test_row::before {
content: '';
position: absolute;
top: 0;
left: 0;
width:100%;
height:100%;
z-index: 3;
background-color: rgba(100,100,255,0.8);
} - ： 954 [age] 2020/09/29(火) 00:36:34.75ID:???
- ,967
ありがとうございます！
できました。
ただ、「重ねる」ってことで薄々気づいていましたが、文字の上からになっていまうのはしょうがないんですよね？
アニメーションをある程度透過した色からスタートさせることで違和感は減りましたが、文字には影響させないっていうのはやはり無理ですよね。
いろいろ難しいですね… - ： Name_Not_Found [sage] 2020/09/29(火) 06:46:12.54ID:???
- そら本来JSでやるべきアニメーションを、CSSだけでやろうとか言ってたら、そうなるわな
CSS3で機能が増えたせいで、本来の棲み分けが分からなくなっている人が多い気がする - ： Name_Not_Found [sage] 2020/09/29(火) 08:43:29.44ID:???
- 6年ぐらい前に
box-sizingをcontent-boxで書かれた、divで入れ子しまくりなサイトを
いずれレスポンシブも考慮してborder-boxで書き換えたいんだけど、
開発ツールで*{box-sizing:border-box}にすると、
グシャっと変わってびびるけど基本的に幅が小さくなるのよね？
どのプロパティあたりからレイアウトを整えていけば良いの？
box-orderしかしらないから、ちょっとpaddingつけたりして崩れるの怖すぎ - ： Name_Not_Found [] 2020/09/29(火) 09:56:33.61:GBabE/YL
- content-boxのままじゃいかんの？
borderとpaddingを勘定の内に入れればいいだけよ - ： Name_Not_Found [sage] 2020/09/29(火) 10:40:00.41ID:???
- セレクタが違うとこだけ変わらずに残るやろ
- ： Name_Not_Found [sage] 2020/09/29(火) 11:55:55.46ID:???
-
例えばこれを追記すればtdと文字が一番上に来る
tr.test_row td {
position: relative;
z-index: 4;
}
純粋に文字だけ一番上にしたいならHTML側に文字をspanで括るなどしてこうすればいい
tr.test_row td span {
position: relative;
z-index: 4;
} - ： 973 [sage] 2020/09/29(火) 11:58:27.06ID:???
-
ちなみにjs側がどう書いてるのか気になる
気が向いたらソース書いてくれ - ： Name_Not_Found [sage] 2020/09/29(火) 12:00:37.83ID:???
- おじさんもエスパーするとMPが減ってしまうからさ
- ： 954=968 [sage] 2020/09/29(火) 16:24:35.21ID:???
-
jsの部分はテーブルに行を追加してクラスを割り当てているだけなので、あまり本質ではないと思って載せていませんでした。
細かくは省略はしていますが、↓こんな感じです。で質問した際に動かしていたパターンです。
新しいデータを取得する度に addRow が呼び出されるイメージです。
-- js
function addRow(data) {
var elemTable = document.getElementById("test_table");
var newRow = elemTable.insertRow(0);
newRow.classList.add('test_row');
newRow.innerHTML = "<td nowrap>" + data[0] + '</td><td nowrap class="' + data[1] + '">' + data[1] + '</td>";
}
-- css
td.class1 {
background-color: lightgreen;
}
td.class2 {
background-color: lightpink;
}
@keyframes red-fade {
0% {background: red;}
100% {background: none;}
}
tr.test_row {
animation: red-fade 1s linear 1;
} - ： 954=968 [sage] 2020/09/29(火) 16:25:29.77ID:???
- 当初の質問のとおりtdのbackground-colorが優先され、trのアニメーションのbackgound-colorがそのtdだけには反映されない、というものです。
data[1]には上記の例では"class1"とか"class2"とかが入り、値に応じたクラス=色が割り当たるイメージです。
(イメージとして、ログ出力でのcritical/error/warningで色を変えるイメージ)
実現したいことは、tdにbackground-colorが割り当たっていても、trのアニメーション中はtrの色で表示し、アニメーション終了後は本来のtdの色で表示してほしい、というものです。
具体的な要素のtdよりtrを優先する、というオプションなどあれば理想なのですが、そう簡単ではないということがわかりました。 - ： 973 [sage] 2020/09/29(火) 18:10:46.16ID:???
-
どうもです。
こういう感じ？
ttp://https://jsfiddle.net/61gcre87/ - ： 954 [age] 2020/09/29(火) 21:44:39.48ID:???
-
まさにそのイメージです。ありがとうございます。
spanで文字だけ上のレイヤーに浮かせるということですね。
こういうテクニックを駆使しないとダメなんですね。勉強になります。 - ： 954 [age] 2020/09/30(水) 00:15:35.80ID:???
-
ついでに教えてください。
trにdisplay:block指定があると、trが複数行の時に、各列(td)をwidthで明示的に指定しないと各行の文字数によって行単位で列幅がズレるのですが、そういうものですか？
あと行と行の間にも隙間(？)ができて線が太く見えてしまいます。
(tdの下辺と、次の行のtdの上辺が重ならなくなり2pxの線に見える)
table{
border-color: #0FF;
border: solid 1px;
border-collapse: collapse;
border-spacing: 0;
}
table th,table td{
padding: 1px 4px;
text-align: center;
border: solid 1px;
} - ： Name_Not_Found [sage] 2020/09/30(水) 00:51:41.08ID:???
- display: block
display: table
これってどういう違いがあるの？
margin: 0 autoも使えるし、機能的な差があるの？ - ： Name_Not_Found [] 2020/09/30(水) 01:29:44.53:6IfSIYk/
-
普通のブロックは広がる
テーブルは縮む - ： Name_Not_Found [sage] 2020/09/30(水) 02:19:05.31ID:???
-
そういうものだな
解決方法わからんわｗ おじさん疲れたので誰か頼むわ
隙間や線の件はこうすりゃいいよ
table{
border-collapse: collapse;
border-spacing: 0;
}
table th,table td{
padding: 1px 4px;
text-align: center;
border: solid 1px #0FF;
} - ： 983 [sage] 2020/09/30(水) 02:21:19.92ID:???
- 誰か教えてくれ
tr:beforeの親要素てtrじゃないのけ？
overflo:hiddenが効かないわ
td:beforeにしてもtrに書いているoverflo:hiddenが効かないわ
糞テーブルとoverflo:hiddenの相性くそ悪いfuck - ： Name_Not_Found [sage] 2020/09/30(水) 02:21:26.57ID:???
- 「ついでに教えてください」は社会に出てからは使うの気を付けた方がいいよ
- ： Name_Not_Found [sage] 2020/09/30(水) 03:10:43.28ID:???
- お前みたいなのが居るからな
- ： Name_Not_Found [] 2020/09/30(水) 04:48:42.94:6IfSIYk/
-
table-rowだけでなく
table-cellもダメなんじゃね？
table-layoutをfixedにしないと
たぶん内部的に計算できないんじゃなかろか？ - ： Name_Not_Found [] 2020/09/30(水) 04:53:35.39:6IfSIYk/
- display: tableの場合、table-layout: autoだと
中身を全部見てから各行やセルの大きさを
いい感じに決めるから
overflowしようにも本来の大きさがないので
計算出来ないんだよ
糞だの相性だの言う前に
内部でどんな計算しているかを考えると
わりと答えに行きつきやすいと思うよ - ： Name_Not_Found [sage] 2020/09/30(水) 05:55:41.97ID:???
- overflow - CSS: カスケーディングスタイルシート | MDN
ttp://https://developer.mozilla.org/ja/docs/Web/CSS/overflow
> overflow の効果を得るには、ブロックレベルコンテナーに高さ (height または max-height) を設定するか、
> white-space を nowrap に設定することが必要です。 - ： Name_Not_Found [sage] 2020/09/30(水) 06:32:56.20ID:???
-
なるほど！
たしかに言われて見ればホントだ - ： Name_Not_Found [] 2020/09/30(水) 06:35:21.28:6IfSIYk/
-
でも書いたけど
tableは子要素が決めんの
blockは親要素が決めんの、幅 - ： Name_Not_Found [sage] 2020/09/30(水) 06:44:45.30ID:???
-
はえー、目からウロコだわ - ： Name_Not_Found [sage] 2020/09/30(水) 15:26:45.37ID:???
-
おまえも答えに行きついてないやん笑 - ： Name_Not_Found [] 2020/09/30(水) 15:30:45.93:tr4xFT61
- ランディングページてあるじゃないですか
広告がこう、下にベローンとつづく
あれってHTML で作れるモンなんですか - ： Name_Not_Found [sage] 2020/09/30(水) 16:09:17.42ID:???
-
HTMLとcssでベースは作るけど、結局広告デザイン作る為にillustrator、photoshopとデザインスキルが必要。
あとjsも。 - ： Name_Not_Found [] 2020/09/30(水) 16:17:57.58:6IfSIYk/
-
毎日泣きながら
LP作って糊口を凌いでる人もいるんですよ( ；∀；) - ： Name_Not_Found [sage] 2020/09/30(水) 17:37:04.96ID:???
- つい最近にツイッターに
副業でLPで簡単に稼げるみたいに煽ってるヤツのせいで
未経験者が大漁に釣れてるくさいな
Lpなめんなよまじで - ： Name_Not_Found [] 2020/09/30(水) 19:53:23.81:4LU71atO
- HTMLの初心者です、よろしくお願いします。
現在、formでプルダウンメニューで市町村を選ぶとiframeにその市町村のページが表示されるものを作ろうと思っています。
しかし、actionで送信先を指定する必要ありですがiframeへ送信するために何を書けばいいのか？
actionにはCGIやURLを書く必要あるのは分かったのですが、今回の場合は具体的に何と書けばよいのか･･･
また、その他にもミスがあるのか分かりません。
<form action="▲▲▲" method="post" target="inline">
<label for="">市区町村</label><br>
<select name="url">
<option value="" selected="">
選択して下さい
</option>
<option value="ttp://https://town-hikaku.site/%e5%8d%83%e4%bb%a3%e7%94%b0%e5%8c%ba/">
千代田区
</option>
<option value="ttp://https://town-hikaku.site/%e6%a8%aa%e6%b5%9c%e5%b8%82/">
横浜市
</option>
<option value="ttp://https://town-hikaku.site/%e5%b7%9d%e5%8f%a3%e5%b8%82/">
川口市
</option>
</select>
<p><input type="submit" value="送信する"></p>
</form>
<iframe name="inline" width="350" height="1000"></iframe> - ： Name_Not_Found [sage] 2020/09/30(水) 20:13:59.94ID:???
-
1. formへのsubmitはホストにPOST送信しに行くが、この場合の目的ではサーバープログラムは必要ないのでは？ということで撤去
2. ボタンのclickかselectのchange(だったかな？)イベントでJavaScriptの関数を呼ぶ
3. iframeの切り替えは、なんかタイミングの関係で動かないことがあったんで、エレメントのouterHTMLを書き換えて強制的に切り替えるようにしてる - ： Name_Not_Found [] 2020/09/30(水) 20:27:31.10:4LU71atO
-
ありがとうございます。
この場合、actionに何かを指定するだけではダメってことなんですね･･･ - ： 1001 [] Over 1000Thread
- このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 88日 5時間 21分 53秒 - ： 1002 [] Over 1000Thread
- 5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
ttps://premium.5ch.net/
▼ 浪人ログインはこちら ▼
ttps://login.5ch.net/login.php
凡例：
レス番
100 (赤) → 2つ以上レスが付いている
100 (紫) → 1つ以上レスが付いている
名前
名無しさん (青) → sage のレス
名無しさん (緑) → age のレス
ID
ID:xxxxxxx (赤) → 発言が3つ以上のID
ID:xxxxxxx (青) → 発言が2つ以上のID
このページは2ch勢いランキングが作成したアーカイブです。削除についてはこちら。
ttps://i.imgur.com/PFSHLRx.jpg 
ttps://i.imgur.com/TcUlFsL.jpg 
ttps://i.imgur.com/jqLVohu.jpg 
ttps://i.imgur.com/xNH6Nog.jpg 
ttps://i.imgur.com/SbkZBCI.jpg 
ttps://i.imgur.com/OuFUwkd.png 
ttps://i.imgur.com/SlNIsEE.png 