HTML&CSSリファレンス

 

HTML

&CSS

Quick Reference

HTML

グループ化

テキスト

埋め込み

img 画像

picture source レスポンシブイメージ

テーブル

CSS

規則

セレクタ

各種セレクタ

::before ::after

プロパティ

目的別HTML+CSSデザイン

中央寄せ

縦、横方向に中央配置

動くCSSデザイン

自在デザイン対応divドロップダウンメニュー

リストを使ったドロップダウンメニュー

解像度に応じたデザインの切り替え

切り替えタブdivボックス

徐々に文章を透明化、すべて読むをクリックで全文表示

続きを読む・閉じる アコーディオン

クリックでボックスの表示と非表示

クリックでボックスの表示と非表示をアニメーションを交えて

テキストのデザイン

全角日本語文字を斜め斜体にする

文字を徐々に表示するアニメーション

三角▲や不等号記号>の向きを変える

蛍光ペンでマーカーを引く

文字に影をつける

a リンクのアンダーラインを消す

mark 背景色を消しアンダーラインを引く

del 打消し線の色、太さ、種類を変更

s 打消し線の太さと色を変更

emをイタリック体にする

emを斜体にしない

strongを太字にしない

ブロックのデザイン

画像にカーソルを合わせると徐々に白くさせる

画像を徐々に表示するアニメーション

まとめ箇条書き表リスト

画像、写真の上に文字をのせる

divボックスのデザイン

画像に影をつける

cite(作品タイトル)を右下に表示

blockquote q 引用符をデザイン

幅に合わせてpre要素内に改行を入れる

dtとddの間で改行しない

角を丸くする

a リンクを角丸ボタンにする

table 角丸の表を作成する

HTML&CSSリファレンス

divを水平方向に均等配置する コピペで使えるHTML+CSS

ここでは複数のdivを間隔をあけた上で水平方向に均等配置する方法を紹介します。 水平方向に均等配置 justify-contentを用いる div...
HTML&CSSリファレンス

漢字を含む日本語全角文字を斜め斜体にする コピペで使えるHTML+CSS

ここでは文字の斜体化について説明します。em要素を適用することで斜体化されるわけですが、この方法では漢字や平仮名といった全角文字は斜めになりません。多くの日本語...
HTML&CSSリファレンス

デザイン自由自在のdivドロップダウンメニューをCSSのみで実現 コピペで使えるHTML+CSS

リスト構造を用いず、divを用いることで、自在なデザインが可能なドロップダウンメニュー(プルダウンメニュー)を実装します。:hoverの重ね掛けで実現します。C...
2021.01.30
スポンサーリンク
HTML&CSSリファレンス

画像にカーソルを合わせると少し拡大する方法 コピペで使えるHTML+CSS

画像、img要素にマウスカーソルを合わせると、画像が少し拡大して表示されます。カーソルが当たっていることを閲覧者に知らせることができる。absoluteを使用す...
2021.01.29
HTML&CSSリファレンス

画像にカーソルを合わせると徐々に白いぼやをかける方法 コピペで使えるHTML+CSS

画像、img要素にマウスカーソルを合わせると、徐々に白くなり、離すと徐々に元の画像に戻る。hoverの逆も含め、hoverの前後にアニメーションを付けます。 ...
2021.01.29
HTML&CSSリファレンス

プルダウンメニューをCSSのみで作る方法 コピペで使えるHTML+CSS

CSSのみでプルダウンメニュー、ドロップダウンメニューを実装します。li、ul要素、及び:hoverセレクタを使用して設計していきます。表示の切り替えにおいてはdisplay属性を使用します。各項目の見出しについて::beforeを用いて装飾します。
2021.01.29
HTML&CSSリファレンス

画像を徐々に表示するアニメーションをCSSで コピペで使えるHTML+CSS

画像、img要素を徐々に表示するアニメーション。opacityを使って透明度を操作します。 画像imgを徐々に表示 (透明度の操作) スタイルシート属性...
2021.01.29
HTML&CSSリファレンス

文字を徐々に表示するアニメーションをCSSで コピペで使えるHTML+CSS

文字を徐々に表示するアニメーション。トップページなどで大きな文字とともに用いると効果的です。 文字を徐々に表示 (透明度の操作) これからの未来へ向けて新し...
2021.02.05
HTML&CSSリファレンス

三角形や不等号、記号の向きを変える コピペで使えるHTML+CSS

三角の▲、不等号の>といった記号の表示向きを変えます。見出しや、文の初めなどに配置して文章にアクセントを加えます。 ▲の向きを変える ▲を右向きにする...
2021.01.26
HTML&CSSリファレンス

overflow ボックスのはみだし文字 コピペで使えるHTML+CSS

overflowを使ってdivボックスなどからはみ出す文字を処理します。どのようにしてスクロールバー表示とするか、はみ出し分を非表示にするかを具体例を挙げて解説します。
HTML&CSSリファレンス

CSSのみでクリックによりボックスが開くアニメーション コピペで使えるHTML+CSS

JavaScriptを用いず、CSSのみでアコーディオンアニメーションdivボックスを実現します。ページを読み込んだ際に開いた状態とならないよう、ラジオボタンとチェックボックスの2つをフラグとして利用します。CSSのみで実現できる限界点の一つ。
2021.01.26
HTML&CSSリファレンス

@important規則 最優先適用 コピペで使えるHTML+CSS

@important規則 最優先に適用するCSS @important 目的 指定したスタイルシートについて最優先で適用する...
HTML&CSSリファレンス

@page規則 印刷ページ コピペで使えるHTML+CSS

@page規則 印刷時のページ設定CSS @page 目的 印刷時に適用するスタイルです 使用 すべて ...
HTML&CSSリファレンス

@keyframes規則 アニメーション コピペで使えるHTML+CSS

@keyframes規則 アニメーションの実現CSS @keyframes 目的 htmlについてアニメーションを実現します...
2021.01.23
HTML&CSSリファレンス

@import規則 外部スタイルシート読み込み コピペで使えるHTML+CSS

@import規則 外部スタイルシートの読み込み CSS @import 目的 外部スタイルシート(.css)を読み込む。...
HTML&CSSリファレンス

@charset規則 文字コードの指定 コピペで使えるHTML+CSS

@charset規則 外部スタイルシートの文字コード指定CSS @charset 目的 外部のスタイルシートを読み込む際に、...
タイトルとURLをコピーしました