CSSの置き場所 画像を回転して表示する CSSコードの置き場所 transformの使い方
ここでは画像を回転表示させるコードを紹介します。画像を回転して表示するCSSのコード以下の画像を回転させます700px、467pxの画像です。このような状態に回転させます20度の回転です。切り抜き表示コードHTML表記<div class="rotate-image"> <img src="image.jpg"></d...
CSS置き場所
CSSの置き場所 CSSの置き場所 パソコンの時だけ適用 CSSコードの置き場所 @mediaの使い方
ここではのコードを紹介します。詳しい説明はございません。コピペして使用してください。パソコンの時だけ適用するCSSののコード@media only screen and (min-width: 768px) { /* ここにパソコン向けのCSSを記述 */ }説明 上記のように、@mediaルールを使用し、min-wi...
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; background-...
CSSの置き場所 table要素の中身を上揃えにする CSSコードの置き場所 vertical-alignなどの使い方
ここではのコードを紹介します。詳しい説明はございません。コピペして使用してください。table要素の中身を上揃えにするCSSのコード下記サンプルのtableはheight: 200px;と指定しています。<table> <tr> <td class="top-align">上にそろえる</td> </tr></tabl...
CSSの置き場所 table要素の中身を上下方向の中央配置する CSSコードの置き場所 vertical-alignなどの使い方
ここではのコードを紹介します。詳しい説明はございません。コピペして使用してください。table要素の中身を上下方向について中央配置するCSSのコード下記サンプルのtableはheight: 200px;と指定しています。<table> <tr> <td class="center-align">中央にそろえる</td>...
CSSの置き場所 table要素の中身を下に配置する CSSコードの置き場所 vertical-alignなどの使い方
ここではのコードを紹介します。詳しい説明はございません。コピペして使用してください。table要素の中身を下に配置するCSSのコード下記サンプルのtableはheight: 200px;と指定しています。<table> <tr> <td class="bottom-align">下にそろえる</td> </tr></t...
CSSの置き場所 文字を黒い枠で囲う CSSコードの置き場所 borderなどの使い方
ここではのコードを紹介します。詳しい説明はございません。コピペして使用してください。文字を黒い枠で囲うCSSのコード次のように表示させます。この文章に枠を付けるとこのようになります。border<span style="border: 2px solid black; padding: 10px;">この文章に枠を付け...