「Google Fonts」にfont-displayを適用する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
【2019/7/22 追記】 Google Fontsから公式にfont-display適用方法が提供されました！ クエリパラメータ display によって、font-displayの適用が可能になりました！ 合わせて、Google Fontsから提供されるlinkタグに、デフォルトでfont-display: swap;が設定されるようになっています。 詳細については、こちらのGitHub Issueをご参照ください。 こんにちは。フロントエンドエンジニアのつっちーです。 以前の記事で、「Google Fontsへのリクエストは、Google Fontsから提供されるlinkタグをそのまま使用するのがベスト」とまとめました。実際、ブラウザに応じて最適なフォント形式が自動的に取得され、場合によってはunicode-range属性も併用されるのでメリットは大きいです。 ただし、一点だけ、デ
Flexboxでスマートニュース（SmartNews）風のレイアウトを実装する方法 - Design Color
スマートニュース（SmartNews）風の表示とは 「スマートニュース（SmartNews）」とはスマートフォン用のニュースアプリです。巷では略して「スマニュー」なんて呼ばれています。 読み込みが速いため、いつも情報収集にお世話になっているアプリですが、レイアウトも見やすいんですよね。縦だけでなく、2〜3列で横並びになったりと見た目に変化があって記事が見つけやすいんです。 SmartNews ただ、この見た目をfloatやdisplay: inline-block;で実装しようとするとかなり面倒…と思っていたそんな時、柔軟に対応できるFlexboxの存在を知りました。次からは、Flexboxを使った実装方法をお伝えしていきますよ！ 以下が実装用のコードです。「CSS」のタブをクリックして確認してみてください。 See the Pen Flexboxでスマートニュース（SmartNews）風
レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
