中身のない空の 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>
yargsを使ってタスクランナーのコマンドにオプションを渡す - dskd
公開日2015-08-14タグNode.jsGrunt や gulp を使っていると、タスクにオプションを渡して処理を分岐したい欲求が出てくる。そういう時はyargsを使えば、オプションをタスクランナー側に渡せる。 npm install --save-dev yargs したのち、タスクを書いてる JS ファイル（Gruntfile.js とか gulpfile.js とか）で yargs を require する。 var yargs = require("yargs").argv; そしてタスクの実行に下記のようなオプションを渡す。 gulp sass --device=pc すると、タスクを書いてる JS 内で yargs にキーと値がオブジェクトで格納されるので、次の按配で取得できる。 yargs.device; // → "pc" 便利。 オプションは複数渡せる。試しに以下のよ
overflow: overlay; - dskd
公開日2014-07-17タグCSSGoogle Chrome の Developer Tools で要素のスタイルをいじっていたら、overflow プロパティに overlay なる値があることを知った。インターネットをざっと検索した感じだとどうやら Webkit 系のみで使えるようだ。 W3C の overflow の仕様（CSS2.1 Visual Effects、CSS Overflow Module Level 3、CSS basic box model）を見ても overlay 値に関する記述はない。 検索結果を追っていくと、2009 年に Webkit Bugzilla へ投稿されたoverlay 値に対する提案が見つかる。標準仕様になく Webkit でしか動かないなら削除するか-webkit-overlay のようにプリフィックスをつけてはどうかという主旨だが、やりとり
内包要素の数が変動しても僕には擬似クラスと間接セレクタがある - dskd
公開日2013-12-04タグAdvent CalendarCSSCSS Property Advent Calendar 2013 ４日目のエントリです。 昨日、げこたんさんに BEM Advent Calendar を手伝ってもらったら、 おや？プロパティの方に恩返しがありませんね？ — げこたん (@GeckoTang) 2013, 12月 2 と言われてしまったので２回目を登録しました。 要件 「データがある時はリンクを出したい」などのニーズで内包要素の数がページによって増えたり減ったりすること、けっこうありますよね。それが普通のテキストリンクではなくタブだとかサムネだとかでレイアウトにも関わるとき、要素の数によってスタイルを切り分けなきゃいけないわけですが、タブが２つの時には .tabs2。５つの時には .tabs5 とかいちいちクラス付与させるのも面倒くさいわけです。 どういう
ブログを初めてBEM化した時の流れ - dskd
公開日2013-12-04タグAdvent CalendarBEMCSSHTMLBEM Advent Calendar 2013 ４日目のエントリです。前回の記事があまり BEM れてないという BEM 神の声を聞いたので、当ブログを BEM 化した時の流れを書いていきます。 まずはデザインを決めないとねということで、シングルカラムを継承しつつ、以前より色を明るくしてコントラストも抑えてみました。カラースキームなどは深く考えていないので :visited にピンク系とか :hover に黄緑とか唐突に出てきます。センスなくてつらい。 Block を決める デザインを決めたあと、まず BEM における Block となるエリアを考えます。 ヘッダー 記事リスト ページャー アーカイブス カテゴリー オーサー コピーライト デザインはシングルカラムのスタック構造なのでここは簡単でした。dskd
もっと広まって欲しい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;
CSSの命名規則にBEMを取り入れてみる - dskd
公開日2013-12-02タグAdvent CalendarBEMCSSHTML今年もあと一月ということでブログをリデザインしました。ということでこの記事はBEM Advent Calendar 2013 １日目のエントリです。日付過ぎてしまいましたね。 BEM って何？ BEM とは Block, Element, Modifier の頭文字をとったもので、フロントエンド設計において命名規則やモジュールの管理に前述の３種類の区分を取り入れたものを言います。今回はタイトルにもある通り、CSS の命名規則に BEM を取り入れてみるということで、BEM な CSS について記載します。 BEM るとどういう良いことがあるの？ いろんな人がすでに書いているので別エントリを参考になさってください。あるいは、今回の Advent Calendar に参加した方のエントリも参考になるかと思います。
画像サイズに依存しない絶対中央配置 - 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
CSS Programming HTML5 Template Generator - dskd
公開日2012-12-03タグCSSAdvent Calendarこの記事はCSS Programming Advent Calendar 2012 ３日目のエントリです。 CSS Programming という、JS や PHP を使わずに CSS だけでプログラムチックな処理を実装しようとう試みがあります。それをお題に、クリスマスのアドベントカレンダーのように１日ずつネタを書きましょう、というのが CSS Programming Advent Calendar 2012 の概要です。CSS Programming の考え方とか作り方は今回の発起人であるげこたんさんが１日目で説明していますのでそちらをどうぞ。 僕は今まで CSS Programming は作ったことはなかったのですが、年に一度のイベントなので力試しも兼ねて作ってみました。 Advent Calendar ３日目のこのエン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
