CSS Grid Layout Module Level 2 （日本語訳）
◎要約 この仕様は、 ~UI設計に最適化された，二次元~格子に基づく~layout~systemを定義する。 格子~layout~modelにおいては、 格子~容器の一連の子を，予め定義された［ ~flex可能な~size／固定d~size ］の~layout格子の中の任意な区画に位置させられる。 この~level 2 では、 `入子な格子$用に［ 親~格子の~sizingに関与するような， “下位格子” の能力 ］を追加して，`~level 1$ を拡げる。 ◎ This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container c
Flexbox playground
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
You Don't Need JavaScript に学ぶ CSS テクニック
さまざまな UI を JavaScript を使わずに、CSS だけで実現するデモ You Don't Need JavaScript を紹介します。 かなり煽ったタイトルのデモですが、作者も「いくつかの点で問題がある」と述べているように、これらの UI を実装するのであれば素直に JavaScript を使うことをおすすめします。あくまでデモとして「CSS の可能性」を感じることができればと思います。 ただ、実装としてはなかなか面白いので、是非ソースも含めてチェックしてみてください。今回は、いくつかあるデモから３つピックアップして簡単な解説と一緒に紹介します。 ＊ サンプルによっては、ブラウザによって正常に表示されないことがあります。最新の Chrome で動作確認をしているので、表示されない場合は Chrome で試してみてください。 アコーディオン ラジオボタンと擬似クラスの :ch
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
Flexbox入門 - 横並びを実現する定番のCSS - ICS MEDIA
ボックス要素の横並びをCSSで行う場合、昔はfloatプロパティを使うのが主流でした。しかし、CSSの「Flexboxフレックスボックス」を使うとfloatよりも簡潔なコードで、ボックスの豊富なレイアウトが可能です。本記事ではウェブページの作成を通してFlexboxの特徴と使い方について解説します。 この記事で学べること Flexboxの使い方 スマートフォンへのレスポンシブ対応 Flexboxはボックスレイアウト用のCSS Flexboxとは、ボックスのレイアウト方法を定めるCSSの機能です。ボックスとは、HTML上の各要素が生成する領域のことです。下図のHTMLコードのウェブページでは、div要素・h1要素・p要素がそれぞれボックスを生成します。 Flexboxでは、ボックスを横ならびにしたり、右寄せ・中央寄せ・左寄せをしたりと、さまざまなレイアウトを少量のコードで実現できます。 サン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ディープラーニングでHTMLにclassを自動付与してくれる・「CSSRooster」