見出しのデザインを変えてみる
公開日:
:
最終更新日:2014/06/22
CSS備忘録 CSS Jquery
見出しのデザインをいろいろと工夫してみたいと思います。
こんな感じです
囲みの線の色を変えたり、破線にしたりすることで、いろいろと楽しめそうです。
h2からh6まで適用できます。
.midashi h2{ font-size:120%; border-top:solid 1px ;/*上に線を入れる設定*/ border-top-color:#999999;/*上の線の色*/ border-left: 8px solid;/*文字の横に付箋のようなマークを入れる*/ border-left-color:#F90;/*文字の横の付箋のようなマークの色*/ border-right:solid 1px #999999;/*右に線を入れる設定*/ border-bottom:solid 1px #999999;/*文字の下に線を入れる設定*/ width:100%;/*見出しの横幅*/ line-height: 26px;/*h3の高さ設定*/ padding-left: 5px;/*文字の左にスペース*/ color:#333333; /*文字の色*/ }
.midashi-01 { color: #333333;/*文字の色*/ padding-left: 5px;/*文字の左にスペース*/ border-bottom: 4px double ; border-bottom-color:#F90; }
スポンサー
関連記事
-
-
CSS 文字の下にラインを入れる(画像使用)
以前気に入って使用していた、文字の下にラインを入れる方法。 画像を使うのでちょっと凝ったライン
-
-
CSS 回り込み解除(clear)の指定忘れでレイアウトが崩れた
CSSのレイアウト崩れで悩む 昨日から、CSSのレイアウト崩れで悩んでしまった。 「floa
-
-
CSS 文字の下にラインを入れる
長い文章にノートのように罫線が入っている感じをCSSでやってみました。 CSS .u
-
-
CSSだけでタブボックスを実装する
今、力を入れているサイトのメニューが増えてきて、自分でもリンク先を探すのに戸惑ってしまう。 そこで
-
-
CSSで画像に枠をつける
いつもつかうCSSなのに、忘れちゃうことがあって、また、ネットで調べなおしたりして時間ばかり掛かって
-
-
ソースコードを表示するのに便利な「SyntaxHighlighter Evolved」
サイトを作っていると、備忘録的にソースコードを分かるところに残しておきたいということがあります。
-
-
個別のHTML, ページごとにCSS, JS, PHPを追加・管理できるプラグイン
先日から、備忘録的にCSSコードをWordpressに記載するようにしていますが、どのような表示にな
-
-
CSSアメリカンな吹き出しの 見出しを作る
アメリカンな吹き出しの 見出しを作る ちょっとPOPな記事に合いそうな見出しです。
-
-
SEOではタイトルが重要。Googleの検索結果表示が変更に
先日から、SEOを意識して各ページの見直しを行っています。 SEOのサイトチェックをするのに、
-
-
CSS 強調したい文字を枠で囲む
ホームページを作っていると、この部分は強調したいという場合が多くあります。 太字にしたり色を変えた