WordPressとCSSに関するkooltのブックマーク (3)

  • 少しの労力でサイトをかっこよく!見出しのCSSデザインに役立つジェネレーター&サンプル集30個まとめ

    見出しジェネレーター外観や色を選んでCSSを生成するジェネレータータイプ。 CSS見出しジェネレーター CSS見出し-ジェネレーター | WEB道 吹き出しやリボン、背景色、ボーダー色、文字色、影、ぼかしなどを選択して見出し用のCSSを生成するジェネレータ。 見出しメーカー 好きな色でCSS見出しが作れます | スタイルシート見出しメーカー 好きな色を選んでボタンを押すだけでシンプルな見出しが作れる見出しメーカー。 見出しサンプル集見出しデザインと、HTMLCSSがセットになったデモサンプル集。 CSS見出しデザインのアイデア9個 H1一つでここまで出来るCSS見出しデザインのアイデア9個 切り取り線、テープ、リボン、吹き出し、アメリカンな吹き出し、付箋、メタルプレート、モザイク、旗、のような見出しをCSSのみで実現しています。ポイント解説などもあってわかりやすいです。 CSSのみでカス

    少しの労力でサイトをかっこよく!見出しのCSSデザインに役立つジェネレーター&サンプル集30個まとめ
  • margin、padding、borderの覚え方

    まっさらな状態で、単純に「家」と一文字書いた場合、文字の周りに見えない線がひかれます。 文字通り、それが「家」ですね。そして、「庭」がpadding、「壁」がborder、marginが「境」です。 自分の土地内の庭(padding)や壁(border)は、色を塗れますがが、 道路として提供した境(margin)は、「町」の管理になってしまった為、塗り替えできません。 但し、どれだけ道路を提供するかは、家側の意志で決めることができます。 庭を塗ると、家の色まで一緒になっちゃうところは、ご愛敬で。 「家」の部分を内容領域(content)と言います。内容領域「家」の幅がwidth、高さがheightです。 (バグのため正しく表示されない場合があります。) 例えば、この「家」の中に、小部屋をつくるように、新たなボックスを定義する場合、 基的に、この家の幅、widthの値より、小さいボックスし

    margin、padding、borderの覚え方
  • margin?padding?ボックスモデルを理解しよう!あとbox-sizingが便利だよ、って話

    CSSで指定するwidth/heightは、特別な指定(後述)が無い限り赤の内容領域の大きさを指定することになります。 また青のboaderまでを含み要素とみなされるので、背景色を指定した場合はboader/padding/content areaの3つに色がつきます。 margin/border/paddingはそれぞれtop/right/bottom/leftの属性を持っているので、個々に指定することもまとめて指定することもできます。 このように要素が展開する領域の考え方をボックスモデルと呼びます。 marginとpaddingを使い分ける 同じように見える余白にも、明確に違いがあることがボックスモデルからわかるかと思います。 余白の表現に迷った時には、私は下のような基準で考えてmarginとpaddingを使い分けています。 boaderの内側の余白はpadding 背景色を含んでい

    margin?padding?ボックスモデルを理解しよう!あとbox-sizingが便利だよ、って話
  • 1