公式ブログサイト2020.06.24デザイン【ダウンロード特典あり】CSSで素人感満載のテーブルレイアウトを超簡単に改善!最近、CSSを教えて欲しい!というご要望を非常にたくさんいただきます。昨今のコロナ禍の影響もあり、オンラインでゼミを!というご要望もいただきます。!!オンラインゼミについては、色々思うところもあり、あとBECKでこれからやりたいことがあるので、結論から言うと、今はオンラインゼミを行う予定はありません(笑)とは言え、現場の最前線でECを行う商売人の皆さんは、色んなことを自分でやりながらお店を切り盛りしていると思いますので、今日のブログでは素人感を払拭してくれるテクをひとつ。代表こんにちは!BECKのDXです。今も昔も、webサイトや商品ページなどで「素人感」がプンプン出ている要素って、たぶんいくつもあると思うんですが、その中でもトップクラスにその雰囲気が出てるのがこちら。これは「テーブルレイアウト」です。テーブルレイアウトとは、エクセルで表のような感じで、スペックや詳細などを解説するときに使うもの。ちなみに予断ですが、ちゃんとしたwebを作る人は、このようなテーブルは本来使いません。その話はさて置き、上の写真を見てもらうとわかると思いますが、むか〜しのwebサイトでこういうテーブルレイアウト見た記憶ありませんか?何だかエ◯サイトやフィッシングっぽいというか...。これ、何でそう見えるか、考えてみたんです。1:枠線の立体感が妙に違和感ある2:ページ編集ソフトでHTMLを作るから、色の配色が雑3:セルの余白が詰まっていて窮屈で読みづらいザッとこのあたりでしょうか。今でもたまにこういうwebサイトを見ますが、さっきの写真のようなテーブルレイアウトをHTMLで見てみるとこんな感じまぁ、あれですよ。エディターなどを使ってHTMLに直でテーブルが書いてあります。このブログを書くためにこのHTMLを組んでみたんですが。今までテーブルを組んでこんな風にwebページを作ってた人は、今日でとりあえずそのやり方にさよならしてみましょう。このやり方だと、無駄なHTMLが多いため、こんなページに画像なども加わってくると、サイトは重いし、修正もしづらいし、ユーザビリティも悪いです。td{width:25%;}tr.one{background:#eee;}</style>今回は「簡単な」ということで、上記のようにテーブルHTMLに必要な要素だけを調整しました。今日のところは難しいハナシは置いといて、テーブル要素の中で必須なのが「行」と「列」です。ここでは全体の「table」タグに対し、「tr」と「td」というタグをどうにかする必要があります。HTMLドキュメントの<head>〜</head>の間に挿入し、テーブルを組んでみましょう。すると、さっきの素人感満載のHTMLテーブルが・・・ちなみにこちらのHTMLコードがこちら。class="one"><td>あいうえお</td><td>あいうえお</td><td>あいうえお</td><td>あいうえお</td></tr></table>先ほど組んだCSSに対し、HTMLでは<tr>、つまり行の部分を装飾しており、それをclass指定しております。class="one"><td>あいうえお</td><td>あいうえお</td><td>あいうえお</td><td>あいうえお</td></tr></table></body>HTMLファイル内に直接CSSを記述する際、<head>〜</head>の間にCSSを、<body>〜</body>の間にHTMLを記述しています。このようにスタイリッシュにすることで、素人感が払拭できるという訳です。今回紹介したHTMLファイルが欲しい!今回ご紹介したテーブルレイアウトのHTMLファイルをダウンロードして使いたい方は、下記からダウンロードしてください。テーブルの行や列を増やしたり、減らしたい方は、カスタマイズしてお使いください。HTMLファイルをダウンロードいかがでしたでしょうか?よく使うものだからこそ、少しの工夫でより見やすくなったり、伝わりやすくなったりすることで、サイト内の他コンテンツなどにも良い影響が出るかも。BECKは三重県桑名市でWeb制作、EC顧問業などを行う企業です。ファッションと歌うことが大好き。BECKは三重県桑名市でWeb制作、EC顧問業などを行う企業です。ファッションと歌うことが大好き。