パンフレット作成 カタログ制作 デザインのパンフレット制作しチャオ!

電話でのお問い合わせ
電話でのお問い合わせ

htmlとCSSで見出しのデザイン色々

795304ed82676ae6e359125103962bab_s

こんにちは、京都オフィスの馬橋です。
WEBでも印刷物でも、ちょっとしたことで悩むのが見出しのデザイン。
黒色で文字をおいただけ、大きくしただけではおもしろくないですよね。
ちょっとしたアクセントに使えそうな見出しデザインをいくつか作ってみました。
WEBで使えるようにcssのコードも合わせて掲載します。

基本の形はこちら ※宮沢賢治「セロ弾きのゴーシュ」

———-
01 下線
screencapture-file-Volumes-Macintosh-HD-Users-canvas-imac04-Desktop-01-html-2018-08-22-17_44_30
シンプルに下線を引いたものです。
コードはこちら

———-
02 下線ドット
screencapture-file-Volumes-Macintosh-HD-Users-canvas-imac04-Desktop-02-html-2018-08-22-17_28_04
ドットの線に変えました。
コードはこちら

———-
03 上下ドット
screencapture-file-Volumes-Macintosh-HD-Users-canvas-imac04-Desktop-03-html-2018-08-22-17_28_15
ドットの線を上下に引いたものです。
コードはこちら

———-
04 上二重 下一重線
screencapture-file-Volumes-Macintosh-HD-Users-canvas-imac04-Desktop-04-html-2018-08-22-17_28_29
上は二重の線、下は一重の線です
コードはこちら

———-
05 背景色付き
screencapture-file-Volumes-Macintosh-HD-Users-canvas-imac04-Desktop-05-html-2018-08-22-17_28_40
背景に色を付けたものです
コードはこちら

———-
06 背景色付き+上下線
screencapture-file-Volumes-Macintosh-HD-Users-canvas-imac04-Desktop-06-html-2018-08-22-17_28_54
コードはこちら

———-
07 角丸囲い
screencapture-file-Volumes-Macintosh-HD-Users-canvas-imac04-Desktop-07-html-2018-08-22-17_29_06
角丸で囲ったものです
コードはこちら

———-
08 横線
screencapture-file-Volumes-Macintosh-HD-Users-canvas-imac04-Desktop-08-html-2018-08-22-17_29_17
おそらくよく見るであろう横線を引いたもの
コードはこちら

———-
09 サイド囲み
screencapture-file-Volumes-Macintosh-HD-Users-canvas-imac04-Desktop-09-html-2018-08-22-17_29_28
両サイドで閉じたもの。文字はセンター揃えがよろしいかと。
コードはこちら

———-
10 ステッチ
screencapture-file-Volumes-Macintosh-HD-Users-canvas-imac04-Desktop-10-html-2018-08-22-17_29_42
ちょっとかわいらしくステッチのように
コードはこちら

———-
11 マーカー
screencapture-file-Volumes-Macintosh-HD-Users-canvas-imac04-Desktop-11-html-2018-08-22-17_30_19
蛍光ペンで引いたイメージ
コードはこちら

———-
12 ストライプ
screencapture-file-Volumes-Macintosh-HD-Users-canvas-imac04-Desktop-12-html-2018-08-22-17_30_28
ストライプの背景です
コードはこちら

———-
webでよく使うデザインですが、ちょっとした印刷物にも使えるかと思いますのでご参考ください。

関連記事

2019年11月
« 10月    
 123
45678910
11121314151617
18192021222324
252627282930