【CSS/html】メニューの横に区切り線を付ける方法4種マンガでわかるホームページ作成ホームへ【CSS/html】メニューの横に区切り線を付ける方法4種2022年03月14日メニュー1メニュー1メニュー2メニュー3メニュー4メニュー5横並びメニューは区切り線がなくても機能しますが、区切り線があることで誤クリックを減らすことができ、ユーザーにやさしいサイトになります。メニューの横に区切り線を付ける方法をデザインを変えて4種類紹介します。【ベース】区切り線なし状態のメニューまずは区切り線がない状態のメニューを作りましょう。flexを指定して横並べにしましょう。一つ目のメニューをわざと長くしています。メニュー内の文字数が違うことでそれぞれのメニューの長さ・高さが異なります。100%を指定しておくとliの数に関わらず一定の長さにできます。flexを指定することで子要素のaタグの高さをliと同じにできます。flexなどを指定することでテキストを上下左右中央寄せにします。背景色をつけているのはaタグのクリック範囲をわかりやすくするためであり、必須ではありません。このメニューに区切り線をつけていきましょう。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む【長い区切り線】border-leftメニューの高さと同じ区切り線をつける方法です。メニュー1メニュー1メニュー2メニュー3メニュー4メニュー5ベースのソースに下記を追加します。#999;}やりかたは単純で各メニューの左か右に線を引くというものです。「li+li」と指定することで一番目を除外できます。よって2番目以降のliの左に線を引くとメニュー間の区切り線を引くことができます。【短い区切り線】before長い区切り線はちょっとカッコ悪いので短くさりげない区切り線をつけてみましょう。メニュー1メニュー1メニュー2メニュー3メニュー4メニュー5ベースのソースに下記を追加します。absolute」で上下中央寄せします。rotate(45deg)区切り線を斜めにすることでオシャレ感を増すデザインです。メニュー1メニュー1メニュー2メニュー3メニュー4メニュー5先述した「短い区切り線」のbeforeに下記CSSを追記します。rotate(○○deg)」は指定した角度だけ要素を傾けるCSSです。○○の部分に数値をいれて調整可能です。50%区切り線を線ではなく、●で区切る方法です。メニュー1メニュー1メニュー2メニュー3メニュー4メニュー5先述した「短い区切り線」の方法の応用です。ベースのソースに下記を追加します。50%」を指定すると●になります。50%で丸にする以上、メニューの横に区切り線を付ける方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。