HTML&CSSリファレンス

スポンサーリンク
HTML&CSSリファレンス

CSS トラブルQ&A コピペで使えるHTML+CSS

CSS トラブル Q&A いくつかのトラブルについてのテクニックなどをメモしておく。 overflow:hiddenについて CSSが効かない、挙動がおかしい → overflow:clipに変更するとうまくゆくことがある。
HTML&CSSリファレンス

border 枠線の表示 コピペで使えるHTML+CSS

CSSで要素の枠線を引くborderプロパティの説明、solidからhidde,outsetまで全てを網羅した解説を掲載。borderの高さは調整できるのか? ::beforeセレクターとの違いも説明。
CSSの置き場所

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

ここでは画像を回転表示させるコードを紹介します。 画像を回転して表示するCSSのコード 以下の画像を回転させます 700px、467pxの画像です。 このような状態に回転させます 20度の回転です。 切り抜き表示コード HTML表記 <div class="rotate-image"> <img src="image....
スポンサーリンク
JavaScript

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

ここではのコードを紹介します。 詳しい説明はございません。コピペして使用してください。 ドラッグすることでpx単位の距離を測定するJavaScriptのコード 次のように表示させます。スタート地点の左右問わず距離が計算されます。 ここに表示されます let startX; let startY; let endX; l...
JavaScript

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

ここではのコードを紹介します。 詳しい説明はございません。コピペして使用してください。 マウスカーソルの座標を表示するJavaScriptのコード 次のように表示させます。ブラウザ表示画面左上から見た座標です。 X座標 ここに表示されます Y座標 ここに表示されます document.addEventListener(...
JavaScript

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

ここではのコードを紹介します。 詳しい説明はございません。コピペして使用してください。 ストップウォッチを作るためのJavaScriptのコード 以下のボタンを押してみてください。 スタート ストップ リセット 0.0 var intervalId; var elapsedTime = 0; function star...
JavaScript

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

ここではのコードを紹介します。 詳しい説明はございません。コピペして使用してください。 トランプから1枚をランダムで引くJavaScriptのコード 13×4枚のトランプのカードから1枚ランダムで引きます。カードを選ぶを押してみてください。 カードを選ぶ function drawCard() { var suits ...
JavaScript

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

ここではのコードを紹介します。 詳しい説明はございません。コピペして使用してください。 乱数を発生させるJavaScriptのコード 1~100の中から乱数を発生させる 次のように表示させます。F5で更新しますと、数が変化するはずです。 ここに表示されます window.onload = function() { va...
JavaScript

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

ここではのコードを紹介します。 詳しい説明はございません。コピペして使用してください。 今日の日付と曜日を表示するJavaScriptのコード 次のように表示させます。 ここに表示されます window.onload = function() { var today = new Date(); var date = t...
CSSの置き場所

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

ここではのコードを紹介します。 詳しい説明はございません。コピペして使用してください。 パソコンの時だけ適用するCSSののコード @media only screen and (min-width: 768px) { /* ここにパソコン向けのCSSを記述 */ } 説明 上記のように、@mediaルールを使用し、mi...
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">中央にそろえる<...