CSSの関数はどんどん便利になっている！minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる
CSSの関数には便利なものがたくさんあります。例えば、div要素に「width: calc(100% - 50px);」と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。 下記のレスポンシブ対応のグリッドはたった2行のCSSで、プロパティも2つだけです。 How the minmax() Function Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 minmax()の基本的な使い方 minmax()を使うと、Media Queries無しでレスポンシブデザインができる サポートブラウザ minmax()の基本的な使い方
関連記事と記事下の順番を変えたり、いろいろカスタマイズ - FOXISM
はてなブログに自動で「関連記事」が表示され始めたので、前回サラッと見てみました。それで、その時は「関連記事が記事本文の直下にあって使いにくい、カスタマイズした記事下と入れ替えたい」みたいに書きましたが、あっさりできたので共有します。 記事下と順番を入れ替える css ちょっと細かい解説 記事下の要素の間に入れる html css ちょっと細かい解説 そのほかのカスタマイズ 2列にする ○○を非表示にする サムネイルを消す 日付を消す 冒頭文を消す リストの5番目を消す 「関連記事」の表示を別の名前にする サムネイルを大きくする まとめ 記事下と順番を入れ替える 通常は「本文」→「関連記事」→「カスタマイズした記事下」の順番になりますが、これを「本文」→「カスタマイズした記事下」→「関連記事」とひっくり返します。cssだけで簡単にできます。 css .customized-footer{ d
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
