【2023年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例
この記事では、フォントを指定するためのCSSプロパティ「font-family」の書き方について一から詳しく解説します。font-familyを設定したことが無い方でも、正しくフォントが指定できるように、プロパティの書き方から、OSごとの設定の違い、おすすめのフォント設定例などもご紹介します。 「font-familyはいつもコピペしている…」なんて方も、正しい知識が有るか無いかは大きな違いです。ぜひこの機会に、font-familyの正しい設定方法をマスターしてください。 ※本記事は、各OSの標準インストールフォントや、ブラウザのアップデート状況などを踏まえて、なるべく最新の情報をお届けできるように、内容を随時更新しています。著者の調査した情報に基づいて執筆しているため、内容に間違いや不備のある可能性もあります。（最終調査日：2023年7月） font-familyの役割とは CSSのf
Astro と Tailwind CSS でこの Blog をリニューアルしました
Blog をリニューアルするにあたり、今までの Movable Type でテンプレート作って、という手法から、Movable Type は JSON データの書き出しだけ担当させて、フロントエンドは Astro と Tailwind CSS で開発する形に切り替えたので、その概要を簡単にメモ。 この Blog は立ち上げ当初から Movable Type で運用していますが、MT タグを書いて、テンプレートを作って、という一般的な運用っていうんですかね？ それをやめて、Movable Type は記事データの管理と JSON を書き出す役割だけにして、フロントエンドは Astro + Tailwind CSS でリニューアルしました。 面倒だったのでデザインは大きく変えず、ぱっと見はリニューアルしたのがわかりにくい感じになっていますが、Movable Type とフロントエンドを完全に分
CSSの新しいプロパティ「field-sizing: content;」が便利！ フォームのサイズを入力された文字量に合わせて自動変更
今まではJavaScriptを使用しないとできなかったことが、たった1行のCSSで簡単に実装できるようになります。フォームのtextareaに文字を入力すると、その文字量に合わせてサイズを自動で変更するCSSの新しいプロパティを紹介します。 下記のように入力された文字量に合わせてサイズを自動で拡張してくれます。また、min-heightやmax-heightを同時に設定できるので、上限下限のサイズを設定することもできます。 CSSの新しいプロパティはfield-sizingです。field-sizingプロパティを使用すると、フォームコントロールのデフォルトのサイズを無効にし、フォームのサイズをコンテンツに依存させることができます。そのため、自動で拡張されるtextareaを実装するのが簡単になります。 参考: Feature: field-sizing CSS property CSSは
CSSのtext-shadowでシャドウをつけるときにハイライトを加えると、よりリアルで美しいシャドウが実装できます
イラストを描くときや写真のシャドウではハイライトが非常に重要ですが、CSSのシャドウでこの発想は抜けていました。 テキストにCSSでシャドウを設定するときに、上部に1,2pxのハイライトを加えると、よりリアルで美しいシャドウになる実装テクニックを紹介します。 まずは、デモで実際のシャドウをご覧ください。 上部に2pxのハイライトを設定しています。 See the Pen highlight compliment to a text-shadow effect by coliss (@coliss) on CodePen. シャドウとハイライトのCSSは、下記の通りです。 カラーがoklch()で設定されていますが、hex値でも大丈夫です。ポイントは通常のシャドウと一緒にハイライト用のtext-shadowを上部に設定することです。 .highlighted-text-shadow { :r
VSCodeをWebサイト開発用ツールに ―HTML／CSS／JavaScriptエディタとして強化しよう！
はじめに Microsoftの提供するVisual Studio Code（VSCode）は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させたり、利用の領域を拡げられたりすることも大きいでしょう。本連載では、このVSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで、読者がVSCodeマスターになるお手伝いをします。 対象読者 テキストエディタメインで開発してきた方 Visual Studioより軽い環境が欲しいと考えている方 Visual Sudio Codeをもっと使いこなしたい方 必要な環境 本記事の内容は、以下の環境で動作を確
【CSS】flex-growを使おう - Qiita
はじめに 問題 早速ですが、こんな時どう実装しますか？ 少し前までの私 Headerは、height: 100pxでpadding: 10pxということは上下のpaddingを足して120px Footerがheight: 50pxでpadding: 5pxだから同様に考えて、60px 合わせるとMain以外の部分が、180pxで、 Mainのpaddingが10pxだから、上下で20px必要で、 ふう... 問題点 HeaderとFooterの高さが変わると計算し直す必要がある HeaderやFooterが動的に高さが変わる場合、JSで高さを適用しないといけない etc... そこでflex-growを紹介します。 flex-growの紹介に入る前に、**Flexbox(フレックスボックス)**について語ります Flexbox Flexboxは、主に次の2つの部分から成り立っています f
デベロッパツールの新機能が便利！ そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる
デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。 たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携わる人なら、この機能をオンにしておいて損はないでしょう。 display: flex;ではないのにFlexboxのプロパティを設定 ほかにも、widthを設定したのに効かないときは、それインライン要素ですよ、と教えてくれます。 インライン要素にwidthを設定 デベロッパーツールのこの新機能は「Find inactive styles」と呼ばれるもので、要素に適用されている非アクティブなスタイルを見つけることができます。 Find inactive styles -Ca
CSSのfilterを使って、背景色に合わせた文字色を自動的に設定する - Blanktar
いかがでしょうか。 グレー(#808080)に近い色はやや見づらくなってしまっていますが、それ以外はかなり上手く表示できているのではないかと思います。 やり方上記のサンプルは以下のようなCSSで実現しています。 ">Copy <div> <span>hello world!</span> </div> <style> div { background-color: red; } span { color: red; filter: invert(100%) grayscale(100%) contrast(100); } </style> 以上、これだけです。 詳しい解説は後述しますが、colorとbackground-colorに同じ色を設定してから、文字色だけCSSのfilterで見える色に変化させる仕組みです。 なお、divとspanをセットにすると背景色にもフィルターが適用されてし
これは便利、VS Codeの設定を変更しよう！v.1.60のアップデートで、ブラケットのカラー化にネイティブ対応
VS Codeがどんどん便利になっていきますね。 先日のv.1.60のアップデートで、ブラケットのカラー化に対応しました！ VS Codeの設定を変更するだけで、開始と終了のブラケットをセットで同じカラーにします。今までは機能拡張を入れないとできなかったことが、ネイティブ対応したのは朗報です。 Visual Studio Code: August 2021 (version 1.60) 自動言語検出 - VS Codeにペーストする際にプログラミング言語を検出します。 ビルトイン高速ブラケットカラー化 - 大規模ファイルでも高速にブラケットのマッチングとカラー化。 設定エディタのシンタックスハイライト - 設定のコードブロックでリッチなシンタックスハイライトに対応。 ターミナルでグリフのレンダリング - ボックス描画とブロック要素文字の表示が改善。 デバッグウォッチ値の設定 - デバッグセ
Bootstrap でのコンテナの利用 (continer と container-fluid の違い) (Bootstrapの使い方)
Bootstrap でのコンテナの利用 (continer と container-fluid の違い) - Bootstrap Bootstrap でのコンテナについて紹介します。 概要 BootSstrapを利用する場合に一番外側に配置する枠がコンテナです。 枠の要素のクラスに container または、 container-fluid を指定するとコンテナとして動作します。 記述例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="Content/bootstrap.css" /> <script src="Scripts/jquery.js"></script> <script src="Scripts/bootstrap.js">
【Bootstrap】containerとcontainer-fluidの違い
container → 固定幅のコンテナ(ウィンドウサイズを変えても幅が固定されている)container-fluid → 可変幅のコンテナ(ウィンドウサイズを変えても常に画面いっぱいに広がる) 横の線はウィンドウの端だと思ってください containerは「箱、入れ物」という意味があり、Bootstrapのグリッドシステムを使用する際に一番外枠に来るものです。その配下にrowクラス(列)が入り、さらにその配下にcolクラス(行)を使用します。 基本構造 <div class=”container(container-fluid)”> <div class=”row”> <div class=”col-“>ここにコンテンツが入ります！</div> </div> </div> .container { width: 100%; padding-right: 15px; padding-lef
【Bootstrap】幅と高さを変更しよう！ - プログラミング未経験者の学習日記
Bootstrapで使用可能な幅と高さ 幅（Width） 高さ（Height） Bootstrapで使用可能な幅と高さ Bootstrap公式サイトの「Documentation」ー「Utilities」ー「Sizing」ページで確認することができます。 getbootstrap.com 幅（Width） 25%、50%、75%、100%、Autoの５種類用意されています。 Width 25% Width 50% Width 75% Width 100% Width auto <div class="w-25">Width 25%</div> <div class="w-50">Width 50%</div> <div class="w-75">Width 75%</div> <div class="w-100>Width 100%</div> <div class="w-auto">Wi
【Bootstrap】文字色や背景色を設定しよう！ - プログラミング未経験者の学習日記
Bootstrapで使用可能な色の調べ方 Color Background color Bootstrapで使用可能な色の調べ方 Bootstrap公式サイトの「Documentation」ー「Utilities」ー「Colors」ページで使用できる文字色と背景色を確認することができます。 getbootstrap.com Color 下記ページの「text-primary」や「text-secondary」などのクラスを指定してすることで対応した文字色に設定することができます。 .text-primary .text-secondary .text-success .text-danger .text-warning .text-info .text-light .text-dark .text-body .text-muted .text-white .text-black-50 .t
text-shadowのジェネレーターとプロパティについて | bad-company
text-shadowのプロパティについて基本的な設定Text Shadow text-shadow: 左右の位置 上下の位置 色; text-shadow: 2px 2px #f00;まず基本的な設定としては、左から何px / 上から何px / 色を指定してください。 左右および上下に関してはマイナスの数値を指定することもできます。 ぼかしの設定Text Shadow text-shadow: 左右の位置 上下の位置 ぼかし 色; text-shadow: 2px 2px 6px #f00;ぼかし(blur)も設定することができます。 なおぼかしについてはマイナスの数値は指定することはできません。 影を複数設定Text Shadow text-shadow: 左右の位置 上下の位置 ぼかし 色, 左右の位置 上下の位置 ぼかし 色; text-shadow: 2px 2px 6px #f
Bootstrap5設置ガイド
PST（米国太平洋時間）2021/5/5にBootstrap v5.0.0が公開されました。ここではBootstrap5の使い方をv4.xからの変更箇所も含めて日本語で解説しています。 解説はできるだけ最新版（v5.3.3）に対応するよう更新しています。 目次を見る 導入を見る ※Bootstrap4.xの解説は、Bootstrap4移行ガイドをご覧下さい。 ※Bootstrap3.xの解説は、Bootstrap3移行ガイドをご覧下さい。 Bootstrapとは？ もともとTwitter社のデザイナーや開発者が作成したBootstrapは、世界で最も人気のあるフロントエンドのフレームワークとオープンソースプロジェクトの1つとなっています。 Bootstrapは、Mark Otto（@mdo）、Jacob Thornton（@fat）の両氏によって2010年の中頃にTwitter社で作成され
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの「display: block;」が「display: block flow;」になる、displayプロパティで2値構文がサポートされます