HTML&CSSリファレンス

 

HTML

&CSS

Quick Reference

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

HTML

グループ化

テキスト

埋め込み

img 画像

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

テーブル

CSS

CSS全般

CSS トラブルQ&A

規則

セレクタ

各種セレクタ

::before ::after

プロパティ

目的別HTML+CSSデザイン

均等配置

divを水平方向に均等配置

中央寄せ

縦、横方向に中央配置

動くCSSデザイン

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

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

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

切り替えタブdivボックス

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

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

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

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

テキストのデザイン

ブロックのデザイン

角を丸くする

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

table 角丸の表を作成する

CSSでグラフを描く

円グラフを描く

棒グラフを描く

JavaScript

スクロールするとブロックが表示される

スポンサーリンク
HTML

dl dt dd の横並びと縦並び スマートフォンとPCでの表示の切り替え Prog-lab

Prog-labの趣旨は解説よりも、メモ置き場に近い情報コーナーです。 タグの各意味と説明、目的 dl,dt,ddを用い、tableのように横並びに表示させる。スマートフォンなどについてはdd,dtで改行させる。 dl 説明リスト dt 説明たしい用語 dd 説明 用語が上揃えとなるパターン 下線(border-bot...
HTML&CSSリファレンス

dtとddの間で改行しない コピペで使えるHTML+CSS

用語の説明などで用いられる<dt>はブロックレベル要素ですから、原則として横並びにはできない。ここでは改行をせず、きれいに横並び、かつ、縦方向にも揃えて表示する方法について解説します。
JavaScript

10連ガチャを作ろう! 第1回 設計 仕組みを考える 乱数とfor文をマスター シュレータ作りで学ぶプログラミング講座

第1回 設計〜仕組みを考える - 乱数とfor文をマスター 第2回 ★とキャラ番号を割り当てる - IF文をマスター 第3回 ★とキャラ名を表示する - 配列をマスター  本講座では10連ガチャシミュレータを作ることで、プログラミングの考え方を1から学びます。 必要なものはメモ帳(Windowボタン→Windowsアク...
スポンサーリンク
HTML&CSSリファレンス

スクロールするとdivが表示されるようにする コピペで使えるHTML+CSS+JavaScript

無効なテキストを指定するS要素の修正。一般的なブラウザでは文字の中央に打消し線が引かれるS要素。text-decorationを修正して線の種類や太さ、色を変更します。
HTML&CSSリファレンス

ブラウザ右下に常に文章やBOX(div)を表示する コピペで使えるHTML+CSS

無効なテキストを指定するS要素の修正。一般的なブラウザでは文字の中央に打消し線が引かれるS要素。text-decorationを修正して線の種類や太さ、色を変更します。
HTML&CSSリファレンス

画像を加工せずに切り抜き表示する コピペで使えるHTML+CSS

無効なテキストを指定するS要素の修正。一般的なブラウザでは文字の中央に打消し線が引かれるS要素。text-decorationを修正して線の種類や太さ、色を変更します。
HTML&CSSリファレンス

CSSのみで縦型の棒グラフをつくる コピペで使えるHTML+CSS グラフ編

無効なテキストを指定するS要素の修正。一般的なブラウザでは文字の中央に打消し線が引かれるS要素。text-decorationを修正して線の種類や太さ、色を変更します。
HTML&CSSリファレンス

CSSのみで円グラフをつくる コピペで使えるHTML+CSS グラフ編

無効なテキストを指定するS要素の修正。一般的なブラウザでは文字の中央に打消し線が引かれるS要素。text-decorationを修正して線の種類や太さ、色を変更します。
HTML&CSSリファレンス

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

ここでは文字の斜体化について説明します。em要素を適用することで斜体化されるわけですが、この方法では漢字や平仮名といった全角文字は斜めになりません。多くの日本語フォントが斜体を用意していないためです。そこで、全く別の方法によって、全角文字を斜体化します。 HTML全角文字の斜体化メーカー 文章を入力→コードを取得でHT...
HTML&CSSリファレンス

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

リスト構造を用いず、divを用いることで、自在なデザインが可能なドロップダウンメニュー(プルダウンメニュー)を実装します。:hoverの重ね掛けで実現します。Chrome、Edge、Opera、Firefoxで確認済。実際に実装する際はスマートフォン向けに@mediaを使って低解像度向けにwidthを狭く指定するか、又...
HTML&CSSリファレンス

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

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

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

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

10連ガチャを作ろう! 第3回 ★とキャラ名を表示する 配列をマスター シミュレータ作りで学ぶプログラミング講座

第1回 設計〜仕組みを考える - 乱数とfor文をマスター 第2回 ★とキャラ番号を割り当てる - IF文をマスター 第3回 ★とキャラ名を表示する - 配列をマスター  本講座では10連ガチャシミュレータを作ることで、プログラミングの考え方を1から学びます。 必要なものはメモ帳(Windowボタン→Windowsアク...
JavaScript

10連ガチャを作ろう! 第2回 ★とキャラ番号を割り当てる IF文をマスター シミュレータ作りで学ぶプログラミング講座

第1回 設計〜仕組みを考える - 乱数とfor文をマスター 第2回 ★とキャラ番号を割り当てる - IF文をマスター 第3回 ★とキャラ名を表示する - 配列をマスター  本講座では10連ガチャシミュレータを作ることで、プログラミングの考え方を1から学びます。 必要なものはメモ帳(Windowボタン→Windowsアク...
HTML&CSSリファレンス

分数をHTML上に表示する方法 HTML分数ジェネレーター コピペで使えるHTML+CSS

分数を表示する仕組みと解説 flex-directionを用いる inline-flexとして指定し、flex-direction:columとすることで、子要素を縦方向にレイアウトします。このようにすることで分数を表示することができるようになります。複雑な式も可能です。 分子 分母 style属性で記述 <span ...
HTML&CSSリファレンス

table 角丸の表を作成する 内側の壁紙問題も対応 コピペで使えるHTML+CSS

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