【初心者でもわかる】いちょう切り。part1(4つの要素を2×2に並べる方法-flexbox編-)
flexboxで4つの要素を2列2行に並べる方法を解説します。4分割したオレンジの画像を例に、親要素の幅と折り返しを設定する手順を紹介します。
\ なるほど!でつまずきを解決する /
HTML・CSS・JavaScript・WordPress など
Web制作の基礎から実践的なテクニックまで、
初心者にもわかりやすく解説するブログです。
flexboxで4つの要素を2列2行に並べる方法を解説します。4分割したオレンジの画像を例に、親要素の幅と折り返しを設定する手順を紹介します。
border-radiusで長方形の左右を丸くする方法を解説します。エクレアの画像を使い、50%指定との違いや、直線部分を残して角を丸めるコツを紹介します。
CSSのborder-radiusで正方形を円にする方法を紹介します。ケーキの画像を使ったサンプルを通して、角丸の指定方法と正円を作るためのポイントを解説します。
position: absoluteとtransformを使い、要素を上下左右中央に配置する方法を解説します。ラーメンと卵の画像を重ねる例で、位置指定の仕組みと調整のコツを紹介します。
コーディングCSSの隣接・間接・直下セレクタの違いと書き方を解説します。HTMLの親子関係や兄弟関係に合わせて、狙った要素にスタイルを適用する方法をサンプルで確認できます。