全て
| カテゴリ未分類
| 送料無料ショップ
| 絶対買わなきゃ損
| レアもの
| ショッピング技
| 美容・健康
| 当ブログオリジナル
| 楽天ブログ・アフィリエイト関連
| 元気が出る話
| 楽天プロフィール関連
| なんちゃってレビュー
| 生活向上チャレンジ
| テキトーな映画レビュー
| 業務連絡
2014.06.24
テーマ： 楽天ブログいろいろ(1508)
カテゴリ： 楽天ブログ・アフィリエイト関連
何の前触れもなく適当に始まった「css でつくる h タグ」のカスタマイズシリーズですが、今回はその第二回目として、フラットタイプの見出しの線の変更方法をご紹介します。
前回同様、まずは以下のページをご覧ください（クリックで別タブで開きます）。
ここでは実線タイプ、一番上の「のしめはないろ」の見出しの線の形状を変えてみましょう。
コピー＆ペースト用コードの、赤字の部分に注目してください。
css コードの区切り文字にセミコロン（;）を使うことは、前回の記事をご覧になった方はもうご存じですね。
よって、上記の赤色の部分をバラすと、このようになります。
そして、それぞれの指定箇所を図であらわすと、このようになります。
すっきりしましたね。
それでは、それぞれの指定内容を解説します。
線の太さ 線のスタイル 線の色 の順に指定します。
それぞれの情報を半角スペースで区切ります。
たとえば、 10px solid #426579 の場合は、 太さ 10 ピクセル、実線、 のしめはないろ を指定したことになります。
さて、それでは下線を点線に変えてみましょう。
border-bottom で指定されている実線（solid）を点線（dotted）に変更するだけです。
カスタマイズ後の表示効果はこのようになります。
カスタマイズの際は、コードの区切りを示すセミコロン（;）や半角スペースを消さないように注意してください。
線のスタイル設定例をあと 3 つご紹介します。
このほかにも、groove、inset、outset などのスタイルを指定できますが、四方をまとめて指定した場合にのみ視覚的効果が得られるため、ここでは省略しています。
それでは次に、ボックスタイプの「べにみどりいろ」の見出しの線を変えてみましょう。
まずは、左のバーの太さをもう少し太くしてみましょう。
コピー＆ペースト用コードの、赤色がついた部分に注目してください。
ご覧のように、border-left に指定されている 15px が左端のバーの幅となります。
それでは幅を 15px から 70px
カスタマイズ後の表示効果はこのようになります。
ツートンカラーの付箋のような見出しが簡単にできましたね。
次に、左のバーをなくして、右側に 100px 幅のバーを作ってみましょう。
コピー＆ペースト用コードの、赤色がついた部分に注目してください。
上記の赤く示した部分の、 border-left を border-right (右)に、そして 15px を 100px に書きかえるだけです。
カスタマイズ後の表示効果はこのようになります。
それでは最後に、このボックスタイプの見出しの全体に 2px 幅の立体的な枠（outset）を付けてみましょう。
元のコピー＆ペースト用のサンプルコードの、赤色で ◆ココ◆ と示した部分にコードを追加します。
追加するコードはつぎのとおりです。区切り用のセミコロン（;）を最後に必ず打つようにしてください。
表示効果はこのようになります。
四方を outset 枠で囲ったことにより、それぞれの線が立体的に表現されていますね。
以上で、フラットタイプの見出しの線のカスタマイズ方法の基礎はご説明できたと思います。
次回はフラットタイプ見出しの形状カスタマイズの応用編です。
参考リンク：
WEB色見本 原色大辞典 [外部リンク]
←こちらからこっそりコメントでけます
前回同様、まずは以下のページをご覧ください（クリックで別タブで開きます）。
1. 実線タイプの見出しの線をカスタマイズ
ここでは実線タイプ、一番上の「のしめはないろ」の見出しの線の形状を変えてみましょう。
コピー＆ペースト用コードの、赤字の部分に注目してください。
のしめはないろ
<h3 style=" border-bottom:1px solid #426579;border-left:10px solid #426579; padding:7px;">ここにテキストを入力します</h3>css コードの区切り文字にセミコロン（;）を使うことは、前回の記事をご覧になった方はもうご存じですね。
よって、上記の赤色の部分をバラすと、このようになります。
border-bottom:1px solid #426579;
border-left:10px solid #426579;
border-left:10px solid #426579;
そして、それぞれの指定箇所を図であらわすと、このようになります。
すっきりしましたね。
それでは、それぞれの指定内容を解説します。
線の太さ 線のスタイル 線の色 の順に指定します。
それぞれの情報を半角スペースで区切ります。
たとえば、 10px solid #426579 の場合は、 太さ 10 ピクセル、実線、 のしめはないろ を指定したことになります。
さて、それでは下線を点線に変えてみましょう。
border-bottom で指定されている実線（solid）を点線（dotted）に変更するだけです。
<h3 style="border-bottom:1px dotted
#426579;border-left:10px solid #426579;padding:7px;">ここにテキストを入力します</h3>
カスタマイズ後の表示効果はこのようになります。
ここにテキストを入力します
カスタマイズの際は、コードの区切りを示すセミコロン（;）や半角スペースを消さないように注意してください。
線のスタイル設定例をあと 3 つご紹介します。
破線(dashed)
二重線(double)（線の太さを 3px 以上にすること）
立体線(ridge)（線の太さを 2px 以上にしないと目立った効果はない）
このほかにも、groove、inset、outset などのスタイルを指定できますが、四方をまとめて指定した場合にのみ視覚的効果が得られるため、ここでは省略しています。
2. ボックスタイプの線のスタイルをカスタマイズ
それでは次に、ボックスタイプの「べにみどりいろ」の見出しの線を変えてみましょう。
まずは、左のバーの太さをもう少し太くしてみましょう。
コピー＆ペースト用コードの、赤色がついた部分に注目してください。
べにみどり
<h3 style=" border-left: 15px solid #8491c3;padding:7px;background: #ccd6ff;">ここにテキストを入力します</h3>ご覧のように、border-left に指定されている 15px が左端のバーの幅となります。
それでは幅を 15px から 70px
カスタマイズ後の表示効果はこのようになります。
ここにテキストを入力します
ツートンカラーの付箋のような見出しが簡単にできましたね。
次に、左のバーをなくして、右側に 100px 幅のバーを作ってみましょう。
コピー＆ペースト用コードの、赤色がついた部分に注目してください。
<h3 style=" border-left: 15px solid #8491c3;
padding:7px;background: #ccd6ff;">ここにテキストを入力します</h3>
上記の赤く示した部分の、 border-left を border-right (右)に、そして 15px を 100px に書きかえるだけです。
カスタマイズ後の表示効果はこのようになります。
ここにテキストを入力します
それでは最後に、このボックスタイプの見出しの全体に 2px 幅の立体的な枠（outset）を付けてみましょう。
元のコピー＆ペースト用のサンプルコードの、赤色で ◆ココ◆ と示した部分にコードを追加します。
<h3 style=" ◆ココ◆
border-left: 15px solid #8491c3;padding:7px;background: #ccd6ff;">ここにテキストを入力します</h3>
追加するコードはつぎのとおりです。区切り用のセミコロン（;）を最後に必ず打つようにしてください。
border: 2px outset #8491c3;
表示効果はこのようになります。
ここにテキストを入力します
四方を outset 枠で囲ったことにより、それぞれの線が立体的に表現されていますね。
以上で、フラットタイプの見出しの線のカスタマイズ方法の基礎はご説明できたと思います。
次回はフラットタイプ見出しの形状カスタマイズの応用編です。
参考リンク：
WEB色見本 原色大辞典 [外部リンク]
お気に入りの記事を「いいね！」で応援しよう
最終更新日
2014.06.25 23:59:52
[楽天ブログ・アフィリエイト関連] カテゴリの最新記事
-
[楽天ブログユーザ向け] 特定記事編集呼び… 2016.08.12
-
【更新情報】 Amazon Fire タブレットで G… 2016.07.16
-
Kindle Fire HD に Android アプリをムリ… 2016.06.02
【毎日開催】
15記事にいいね！で1ポイント
PR
キーワードサーチ
▼キーワード検索
© Rakuten Group, Inc.
