個人サイトの表をCSSで整える

テーブルタグを使ったレイアウトの問題点

これは書いておかなければいけないでしょうね…

<table>タグを使って画像の位置などのレイアウトを整えるのが良くない理由が、ちゃんとあるんです。

まず第一に、テーブルは本来データを表形式で表示するためのものであり、レイアウト目的で使用するのは適切ではありません。
テーブルレイアウトは、特に画面リーダーなどのアクセシビリティツールにとって誤解を招く可能性があります。
これらのツールは、テーブル内のデータを表として読み上げることを前提にしているため、レイアウト目的で使用されたテーブルを誤って解釈し、ユーザーがページ内容を理解しにくくする可能性があります。
ちなみにSEOにも悪影響がありますよ。
可能な限りアクセシビリティにも対応した方が良いです。

次に、テーブルを使ったレイアウトは、柔軟性に欠けることが多いんですよね。
例えばレスポンシブデザインを実現するためには、画面サイズやデバイスに応じてレイアウトを調整する必要があります。でもテーブルはこれがやりにくいのなんのって…
CSSを用いたレイアウトであれば、flexboxやgridといったレイアウト技術を使って柔軟かつ管理しやすいデザインを実現できます。

そもそもテーブルベースのレイアウトはコードが複雑になりやすいという問題がありますよ。
HTMLとCSSを分離することで、コードの再利用性や可読性が向上し、メンテナンスも容易になります。
でもテーブルを使ったレイアウトは、HTML内に多くのネストされたタグが含まれることになります。
一度こうなってしまうと、後々の修正が難しくなります。

現代のウェブデザインにおいては、セマンティクスとアクセシビリティを重視することが求められています。
適切なタグとCSSを使用して、意味のある構造と見やすいレイアウトを作成することが推奨されてるってことですね。

このページに関する注意事項

当Webサイト作成者は、例示を目的としてマークアップ及びプログラミング例を提供しており、明示または黙示にかかわらず、いかなる責任も負わないものとします。
このページは、説明されているマークアップ及びプログラミング言語、手順を作成およびデバッグするために使用される各種ツールに読者が精通していることを前提にしています。
このページは、特定の機能を説明するのに役立つ可能性がありますが、当Webサイト作成者がこれらの例を変更した上で、特定の要件を満たすために追加の機能を提供したり、システムを構築したりすることはできません。
加えて、この例の手順に従う場合は、読者の各種ファイルを事前にバックアップすることを推奨いたします。

レスポンシブデザインにおけるテーブルタグを適切に扱うためには、いくつかのポイントに気をつける必要があります。
まず、テーブルのデザインが多様な画面サイズに適応できるように、CSSを活用することが重要です。
テーブルそのものが画面の横幅に合わせて収縮や拡張するように設定しないとね。
このためには、CSSでwidth: 100%;やmax-width: 100%;を指定すると効果的です。

次に、テーブルの各セルが画面幅に応じて折り返されるように設定するといいかも。
これを実現するためには、word-wrap: break-word;やoverflow-wrap: break-word;といったCSSプロパティを使用します。
また、テーブルのレイアウトを調整するために、メディアクエリを活用することも有効です。
一定の画面幅以下になった場合に、特定の列を非表示にするなどの対応が考えられます。
でもテーブル全体をスクロール可能にするのはやめたほうがいいかな…
スマホブラウザにもスクロールがあるのに、さらに内部にスクロールがあるのはちょっと指先で操作するのしんどいです。

加えて、ユーザーエクスペリエンスを向上させるために、テーブルのデザインにおける視覚的なヒントも重要です。
テーブルの列や行に背景色を適用し、テーブルの境界線を強調することで、情報の見やすさを確保することができます。
また、theadタグを用いてヘッダーを明確に区別し、ユーザーが情報を容易に追跡できるといいです。

レスポンシブデザインにおけるテーブルの扱いには細かな工夫が必要ですが…
まぁぶっちゃけめんどうですよ🥱
可能であれば、表以外の書き方を検討するほうがラクだと思います。

表の罫線などを設定する

お待ちかねの「表」ですよ。
日本人のExcel好きがそうさせるのか、とにかく「表」というのは注目されます。
ここは少し、丁寧に説明していきますか！

基本的な表のCSS


/* ●表の設定● */
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
  width: 50%;
  box-sizing: border-box;
  border-left: none;
  border-right: none;
}

/* グラスタの見出しを水色にする */
tr.grasta_blue {
  background-color: #e0f7fa;
}
/* グラスタ錬成材料の見出しを緑色にする */
tr.grasta_green {
  background-color: #E0FFE0;
}

/* 強敵表のため、独自のクラスを追加 */
.boss-table th:nth-child(1), .boss-table td:nth-child(1) {
  width: 30%;
}

.boss-table th:nth-child(2), .boss-table td:nth-child(2) {
  width: 20%;
}

.boss-table th:nth-child(3), .boss-table td:nth-child(3) {
  width: 50%;
}

/* ボス名称、実装時期、報酬の性質の見出しを水色にする */
tr.header-blue {
  background-color: #e0f7fa;
}

table {
これはすべての table 要素に対してスタイルを適用するための宣言です。

width: 100%;
テーブルの幅を100%に設定します。
つまり、親要素の幅に合わせてテーブルが広がります。
ここではレスポンシブデザインを利かせているbodyに合わせて広がっていきます。
余白をキープするのはレスポンシブデザインのCSSです。

border-collapse: collapse;
テーブルのセルの境界線を一つにまとめて表示します。
セルの間に隙間がなくなります。

}
ここで、テーブルのスタイル設定が終了です。

th, td {
これはすべての th(テーブルヘッダー)と td(テーブルデータ)要素に対してスタイルを適用するための宣言です。

border: 1px solid black;
各セルに1ピクセルの黒い実線の境界線を設定します。

width: 50%;
各セルの幅を50%に設定します。
セルが親要素の幅の半分を占めることを意味します。
表を半分にするってことですね。

box-sizing: border-box;
パディングやボーダーを含めて幅を計算します。
セルの内容がボーダーやパディングによってはみ出さないようになります。

border-left: none;
セルの左側の境界線を消します。
セルの左側が見やすくなります。

border-right: none;
セルの右側の境界線を消します。
セルの右側が見やすくなります。

}
ここで、セルのスタイル設定が終了です。

tr.grasta_blue {
クラス名が grasta_blue の行に対してスタイルを適用するための宣言です。

background-color: #e0f7fa;
行の背景色を薄い水色に設定します。

}
ここで、grasta_blue クラスのスタイル設定が終了です。

tr.grasta_green {
クラス名が grasta_green の行に対してスタイルを適用するための宣言です。

background-color: #E0FFE0;
行の背景色を薄い緑色に設定します。

}
ここで、grasta_greenクラスのスタイル設定が終了です。

.boss-table th:nth-child(1), .boss-table td:nth-child(1) {
クラス名が boss-table のテーブル内の最初の列のセルに対してスタイルを適用するための宣言です。

width: 30%;
最初の列のセルの幅を30%に設定します。

}
ここで、最初の列のセルのスタイル設定が終了です。

.boss-table th:nth-child(2), .boss-table td:nth-child(2) {
クラス名が boss-table のテーブル内の2番目の列のセルに対してスタイルを適用するための宣言です。

width: 20%;
2番目の列のセルの幅を20%に設定します。

}
ここで、2番目の列のセルのスタイル設定が終了です。

.boss-table th:nth-child(3), .boss-table td:nth-child(3) {
クラス名が boss-table のテーブル内の3番目の列のセルに対してスタイルを適用するための宣言です。

width: 50%;
3番目の列のセルの幅を50%に設定します。

}
ここで、3番目の列のセルのスタイル設定が終了です。

tr.header-blue {
クラス名が header-blue の行に対してスタイルを適用するための宣言です。

background-color: #e0f7fa;
行の背景色を薄い水色に設定します。

}
ここで、header-blue クラスのスタイル設定が終了です。

CSSの疑似クラス（pseudo-class）

特定の状態や位置にある要素に対してスタイルを適用するためのものです。
通常のクラスやIDでは指定できないような、動的な状態や特定の条件に基づいてスタイルを変更することができます。
次のような擬似クラスがあります。

:hover：ユーザーが要素にマウスカーソルを乗せたときに適用されるスタイル。
:first-child：親要素の最初の子要素に適用されるスタイル。
:last-child：親要素の最後の子要素に適用されるスタイル。
:focus：ユーザーが要素にフォーカスしたときに適用されるスタイル。

擬似クラスを使うことで、より柔軟でインタラクティブなデザインを実現することができます。

ここで使っているnth-childはCSSの擬似クラスの一つで、特定の順序にある要素を選択するために使われます。
boss-tableクラスのテーブル内の最初の列のセル（<th>と<td>）を選択している状態です。
上にある表では、nth-child(1)はその親要素の中で最初の子要素を指します。
つまり、boss-tableクラスのテーブル内で、各行の最初のセルを選択してスタイルを適用しているんですよね。

次は、もう少し凝ったデザインにした表についてお話してみます。

少し凝った表のデザイン

レスポンシブデザインという視点から見ると、あまり大きな表は望ましくないと思ってます。
その分いろいろ縮めて書いていくことになるから、単純に細々したデザインになってしまうことが多い。
可能な限りスマホの画面に収めていくようにしてますね。
あまり縦に長すぎず、横に広がらず。

すでに表のCSSについては触れていますが、改めてコードを表示しておきます。
このセクションではボックスシャドウについて説明します。

浮かび上がる表を作るCSS


/* Table settings ●start● */
table {
  width: 100%; /* テーブルの幅を100%にする */
  border-collapse: collapse; /* 枠線を重ねて表示 */
}

th,
td {
  border: 1px solid black; /* 枠線を黒にする */
  width: 50%; /* 幅を50%にする */
  box-sizing: border-box; /* ボックスのサイズを枠線込みにする */
  border-left: none; /* 左側の枠線を消す */
  border-right: none; /* 右側の枠線を消す */
}

tr.GTA_blue {
  background-color: #e0f7fa; /* 背景色を青にする */
}

tr.GTA_green {
  background-color: #E0FFE0; /* 背景色を緑にする */
}

.boss-table th:nth-child(1),
.boss-table td:nth-child(1) {
  width: 30%; /* 1列目の幅を30%にする */
}

.boss-table th:nth-child(2),
.boss-table td:nth-child(2) {
  width: 20%; /* 2列目の幅を20%にする */
}

.boss-table th:nth-child(3),
.boss-table td:nth-child(3) {
  width: 50%; /* 3列目の幅を50%にする */
}

tr.header-blue {
  background-color: #e0f7fa; /* ヘッダーの背景色を青にする */
}

.weapon-table th:nth-child(1),
.weapon-table td:nth-child(1) {
  width: 20%; /* 1列目の幅を20%にする */
}

.weapon-table th:nth-child(2),
.weapon-table td:nth-child(2) {
  width: 40%; /* 2列目の幅を40%にする */
}

.weapon-table th:nth-child(3),
.weapon-table td:nth-child(3) {
  width: 40%; /* 3列目の幅を40%にする */
}

caption {
  visibility: hidden; /* キャプションを非表示にする */
  height: 0; /* 高さを0にする */
  overflow: hidden; /* オーバーフローを隠す */
}

.custom-table-container {
  display: block; /* ブロック要素として表示 */
  padding: 10px; /* 内側の余白 */
  border-radius: 15px; /* 角を丸くする */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* ボックスシャドウを追加 */
  margin: 10px 0; /* 上下の余白 */
}
/* Table settings ●end● */

CSSのプロパティ：box-shadow

このプロパティを使うと、要素に影を追加することができます。
影を追加することで、要素が浮き上がって見える効果を得ることができます。

役割: 要素に影を付けるためのプロパティです。
使用方法: 影の位置、ぼかしの範囲、広がりの範囲、色を指定します。

box-shadowを使うことで、デザインに立体感を加えることができます。

box-shadowのCSS例


/* box-shadow: 水平方向 垂直方向 ぼかしの範囲 広がりの範囲 色; */

.example {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

この例では、要素に対して次のような影を追加しています。

水平方向: 0ピクセル（影を左右にずらさない）
垂直方向: 10ピクセル（影を下に10ピクセルずらす）
ぼかしの範囲: 20ピクセル（影を20ピクセルぼかす）
カラー: 黒（透明度15%）

次に、各値の意味を細かく見ていきます。

水平方向 (0): 影を水平方向にどれだけずらすかを指定します。; 正の値は右方向、負の値は左方向に影を移動させます。; この例では 0 なので、水平方向には影をずらしません。
垂直方向 (10px): 影を垂直方向にどれだけずらすかを指定します。; 正の値は下方向、負の値は上方向に影を移動させます。; この例では 10px 下に影をずらします。
ぼかしの範囲 (20px): 影のぼかしの範囲を指定します。; 値が大きいほど影がぼやけます。値が 0 の場合、影はシャープになります。; この例では 20px のぼかしを適用しています。
広がりの範囲 (ここでは省略されています): 影の広がりの範囲を指定します。; 正の値は影を広げ、負の値は影を縮めます。; この例では省略されているため、デフォルトの 0 になります。
色 (rgba(0, 0, 0, 0.15)): 影の色を指定します。; rgba は赤 (Red)、緑 (Green)、青 (Blue)、透明度 (Alpha) を指定します。; この例では、黒 (0, 0, 0) で透明度が 0.15 の影を適用しています。

全体の効果として、このコードは要素に対して下方向に10ピクセルずらし、20ピクセルのぼかしを持つ、透明度15%の黒い影を追加していることになります。
要素が浮き上がって見える効果を出していて、それを表全体に適用しているということですね。

サイトマップ

アナザーエデン関連ページ・サイトマップ

アナザーエデンの強敵戦やストーリーコンテンツのリスト、お勧めバッジなどを掲載したコーナーです。
期間限定のない普通のRPGですので、初心者でも安心して続けていけるゲームとなっています。
もっとも重要なグラスタについては、場所別に網羅した表があります。

個人サイトのホスティングとコンテンツ作成

個人でウェブサイトを作るにはどうすればいいか。
HTML・CSS・JavaScriptの書き方はもちろん、無料かつ広告なしでホームページを作る方法を掲載したコーナーです。
Webデザインやレイアウトについても書いてあります。

魚釣りなどアウトドアのエリア

ゲームとパソコンだけじゃなく、アウトドアも趣味なんです。
このコーナーでは魚釣りの記録とか、魚料理のレシピ、はたまたサイクリングなどなど。
アウトドアに関連するコンテンツが詰め込まれています。