サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Wikipedia
www.e-sanwa.co.jp
nav ul{ margin: 0 auto; padding: 0; text-align: center; } nav ul li{ display: inline-block; position: relative; padding-right: 15px; margin-right: 10px; } nav ul li a::after, nav ul li a::before { display: block; content: ”; position: absolute; } nav ul li a::after { top: 10%; right: 0; width: 13px; height: 13px; background-color: #ccc; border-radius: 100%; } nav ul li a.current::after, nav ul li
前回(初心者の為のCSS: 画像の上に文字や画像を重ねる方法 – 前編)はpositionプロパティは使用することで画像や文字を重ねることが出来るということをご説明しました。 absoluteとrelativeは非常に使い勝手は良いですが、慣れるまでは癖が強いために難しく感じてしまうかもしれません。 そこで、後編では予告通りabsoluteとrelativeを利用したレイアウトと、そのまま使えるコードを付けてご紹介します。 ブログのサムネイル付き記事一覧、ECサイトの商品一覧などで使用できるような汎用性の高いレイアウトをご用意したので幅広いシーンで利用が可能です。 是非色々なコードを試して、オリジナルレイアウト作成にチャレンジしてみてください。 「NEW」アイコンをつける 新着記事や、新商品などに着けるとアイキャッチとして有効です。 “new_icon”のクラスで分岐させることができるため
このページを最初にブックマークしてみませんか?
『www.e-sanwa.co.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く