hタグ下に斜めのストライプボーダーを設置＆ボーダー画像の作り方解説
2017/01/31
デザインセンスが皆無、見よう見まねで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表示確認
こんな感じで表示されました。
簡単にオシャレな見出しが出来てGoodです。ぜひお試しあれ。
次に、ボーダー画像を自分で作ってみたい！という人向けに、ストライプボーダー画像の作成方法を紹介します。
PhotoShopでストライプボーダー画像を作成
画像の作り方が分かれば、自分好みの色や大きさで見出しをスタイリングできます。
では、PhotoShopを起動して「300×300px」程度の大きさでキャンパスを作成。
長方形ツールで3つのボーダーを作成
長方形ツールを使って3つのボーダーを作成します。今回、分かりやすくするために背景を赤にしています。
ボーダーを斜め45°に
ボーダーを選択した状態で「Ctrl + T」で斜め45°に。
ガイド線を引く
ガイド線を引いて整形するため、定規が表示されていない方は「表示」→「定規」を選択しておきます。
作業領域の上と左にある定規をクリックしながら、ガイド線を引いていきます。
右下の角がボーダーの端と一致するように引いていきましょう。
ボーダーを対角に複製
Shift + Altを押しながらボーダーを左にドラッグしてあげると、角度を保ったままボーダーを複製することが出来ます。
同じように角とボーダーの端を合わせながらガイド線を引いておきましょう。
切り抜き・小さくしてgifで保存
あとは、ガイドに合わせて切り抜きツールで切り取ってあげればOK。
これでオリジナルのストライプ・ボーダーが作成できました！「イメージ」→「画像解像度」から「10×10px」程度に小さくして、gifで保存して完成です。
自分好みのボーダーを作ってみて、hタグをオリジナル＆オシャレにしてみてくださいね！お疲れ様でした。
まとめ
hタグはサイトの中でも特に目立つ部分なので、きちんと装飾してあげればサイトのイメージUPです。
サイトのデザインに合わせて、ボーダー色を替えてみたり4色使ってみたり。オリジナリティが増して良いと思います。
参考Photoshopでシームレスでオシャレな斜めストライプをサクッと作る方法 | 株式会社LIG
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。
「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
