HTML&CSSリファレンス

 

HTML

&CSS

Quick Reference

当サイトで紹介するプルダウンメニューやアコーディオンなどの本来JavaScriptを要する動きについて、全てCSSのみで実現しています。よって極一部の例外(対象となる解説ページにその旨を記載しています)を除きAMPサイトでも正常に表示されます。

HTML

グループ化

テキスト

埋め込み

img 画像

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

テーブル

CSS

規則

セレクタ

各種セレクタ

::before ::after

プロパティ

目的別HTML+CSSデザイン

均等配置

divを水平方向に均等配置

中央寄せ

縦、横方向に中央配置

動くCSSデザイン

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

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

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

切り替えタブdivボックス

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

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

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

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

テキストのデザイン

ブロックのデザイン

角を丸くする

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

table 角丸の表を作成する

HTML&CSSリファレンス

右向きの三角形の作り方 ▲を90度回転させるには HTMLとCSS

リンクなどを作る際に▲を右に向けた文字を利用することがあります。ここではその書き方を説明します。 例えば、詳細はこちら ▲ といったものです。 ▲の向きを変...
2022.08.02
HTML&CSSリファレンス

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

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

分数をHTML上に表示する コピペで使えるHTML+CSS

分数を表示する flex-directionを用いる inline-flexとして指定し、flex-direction:columとすることで、子要素を縦方...
2022.05.31
HTML&CSSリファレンス

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

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

table 角丸の表を作成する コピペで使えるHTML+CSS

CSSのborder-radiusを使ってtable表の外周について角を丸くします。しっかりと丸みを持たせるためにテーブル内のセルをどのように処理するかについて、first-childとlast-childを実装した汎用性の高い設計も解説します。
2022.04.22
HTML&CSSリファレンス

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

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

三角形や不等号など文字の向きを変える コピペで使えるHTML+CSS

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

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

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

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

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

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

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

@mediaを使って解像度に応じてデザインを切り替える コピペで使えるHTML+CSS

CSS規則のひとつ、@mediaを使って解像度に応じてデザインを切り替える手法サンプル交えて紹介します。この実装によって、スマートフォンとパソコンでデザインの違いや、段組みやサイドバーの表示非表示の切り替えを実現できます。
2021.12.10
HTML&CSSリファレンス

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

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

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

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

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

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

text-shadow 文字に影をつける コピペで使えるHTML+CSS

テキスト、文字について影をつけるtext-shadowプロパティの使い方。各パラメーターの設定とその効果を具体的に例示しながら解説します。span要素とセットで使いましょう。
2021.02.13
HTML&CSSリファレンス

リアルな蛍光マーカーを引く コピペで使えるHTML+CSS

文字に蛍光マーカーを引くためにlinear-gradientを使用します。開始位置の高さと終了位置の高さを調整し、加えてグラデーションを載せることで文字にマーカーを引いたような自然な雰囲気を再現します。ピンク、黄色、青、緑の蛍光ペンを再現!
2021.02.11
タイトルとURLをコピーしました