CSS 記事一覧

div枠全体をリンクする

段組み間の余白を調整する

Float, Flexbox, Gridレイアウト, Bootstrap での段組みページの違いについて

column-count を利用した段組みで、途中で次の列に分割表示されないようにする

column-count を利用した段組み表示

グラデーションカラーのテキストを作成する

枠の幅で改行しない表示にする

画像の下部をトリミングする

スマートフォンとPCの場合で枠の順番を入れ替える

枠の下部がフェードアウトした表示の枠を作成する

縦に長いテーブルでテーブルの見出しがスクロールアウトしないようにするコードと表示結果

縁取り文字を表示する

CSSの記述で画像のURLを変数で記述する

スクロールするとセクションごとに背景画像が変化するページを作成する

ページをスクロールしても画像はスクロールしない枠を作成する

緩い円弧の枠を描画するコードと表示結果

枠からコンテンツがあふれる場合にスクロールバーを表示する

改行方法を変更する - word-break, overflow-wrap プロパティの利用

text-align:right でdiv枠内のimgタグの画像が左に寄せられる

CSSで半透明にすると内部のコンテンツ枠も透明になってしまう

Webページでスクロールできないようにする - CSS overflowプロパティを利用

画像の幅を親要素の枠の幅に合わせて表示するが、枠の幅が画像の元のサイズより広い場合には画像を拡大せずに表示する

画像の幅を親要素の枠の幅に合わせる

画像のカラーが外側にしみ出す効果、アンビエント効果を実装する

リンクの後ろにリンクのカテゴリを示すアイコンを表示する

border と padding を含めないサイズで枠の大きさを指定したい

模様のある影の枠を作成するコードと表示結果

SVG画像のバウンスのアニメーションの実装

テキスト文字列がジャンプするアニメーションを表現する

CSSで縞模様(ストライプ)のアニメーションを表現する

CSSで縞模様 / ストライプを描画する

CSSで width プロパティに auto を設定すると、img のwidth属性の指定が反映されない

セル内の長い英単語が改行されず、セルの幅やテーブルの幅がが意図した幅より広くなってしまう

Tableタグのセルで、min-width, max-width プロパティが動作しない

キャプションが複数行のボタンでインジケーターをボタンの高さの中心に配置したい

border と outline の違い

Chrome / Edge Webブラウザーでフォーカスされたボタンの内側に点線を描画する

ボタンのフォーカス時の太線の外枠を表示しないようにする

HTMLページでToolTips (ツールチップ) のポップアップ表示を実装する

HTML要素のブレンド合成モードを設定する

画像と同じサイズのレスポンシブ枠を作成し、画像を枠に合わせて表示する

正方形のレスポンシブ枠を作成する

縦横比が固定されたレスポンシブ枠を作成する

CSS中にUnicode文字を記述するコードと表示結果

ブロック要素に指定したいが、ブロック要素を改行させたくない

Webページでスクロールできないようにする - CSS Positionプロパティを利用

Webページでドロワーメニュー (Drawer Menu) を実装する

CSSでリンクを無効にする

画像を角丸長方形、角丸正方形 にマスクする

画像を円形にマスクする、円形に切り抜いて表示する

Divタグなどの枠の幅を文字列の幅に合わせたい

CSS / SVG を利用して、スネークタイプのスピナーリングのアニメーションを作成する

要素をアニメーションで非表示にする - 要素をフェードアウト表示する

非表示の要素をアニメーション表示する - 要素をフェードイン表示する

特定の形状でマスクして背景色のカラーを反転させる - 画像やSVGでマスクしたブレンド描画

マウスポインタの形状を変更する

コンテンツを表示する枠をページの中央に配置する

画面の幅に応じたフォントサイズを設定する

Grid Layout でカラム(セル) の最小幅を設定する

枠内のテキストの縦位置をCSSで指定する

CSSで table > tr > td セレクタを利用してもテーブルにスタイルが反映されない

テーブル(表)の行方向のみ、列方向のみセル間隔をあけたい

CSSを利用して表(Tableタグ)のキャプションの表示位置を設定する

領域の内側に余白を取る - CSS padding プロパティの利用

文字に影をつける (影付き文字の表示)

行間を広くする - 行の高さを指定する

高さのあるテーブルセルでのテキストの縦方向の表示位置を指定する

スタイルシートで表を作成する (スタイルシートによるテーブルの作成 table table-row table-cell)

CSSでwidthを100%指定しても 横スクロールバーが表示されるとスクロール分の長さだけ幅が足りなくなる

要素の領域は確保しつつ非表示にする - visibility プロパティの利用

visibility プロパティで要素を非表示に設定しても表示領域が確保されてしまう

要素を非表示にする - display プロパティの利用

グラデーションカラーのボタンを作成する

画像アイコンのボタンを作成する

ボタンコントロールのスタイル変更

CSSで画像に対してmin-heightプロパティを設定すると Safariで画像の縦横比が崩れる

テキストが枠からはみ出す場合の処理方法を指定する

枠から文字がはみ出ないようにする - オーバーフローしたテキストを非表示にする

枠から文字がはみ出す際に「…」で省略する - "..."によるオーバーフローテキストの省略

CSSで三角形のマークを表示する

要素の描画順・表示順を指定する - Z-indexによる要素の表示順の指定

<a> タグを <div> や <p>タグのようにブロックの終了で改行される動作に設定する - 要素のインライン、ブロックの指定

Webページ全体を暗くする、明るくする - CSSによるオーバーレイを利用したフェード効果

スタイルシートでサブクラスを指定する

必ず領域の幅で改行されるようにする / 長いASCII文字列の改行

スタイルシートで領域の幅と高さを設定する

領域の境界線を描画する - border プロパティの利用

ページや枠の背景色を設定する

個々の要素にクラスを設定して縞のテーブルの表示、ヘッダのスタイル変更、特定の列のスタイル変更をする

CSSを利用してテーブルの列のスタイルを変更する

CSSでテーブルの先頭行(1行目)のスタイルを変更する - CSS3の擬似クラスを利用してヘッダのスタイルを変更する

1行おきに行の色が違う縞のテーブルを表示する

CSSセレクタを用いてテーブルにスタイルを設定する - テーブルに設定されたクラスでセルにスタイルを反映させる

HTMLファイルにスタイルシートを埋め込む - 埋め込み型スタイルシートを利用する

DIVで段組みをした際、段組みの高さが外部のボックスに反映されずレイアウトが崩れる

<ol> <ul> <lt> タグのリスト要素のインデント幅をネストレベルごとに変更する

<ol> <ul> <li> タグのリスト要素のインデント幅を変更する

テキストを左寄せ、右寄せ、中央揃え(センタリング)で配置する

表(テーブル)のセルの幅を指定したにもかかわらず、意図した幅にならない

リストの項目(<ul> <li>タグ)の先頭記号をネストレベルごとに変更するコードと表示結果

画像のリンクの青色枠(ボーダー枠)を非表示にする

text-align:centerを指定したにもかかわらず、Div枠が中央に配置されない場合の対処法と表示結果

div枠でpaddingを指定するとサイズが大きくなり、はみ出てしまう

ULタグでメニューバーを作成するコードと表示結果

CSSアニメーション終了後に再度アニメーションを再生する

scale コマンドを利用した要素の拡大、縮小アニメーション

CSSアニメーション終了時に最初の状態に戻らないようにする

rotate コマンドを利用した要素の回転アニメーション

translate コマンドを利用した要素の移動アニメーション

要素をフェードアウトする

CSS アニメーションの変化の種類 (イージングの種類)

CSS キーフレームによるアニメーション

アニメーション再生の終了直後にJavaScriptを実行するコードと実行結果

枠の背景に画像を表示する

Backgroundプロパティを利用して画像をトリミングして表示する

背景画像のサイズを指定する

background-imageの背景画像の基準位置を指定する

background-clipプロパティーによる背景の塗りつぶし範囲の変更

CSS calc関数を利用して枠をページ中央に配置する

CSSで%での指定と、Pixelでの指定を組み合わせて設定したい - calc関数の利用

CSSでページ幅に合わせて右カラムの幅が変わる2段組みレイアウトを作成する (2段組みリキッドレイアウト)

ページ幅に合わせて左カラムの幅が変わる3段組みレイアウトを作成する (3段組みリキッドレイアウト)

ページ幅に合わせて中央カラムの幅が変わる3段組みレイアウトを作成する (3段組みリキッドレイアウト)

スタイルシートでヘッダとフッタがついて全体がセンタリングされている2段組みページを作成する

CSSを利用して、ヘッダとフッタのついた2段組みページを作成する

Float プロパティによる段組みの解除方法

Floatプロパティを利用したCSSによる2段組みレスポンシブページの実装

スタイルシートのFloatプロパティを利用して、シンプルな2段組みページを作成する

Floatプロパティを利用して段組みをしたにもかかわらず、レイアウトが崩れる (IE8,FireFoxで発生しIE7では正常に動作する)

グリッドレイアウトで内部の枠の幅を比率で指定する

グリッドレイアウトでグリッドを枠の幅に応じて折り返す

Grid Layout のグリッド枠をインラインで表示したい (inline-grid の利用)

Grid Layout で複数のグリッドにまたがるセルを作成する - グリッドの結合

Grid Layout で表示領域幅にレスポンシブなグリッドを作成する - px と fr の混在グリッドの作成

Grid Layout でグリッドの幅を領域やページ全体の幅の比率で指定する

グリッドレイアウト (Grid Layout) の利用

CSSのmarginプロパティを設定しても設定したサイズの余白が開かない - CSS margin プロパティの相殺

領域の外側に余白を取る - CSS margin プロパティの利用

DIVタグを入れ子にした場合 marginが有効にならない

aタグ(<a>)でmargin,paddingが無視される

一定量スクロールしても背景が変化しないページを作成する

要素ごとにスクロール速度を変更する - 視差効果 パララックス (parallax) の実装

CSS Scroll Driven Animaion でスクロールに応じて右からスライドインするアニメーションを作成する

position: sticky を設定したが、枠がスクロールに追従しない

スクロールに追従する枠を作成する - Sticky Position を利用したスクロール追従枠の作成

Transition プロパティを利用した要素の拡大・縮小アニメーション

クリックでピックアップされてズーム表示される枠を作成する

Transition プロパティを利用した要素の移動アニメーション

CSSで透明度の変化するアニメーションを実装する - transitionプロパティを利用した フェードイン、フェードアウトの実装

JavaScriptでCSSのスタイルを動的に変更する方法

ブレンドモードを設定した box-shadow の影を表現するコードと表示結果

枠に影をつけるコードと表示結果 - 枠にドロップシャドウをつける

枠に影をつけるコードと表示結果 - box-shadowプロパティを利用

ドロップシャドウのある枠のコードと表示結果 - 影を画像で表現する方法

複数階層を持つポップアップ(ドロップダウン) メニューの作成 - CSSによる複数階層メニュー

ポップアップ(ドロップダウン) メニュー にアニメーションの動作を追加する

ポップアップ(ドロップダウン) メニュー の余白を調整する

ポップアップ(ドロップダウン) メニュー のようなUIを作成する - CSSによるポップアップメニュー

ポップアップ領域を表示する (ポップアップメニューやポップアップウィンドウなど)

画面の中央にレイヤーを表示する - 絶対座標を指定してレイヤーを表示する

CSSメディアクエリの記述順と優先度

CSSメディアクエリで Microsoft Edge を指定する

ウィンドウ幅に応じて枠の表示、非表示を切り替える - CSS メディアクエリを利用

スマートフォンとPCでHTMLページの枠の表示・非表示を切り替える - メディアクエリを利用

CSSメディアクエリで Internet Explorer 10/11 を指定する

印刷時に画面のデザインやスタイルを変更する

レスポンシブページで、DIV枠などのブロック要素が中心で折り返されるようにしたい

画像をトリミングする CSS clip-path プロパティを利用

画像をトリミングする CSS object-fit プロパティを利用

リンクにマウスポインタが重なった際にリンクのスタイルを変更する

content プロパティに画像を設定するコードと実行結果

後続兄弟結合子 後方セレクター - CSS内の"~"の意味が分からない

要素の中にある下位の要素に対してスタイルを設定する

スタイルシート中の . # + > 記号の意味

チェックされている要素のスタイル設定する - Checked疑似クラス

特定のクラスの特定IDでのスタイルを指定する

指定したHTMLタグかつ、指定したIDが設定されているタグのスタイルを設定するコードと表示結果

指定したHTMLタグでかつ、指定したクラスが設定されているタグのスタイルを設定するコードと表示結果

すべての要素にスタイルを設定する

隣接する要素のスタイルを設定する - 隣接セレクタの利用 - CSS内の"+"の意味が分からない

要素の中にある直下の子要素に対してスタイルを設定する - CSS内の">"の意味が分からない

複数のセレクタに対してスタイルを設定する

特定の属性を持つ要素のスタイルを設定する - CSS内の [...] の意味が分からない

要素の前後にコンテンツを挿入する

先頭の文字のスタイルを設定する - first-letter疑似クラスの利用

先頭の行のスタイル設定 - first-line疑似クラス

最初、n番目などの指定した位置にある要素のスタイルを設定する - Child系疑似クラス

特定の言語でのスタイルを定義する - lang疑似クラスの利用

フォーカスのあるコントロール、要素のスタイルを設定する - フォーカス疑似クラスの利用

リンクの色やスタイルをリンクの状態ごとに変更する - リンク疑似クラス (リンクセレクター)

特定のIDのスタイルを設定する - IDセレクター

特定のクラスのスタイルを定義する - クラスセレクターの利用

特定のタグ(要素)のスタイルを定義する - 要素型セレクター

親要素の幅やページの幅の比率で幅のサイズを指定する

マージン、パディングを考慮しないビューポートの幅や高さの割合でオブジェクトのサイズを指定する

CSSでのサイズ指定

CSS変数のスコープの範囲

CSS内での変数の宣言、値の代入、値の参照

flexboxで内部のブロック列を折り返す

align-itemsがstretchのFlexbox枠で内部のコンテンツの縦方向の配置を変更する - Flexbox枠内コンテンツの縦位置の中央揃え、下揃え

Flexboxで枠間の余白を設定する

Flexboxで枠の幅をコンテンツの幅に合わせたサイズにする

align-items と align-content の違い

行の枠の高さは揃えた状態で、内部の枠の縦方向の整列方法を変更する (同一行の枠の高さをそろえた状態で、内部の枠の縦位置を中央揃え、下端揃えにする)

Flexbox の内部枠の縦方向の配置を変更する (内部の枠の縦位置を中央揃え、下端揃えにする)

Flexbox の枠で一番右の枠を1つだけ右側に配置する

Flexbox の枠で一番左の枠を1つだけ左側に配置する

Flexbox の枠の配置位置を指定する - Flexboxの横方向の配置の指定

Flexbox の枠の幅を指定する - flex-basis プロパティの利用

枠の幅が折り返し不要な幅より小さくなった場合に枠幅をどの程度縮めるかの動作を指定する - flex-shrink プロパティの利用

Flexbox で Flex プロパティを全く指定しない場合の動作

枠の幅が折り返し不要な幅より大きくなった場合に枠幅をさらに広げる動作を指定する - flex-grow プロパティの利用

Flexbox の枠の並びの方向を変更する - direction プロパティの利用

Flexboxの利用 - Flexbox を利用した段組みの作成

FlexBox でカラムの最大幅を設定する

FlexBox でカラムの最小幅を設定する

FlexBox枠内のPreタグ領域がFlexBoxの枠をはみ出してしまう現象の回避方法

ページ幅に合わせて左右のカラム幅が変わる2段組みレイアウトを作成する (floatを利用した2段組みリキッドレイアウト %指定 右側メニュー)

テキストボックスで Google Chrome と Internet Explorer のフォントが異なる

複数行テキストボックス(textareaタグ)で Google Chrome と Internet Explorer の英文字フォントが異なる

Google Chrome で英数文字のフォントが太く表示される

Google Chrome の複数行テキストボックスの行間が狭い

font-styleプロパティを設定してもマルチバイト文字 (日本語文字) が斜体で表示されない

文字を太字にする、細字にする

HTML / CSS で定義されているカラーコード、カラーネーム

テキストボックスが編集状態のときに表示される枠の色やスタイルを変更する

段落の先頭行をインデントする - 段落の先頭文字の字下げ

スタイルシートによるフォントの変更 - フォントやフォントファミリーを変更する

テキストをイタリック・斜体にする

スタイルシートによる文字色、フォントカラーの変更

CSSによる文字の大きさの変更 、フォントサイズの変更

別ファイルのスタイルシートをリンクしてスタイルを利用する - 外部スタイルシートファイルの利用

タグ内にstyle属性を記述してスタイルを利用する

文字や枠などのHTML要素の透明度を設定する

角の丸い枠を描画するコードと表示結果

テキストボックスにマウスカーソルが重なったときに、テキストボックスの枠やスタイルを変更する

テキストボックスのフォーカス時の太線の外枠を表示しないようにする

画像を選択するUIを作成する - RadioButton を利用

HTML, CSS, JavaScriptでの色指定

テキストボックスに文字が入力されている場合にだけ、テキストボックスの中にクリアボタンを設置する

テキストボックスの中にクリアボタンを設置する

アイコン Webフォントを作成する (Webページ用アイコンフォントの作成)

UL, LIタグで作成したリストの項目の先頭の記号を画像に変更するコードと実行結果

サイドバーの幅をドラッグで変更できるようにする - HTMLページでのスプリッタの作成

ページのカラーテーマをページ表示中に変更できるようにする

トグルで動作するアニメーションつき折りたたみ可能なパネルのコードと実行結果

アニメーション動作する 折りたたみ可能なパネルの作成

クリックをトリガーにしたアニメーション - CSS JavaScriptを用いたクリックで開始するアニメーション

アコーディオンパネルのコードと表示結果 - 枠のコンテンツの冒頭が少し見えるアコーディオンパネル

OSのカラー設定がダークモードの場合にダークモード対応したWebページを表示し、手動でカラーモードを変えられるようにする

領域の境界線をデフォルトの位置より内側や外側に描画する - outline-offset プロパティの利用

領域の境界線を描画する - outline プロパティの利用

親要素のpositionプロパティの設定の違いによる position:absolute の動作の違い

文字や枠の表示位置を指定する

scaleで拡大した要素の位置がずれる | scale で拡大した要素の座標値の表現

TableのCellPaddingをスタイルシートで変更する

スタイルシートでテーブルの列幅を設定する

TableのCellSpacingをスタイルシートで変更する - CSSでテーブルの枠線を1重にする

Webフォントを利用する (woff Webフォントを利用)

WebブラウザーでHTML表示時にフォントを指定しない場合に使用されるフォント

折りたたみ可能なパネルの作成 - CSSのみを利用した折りたたみ領域 / アコーディオンパネル

ページ内リンクでスムーズにスクロールする - scroll-behavior プロパティを利用したスムーズクロール

Google Chrome, Microsoft Edge で標準色をダークモード / ダークカラーに変更する

Google Chrome, Microsoft Edge でWebブラウザーのスクロールバーをダークモードのカラーに変更する

OSやWebブラウザーのカラー設定がダークモードの場合に、ダークカラーやスタイルでページを表示する

角の丸いテキストボックスを作成する

角の丸いテキストボックスを作成する (画像を利用)

Segoe UI フォントの挙動 - Segoe UIフォントは日本語フォントなのか

font-family に複数のフォントを指定する場合の動作について

Webページのテキストのフォントに BIZ UDゴシック BIZ UD明朝 を利用する

OpenTypeのフォントで文字の間隔を詰めたい - 游ゴシック・游明朝の文字の間隔がスカスカなのを詰めたい

Webページのテキストのフォントに 游ゴシック 游明朝 を利用する

CSSでページ幅に合わせてコンテンツエリアの幅が変わるレイアウトを作成する (リキッドレイアウト 余白部分を％指定)

CSSでページ幅に合わせてコンテンツエリアの幅が変わるレイアウトを作成する (リキッドレイアウト 余白部分をピクセル指定)

ページ幅に合わせて3カラムの幅が変わる3段組みレイアウトを作成する (3段組みリキッドレイアウト %指定 右カラム、左カラムメニュースタイル)

ページ幅に合わせて3カラムの幅が変わる3段組みレイアウトを作成する

ページ幅に合わせて左右のカラム幅が変わる2段組みレイアウトを作成する (2段組みリキッドレイアウト %指定 左側メニュー)

CSSでページ幅に合わせて左右のカラム幅が変わる2段組みレイアウトを作成する (2段組みリキッドレイアウト %指定)

ページ幅に合わせて左カラムの幅が変わる2段組みレイアウトを作成する (2段組みリキッドレイアウト)