タグ

borderに関するtmlifeのブックマーク (5)

  • まとめて書くことができるCSSプロパティの8つのパターン

    まとめて書くことができるCSSのプロパティを集めてみました。基的な内容が多くなっていますので復習に見ていただければ幸いです。 先日は基的なセレクタの使い方について書きましたので、今度はプロパティの基ということでまとめてみました。 1. border まずはボーダーです。よく使いますね。 border-width … 線の太さ border-style … 線の種類 border-color … 線の色 これらは一括で指定することができます。

    まとめて書くことができるCSSプロパティの8つのパターン
  • phiary

    みなさん, Web サービスやブログを作る際に見出しのデザインに悩んだことはありませんか? 意外とこれが曲者で, Web デザインについての情報はたくさんありますが, 見出しについてはこれといった決定版ってのがないんですよねぇ. 今回は, CSS の border プロパティを使って見出しを装飾する方法を紹介します. 以前書いたエントリー『CSS の border-style 一覧』で紹介した border-style に加え border-color や border-width を活用することで簡単に見出しを装飾することができます. 色々なパターンの見出しを作っておりますので, 実際に実行したり fork してイジったりして遊んでもらえると幸いです. また, 超有名ブログの見出しについても少しまとめてみたので, よかったら参考にしてみてください. シンプルな見出し シンプルな見出しです

    phiary
  • CSS の border プロパティを使って見出しを装飾しよう – 超有名サイトの見出し | TM Life

    CSS の border プロパティを使って見出しを装飾しよう』 第4弾! ラストです!! シンプルな見出し ちょい派手な見出し ド派手な見出し 超有名サイトの見出し←今ここ 私がよく参考にさせて頂いている有名ブログの見出しを並べてみました. 私が真似て作っているだけなので実際のコードとは異なる部分がありますのでご注意下さい. やはり有名なブログだと, ごちゃごちゃした見出しではなく, 見やすさを重視したシンプルなものが多いですね. なんかデザインについて色々言っちゃっていますが, 私はゲームプログラマであってWeb に関しては素人です. なので, なんか言っちゃってんなぁ~程度に流してもらえれば幸いです. ※見出しで使用している画像は許可を頂いて使用しています. 家サイトの許可無く転用しないようお願いします. Table of contents サンプル コリス さんの見出し かちび

    CSS の border プロパティを使って見出しを装飾しよう – 超有名サイトの見出し | TM Life
  • CSS の border プロパティを使って見出しを装飾しよう – ド派手な見出し | TM Life

    CSS の border プロパティを使って見出しを装飾しよう』 第3弾!(第4弾まであります!!) 引き続き CSS の border プロパティを使って見出しを装飾する方法について紹介します. ド派手な見出しです. 大見出しから中見出しを想定して作りました. 前回までの見出しとの違いは背景色を付けたり 上下左右をボーダーで囲ったりして見出しとしての役割を強調しています. 色については, 並べたときに見栄えするように hsl を使って色相を 60度ずつずらしていますが今回のエントリーとは無関係なので気にしないで下さい. シンプルな見出し ちょい派手な見出し ド派手な見出し←今ここ 超有名サイトの見出し(近日公開予定) Table of contents サンプル Header Type 01 Header Type 02 Header Type 03 Header Type 04 He

    CSS の border プロパティを使って見出しを装飾しよう – ド派手な見出し | TM Life
  • CSS の border プロパティを使って見出しを装飾しよう – シンプルな見出し | TM Life

    CSS の border プロパティを使って見出しを装飾しよう』 第1弾!(第4弾まであります!!) シンプルな見出し←今ここ ちょい派手な見出し ド派手な見出し(近日公開予定) 超有名サイトの見出し(近日公開予定) CSS の border プロパティを使って見出しを装飾する方法について紹介します. シンプルな見出しです. 中見出しから小見出しを想定して作りました. CSS もシンプルなので簡単に使えます. 色については, 並べたときに見栄えするように hsl を使って色相を 60度ずつずらしていますが今回のエントリーとは無関係なので気にしないで下さい. Table of contents サンプル Header Type 01 Header Type 02 Header Type 03 Header Type 04 Header Type 05 Header Type 06 サンプル

    CSS の border プロパティを使って見出しを装飾しよう – シンプルな見出し | TM Life
    tmlife
    tmlife 2012/10/11
    border を使って見出しを装飾第1/4弾です!!
  • 1