CSS

 Computer >> コンピューター >  >> プログラミング >> CSS
  1. タイプスケールとは？必要性とプロジェクトに合った選び方を徹底解説

    タイプスケールとは、製品やサイト内のさまざまなテキスト要素を表現するために、慎重に選び抜かれたフォントサイズの集合のことです。バランスの取れた調和のとれた構成を実現するために使われます。 自前のタイプスケールから同じフォントサイズを一貫して使用することで、デザインに自然と統一感が生まれ、階層構造や優先順位がバラバラに見える製品を防ぐことができます。 なお、タイプスケールは「タイポグラフィックスケール」と呼ばれることもあります。 制約がもたらす一貫性 原則として、タイプスケールは余白のスケール（スペーシングスケール）やカラーパレットと同じように機能します。デザインの選択肢が限られているほど、製

  2. CSSプレフィックスの入力に時間を無駄にしない――Autoprefixerで自動化しよう

    ブラウザは歴史的に、CSS開発者にとって扱いにくい存在でした。特に古いブラウザや、登場したばかりの実験的なCSSプロパティでは、ブラウザごとの非互換性が多く発生していました。この問題を回避するには、特定のCSSプロパティにベンダープレフィックス（接頭辞）を手動で付与し、すべてのブラウザでUIが同じように表示され、同じように動作するように調整する必要がありました。 flexboxに必要だった膨大なプレフィックス その代表例がCSSのflexboxプロパティです。すべてのモダンブラウザに加えて、flexboxが部分的にしかサポートされていないIE10・IE11でも動作させるには、なんと4つのプレフ

  3. モバイルファーストデザインは実際にどう機能するのか？ブレークポイントの基本と最適な設定数を解説

    モバイルファーストデザインとは、まずスマートフォン向けにWebサイトを構築し、その後CSSのメディアクエリを使って、タブレットやデスクトップなどより大きな画面サイズでの表示を制御していく手法のことです。言い換えれば、メディアクエリを活用してWebサイトをレスポンシブ（さまざまな画面サイズに適応する設計）にしていく、ということです。 メディアクエリの基準となる画面幅のことを「ブレークポイント」と呼びます。たとえば、画面幅800pxを境にモバイルレイアウトからタブレットレイアウトへ切り替えたい場合は、次のようなメディアクエリを作成します。 @media screen and (min-width:

  4. CSSの「詳細度（Specificity）」とは？仕組みと実践的な対処法を解説

    CSSでは、セレクターの「強さ」を数値で判断する仕組みが採用されています。この強さ、すなわちどのセレクターが最も力を持つかを表す概念が詳細度（Specificity）です。詳細度が最も高いセレクターは、他の弱いセレクターによってどんなスタイルが適用されていようと、常にHTML要素の見た目を決定づけます。 たとえばbutton要素にスタイルを当てたい場合、その方法は一通りではありません。CSSでよく使われるセレクターは、type（要素型）、class（クラス）、idの3種類です。 3つの基本セレクターと優先順位 まず、要素型セレクターを使って要素に直接スタイルを適用する方法です。 button

  5. CSSで最初の要素以外をまとめて選択する方法：:not(:first-child)セレクターの使い方

    CSSの:not(:first-child)セレクターを使えば、HTML文書内の最初の要素を除いた残りの要素をすべて選択できます。この記事では、基本的な使い方から実践的な活用例までわかりやすく解説します。 たとえば、以下のルールセットをCSSスタイルシートに追加すると、サイト全体のすべてのh2要素に64pxの上マージンが適用されます。 h2 { margin-top: 64px; } しかし、「サイト全体の最初のh2要素には上マージンを付けたくないが、それ以外のすべてのh2要素には付けたい」というケースではどうすればよいでしょうか。 :not(:first-child)セレクターを使う

  6. 大文字(オールキャップス)テキストにはなぜ「字間」が必要？タイポグラフィの基本とCSSでの設定方法

    大文字(オールキャップス)のテキストには、ほんの少しの字間(レタースペーシング)を加えるだけで、読みやすさが大きく向上します。本記事ではその理由と、CSSでの実装方法を具体例つきで解説します。 タイポグラフィの世界では、テキストをすべて大文字で表記する際に、文字同士の間へ適度な余白を設けるのが定石です。字間を調整せずに放置すると、文字が詰まりすぎて快適に読めなくなるためです。 レタースペーシング(letter-spacing)はトラッキング(tracking)とも呼ばれ、両者は同義語です。どちらも、複数の文字や単語のグループ間のスペース量を指します。コミュニケーションの現場では、Web制作に

  7. CSSだけ背景色がループするアニメーションを作る方法【初心者向け】

    CSSの@keyframesと各種アニメーションプロパティを使えば、JavaScript不要の純粋なCSSだけで、背景色が滑らかにループするアニメーションを作成できます。この記事では、初心者にもわかりやすい手順でその実装方法を解説します。 この例では、HTMLの<body>要素に直接CSSを適用していますが、紹介するコードは任意のHTML要素、クラス、IDに対しても同じように応用できます。 完成版のコード 完成形を確認したい方は、こちらのデモを参考にしてください。 注意：このコードはInternet Explorer 9では動作しません。モダンブラウザでの利用を前提としています。

  8. CSSだけで実現！ホバー時に要素をズーム（拡大）させる方法

    CSSのtransformプロパティが持つ変形メソッドscale()を使えば、JavaScriptに頼らず、純粋なCSSだけでホバー時に要素をズーム（拡大）させることができます。この記事では、その具体的な実装方法をわかりやすく解説します。 ホバーでズーム・スケールアップ 下のボックスにマウスカーソルを乗せてみてください。 マウスを乗せた瞬間、ボックスは元のサイズのちょうど1.5倍——つまり50%大きく表示されます。 CSSのtransformプロパティに含まれるscale()メソッドは、要素のサイズを拡大・縮小できる機能です。3Dと2Dの両方に対応しており、このシンプルな例では2Dを使用しま

  9. CSSのpointer-eventsプロパティで特定要素のホバー・マウスオーバーイベントを無効化する方法

    CSSのpointer-eventsプロパティを活用すれば、特定のHTML要素でマウスオーバー（:hover）イベントを無視・無効化できます。本記事では、実際のWeb制作で遭遇したホバー問題を例に、その解決方法を段階的に解説します。 最近、クライアント向けにチーム紹介ギャラリーページを制作しました。各ギャラリーアイテムはUIカードで表現されており、カードの上にマウスを乗せるとオーバーレイの色が変化する仕組みです。しかし開発中に予期しない問題に直面し、それがこのチュートリアルを書くきっかけとなりました。 UIカードの内容と構造 各ギャラリーカードは、次の要素で構成されています。 従業員の写真（

  10. インラインCSSでホバー効果を実装するには？JavaScriptで代用する方法

    HTMLメールのテンプレートなど、メール配信サービスの仕様によっては、インラインCSS（style属性に直接記述するCSS）を書かざるを得ない場面があります。 そこでよくある疑問が、「インラインCSSでもホバー効果は実装できるのか？」という点です。 結論：インラインCSSだけではホバー効果は作れない 残念ながら、インラインCSS単体ではhover疑似クラスを使用できません。:hoverのような疑似クラスはスタイルシート内でのみ定義できるためです。 しかし、あきらめる必要はありません。JavaScriptのonMouseOverとonMouseOutイベントを使えば、CSSのhover効果とまっ

  11. CSSの2行追加でpreタグを100%レスポンシブにする方法

    CSSプロパティをほんの数行追加するだけで、HTMLのpreタグで囲まれたコードスニペットを100%レスポンシブにする方法を解説します。 長いコードがレイアウトを崩す問題 チュートリアルサイトなどでよく見かける問題のひとつが、preタグで囲まれた長いコードスニペットがページの幅からはみ出し、レイアウト全体が崩れてしまうというものです。 この原因は、デフォルトではpreタグのCSSプロパティwhite-spaceがnormalに設定されていることにあります。 pre { white-space: normal; } white-space: pre-wrapで行の折り返しに対応 この問題を解

  12. CSS Flexboxで要素を上下左右（垂直・水平方向）に中央揃えする方法

    CSSのFlexbox（フレックスボックス）を使えば、要素を垂直方向・水平方向の両方で簡単に中央揃えできます。従来のようなfloatやpositionのテクニックに比べてコードがシンプルになり、可読性や保守性も大きく向上します。この記事では、Flexboxによる中央揃えの基本から実際の実装例までを解説します。 Flexboxで中央揃えを行う基本の考え方 Flexboxでの中央揃えは、親要素（フレックスコンテナ）に対してスタイルを指定するのがポイントです。子要素そのものに位置調整のCSSを書く必要はありません。 .container { display: flex; justif

  13. CSSだけでSVGの矢印アイコンをバウンドさせるアニメーションの作り方

    今回は、CSSアニメーションを使ってSVGの矢印アイコンを上下にバウンドさせる方法を解説します。さらに、CSSのさまざまなアニメーションプロパティを活用して、アニメーションの種類・タイミング・再生時間を自由に調整するテクニックも一緒に学んでいきましょう。 なぜこの技術が役立つのか？ アニメーションは、適切に使えば次のような効果をもたらします。 ユーザーを目的の場所へ自然に導くことができる ユーザーにアクション（クリックやスクロールなど）を促せる ユーザーの関心があるうちに、注意を効果的に引きつけられる 必要な環境 このチュートリアルを進めるには、テキストエディタが必要です。ローカル

  14. CSSでオートフィル入力フィールドの黄色い背景色を削除する方法

    一部のブラウザでは、ウェブサイトの入力フィールドにオートフィル（自動入力）が適用されると、なんとも言えない黄色い背景色が勝手に表示されることがあります。なぜそのような仕様になっているのかは謎ですが、この厄介な黄色を簡単に消す方法はお伝えできます。 まずは、オートフィルによって黄色く染まってしまった入力フィールドの見た目をご覧ください。 なぜこれが「問題」なのか？ もしサイトのカラーパレットが、この鼻水のような黄色と偶然マッチしているのであれば、問題ではないかもしれません。しかし、ほとんどの場合、この強制的な背景色はデザインの一貫性を損ない、ページ全体の印象を台無しにしてしまいます。 これは

  15. CSSで単語の最初の文字を大文字にする方法（first-letterセレクタの使い方）

    CSSで単語の最初の文字を大文字にするには、first-letterセレクタ（擬似要素）を使用します。HTML側のテキストを書き換えることなく、スタイルシートだけで表示を変更できるのが特徴です。 基本的な使い方 たとえば、すべて小文字で書かれた見出しがあるとします。 <h2>this is a lowercase heading</h2> この「this」の最初の「t」を大文字にしたい場合は、CSSスタイルシートでh2にfirst-letterセレクタを指定するだけで実現できます。 h2::first-letter { text-transform: capital

  16. CSSでテキストを円形に回り込ませる方法｜shape-outsideプロパティの使い方

    CSSを使えば、段落テキストを円形の画像や要素の周りに自然に回り込ませることができます。本記事では、その具体的な実装方法をコード例とともにわかりやすく解説します。 コンテンツの見せ方にもう少し変化をつけたい、雑誌のようなおしゃれなレイアウトを実現したい——そんなときにおすすめなのが、CSSによるテキストの回り込み制御です。特に円形の画像と組み合わせれば、記事全体がぐっと洗練された印象になります。 実装手順 1. HTMLを準備する まずは、ベースとなるHTMLを用意しましょう。 ここで注目したいのは、<article> 要素には post クラスが、<img> 要素に

  17. Flexboxで子要素が縦に伸びるのを防ぐ方法|CSSで高さのストレッチを解消する3つのテクニック

    Flexboxコンテナの中にボタンが入っているケースを考えてみましょう。 このボタン(子要素)を、justify-contentプロパティを使って水平方向に中央揃えしてみます。 .container { height: 300px; display: flex; justify-content: center; } すると、ボタンの高さが親要素の高さ(この場合は300px)いっぱいに引き伸ばされてしまいます。 これはおそらく意図した動作ではないはずです。 Flexコンテナの子要素(Flexアイテム)が垂直方向に引き伸ばされるのを防ぐには、いくつかの方法があります。それぞれ詳しく

  18. CSSでYouTube動画の埋め込みをレスポンシブ対応にする方法

    WebサイトにYouTube動画を埋め込み、CSSを使ってモバイルからデスクトップまであらゆるデバイスで完全にレスポンシブ表示させる方法を解説します。 YouTubeから動画の埋め込みコードをコピーすると、次のような <iframe> タグが取得できます。 残念ながら、iframeはブラウザ上で正しいアスペクト比を保って表示するために固定の幅と高さが必要です。そのため、iframeは初期状態ではレスポンシブデザインとの相性が良くありません。 しかし、iframeを親コンテナで囲むことで、動画の埋め込みを簡単にレスポンシブ対応させることができます。 続いて、CSSでこの動画コンテ

  19. CSSでテキスト選択を無効にする方法【user-selectプロパティの使い方】

    CSSのuser-selectプロパティを使えば、Webページ上のテキスト選択を簡単に無効化できます。この記事では基本的な使い方からブラウザ対応まで、コード例とデモ付きでわかりやすく解説します。 デフォルトではテキストは自由に選択できる 通常、Webブラウザではどのサイトでもテキストを選択できます。ただし、これは本物のテキスト要素に限られます。画像の中に文字が焼き込まれているような場合は選択できません。 テキストの選択はマウスでもキーボードでも行えます。たとえばCmd + A(Mac)やCtrl + A(Windows)でページ全体を選択できますね。 user-selectプロパティでテキスト

  20. CSSを使って順序なしリストに四角いビュレット（行頭記号）を作る方法

    CSSのlist-style-typeプロパティを使えば、順序なしリスト（<ul>）の行頭記号を簡単に四角形へ変更できます。この記事では、その具体的な手順と表示例をわかりやすく解説します。 デフォルトのビュレットは「黒丸（disc）」 Webページ上の順序なしリスト（<ul>）は、特に指定しない場合、丸いビュレット（黒丸）が表示されます。これはブラウザのデフォルトスタイルによるものです。 丸いビュレットは、CSSでは次のように指定されています。 ul { list-style-type: disc; } 実際の表示は以下のようになります。 HTML CSS Jav

Total 1579 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:74/79  20-コンピューター/Page Goto:1 68 69 70 71 72 73 74 75 76 77 78 79