HTML
&CSS
Quick Reference
当サイトで紹介するプルダウンメニューやアコーディオンなどの本来JavaScriptを要する動きについて、全てCSSのみで実現しています。よって極一部の例外（対象となる解説ページにその旨を記載しています）を除きAMPサイトでも正常に表示されます。
目次
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&CSSリファレンスデザイン自由自在のdivドロップダウンメニューをCSSのみで実現 コピペで使えるHTML+CSS
リスト構造を用いず、divを用いることで、自在なデザインが可能なドロップダウンメニュー(プルダウンメニュー)を実装します。:hoverの重ね掛けで実現します。Chrome、Edge、Opera、Firefoxで確認済。実際に実装する際はスマ...
HTML&CSSリファレンス三角形や不等号など文字の向きを変える コピペで使えるHTML+CSS
三角の▲、不等号の>といった記号や文字の表示の方向を変えます。見出しや、文の初めなどに配置して文章にアクセントを加えることができます。 ▲の向きを変える ▲を右向きにする ▲を右向きにしますと、 ▲ となります s...
HTML&CSSリファレンスまとめ箇条書き表リスト コピペで使えるHTML+CSS
ブログなどの文末によくある要点をまとめた箇条書きや一覧を、順不同リスト<ul>、<li>を使って作成します。箇条書き黒板のデザインも再現します。
HTML&CSSリファレンスdtとddの間で改行しない コピペで使えるHTML+CSS
用語の説明などで用いられる<dt>はブロックレベル要素ですから、原則として横並びにはできない。ここでは改行をせず、きれいに横並び、かつ、縦方向にも揃えて表示する方法について解説します。
JavaScript10連ガチャを作ろう! 第3回 ★とキャラ名を表示する 配列をマスター シミュレータ作りで学ぶプログラミング講座
第1回 設計〜仕組みを考える - 乱数とfor文をマスター 第2回 ★とキャラ番号を割り当てる - IF文をマスター 第3回 ★とキャラ名を表示する - 配列をマスター 本講座では10連ガチャシミュレータを作ることで、...
JavaScript10連ガチャを作ろう! 第2回 ★とキャラ番号を割り当てる IF文をマスター シミュレータ作りで学ぶプログラミング講座
第1回 設計〜仕組みを考える - 乱数とfor文をマスター 第2回 ★とキャラ番号を割り当てる - IF文をマスター 第3回 ★とキャラ名を表示する - 配列をマスター 本講座では10連ガチャシミュレータを作ることで、...
JavaScript10連ガチャを作ろう! 第1回 設計 仕組みを考える 乱数とfor文をマスター シュレータ作りで学ぶプログラミング講座
第1回 設計〜仕組みを考える - 乱数とfor文をマスター 第2回 ★とキャラ番号を割り当てる - IF文をマスター 第3回 ★とキャラ名を表示する - 配列をマスター 本講座では10連ガチャシミュレータを作ることで、...
HTML&CSSリファレンス分数をHTML上に表示する方法 HTML分数ジェネレーター コピペで使えるHTML+CSS
分数を表示する仕組みと解説 flex-directionを用いる inline-flexとして指定し、flex-direction:columとすることで、子要素を縦方向にレイアウトします。このようにすることで分数を表示することができる...
HTML&CSSリファレンスtable 角丸の表を作成する 内側の壁紙問題も対応 コピペで使えるHTML+CSS
CSSのborder-radiusを使ってtable表の外周について角を丸くします。しっかりと丸みを持たせるためにテーブル内のセルをどのように処理するかについて、first-childとlast-childを実装した汎用性の高い設計も解説します。
HTML&CSSリファレンスCSS トラブルQ&A コピペで使えるHTML+CSS
CSS トラブル Q&A いくつかのトラブルについてのテクニックなどをメモしておく。 overflow:hiddenについて CSSが効かない、挙動がおかしい → overflow:clipに変更するとうまくゆくことがあ...