- フロントエンド・エンジニア
- ブログ「Another Sky」を運営
- Twitter @_hideki_a
足かせとなっていたIE8がターゲットブラウザから外れ、普段の業務でも新しいCSSの仕様をより利用しやすい状況になってきている
Android 4.3以前の「ブラウザ」についても、他のブラウザへの移行が推奨されている
(Google、古いAndroid向けWebViewパッチ打ち切りについて説明)
Android 4.3以前を使っているユーザーに対しては、AndroidにプリインストールされているWebブラウザではなく、Chrome(Android 4.0以降に対応)あるいはFirefox(Android 2.3以降に対応)をGoogle Playからダウンロードして使うよう勧めた。
細かいコードは説明しないので、どのようなレイアウトになるか等つかんでください
jQueryのフォローは不要に
$("selector").addClass(".last-child")
のようなjQuery(JavaScript)のコードは不要E:nth-child(4n){
// do something
}
E:last-child{
// do something
}
例えば、リストの最後だけ下方向マージンはなし、それ以外は下方向マージンを付ける場合
否定疑似クラス:not(X)
と最後の子要素を表すE:last-child
疑似クラスの合わせ技。
li:not(:last-child){
margin-bottom: 0.5em;
}
幅広画面でも文字を読みやすく
多くの雑誌が採用しているように、文章を一行幅いっぱいにレイアウトせず、複数のカラムに分けてレイアウトする
column-width
を指定すれば、画面幅に応じてよしなに表示してくれるWebの世界に和のテイストを
column-width
を指定することで、新聞や雑誌のように段になって表示される
※ただし、今のところ上手くいかないブラウザもある
レイアウトの強い味方
float
やdisplay: inline-block;
でレイアウトを頑張るのはしんどい場面があるこれらの問題をフレキシブルボックスで解決できる
position
などで対応していたが、order
プロパティで無難にレイアウトできるようになる.club{
display: flex;
flex-direction: column;
}
.club .image{
order: -1;
}
いろいろな場面で活用できるこれからの強い味方
四角いレイアウトに変化を
(イメージとして)Webは四角いボックスの中で表現される世界だった。そこに少し変化をもたらすCSSの仕様
clip-path
とかも面白い.slide-container{
width: 100vw;
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
scroll-behavior: smooth;
scroll-snap-points-y: repeat(100vh);
scroll-snap-type: mandatory;
}
スクロールした際、URLにhashを付けた方が良いと思っています。なぜならリンク先からスライドに戻った際にスライドの先頭が表示されてしまうためです。専用のイベントが発生すればベストなのですがなさそうでした。
(今回はCSSのセッションなのでスクリプトを使わずに仕上げたかったため、やむなくtarget="_blank"
を使用しました。)