HTML&CSSリファレンス

 

HTML

&CSS

Quick Reference

HTML

グループ化

blockquote 段落単位の引用

ul li 順不同リスト

ol li 序列リスト

dl dt dd 説明リスト

pre 整形済みテキスト

div コンテンツのグループ化

テキスト

a リンクアンカー

em 強調テキスト

strong 重要なテキスト

s 無効なテキスト 打消し線

del 削除されたテキスト 打消し線 

q 語句単位の引用

cite 作品タイトル

sub 下付きテキストで化学式表記

sup 上付きテキストで数式表記

mark テキストのハイライト

code 言語のコード

span 単語、フレーズ、文章のグループ化

埋め込み

img 画像

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

テーブル

table tr td 表組み

caption th thead tfoot 表に意味を持たせる

col colgroup 表組みの列グループ

CSS

各種セレクタ

::before ::after

display ボックスの並び

position 配置

float ボックスの回り込み

clear ボックスの回り込みの解除

border

border-radius 角を丸く

border-collapse

text-decoration 文字に線を引く

box-shadow 影をつける

text-shadow 影をつける

linear-gradient グラデーション

transform 傾ける、回転、拡大縮小

目的別HTML+CSSデザイン

中央寄せ

縦、横方向に中央配置

動くCSSデザイン

切り替えタブdivボックス

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

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

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

テキストのデザイン

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

文字に影をつける

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

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

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

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

emをイタリック体にする

emを斜体にしない

strongを太字にしない

ブロックのデザイン

まとめ箇条書き表リスト

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

divボックスのデザイン

画像に影をつける

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

blockquote q 引用符をデザイン

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

dtとddの間で改行しない

角を丸くする

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

table 角丸の表を作成する

 

HTML&CSSリファレンス

切り替えタブdivボックスをCSSのみで実現! コピペで使えるHTML+CSS

divボックスの上部に複数のタブをつけ、タブをクリックすることで、直下のボックスが切り替わります。いわゆる、タブボックスをJavascriptを用いずに実装します。HTMLとCSSのみを調整することでタブの数を簡単に増減させることができます。
2021.01.20
HTML&CSSリファレンス

まとめ箇条書き表リスト コピペで使えるHTML+CSS

ブログなどの文末によくある要点をまとめた箇条書きや一覧を、順不同リスト<ul>、<li>を使って作成します。箇条書き黒板のデザインも再現します。
2021.01.19
HTML&CSSリファレンス

figure要素とfigcaption要素 コピペで使えるHTML+CSS

写真や図表などのまとまりを表すfigure要素。そしてそのキャプションを表すfigcaption要素について解説。画像上にテキストを表示する際などに用いる。
スポンサーリンク
HTML&CSSリファレンス

画像、写真の上に文字をのせる コピペで使えるHTML+CSS

取り込んだ画像、写真(img要素)の上に文字をのせます。写真の説明文や、リンク先の説明文などを記載します。画像の下の余白の消し方についても解説します。
HTML&CSSリファレンス

clear ボックスの回り込みの解除 コピペで使えるHTML+CSS

floatによって回り込みが指定された画像、ボックスについて、回り込みを解除するclearプロパティについて解説します。
HTML&CSSリファレンス

float ボックスの回り込み コピペで使えるHTML+CSS

画像img要素やボックスの回り込みについて指定するfloatプロパティのleft、rightなどについて実例をあげながら解説します。
2021.01.17
HTML&CSSリファレンス

徐々に文章を透明化と、すべて読む コピペで使えるHTML+CSS

新聞や雑誌のサイトなどでよく使われている記事が下に向かって徐々に半透明になり、[全てを読む]が表示されるページ。CSSのみで実現する方法を詳しく解説します。inputとlabel、checked、~セレクタを適切な順序と階層で使用します。
2021.01.16
HTML&CSSリファレンス

divを使ったボックスのデザイン コピペで使えるHTML+CSS

divを使って様々なデザインのコンテンツボックスをCSSで実現します。角の丸いボックス、見出しだけが角丸のボックス。少し斜めにした見出し。入り込む見出し、アイコンが追加された見出し等、見やすく洗練されたデザインボックスを紹介します。
2021.01.17
HTML&CSSリファレンス

縦と横に中央寄せ(中央配置)する方法 コピペで使えるHTML+CSS

インライン要素、ブロックレベル要素それぞれについての横方向と縦方向の中央配置の実装方法。margin:auto;やtransform、translateを利用した汎用性の高い実装方法を解説します。vertical-alignやcenter要素は使用しません。
2021.01.20
HTML&CSSリファレンス

CSSの各種セレクタ CSS コピペで使えるHTML+CSS

クラスセレクター、IDセレクターのほか、>や+、~を使った間接、子孫、弟セレクターの使用方法の解説です。~を使って弟を限定する方法についても解説。
2021.01.16
HTML&CSSリファレンス

CSS ONLY read more, spoiler and accordion , HTML+CSS

Achieve "read more" with just CSS and HTML. The method introduced does not use JavaScript. You will be able to freely switch the display of articles, images, and various layouts.
2021.01.18
HTML&CSSリファレンス

クリックでボックスの表示非表示アコーディオンをCSSのみで実装 コピペで使えるHTML+CSS

詳細や情報をクリックすることで表示する、いわゆる、スポイラー又はアコーディオンと呼ばれるものをCSSのみで実装します。inputとlabelを使い、displayで切り替えを行います。Javascriptは使用しません。
2021.01.16
HTML&CSSリファレンス

続きを読む・閉じるアコーディオンをCSSのみで実装 コピペで使えるHTML+CSS

[文章の続きを読む]、いわゆるスポイラー又はアコーディオンと呼ばれるものをCSSのみで実装します。inputとlabel、~セレクタを組み合わせる手法を取ります。JavaScriptを使用しない安全で安定的な方法です。
2021.01.16
HTML&CSSリファレンス

position 配置方法 コピペで使えるHTML+CSS

CSSのpositionについて相対的配置のrelativeと絶対的配置のabsoluteの関係、topやleftがどのように影響するかを具体例を挙げて解説します。absoluteをマスターすれば自由自在なレイアウトが可能になります。
2021.01.15
HTML&CSSリファレンス

display ボックスの表示方法 コピペで使えるHTML+CSS

要素をどのように配置するか、displayを使って決定します。blockやinline、inline-block、そしてflex、そして表示をしないnone、具体的な事例をあげてdisplayによってどのように要素が配置されるかを例示します。
2021.01.16
HTML&CSSリファレンス

transform 要素を変形するコピペで使えるHTML+CSS

要素を変形させるtransformについて、拡大縮小、移動、回転、傾斜など具体例を挙げて解説します。回転するrotateは::beforeセレクターと組み合わせて見出しのアイコンに使用するなどの用途もあり要注意事項です。
2021.01.15
タイトルとURLをコピーしました