【Font】使い勝手の良いオススメの Google Web Fonts サンセリフ系 × 11選。
今日は、誰でも無料で利用できる Google Fonts の中から、オススメのサンセリフ体のフォントを11個まとめて紹介します。 サンセリフ（仏: Sans-Serif）とは、セリフのない書体の総称である。セリフとは、文字の線の端につけられる線・飾りで、「うろこ」、「ひげ飾り」、「ひげ」とも呼ばれる。旧来のセリフのついた活字書体（セリフ体・ローマン体とも呼ぶ）と区別するために用いられる用語。「サン」とは、フランス語で「〜のない」という意味で、「セリフのない書体」を表している。グロテスク体とも呼ばれる。 Wikipedia サンセリフ体で有名なものでは『Heveltica』や『Gill Sans』や『Futura』などのフォントが挙げられます。 残念ながらこれらのフォントは版権などの事情があり Google Fonts では扱っていません。しかし似たような書体ならウェブフォントで無料で利用す
【CSS3】親要素の大きさに依存して画像の表示方法を変える［object-fit］プロパティの使い方。
【CSS3】親要素の大きさに依存して画像の表示方法を変える［object-fit］プロパティの使い方。 CSS3から新たに使えるようになった「object-fit」プロパティについて解説します。 聞き馴れない名前のプロパティかと思いますが、主に画像のアスペクト比に作用して、表示領域に対しての画像の大きさを変更する場合に使います。 ……文章の説明だけでは理解しにくいと思うので、実際に「object-fit」を使ったサンプルをご覧ください。 object-fit：サンプル・デモ ※サンプルは、Safari、Google Chrome、Firefox等のモダンブラウザでご確認ください。 親要素のボックスの表示領域に依存して、画像の大きさが変更されているのをご確認できると思います。 このプロパティ［object-fit］で指定できる値は５つ。 object-fit: fill;object-fit
【CSS 3】border 要素にグラデーションを施す方法。
通常これまでは、1px のボーダーのグラデーションを実現する際、背景画像を用意して［background-image］プロパティを利用するのが一般的な方法でした。 しかしレスポンシヴ・デザインやスマートフォン対応のWebサイトの構築などにより、この方法では相応しくないケースが多くなってきました。 何か他の方法を探して代替しなければなりません。 さて。ここでブレイクスルー。 今回は［CSS3］のテクニックの１つとして、ボーダーのグラデーションを、画像を使わずに CSS のみで表現する方法をご紹介します。 まずはサンプルをご覧ください。 綺麗なグラデーションになっていますね。 ボーダー・グラデーション：サンプル HTML の記述は以下のように。 <div id="sample"> <p>このボックスの枠（border）を、CSS3 のテクニックを使ってグラデーション化させます。</p> </d
【CSS】スタイルシートを使ってブラウザのスクロールバーを消す方法。
通常、width や height で指定されたコンテンツが表示域よりも大きくなった場合に、自動でブラウザの横や下部にスクロールバーが表示されるわけですが、CSSを使って、これを表示させなくすることが簡単にできます。 html { scrollbar-width:none; /* Firefox 対応 */ } body { -ms-overflow-style:none; /* IE、Edge 対応 */ scrollbar-width:none; } body::-webkit-scrollbar { display:none; /* chrome対応 */ } ホームページのデザインによっては、都合上どうしてもスクロールバーを表示させたくない場合がありますからね。 簡単なので覚えておいて損はないはずです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
