中身のない空の div 要素や空の span 要素は HTML 仕様として妥当なのか？ - dskd
公開日2021-09-06タグHTMLレイアウトや装飾目的で、中身のない div 要素や span 要素、いわゆる「空 div」「空 span」を作ることはままある。しかしそれは仕様として妥当なのだろうか？ 目次 レイアウト目的の空 div の例 装飾目的の空 span の例 HTML にレイアウト目的や装飾目的のための要素はない div と span の仕様から探る フローコンテンツ フレージングコンテンツ コンテンツモデルにおける text "nothing" コンテンツモデル ol, ul, menu 要素 パルパブルコンテンツ カスタムエレメント トランスペアレント ここまでのあらすじ 僕の結論 レイアウト目的の空 div の例 下記は使う場所に応じて幅や高さを任意に設定できる例だ。.Spacer が空 div になっている。 <div class="Hero">...</div>
アクセシビリティはあなたビリティ - dskd
公開日2018-12-24タグAdvent CalendaraccessibilityWeb アクセシビリティ Advent Calendarの 24 日目。 僕にとってはウェブはだいたい HTML で、仕事もウェブ制作なので、そこ視点の話になります。あと「Web」でも「WEB」でもなく「ウェブ」派なのでそう書いてます。 これの下書きはひと月以上書いては消し書いては消し、足したり引いたりし続けました。触ってる間はずっとしんどかったです。かなりポエムになったので、あえて口語調にしてみました。喋ってるのを文字起こししたものだと思うとちょっと読みやすいかもしれません。 ちなみにこのブログの記念すべき 100 記事目です。 僕とウェブ制作 受託のウェブ制作会社でコーディングをしていると「自分がやらなかったら後ろに誰もいないやんけ」って思うことが多いんですよね。 受託のなかでも自分は、デザインが完成
内包要素の数が変動しても僕には擬似クラスと間接セレクタがある - dskd
公開日2013-12-04タグAdvent CalendarCSSCSS Property Advent Calendar 2013 ４日目のエントリです。 昨日、げこたんさんに BEM Advent Calendar を手伝ってもらったら、 おや？プロパティの方に恩返しがありませんね？ — げこたん (@GeckoTang) 2013, 12月 2 と言われてしまったので２回目を登録しました。 要件 「データがある時はリンクを出したい」などのニーズで内包要素の数がページによって増えたり減ったりすること、けっこうありますよね。それが普通のテキストリンクではなくタブだとかサムネだとかでレイアウトにも関わるとき、要素の数によってスタイルを切り分けなきゃいけないわけですが、タブが２つの時には .tabs2。５つの時には .tabs5 とかいちいちクラス付与させるのも面倒くさいわけです。 どういう
TRBL メソッドで background-size を代替する - dskd
公開日2015-03-26タグCSS親要素に対して子要素を上下左右に中央配置する TRBL メソッドというものがある。 .wrap { position: relative; width: 300px; height: 300px; border: 1px solid magenta; resize: both; overflow: hidden; } .inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 176px; height: 244px; background-color: grey; } .inner を img 要素にして、画像の大きさが不定の時でも頑張る方法は以前記事にしているので参考までに。 この TRBL メソッドでさらに頑張ると、背景指定ではなく
もっと広まって欲しいCSS - dskd
公開日2013-12-02タグAdvent CalendarCSSCSS Property Advent Calendar 2013 ２日目のエントリです。 何度も同じことを書いているのでいいかげんにしろっていう感じがしますが、僕がこの１年半くらいで「なぜ使われないのだ！ もっと広まってくれ！」と思っている CSS について記載します。 position: absolute; を使った絶対中央配置 ある要素を包含ブロックのど真ん中に置きたい時はとにかく position: absolute; を使った絶対中央配置が便利です。大まかな書き方は親要素に position: relative; を指定したのち、配置したい子要素に対して下記を適用するというものです。 .child { position: absolute; top: 0; bottom: 0; left: 0; right: 0;
画像サイズに依存しない絶対中央配置 - dskd
公開日2013-05-14タグCSSウェブページ作ってると画像を画面の中央に配置したいし、どんなサイズの画像が来ても真ん中にしたいし、どんなサイズの画面で見ても画像をはみ出させずに表示させたい欲求はよく出てくる。これってもはや人類の欲望と言っても過言ではない。 要件 画像を縦方向にも横方向にも画面の中央に配置したい 画像のサイズに依存したくない ウィンドウサイズが画像サイズより小さくなっても画像がはみ出ない この人類の欲望をを CSS で書くと、こう。 <body> <img src="image.jpg" /> </body> img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; max-width: 100%; max-height: 100%; } 前のエントリで書いたスニペット（F
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
