vdeep

*

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

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

LINEで送る
Pocket

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

Web開発のお仕事を募集しています

フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています(現在の業務量によってお受けできない場合もあります)。

Ruby on Rails」「JavaScript(jQuery, Reactなど)」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。

ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。

LINKお問い合わせ

LINKokutani's Portfolio


 - BLOG, CSS

スポンサーリンク

PC用AdSense

PC用AdSense

  こちらもどうぞ

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