CSSの置き場所 パソコンの時だけ適用 CSSコードの置き場所 @mediaの使い方
ここではのコードを紹介します。 詳しい説明はございません。コピペして使用してください。 パソコンの時だけ適用するCSSののコード @media only screen and (min-width: 768px) { /* ここにパソコン向けのCSSを記述 */ } 説明 上記のように、@mediaルールを使用し、mi...
HTML&CSSリファレンス
CSSの置き場所 CSSの置き場所 スマートフォンの時だけ適用 CSSコードの置き場所 @mediaの使い方
ここではのコードを紹介します。 詳しい説明はございません。コピペして使用してください。 スマートフォンの時だけ適用するCSSののコード @media only screen and (max-width: 480px) { /* スマートフォン用のCSSコード */ } 説明 画面幅が 480px 以下の場合、スマート...
CSSの置き場所 タブレットの時だけ適用 CSSコードの置き場所 @mediaの使い方
ここではのコードを紹介します。 詳しい説明はございません。コピペして使用してください。 タブレットの時だけ適用するCSSののコード @media only screen and (min-width: 768px) and (max-width: 1024px) { /* タブレット用のCSSコード */ } 説明 画...
CSSの置き場所 divを中央配置適用 CSSコードの置き場所 marginの使い方
ここではのコードを紹介します。 詳しい説明はございません。コピペして使用してください。 50%幅のdivを左右方向に中央配置するCSSののコード ここでは仮に50%幅のdivとします。 divです div { width: 50%; margin: 0 auto; } 説明 div要素の幅を50%に設定し、左右のマージ...
CSSの置き場所 spanを上下方向に中央配置 CSSコードの置き場所 justify-contentなどの使い方
ここではのコードを紹介します。 詳しい説明はございません。コピペして使用してください。 span要素を上下方向に中央配置するCSSのコード ここでは仮に50%幅、高さ300pxのdivとします。 <div style="width: 50%; height: 300px; margin: 0 auto; backgro...
CSSの置き場所 table要素の中身を上揃えにする CSSコードの置き場所 vertical-alignなどの使い方
ここではのコードを紹介します。 詳しい説明はございません。コピペして使用してください。 table要素の中身を上揃えにするCSSのコード 下記サンプルのtableはheight: 200px;と指定しています。 <table> <tr> <td class="top-align">上にそろえる</td> </tr> <...
CSSの置き場所 table要素の中身を上下方向の中央配置する CSSコードの置き場所 vertical-alignなどの使い方
ここではのコードを紹介します。 詳しい説明はございません。コピペして使用してください。 table要素の中身を上下方向について中央配置するCSSのコード 下記サンプルのtableはheight: 200px;と指定しています。 <table> <tr> <td class="center-align">中央にそろえる<...
CSSの置き場所 table要素の中身を下に配置する CSSコードの置き場所 vertical-alignなどの使い方
ここではのコードを紹介します。 詳しい説明はございません。コピペして使用してください。 table要素の中身を下に配置するCSSのコード 下記サンプルのtableはheight: 200px;と指定しています。 <table> <tr> <td class="bottom-align">下にそろえる</td> </tr...
CSSの置き場所 文字を黒い枠で囲う CSSコードの置き場所 borderなどの使い方
ここではのコードを紹介します。 詳しい説明はございません。コピペして使用してください。 文字を黒い枠で囲うCSSのコード 次のように表示させます。 この文章に枠を付けるとこのようになります。 border <span style="border: 2px solid black; padding: 10px;">この文...
HTML&CSSリファレンス 右向きの三角形の作り方 ▲を９０度回転させるには HTMLとCSS
リンクなどを作る際に▲を右に向けた文字を利用することがあります。ここではその書き方を説明します。 例えば、詳細はこちら ▲ といったものです。 ▲の向きを変える ▲を右向きにする ▲ <span style="transform: rotate(90deg) scaleY(0.6) translateX(-3px); ...
HTML&CSSリファレンス クリックでボックスの表示非表示アコーディオンをCSSのみで実装 コピペで使えるHTML+CSS
詳細や情報をクリックすることで表示する、いわゆる、スポイラー又はアコーディオンと呼ばれるものをCSSのみで実装します。inputとlabelを使い、displayで切り替えを行います。Javascriptは使用しません。
HTML&CSSリファレンス 続きを読む・閉じるアコーディオンをCSSのみで実装 コピペで使えるHTML+CSS AMP対応
[文章の続きを読む]、いわゆるスポイラー又はアコーディオンと呼ばれるものをCSSのみで実装します。inputとlabel、~セレクタを組み合わせる手法を取ります。JavaScriptを使用しない安全で安定的な方法です。
HTML&CSSリファレンス 徐々に文章を透明化と、すべて読む コピペで使えるHTML+CSS AMP対応
新聞や雑誌のサイトなどでよく使われている記事が下に向かって徐々に半透明になり、[全てを読む]が表示されるページ。CSSのみで実現する方法を詳しく解説します。inputとlabel、checked、~セレクタを適切な順序と階層で使用します。
HTML&CSSリファレンス 切り替えタブdivボックスをCSSのみで実現！ コピペで使えるHTML+CSS
divボックスの上部に複数のタブをつけ、タブをクリックすることで、直下のボックスが切り替わります。いわゆる、タブボックスをJavascriptを用いずに実装します。HTMLとCSSのみを調整することでタブの数を簡単に増減させることができます。
HTML&CSSリファレンス @mediaを使って解像度に応じてデザインを切り替える コピペで使えるHTML+CSS
CSS規則のひとつ、@mediaを使って解像度に応じてデザインを切り替える手法サンプル交えて紹介します。この実装によって、スマートフォンとパソコンでデザインの違いや、段組みやサイドバーの表示非表示の切り替えを実現できます。
HTML&CSSリファレンス プルダウンメニューをCSSのみで作る方法 コピペで使えるHTML+CSS
CSSのみでプルダウンメニュー、ドロップダウンメニューを実装します。li、ul要素、及び:hoverセレクタを使用して設計していきます。表示の切り替えにおいてはdisplay属性を使用します。各項目の見出しについて::beforeを用いて装飾します。