liで横並べしつつ中央寄せ【レスポンシブ対応】2021年06月11日navやulを使ってメニューを作ることがあるでしょう。そのメニューを横並べしつつ中央寄せしたいのでしょう。centerブラウザの幅を狭くしても中央寄せになります。レスポンシブにも対応しています。centerを利用するとよいでしょう。子要素を横並べしつつ中央寄せできます。この方法の場合widthを指定する必要がありません。widthを指定する場合はpxでの指定ではなく%の指定にするとレスポンシブ対応になります。navについてnavはメニューなどで使うhtml5のタグです。機能としてはdivと同じただのブロック要素です。今回横並べしたい要素はliであり、ulにdisplay:flexを指定すると横並べしつつ中央寄せができます。navに指定した場合はliは横並べにならないためnavにはCSSを指定しませんでした。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読むレスポンシブ対応について上記の形でもレスポンシブ対応していますが、スマホのメニューデザインとしては利用しにくいですね。スマホの時は2列のメニューになるようにしてみましょう。↓ブラウザ幅を狭くして確認してください。</ul></nav>「@media(max-width:750px)」はブラウザ幅が750px以下のときだけ効かせるメディアクエリです。50%を指定しています。これにより2列になります。wrapを指定しています。これはflexの改行を許可するCSSです。centerを指定する。レスポンシブ対応するにはwidthは%指定。スマホでも利用しやすいようメディアクエリを利用してデザインを変更する。以上、navやulで横並べしつつ中央寄せ【レスポンシブにも対応】でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。