degitekunote2ノートの落書き感覚で発信する情報ブログ、その名も「デジテクノート2」。ScRfixeder」公開しますWeb制作・ものづくりCSS3のFlexboxで作ってみる2016年に流行ったスマホカラムレイアウトWeb制作・ものづくりAltを可視化するChrome拡張機能作りました「見え〜るAlt」Web制作・ものづくり【結構簡単】ブラウザアクションボタン発火の自作Chrome拡張機能の作り方&サンプルWeb制作・ものづくりWeb制作・ものづくりの記事一覧へ今年2019年買ってよかったものコラム&ライフログ24歳ってヤング時代(18歳〜)の最後なんだってよ。【結果DP-X1A最高!】AK70と迷いに迷って買ったDP-X1Aはやはり最高でした。Googleどうも、今無性にレアチーズが食べたい私(@こふす)です。定期的にレアチーズを食べたくなる病なのです。WEB制作をしていると、ブロック要素を横並びさせ且つ左右均等に配置したい時ってありますよね。ulタグとliタグを駆使てHTMLを形作り、CSSのfloat:leftでもって横に回りこみをさせて横並にするという手法を取られる方が多いと思いますが、これって中々面倒ですよね。今回はサクッと横並びにして、左右均等に配置させる技法を紹介します。Googlefloat:leftでの横並びから卒業!横並びの左右均等っていうと下記画像がそうですよね。これを実際に作って見ようと思います。今までだったらこれを作るにはfloat:leftでもってli要素を回りこませて横並びにして、marginやらpaddingやらで装飾するのが一般的ですが、floatを使わないやり方もいくつか存在します。その中でもflexボックスを使うとまぁ簡単に今回やりたいことが出来ちゃうわけですよ。HTMLを作っていきます上の画像を元にulとliでもって形作っていきます。g"><p>VWXYZ</p></li></ul>次にCSSで横並び&左右均等にしていきますポイントは2つあります。