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リファレンス

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

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

画像を回転して表示する CSSコードの置き場所 transformの使い方

ここでは画像を回転表示させるコードを紹介します。 画像を回転して表示するCSSのコード 以下の画像を回転させます 700px、467pxの画像です。 ...
CSSの置き場所

画像を切り抜きして表示する CSSコードの置き場所 overflowとmarginの使い方

こここでは画像自体の切り抜き編集をすることなく、画像を切り抜きして表示するコードを紹介します。 アップデートした画像を再編集することなく、CSSのみで切り抜き...
スポンサーリンク
JavaScript

マウスドラッグで距離を測定する JavaScriptの置き場所 addEventListenerの使い方

ここではのコードを紹介します。 詳しい説明はございません。コピペして使用してください。 ドラッグすることでpx単位の距離を測定するJavaScriptのコー...
JavaScript

カーソルの座標を表示する JavaScriptの置き場所 addEventListenerの使い方

ここではのコードを紹介します。 詳しい説明はございません。コピペして使用してください。 マウスカーソルの座標を表示するJavaScriptのコード 次のよ...
JavaScript

ストップウォッチを作る JavaScriptの置き場所 の使い方

ここではのコードを紹介します。 詳しい説明はございません。コピペして使用してください。 ストップウォッチを作るためのJavaScriptのコード 以下のボ...
JavaScript

トランプから1枚をランダムで引く JavaScriptの置き場所 Math.randomの使い方

ここではのコードを紹介します。 詳しい説明はございません。コピペして使用してください。 トランプから1枚をランダムで引くJavaScriptのコード 13...
JavaScript

1から100までの乱数を発生させる JavaScriptの置き場所 Math.randomの使い方

ここではのコードを紹介します。 詳しい説明はございません。コピペして使用してください。 乱数を発生させるJavaScriptのコード 1~100の中から乱...
JavaScript

今日の日付と曜日を表示する JavaScriptの置き場所 Date()の使い方

ここではのコードを紹介します。 詳しい説明はございません。コピペして使用してください。 今日の日付と曜日を表示するJavaScriptのコード 次のように...
CSSの置き場所

パソコンの時だけ適用 CSSコードの置き場所 @mediaの使い方

ここではのコードを紹介します。 詳しい説明はございません。コピペして使用してください。 パソコンの時だけ適用するCSSののコード @media onl...
CSSの置き場所

スマートフォンの時だけ適用 CSSコードの置き場所 @mediaの使い方

ここではのコードを紹介します。 詳しい説明はございません。コピペして使用してください。 スマートフォンの時だけ適用するCSSののコード @media ...
CSSの置き場所

タブレットの時だけ適用 CSSコードの置き場所 @mediaの使い方

ここではのコードを紹介します。 詳しい説明はございません。コピペして使用してください。 タブレットの時だけ適用するCSSののコード @media on...
CSSの置き場所

divを中央配置適用 CSSコードの置き場所 marginの使い方

ここではのコードを紹介します。 詳しい説明はございません。コピペして使用してください。 50%幅のdivを左右方向に中央配置するCSSののコード ここでは...
CSSの置き場所

spanを上下方向に中央配置 CSSコードの置き場所 justify-contentなどの使い方

ここではのコードを紹介します。 詳しい説明はございません。コピペして使用してください。 span要素を上下方向に中央配置するCSSのコード ここでは仮に5...
CSSの置き場所

table要素の中身を上揃えにする CSSコードの置き場所 vertical-alignなどの使い方

ここではのコードを紹介します。 詳しい説明はございません。コピペして使用してください。 table要素の中身を上揃えにするCSSのコード 下記サンプルのt...
CSSの置き場所

table要素の中身を上下方向の中央配置する CSSコードの置き場所 vertical-alignなどの使い方

ここではのコードを紹介します。 詳しい説明はございません。コピペして使用してください。 table要素の中身を上下方向について中央配置するCSSのコード ...
タイトルとURLをコピーしました