IEがいなくなり安心して使えるようになった CSS Grid Layout (display: grid;)。 みなさん、使っていますか？ これまでに面倒だった記述が楽に書けるようになるのはもちろん、 要素数が増えたり減ったりしてもイイ感じに配置できたり、 ウィンドウ幅が変わってもイイ感じに配置できたりと、 Gridは レイアウトの対応力を高める強力な武器 となります。 Gridの便利さをお伝えするため、Gridの活用例をこれでもかと詰め込んだCodePenのサンプルを作成しました。 （ウィンドウ幅によって変わる仕組みもありますので、ぜひ別タブで開いてご確認ください） この記事では、ここで使用している個別の活用例10個を紹介します。 それぞれの項目の中では、どのようなプロパティで機能を実現しているか説明していきます。 （この記事にはほぼすべてのgrid関連プロパティが登場します！） 1.
inline-block を使う理由、それは 入れ子構造を作れることにより、改行位置の優先順位をつけられるから！ 詳しくは以降で説明します。 （前提）そもそも改行調整ってなんの話？ このタイトルを見て記事を開いた方であれば知っていると思いますが、一応説明です。 スペースで単語が区切られる欧文とは違い、日本語は単語の区切りがないので、改行すべき位置を機械的に判断できず、不自然な位置で改行されてしまうことがあります。そこで、見た目を整えるため、改行すべき位置を指定するための手法が必要になります。 他に詳しい記事がいくつもありますので、詳細はそちらを参照してください。 代表的な改行調整の手法 <wbr> 要素 <wbr>要素は、改行してよい位置を表す要素です。 親要素に対して word-break: keep-all; を指定して基本的には改行されないようにすることで、<wbr>要素がある位置で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
