HTML/CSS– category –

tableタグで作成した表をレスポンシブに対応する方法を実装例を挙げてわかりやすく解説します。 パソコンのデスクトップ画面サイズを基準に作成した横長いレイアウトの表は、スマートフォン画面では、ブラウザの幅にきれいに収まりません。収まったとして...

HTMLとCSSでtableタグを使って表を作成をするときに、隣接したセルを結合したい場合があります。tableタグで作成した表は、HTML側で属性を設定することで、セルを結合することができます。セルの結合に使うHTMLの属性が、「rowspan」と「colspan」です。 ...

HTMLのtableの使い方と、CSSによるtableデザインの基本をわかりやすく解説します。tableの基礎をしっかり理解することで、いろいろな形式の表（テーブル）が作れるようになります。 tableで表を作ってみよう tableを使うときは、視覚的な表をイメージして...

レスポンシブとは？ Webサイトにおけるレスポンシブとは、デバイス（デジタル機器）やディスプレイサイズに応じて、デザインを判別させる方法のことです。 パソコンやスマートフォン、タブレットでホームページを比較してみると、見るデバイスやブラウザに...

HTMLで項目と値をセットで表現するときは、説明リストの<dl> <dt> <dd>タグを使います。例えば、ホームページのお知らせ欄、プロフィール、会社案内、よくある質問、フォームなど、項目と値で構成されるコンテンツが該当します。デザインの見た目...

CSSの疑似クラス（Pseudo classes）を使って、1番目・n番目・最後・奇数偶数・倍数・1番目以外、n番目以外など、特定の要素にスタイルを指定する方法を解説します。 疑似クラスを用いることで、次のようなことを表現できます。 要素の1番目だけにCSSを適用...

CSSの疑似要素について詳しく解説します。疑似要素の中でも、beforeとafterは、Webデザインにおいて利用頻度が高く、とても便利なCSSです。疑似要素を使いこなすことで、Webサイトの幅広いデザイン表現ができるようになります。 CSSの疑似要素とは？ 擬似...

メディアクエリとは？ メディアクエリ（Media Query）は、Webデザインやウェブ開発で使えるCSS（スタイルシート言語）です。Webサイトのレスポンシブ化やモバイルファースト対応に欠かせないのが、メディアクエリ。メディアクエリは、パソコン、タブレット...

Flexbox（フレックスボックス）とは CSSでよく使うWebデザインが横並びのレイアウト。Flexbox（フレックスボックス）は、あらゆる要素を横並びにレイアウトできるCSSのプロパティです。Flexboxには、便利な値がたくさん用意されており、配置位置の指定、余...

HTML/CSS初学者が覚えておきたいCSSの優先順位ルールについて解説します。 CSSをたくさん書いていくと、コードに間違いないのにうまく反映されないことがあります。ブラウザのキャッシュが原因の場合もありますが、CSSの優先順位ルールが原因であることが...