vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間11万PV〜。

hタグ下に斜めのストライプボーダーを設置&ボーダー画像の作り方解説

      2017/01/31

LINEで送る
Pocket

h-tag-stripe-border-design
デザインセンスが皆無、見よう見まねでWebデザインやってる僕okutani(@okutani_t)です。独学だとやっぱきついものがあるんですかねー。日々勉強です。

そんなセンス無しの僕でも、今回カッコよく(多分)hタグの装飾ができたので記事にしてみました。

皆様のWebサイト作成に役立てれば光栄です。

スポンサーリンク

ストライプボーダーで見出しをオシャレに

では、hタグにストライプボーダーを設置していきましょう。

ストライプ画像の用意

まずはストライプ画像を用意します。用意が済んだらサーバーにアップロードしておきましょう。

僕が作ったやつでよければ下のリンクから「右クリック」→「保存」で使ってやって下さい(下記のURLをそのまま使うのはやめてね)。

LINKstripe.gif

※次のセクションでPhotoShopを使ったボーダー画像の作り方を紹介しています。オリジナルのボーダー画像を使いたい方は、そちらも一読してみてください。

hタグに画像を設置

h2でもh4でもどこでも大丈夫ですが、今回はh3タグに設置してみました。

HTMLはこんな感じ。

<h3>オシャレなボーダー見出し</h3>

CSSはこんな感じ。

h3 {
  padding-bottom: 17px;
  background: url(http://画像ファイルまでのパス/stripe.gif) repeat-x bottom left;
}

コード解説

「padding-bottom」は見出しからボーダーまでの距離です。お好みで調整してみてください。

「background」でh3タグの下に画像を設置して、横方向に画像を繰り返し表示。画像さえ用意してしまえばあっという間ですね。

画像ファイルのURLは、例えば「http://vdeep.net」(index.htmlがあるところ)に「images」フォルダを作って、そこに「stripe.gif」を配置した場合、次のようになります。

http://vdeep.net/images/stripe.gif

表示確認

こんな感じで表示されました。

h-tag-stripe-border-design2

簡単にオシャレな見出しが出来てGoodです。ぜひお試しあれ。

次に、ボーダー画像を自分で作ってみたい!という人向けに、ストライプボーダー画像の作成方法を紹介します。

PhotoShopでストライプボーダー画像を作成

画像の作り方が分かれば、自分好みの色や大きさで見出しをスタイリングできます。

では、PhotoShopを起動して「300×300px」程度の大きさでキャンパスを作成。

長方形ツールで3つのボーダーを作成

長方形ツールを使って3つのボーダーを作成します。今回、分かりやすくするために背景を赤にしています。

h-tag-stripe-border-design3

ボーダーを斜め45°に

ボーダーを選択した状態で「Ctrl + T」で斜め45°に。

h-tag-stripe-border-design4

ガイド線を引く

ガイド線を引いて整形するため、定規が表示されていない方は「表示」→「定規」を選択しておきます。

h-tag-stripe-border-design5

作業領域の上と左にある定規をクリックしながら、ガイド線を引いていきます。

右下の角がボーダーの端と一致するように引いていきましょう。

h-tag-stripe-border-design6

ボーダーを対角に複製

Shift + Altを押しながらボーダーを左にドラッグしてあげると、角度を保ったままボーダーを複製することが出来ます。

同じように角とボーダーの端を合わせながらガイド線を引いておきましょう。

h-tag-stripe-border-design7

切り抜き・小さくしてgifで保存

あとは、ガイドに合わせて切り抜きツールで切り取ってあげればOK。

h-tag-stripe-border-design8

これでオリジナルのストライプ・ボーダーが作成できました!「イメージ」→「画像解像度」から「10×10px」程度に小さくして、gifで保存して完成です。

自分好みのボーダーを作ってみて、hタグをオリジナル&オシャレにしてみてくださいね!お疲れ様でした。

まとめ

hタグはサイトの中でも特に目立つ部分なので、きちんと装飾してあげればサイトのイメージUPです。

サイトのデザインに合わせて、ボーダー色を替えてみたり4色使ってみたり。オリジナリティが増して良いと思います。

参考Photoshopでシームレスでオシャレな斜めストライプをサクッと作る方法 | 株式会社LIG

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
当ブログではh3タグに設置してます。ほかにもh2, h4タグもオシャレにする予定です!

 - BLOG, CSS

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

【Win・Mac】Sassを導入&初めてScssを使ってみる

こんにちは、okutani(@okutani_t)です。今まで、Webコーディン …

「Animate.css + wow.js」でWebサイトにアニメーションをつけてみよう

こんにちは、okutani(@okutani_t)です。みなさんはWebサイトに …

ポチレバをCSSで装飾してみた

こんにちは、okutaniです。前回「カエレバをCSSで装飾してみた | vde …

[WordPress] 記事下の一言コメントをCSSで装飾してみた

こんにちは、okutani(@okutani_t)です。以前、WordPress …

CSSで“蛍光ペン”っぽく文字にマーカー線を引く方法

こんにちは、okutani(@okutani_t)です。Twitterでこんな質 …

[レスポンシブ対応] CSSでチャット風デザインを実装する

「好きなプログラム言語何?」と聞かれれば、ためらいなく「CSS」と答えるokut …

[WordPress]記事内で使える『連載記事一覧』機能をPHPで作ってみた

こんにちは、okutani(@okutani_t)です。ブログを書いていると、連 …

CSSでリンク横に「参考・LINK」バッジをつけてみよう

こんにちは、okutani(@okutani_t)です。今回は、リンク横にCSS …

自分のアクセスを完全に除外する「Google Analytics オプトアウト アドオン」

休日はMacBookAirでスタバってる(スターバックスでコーヒータイム)、ok …

[CSS] リンクの頭に参考バッヂ付けたらレイアウト崩れた。white-spaceで解決

CSSで可愛いレイアウトが出来るとうれしくなりますよね。Webデザインのお勉強中 …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。