マス6tableのデザインによっては枠線がいらなくて消したいことがあります。tableの枠線を消す方法を解説します。全部消す方法、一部消す方法があります。【前提】CSSのborderを使った表を作る表に対して通常の線を引く方法はいくつかあります。1つにtableのマス間に1pxの隙間を空け、背景色を使ってマス線を表現する方法があります。これは線ではないためCSSのborderで上書きできず、枠線の一部を消すことができません。よって基本となる表はCSSのborderを使った下記のような表とします。各マス(th,td)の上と左に線を引きます。これだけだと表全体の一番下と右に線が引かれません。「tr:last-child」は一番下の行を指します。最終行のマスの下に線を引きます。「th:last-child」「td:last-child」は一番右の列目を指します。最終列の右に線を引きます。これで各マスをborderだけで線を引き切った状態になります。borderがよくわからない場合は下記をご参照ください。borderおよびborderに関連するCSSプロパティの種類一覧を実例とともに紹介します。この記事を読むこの表を基本として枠線を消していきます。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。【html】border属性を指定しないhtmlにおいてtableを指定するときborder属性を指定することができます。border属性には数値を指定するのですが、html5からは「border="1"を指定する」か「border属性を指定しない」の2択となりました。これは枠線の有無を知らせるための情報となり、線があるならその太さに関わらず「border="1"」を指定します。線のデザインはCSSで指定しましょう。線がないならborder属性を指定しません。</tr></table>先述した「【前提】CSSのborderを使った表を作る」では「table[border="1"]」という形でCSSのセレクタを指定しています。これは「border="1"が指定されたtable」という意味です。「border="1"」を指定していないtableでは自動的に線がひかれないものとなります。【CSS】tableとtdにborder:noneを指定CSSのborderで指定された枠線は、同じくborderで消すことができます。「border:none」または「border:0」を上書きすると線を消せます。tableの枠線はtableかtd,thに指定しているため、これらに「border:none」を指定しましょう。枠線全部を消す方法でも伝えたようにborder:noneで消します。borderで一部の線を消す方法borderを指定すると上下左右すべてに線を引いてしまう。borderで一部を消す方法を解説します。この記事を読むただし、消す線を指定する必要があります。マスの線を消すthやtdにborder:noneを上書きしましょう。方向も指定する必要があります。</tr></table>先に「border-top」や「border-left」などで線を指定しています。それと同じCSSで打ち消しましょう。消す箇所が多いならclassで消すことをオススメします。縦線を消す縦線つまり、マスの左右の線を消すにはth,tdのborder-rightとborder-leftをnoneにします。</tr></table>横線を消す横線つまり、マスの上下の線を消すにはth,tdのborder-topとborder-bottomをnoneにします。</tr></table>特定の横線や縦線を消す最後のtdに線を引きたい、偶数の列に線を引きたいというときは疑似クラスを駆使しましょう。td」、「2列目」を「td:nth-of-type(2)」のようにあらわせます。「F:nth-of-type(n)」は「n番目に現れるF」という疑似クラスです。疑似クラスはたくさんあるので下記からご確認ください。主要ブラウザで使えるセレクタ等の一覧です。主要ブラウザで使えるセレクタ等の一覧です。CSSの記述例と実行例もあります。この記事を読む疑似クラスを使って、特定の横線や縦線を消してみましょう。</tr></table>これは3行目つまり3番目のtrのtdの上の線を消したものと、3列目つまり3番目のtdの左の線を消したものです。ちなみに「:nth-last-of-type(n)」を使うと下からn番目という指定もできます。全部消すhtmlではborder属性の指定をしないCSSではborder:noneを指定する一部消すtd,thにborderの方向も含めてnoneを指定する以上、CSSでtableの枠線borderを全部・一部消す方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。