-
table表のレスポンシブ方法とCSSデザインテクニック
tableタグで作成した表をレスポンシブに対応する方法を実装例を挙げてわかりやすく解説します。 パソコンのデスクトップ画面サイズを基準に作成した横長いレイアウトの表は、スマートフォン画面では、ブラウザの幅にきれいに収まりません。収まったとして... -
HTMLのtableで表のセルを縦横に結合する方法
HTMLとCSSでtableタグを使って表を作成をするときに、隣接したセルを結合したい場合があります。tableタグで作成した表は、HTML側で属性を設定することで、セルを結合することができます。セルの結合に使うHTMLの属性が、「rowspan」と「colspan」です。 ... -
表の作り方とtableデザインの基本【HTML/CSS】
HTMLのtableの使い方と、CSSによるtableデザインの基本をわかりやすく解説します。tableの基礎をしっかり理解することで、いろいろな形式の表（テーブル）が作れるようになります。 tableで表を作ってみよう tableを使うときは、視覚的な表をイメージして... -
Webサイトのレスポンシブとは？レスポンシブデザインの基本
レスポンシブとは？ Webサイトにおけるレスポンシブとは、デバイス（デジタル機器）やディスプレイサイズに応じて、デザインを判別させる方法のことです。 パソコンやスマートフォン、タブレットでホームページを比較してみると、見るデバイスやブラウザに... -
dl dt ddを横並びにする方法【CSSデザイン】
HTMLで項目と値をセットで表現するときは、説明リストの<dl> <dt> <dd>タグを使います。例えば、ホームページのお知らせ欄、プロフィール、会社案内、よくある質問、フォームなど、項目と値で構成されるコンテンツが該当します。デザインの見た目... -
CSS 疑似クラス 1番目・n番目・最後・奇数偶数のスタイル指定
CSSの疑似クラス（Pseudo classes）を使って、1番目・n番目・最後・奇数偶数・倍数・1番目以外、n番目以外など、特定の要素にスタイルを指定する方法を解説します。 疑似クラスを用いることで、次のようなことを表現できます。 要素の1番目だけにCSSを適用... -
CSS 疑似要素 beforeとafterの使い方と実例サンプル
CSSの疑似要素について詳しく解説します。疑似要素の中でも、beforeとafterは、Webデザインにおいて利用頻度が高く、とても便利なCSSです。疑似要素を使いこなすことで、Webサイトの幅広いデザイン表現ができるようになります。 CSSの疑似要素とは？ 擬似... -
メディアクエリの書き方・使い方とCSSブレイクポイント
メディアクエリとは？ メディアクエリ（Media Query）は、Webデザインやウェブ開発で使えるCSS（スタイルシート言語）です。Webサイトのレスポンシブ化やモバイルファースト対応に欠かせないのが、メディアクエリ。メディアクエリは、パソコン、タブレット... -
CSS Flexboxデザイン基礎 フレックスボックスの使い方
Flexbox（フレックスボックス）とは CSSでよく使うWebデザインが横並びのレイアウト。Flexbox（フレックスボックス）は、あらゆる要素を横並びにレイアウトできるCSSのプロパティです。Flexboxには、便利な値がたくさん用意されており、配置位置の指定、余... -
CSSの優先順位ルール 詳細度・最重要規則・継承
HTML/CSS初学者が覚えておきたいCSSの優先順位ルールについて解説します。 CSSをたくさん書いていくと、コードに間違いないのにうまく反映されないことがあります。ブラウザのキャッシュが原因の場合もありますが、CSSの優先順位ルールが原因であることが...
12
