iPentec.com  /  Document

CSS 記事一覧

CSS記事のインデックスページです。


トピックス記事

CSS基本プロパティ

CSS のページ

CSS 一般

画像の下部をトリミングする
スマートフォンと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タグでメニューバーを作成するコードと表示結果

Aタグ, HTML, HTMLタグ

div枠全体をリンクする

Bootstrap

段組み間の余白を調整する
Float, Flexbox, Gridレイアウト, Bootstrap での段組みページの違いについて

column-count

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

CSS Animation

CSSアニメーション終了後に再度アニメーションを再生する
scale コマンドを利用した要素の拡大、縮小アニメーション
CSSアニメーション終了時に最初の状態に戻らないようにする
rotate コマンドを利用した要素の回転アニメーション
translate コマンドを利用した要素の移動アニメーション
要素をフェードアウトする
CSS アニメーションの変化の種類 (イージングの種類)
CSS キーフレームによるアニメーション

CSS Animation, JavaScript

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

CSS background-image

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

CSS background-image, CSS 画像クリッピング

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

CSS background-image, HTML

背景画像のサイズを指定する
background-imageの背景画像の基準位置を指定する
background-clipプロパティーによる背景の塗りつぶし範囲の変更

CSS calc 関数

CSS calc関数を利用して枠をページ中央に配置する
CSSで%での指定と、Pixelでの指定を組み合わせて設定したい - calc関数の利用

CSS Float, CSS Grid Layout, Flexbox, リキッドレイアウト, 段組み

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

CSS Float, CSS Grid Layout, Flexbox, 段組み

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

CSS Float, 段組み

Float プロパティによる段組みの解除方法
Floatプロパティを利用したCSSによる2段組みレスポンシブページの実装
スタイルシートのFloatプロパティを利用して、シンプルな2段組みページを作成する
Floatプロパティを利用して段組みをしたにもかかわらず、レイアウトが崩れる (IE8,FireFoxで発生しIE7では正常に動作する)

CSS Grid Layout

グリッドレイアウトで内部の枠の幅を比率で指定する
グリッドレイアウトでグリッドを枠の幅に応じて折り返す
Grid Layout のグリッド枠をインラインで表示したい (inline-grid の利用)
Grid Layout で複数のグリッドにまたがるセルを作成する - グリッドの結合
Grid Layout で表示領域幅にレスポンシブなグリッドを作成する - px と fr の混在グリッドの作成
Grid Layout でグリッドの幅を領域やページ全体の幅の比率で指定する
グリッドレイアウト (Grid Layout) の利用

CSS margin

CSSのmarginプロパティを設定しても設定したサイズの余白が開かない - CSS margin プロパティの相殺
領域の外側に余白を取る - CSS margin プロパティの利用
DIVタグを入れ子にした場合 marginが有効にならない
aタグ(<a>)でmargin,paddingが無視される

CSS Scroll Driven Animaion

一定量スクロールしても背景が変化しないページを作成する
要素ごとにスクロール速度を変更する - 視差効果 パララックス (parallax) の実装
CSS Scroll Driven Animaion でスクロールに応じて右からスライドインするアニメーションを作成する

CSS Sticky

position: sticky を設定したが、枠がスクロールに追従しない
スクロールに追従する枠を作成する - Sticky Position を利用したスクロール追従枠の作成

CSS Transition

Transition プロパティを利用した要素の拡大・縮小アニメーション
クリックでピックアップされてズーム表示される枠を作成する
Transition プロパティを利用した要素の移動アニメーション
CSSで透明度の変化するアニメーションを実装する - transitionプロパティを利用した フェードイン、フェードアウトの実装

CSS スタイル変更, HTML, JavaScript

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

CSS ドロップシャドウ

ブレンドモードを設定した box-shadow の影を表現するコードと表示結果
枠に影をつけるコードと表示結果 - 枠にドロップシャドウをつける
枠に影をつけるコードと表示結果 - box-shadowプロパティを利用

CSS ドロップシャドウ, HTML

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

CSS ドロップダウンメニュー

複数階層を持つポップアップ(ドロップダウン) メニューの作成 - CSSによる複数階層メニュー
ポップアップ(ドロップダウン) メニュー にアニメーションの動作を追加する
ポップアップ(ドロップダウン) メニュー の余白を調整する
ポップアップ(ドロップダウン) メニュー のようなUIを作成する - CSSによるポップアップメニュー

CSS ポップアップ表示

ポップアップ領域を表示する (ポップアップメニューやポップアップウィンドウなど)
画面の中央にレイヤーを表示する - 絶対座標を指定してレイヤーを表示する

CSS メディアクエリ

CSSメディアクエリの記述順と優先度
CSSメディアクエリで Microsoft Edge を指定する
ウィンドウ幅に応じて枠の表示、非表示を切り替える - CSS メディアクエリを利用
スマートフォンとPCでHTMLページの枠の表示・非表示を切り替える - メディアクエリを利用

CSS メディアクエリ, Internet Explorer

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

CSS メディアクエリー

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

CSS メディアクエリー, HTML

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

CSS 画像クリッピング

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

CSS 疑似クラス

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

CSSセレクター

content プロパティに画像を設定するコードと実行結果
後続兄弟結合子 後方セレクター - CSS内の"~"の意味が分からない
要素の中にある下位の要素に対してスタイルを設定する
スタイルシート中の . # + > 記号の意味
チェックされている要素のスタイル設定する - Checked疑似クラス
特定のクラスの特定IDでのスタイルを指定する
指定したHTMLタグかつ、指定したIDが設定されているタグのスタイルを設定するコードと表示結果
指定したHTMLタグでかつ、指定したクラスが設定されているタグのスタイルを設定するコードと表示結果
すべての要素にスタイルを設定する
隣接する要素のスタイルを設定する - 隣接セレクタの利用 - CSS内の"+"の意味が分からない
要素の中にある直下の子要素に対してスタイルを設定する - CSS内の">"の意味が分からない
複数のセレクタに対してスタイルを設定する
特定の属性を持つ要素のスタイルを設定する - CSS内の [...] の意味が分からない
要素の前後にコンテンツを挿入する
先頭の文字のスタイルを設定する - first-letter疑似クラスの利用
先頭の行のスタイル設定 - first-line疑似クラス
最初、n番目などの指定した位置にある要素のスタイルを設定する - Child系疑似クラス
特定の言語でのスタイルを定義する - lang疑似クラスの利用
フォーカスのあるコントロール、要素のスタイルを設定する - フォーカス疑似クラスの利用
リンクの色やスタイルをリンクの状態ごとに変更する - リンク疑似クラス (リンクセレクター)
特定のIDのスタイルを設定する - IDセレクター
特定のクラスのスタイルを定義する - クラスセレクターの利用
特定のタグ(要素)のスタイルを定義する - 要素型セレクター

CSS単位

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

CSS変数

CSS変数のスコープの範囲
CSS内での変数の宣言、値の代入、値の参照

flexbox

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

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 でカラムの最小幅を設定する

FlexBox, preタグ

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

FlexBox, リキッドレイアウト, 段組み

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

Google Chrome, Internet Explorer, Microsoft Edge, Windows

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

Google Chrome, Windows

Google Chrome で英数文字のフォントが太く表示される
Google Chrome の複数行テキストボックスの行間が狭い

HTML

font-styleプロパティを設定してもマルチバイト文字 (日本語文字) が斜体で表示されない
文字を太字にする、細字にする
HTML / CSS で定義されているカラーコード、カラーネーム
テキストボックスが編集状態のときに表示される枠の色やスタイルを変更する
段落の先頭行をインデントする - 段落の先頭文字の字下げ
スタイルシートによるフォントの変更 - フォントやフォントファミリーを変更する
テキストをイタリック・斜体にする
スタイルシートによる文字色、フォントカラーの変更
CSSによる文字の大きさの変更 、フォントサイズの変更
別ファイルのスタイルシートをリンクしてスタイルを利用する - 外部スタイルシートファイルの利用
タグ内にstyle属性を記述してスタイルを利用する
文字や枠などのHTML要素の透明度を設定する
角の丸い枠を描画するコードと表示結果

HTML, HTML テキストボックス

テキストボックスにマウスカーソルが重なったときに、テキストボックスの枠やスタイルを変更する
テキストボックスのフォーカス時の太線の外枠を表示しないようにする

HTML, HTML ラジオボタン, HTMLタグ

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

HTML, JavaScript

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

HTML, Webフォント, デザイン, フォント

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

HTMLリスト

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

JavaScript

サイドバーの幅をドラッグで変更できるようにする - HTMLページでのスプリッタの作成
ページのカラーテーマをページ表示中に変更できるようにする
トグルで動作するアニメーションつき折りたたみ可能なパネルのコードと実行結果
アニメーション動作する 折りたたみ可能なパネルの作成
クリックをトリガーにしたアニメーション - CSS JavaScriptを用いたクリックで開始するアニメーション

JavaScript, アコーディオンパネル

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

JavaScript, ダークモード

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

outline

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

position プロパティ

親要素のpositionプロパティの設定の違いによる position:absolute の動作の違い
文字や枠の表示位置を指定する

scale

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

Table

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

Webフォント

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

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段組みリキッドレイアウト)
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
SNSコンテンツ
YouTube
Instagram
Pinterest
X
iPentec
iPentecについて
プライバシー
お問い合わせ
Copyright © 1995–2025 iPentec all rights reserverd.