スマホ画面では画像とテキストを縦並びにし、PCでは横並びにしたいというレイアウトはよくあります。たとえば商品紹介やプロフィール、記事のサムネイル付きカードなどで使う場面が多いです。今回はCSSだけで、画面幅に応じて画像とテキストの並びを切り替...

Webページ内に長い英数字やURLがあると、スマホ表示や狭いカラムで文字がはみ出してしまうことがあります。とくに商品コード、ファイル名、長いリンク先URLなどは、途中で改行されずに横スクロールの原因になりやすいです。CSSを使えば、こうした文字列を...

フォーム送信ボタンを二重クリックされると、同じ内容が複数回送信されてしまうことがあります。お問い合わせフォームや申込フォームでは、これが重複登録や二重決済の原因になるため、JavaScriptで送信ボタンを一時的に無効化しておく方法がよく使われま...

スマホで表を見せたいとき、横スクロールにする方法は手軽ですが、見たい列を左右に動かす必要があり、少し使いづらく感じることがあります。特に列数が多い表や、比較したい情報が細かい表では、画面内で内容を読み取りやすくする工夫が大切です。 この記...

画像を使うWebページでは、見た目を整えるだけでなく、alt属性を正しく入れることがとても大切です。altは画像の内容をテキストで伝えるための属性で、検索エンジン対策だけでなく、画像が表示されないときや音声読み上げを使うときにも役立ちます。 この...

グリッドレイアウトは、扱えるようになると便利なスタイルです。 flexレイアウトは、幅を1つだけ変更したいときは、width:100%;や flex-basis などで幅をかえることで、簡単に調整ができます。 gridの場合は、幅指定では、調整ができません。grid でカラム...

position: absolute ;や position: fixed; で横や縦を中央に配置したい場合があります。要素の幅をあらかじめ決められる場合は、簡単に指定が可能ですが、レスポンシブデザインが主流の現在では、固定幅にすることは難しくなってきています。 その場合、「...

CSSだけで吹き出しを作成する方法です。 吹き出しのイメージ HTML [crayon-6ac0253b086b3637983359/] CSS [crayon-6ac0253b086b5848268183/]

検索エンジン拒否：noindex・nofollowの基本 検索エンジン拒否」とは、Googleなどの検索エンジンに「このページをインデックス（登録）しないでください」と伝えることを意味します。ブログ運営では、次のようなページを検索から除外したいケースがありま...

HTMLでテーブル（表）の幅を均等に揃えたい時があると思います。 例えば4つ並びなら、tdの幅を25%にすればよいですが、セルの幅の増減に合わせて調整が必要になってしまいます。 [crayon-6ac0253b08c3f411812704/] 「table-layout: fixed;」を使用すれば、...