ライターのナナミです。みなさん、表って使ってますか?見やすく整理されているので、料金表などの情報量が多いものにはぴったりのレイアウトです。デザイン次第では見辛くなる上、WEBサイトの魅力も落ちてしまいますね...。そんなお悩みも、CSSで解決しちゃいましょう!今回はCSSで表の見栄えを変える方法を解説していきます。この記事は下記の流れで進めていきます。表とCSSの仕組みを覚えて、表のデザインを自由自在に作れるようになっちゃいましょう。まとめHTMLでテーブルを組むまずは土台となる表を作っていきましょう。表はHTMLの<table>タグなどで作ることができます。下記のように組めばOKです。</tbody></table><table>タグの中に、<tr>タグ、<th>タグ、<td>タグなどを組み合わせて構成します。今回の記事はこのHTMLを基本にして説明していきますね。表の作り方がいまいちよくわからない...<table>タグなど、表の作り方をもっと詳しく知りたい!という方は、下記の記事からご覧ください。2019年7月30日CSSで見た目を調整するでは、先ほど作った表にCSSを指定して、見栄えを整えていきましょう。基本は普通の要素と全く同じで、いろんな指定をすることができます。今回は、よく使う見た目についてざざっとまとめてみました。背景色をつける背景色はbackground-colorでつけることができます。*/}<table>タグにつければ表全体、<tr>タグ、<th>タグ、<td>タグなどにつければ該当の箇所に色がつきます。background-colorについてもっと詳しく知りたい方は、下記の記事をどうぞ。線の見栄えを変えるやはり表には線があった方が見やすいですよね。ここもCSSで調整しちゃいましょう。線はborderで設定することができます。*/}うん、表といえばこれ!という感じになりました。ここで使っているborder-collapseについては、後の項目で解説します。border-collapseの解説へ↓borderの詳しい説明は、リファレンスをご覧ください。http://www.htmq.com/style/border.shtml文字の周りに余白をつけるデフォルトの状態で枠線をつけると、線と文字の間に隙間がなくてキュッと詰まった印象になります。paddingを指定することで、線と文字の間に余白を作ることができます。*/}だいぶ見やすくなりました!paddingについて詳細に知りたい方は、下記のリファレンスで確認してみてください。http://www.htmq.com/style/padding.shtmlセルの幅や高さを調整する表のセルは、幅や高さを明示的に指定することも可能です。width、heightを使いましょう。*/}上の画像、お気づきでしょうか?そう、見出しにしか高さを指定していないのに、横のセルも同じように高さがついているんです。隣り合うセル同士は高さや幅が自動的に揃うようになっているのです。Excelとかで高さや幅を指定したときと同じですね。width、heightの詳細は、リファレンスを参照してみてください。height:http://www.htmq.com/style/height.shtml文字の色を変える表の見出し部分だけ文字の色を変える、なんてこともできちゃいます。colorを使いましょう。*/}一番左の列、見出し部分だけ文字の色を変えられました。文字の色を変えるcolorについては、下記の記事で詳しく解説しています。併せて読んでみてください。文字の揃えを変えるデフォルトでは、見出しは中央揃え、それ以外は左寄せとなっています。場合によっては見出しを左寄せにしたり、他の部分を中央寄せにしたりしたいときもありますね。そんなときは、text-alignで文字の揃え位置を変更しちゃいましょう。*/}text-alignの詳細はリファレンスで確認してみてくださいね。http://www.htmq.com/style/text-align.shtml文字の太さを変えるデフォルトでは、見出しは太字、それ以外は普通の太さの文字になります。別に見出しは太字じゃなくていいんだよなぁ...なんてときには、font-weightで太さを調整することができます。表にだけ使える独自CSSここまでは、普通の要素にも使うCSSと表の組み合わせ方を解説してきました。表のCSSはこれだけではありません。表には表の見栄えを決められる独自のCSSがあるのです。今回は、よく使う3つをメインに解説していきますね。セルの幅の決め方を変える:table-layoutデフォルトの表では、表の幅がいっぱいになっているとき、セルの中身に合わせて幅を自動的に調整してくれています。それを全て同じ幅にするモードとの切り替えるのが、table-layoutです。表の幅を自動計算して決めます。デフォルトはこの値が指定されている状態です。表の幅を同じ幅に統一します。試しにfixedを指定してみましょう。*/}このように、全てのセルの幅が統一されます。線の重なりを指定する:border-collapse表の線は、重ねて表示するか間を空けて表示するかを決めることができます。それを指定するのがborder-collapseです。各セルの線を重ねて表示します。一本線の枠を引くときに指定が楽です。各セルの線を間を空けて表示します。それぞれの線の見栄えを変えて表示したいときにおすすめです。試しに、separateを指定してみましょう。*/}こんな感じで、各セルの線と線の間に空白ができますね。線と線の間の空きを調整する:border-spacingborder-collapseをseparateで指定した時、線と線の間をどれだけ空けるのかを指定するのがborder-spacingです。pxなどの数値で指定することができます。*/}こんな風に、間をがっつり空けることも可能です。その他の表専用CSS表専用のプロパティは他にも色々な種類があります。興味がある方はリファレンスなどで確認してみてくださいね。方法はわかったけど、どんなデザインがいいのかわからない...自分で作るのは難しそう...という方は、これから紹介するデザイン例などを参考にしてみてください。コピペで使えるので、ここからカスタマイズしていくのも全然アリです。*/}がっつり枠線を引くのではなく、色分けだけで実装してみました。見やすいレイアウトになりますね。擬似クラスで色がつく部分を指定しているので、いちいちclassをつける必要もありません。擬似クラスについて詳しく知りたい方は、下記のリファレンスをどうぞ。*/}画面の背景色と線を同じ色にして、タイルのようなレイアウトにしてみました。普通に線が引いてあるよりも、ちょっとおしゃれになりますね。*/}見出しに擬似要素で飾りをつけてみました。Q&Aみたいな一問一答を入れるといい感じになりそうですね。これを自分で作ってみたいけど、擬似要素ってどんなものなのかわからない...という方は、ぜひ下記の記事をご覧ください。2018年11月27日CSSだけで好条件の案件獲得はできる?画像:ShutterstockWEBサイトの見栄えを整えるCSSですが、結論から言えばCSSだけでは好条件の案件を獲得することが難しいのが現状です。CSSと合わせてJavaScriptやPHPといったプログラミング言語も学ぶことで、更にできる事が広がりあなたの市場価値を高めることができます。CSSだけの案件はまだ少ないもちろんCSSを学ぶことで出来ることは広がりますが、仕事獲得という面で考えるとCSSだけでは厳しい面もあります。大手クラウドソーシングサイトであるクラウドワークスによると、XHTMLやCSS2.1だけでなく最新技術を学んでおく必要があります。制作の正確さに加えて品質チェックにも気を配らなければなりません。HTML・CSSコーディングを基本としながら、Webに関連する様々なプログラミング言語を習得しておく姿勢が重要になるでしょう。引用元:クラウドワークスといった記述があります。このようにCSSだけを習得するよりも、JavaScriptやPHPといったCSSと親和性の高いプログラミング言語を扱えると、仕事獲得のしやすさや単価も大きく伸ばすことができます。今CSSを学んでいる方で、更にその先に仕事獲得まで考えているのであれば、是非合わせてスキルを身に付けることをオススメ致します。どの言語を学べばいいんだろう......。いざプログラミング言語を選ぶとなるとこのような悩みが出てきますよね。そこで作りたいものから必要なプログラミング言語や簡易的な学習プランが分かるプログラミング診断アプリを用意しました。あなたの作りたいものにあった学習プランと必要なスキルが分かります。挫折せずにスキルを身につけたいならCSSに合わせて他のプログラミング言語を身に付けることをオススメしましたが、ここから他にも学ぶのは大変だし挫折しそう......。思ってしまう方もいることでしょう。確かにCSSの習得だけでも学ぶべきことは多く大変です。そこに加えて他の言語を身に付けると考えると、難しく感じてしまいますよね。そんなあなたは弊社「侍エンジニア塾」を利用してみてはいかがでしょうか?弊社では、あなたの目的に合わせて専用のオーダーメイドカリキュラムを作成し、現役エンジニアの講師が専属であなたの学習をサポートします。そのため、つまづくことなく学習をすすめることができますよ。入会する必要はありません。無料体験レッスンを利用して頂ければ、効率的な学習方法や今後のキャリアプランなどをご提案致します。下記ボタンより予約が可能となっているので、まずはお気軽にご相談ください。無料体験はオンラインでも受け付けております。無料体験を予約するまとめいかがでしたか?たかが表と侮るなかれ。素敵なデザインが作れれば、見やすさもサイトの雰囲気も格段にアップします。この記事を参考に、色々なデザインの表を作ってみてください!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。フリーターを経てフロントエンジニアになる。jQueryなどのコーディングやCMS設計に従事。文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。体は日本酒でできている。