cssに関するtksfskのブックマーク (2)

  • はてなブログの記事幅・レイアウトを変更する - Minimal Green

    デザインテーマ「Minimal Green」では記事とサイドバー以外を可変にした2カラムになっています。 「Minimal Green」のレイアウト 記事幅サイドバー幅の変更 はてなブログのHTML構造について タイトル下やフッター部分をcontent幅に揃える 「Minimal Green」のレイアウト /*content幅 PC*/ #container #content { width: 1000px;} /* 2カラムレイアウト */ #main { width: 624px; float: left; } #box2 { width: 336px; float: right; } #main(記事624px) + #box2(サイドバー336px)+(記事とサイドバーの40pxの余白)= #content幅1000px となっています。 記事幅サイドバー幅の変更 1000px内で

    はてなブログの記事幅・レイアウトを変更する - Minimal Green
  • :link、:visited、:hover、:active の記述順序とその覚え方 - jmblog.jp

    スタイルシートでa要素のリンクのデザインをする際に、次のように 4 つの擬似クラスを用いることが多いと思います。 a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:active { color: yellow; } 実はこの 4 つの擬似クラスの記述順序には注意が必要で、 link visited hover active の順番で記述しないと意図した結果にならなかったりします。この順序についてちょっと調べてみたので、まとめてみたいと思います。 なぜこの順番じゃなければダメなのか? 実践 Web Standards Design には、次のように書かれています。 :hover 擬似クラスと:active 擬似クラスは一連の動作であるので、スタイルシート内でもこの順番で記述しないと有効

    :link、:visited、:hover、:active の記述順序とその覚え方 - jmblog.jp
    tksfsk
    tksfsk 2017/11/19
  • 1