タグ

ブックマーク / www.webcreatorbox.com (2)

  • Googleフォントをサブセット化してページの読み込みをスムーズに

    2023年6月8日 Webサイト制作, 便利ツール おしゃれなフォントが気軽に実装できるGoogleフォント。みなさん使っていますかね?登録やダウンロード不要なので便利ですが、日フォントはなかなか容量が大きくてページの読み込み速度に影響が出てしまいます。そこで必要なフォントのみを指定できるサブセット化をしてみましょう! ↑私が10年以上利用している会計ソフト! Googleフォントの設定 まずは通常通りGoogleフォントを設定しましょう。GoogleフォントのWebサイトから、今回は例として「Kosugi Maru」というフォントを設定したいので検索。一覧から「Kosugi Maru」をクリックします。 続いて見の右側にある「Select this style」をクリック。 HTML 画面右側に選択したフォントが表示されます。「Embed」タブをクリックしてコードを取得しましょう。

    Googleフォントをサブセット化してページの読み込みをスムーズに
    anklelab
    anklelab 2020/07/29
    なんかもうブラウザさんが上手いことしてくれんかなぁー。
  • 今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦!

    2019年2月3日 CSS 要素の四隅の角を丸めるためのCSSプロパティー「border-radius」。ボックスや画像などの要素に対して適応でき、角丸にしたりまん丸にしたりと、様々な表現が可能です。このプロパティーが使えるようになってから、どれだけコーディングが楽になったか…!今回はそんなborder-radiusの基的な使い方と、応用表現を紹介します! ↑私が10年以上利用している会計ソフト! 無難で王道!正円の円弧を使った角丸 border-radius は「border」とついているものの、border プロパティーの指定がなくても大丈夫。background によって与えられた背景や、img 要素で指定された画像の四隅も丸まめられます。 四隅に同じ値の丸みを与えるなら border-radius: 10px; と記述すればOK。半径10pxの正円の円弧をベースにした角丸を実装で

    今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦!
    anklelab
    anklelab 2017/06/08
    ほぇ~いろいろできそうだなぁ(特に思いつかない)
  • 1