デイトラWeb制作コース中級編DAY17 テーブルとGoogleMap(iframe)埋め込みのコーディング Table①

テーブル

今回はこのようなテーブル(表)を実装していきます。手強そう!

目次

テーブルのコーディング base編 HTML

まずテーブルとは何?という話ですが、簡単に言えば表ですね。タグの意味が分かればなんとなくイメージが掴めるのではないかと思います。

table 要素で全体を囲み、tr 要素(table row)で行を定義し、その中にデータセルの td 要素(table data)や、見出しセルの th 要素(talbe header)を含めます。

これ以上ないくらい丁寧な解説があるページです。(by weblikerのweb兄さん)

こちらの動画もわかりやすかったです。(by アキユキさん)

例によってジェネレーターをいじってみると理解が深まりそうです。一度理解してしまえば、その後はこちらのサイトを利用するのが楽ですね!
https://tabletag.net/ja/

赤字の部分のみspanタグでm-active、その下の文字をm-smallとクラスをつけます。

テーブルのコーディング base編 CSS

.table

テーブルセクション全体を括るクラス。薄いグレーの背景色をつけます。

.table__inner

テーブルセクションのインナー。特に指定はありません。

.table__content

テーブルセクションのコンテンツエリアを括るクラス。いつものように上マージンを広めにとり、display: flex;で画像と表を横並びにします。SP版ではマージンを狭めにし、display: block;で縦並びにします。

.table__image

左側の画像を括るクラス。横幅をpxで指定します。右マージンをとります。タブレットでは右マージンを狭めにします。スマホでは幅を100%にし、上マージンをなくします。下マージンを広めにとります。

.table__price

価格表を括るクラス。横幅をpxで指定します。スマホでは100%にします。

.table-default

価格表本体を括るクラス。widthを100%にします。border-collapse: collapse;で線を1本に見えるようにします。白背景にグレーのボーダーで囲みます。table-layout: fixed;でcolumn1とcolumn2の幅を均等に。

thとtdのパディングをとって余裕を持たせます。内側に枠線を引きます。外枠に対して格子をはめるようなイメージですね。vertical-align: middle;で文字を縦方向真ん中に持ってきます。line-heightを指定します。フォントを太めに。スマホ版のパディングを若干狭めにします。

thのみ他と差をつけるために濃いめのグレーの背景にし、白文字にします。text-align: center;で文字を真ん中寄せに。最初の列だけ幅を固定にします。first-childの出番ですね。タブレット版とスマホ版は幅狭めに。

tdは文字を右寄せにします。&.table-default__multilineのみパディングを狭めにして、文字が占める面積を確保します。

spanタグの&.m-activeだけ赤文字にします。&.m-smallはフォント小さめに。

.table-default__attention

記述がありますが、特に使われてないセレクタのようです。

.table__attention

表の下の注意書きの部分。上マージンを少し空けます。フォントサイズ小さめ。aタグ部分のみフォント太めに。文字色濃いめ。transitionも設定しておきます。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次