<
スポンサーリンク

WordPress リボン風見出しのソースとその説明

before疑似要素とafter疑似要素 WordPress
before疑似要素とafter疑似要素
この記事は約8分で読めます。

リボン風見出しのソース

リボン風見出しはリボンの真ん中の部分とリボンの左端(befor)、リボンの右端(after)の部分で形作っています。

before疑似要素とafter疑似要素
before疑似要素とafter疑似要素

説明のために、3つの部分に分けて記載しています。

リボン風見出しの真ん中のソース

  • h3{
  • position:relative;/*基準位置の指定*/
  • background:#f7ddfb;/*リボンの色*/
  • box-shadow:/*影の付け方*/
  •     10px 0 0 0 #f7ddfb,
  •     -10px 0 0 0 #f7ddfb ,
  •     0 3px 3px 0 rgba(0,0,0,0.1);
  • }

リボン風見出しの左端のソース

  • h3:before{
  • content:" ";/*挿入するもの*/
  • position:absolute;/*基準位置の指定*/
  • top:100%;/*三角形の位置*/
  • left:-10px;/*三角形の位置*/
  • width:0;/*幅*/
  • height:0;/*高さ*/
  • border-width:0 10px 10px 0;/*線の幅*/
  • border-style:solid;/*実線に指定*/
  • border-color:transparent;/*線の色は透明に指定*/
  • border-right-color:#7bb8d8;/*右の線の色を指定*/
  • }

リボン風見出しの右端のソース

  • h3:after{
  • content:" ";/*挿入するもの*/
  • position:absolute;/*基準位置の指定*/
  • top:100%;/*三角形の位置*/
  • right:-10px;/*三角形の位置*/
  • width:0;/*幅*/
  • height:0;/*高さ*/
  • border-width:0px 0px 10px 10px;/*線の幅*/
  • border-style:solid;/*実線に指定*/
  •     border-color:transparent;/*線の色は透明に指定*/
  •     border-left-color:#ff69b4;/*左の線の色を指定*/
  • }

ソースはh3タグで記載しています。 クラス名については下記リンクを参考にしてください。

リボンの真ん中の作り方

  1. 位置の指定(positionプロパティ)を指定
  2. リボンの色(background)を指定
  3. padding、marginなどを指定

リボンの色を指定

まず、リボンの色を指定します。

  • position:relative; /*基準位置の指定*/
  • background:#f7ddfb; /*リボンの色*/

見出しの影の付け方 box-shadow

上のソースのリボン風見出しには影を付けています。

box-shadow で、横方向の影、縦方向の影、ぼかし、広がり、影の色を指示します。rgbaで透明度を指定できます。16進法のカラーコードでは、透明度は指定できません。

  • box-shadow :横方向 縦方向 ぼかし 広がり 影の色
  • box-shadow:/*影の付け方*/
  •  10px 0 0 0 #efefef,
  •  -10px 0 0 0 #efefef,
  •  0 3px 3px 0 rgba(0,0,0,0.1);

box-shadow の数値の意味

(例)10px 0 0 0 #efefwf の場合

  • 10px 0 0 0 #efefwf →横方向 縦方向 ぼかし 広がり 影の色
横方向の影 10px右方向へ影、マイナスで左方向右へ10px
縦方向の影 0下方向へ影、マイナスで上方向なし
ぼかし 0ぼかしの強さなし
影の広がり 0影が拡大、マイナスで縮小なし
影の色 #efefef影の色 #efefef

box-shadow: 10px 10px 0 0 #efefef

右方向へ10px、上方向へ10px、ぼかしなし、広がりなし、グレー(#efefef)の影。画像上に影を付けると画像下になります。

リボン風見出し positionプロパティ
リボン風見出し positionプロパティ

box-shadow:0 10px 10px 0 rgba(0,0,0,1)

下方向へ10px、ぼかし10px、広がりなし、透過性のある影。画像上にぼかしを入れた影を付けると画像下になります。

rgba は透明度を指定します。

リボン風見出し positionプロパティ
リボン風見出し positionプロパティ

影を付けたリボンの部分

  • h2{
  • position: relative;
  • background: #f7ddfb; 
  • box-shadow:
  •  10px 0 0 0 #efefef,
  •  -10px 0 0 0 #efefef,
  •  0 10px 10px 0 rgba(0,0,0,0.1) }

上のソースで画像下になります。リボンの真ん中の部分です。

リボン風見出し positionプロパティ
リボン風見出し positionプロパティ

position プロパティ

position は基準になる位置を指定します。2つの四角を並べる時、1つの四角の基準位置を決め、もう1つの四角は基準位置からの位置を top、 bottom、 left、 right で指定します。

  • position:absolute;/*基準位置の指定*/
  • top:100%;/*基準位置から上100%*/
  • left:-10px;/*基準位置から左10px/

position プロパティ

position: static指定なし
position: relative 相対位置(指示の通りの位置に移動する)
position: absolute絶対位置
position: absolute絶対位置、 スクロールしても同じ位置に固定

親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。

見出しの左端を作る before

  • h2:before{ }

リボンの左端は次の3つの手順で作ります。

  1. 位置の指定(positionプロパティ)をabsoluteに指定する
  2. 三角形部分の位置を指定
  3. 三角形部分を作る

三角形と疑似要素の詳しい内容は、下記のリンクページにも記載しています。

ソース

  • h3:before{
  • content:” “;/*挿入するもの*/
  • position:absolute;/*基準位置の指定*/
  • top:100%;/*三角形の位置*/
  • left:-10px;/*三角形の位置*/
  • width:0;/*幅*/
  • height:0;/*高さ*/
  • border-width:0 10px 10px 0;/*線の幅*/
  • border-style:solid;/*実線に指定*/
  • border-color:transparent;/*線の色は透明に指定*/
  • border-right-color:#7bb8d8;/*右の線の色を指定*/
  • }

before疑似要素

見出しの左端を作るために、before疑似要素を使います。before疑似要素とafter疑似要素は、指定した要素の前または後に指定した内容を入れるという働きをします。その内容はcontentプロパティで指定します。疑似要素はcontentプロパティがないと働きません。

  • 要素:before{ content:” “; }

コンテンツを挿入する要素 content は ” “ このように空白にします。疑似要素はcontentプロパティがないと働かないので、content:” “;は空要素のまま記載します。

リボンの左端(三角形)の作り方

画像はわかりやすいように、border-width:100pxにしています。

リボンの左端 before疑似要素
リボンの左端 before疑似要素

画像の説明

画像上

画像上
  • border-width:100px 100px 100px 100px;/*線の幅*/
  • border-style:solid;/*実線に指定*/
  • border-top-color: 黄色:/*上の線*/
  • border-bottom-color: ピンク:/*下の線*/
  • border-left-color: 緑:/*左の線*/
  • border-right-color:青:/*右の線*/

画像2番目

右の線と下の線だけが必要なので、border-width:0 100px 100px 0; とします。

※ 因みに4つの数字は、1 100 100 0は、上、右、下、左です。

画像2番目CS
  • border-width:0 100px 100px 0; 
  • border-style:solid;
  • border-top-color: 黄色:
  • border-bottom-color: ピンク:
  • border-left-color: 緑:
  • border-right-color:青:

画像3番目

右の線だけが必要なので、 border-color:transparent; border-right-color:青: とします。transparent は透明です。

(注意)CSSは上から読み込まれ、スタイルが上書きされるので、transparentの後にborder-right-coloroを記述します。

画像3番目
  • border-width:0 100px 100px 0;
  • border-style:solid;
  • border-color:transparent; /*透明*/
  • border-right-color:青:

見やすいように影をグレー(#efefef)、100pxにしていますので戻します。

  • #efefef を#f7ddfbに戻す
  • border-width:100pxを10pxに戻す
before疑似要素とafter疑似要素
before疑似要素とafter疑似要素

次回は見出しの右端の部分の説明とafter疑似要素とposition プロパティについて、もう少し詳しく記載しています。

タイトルとURLをコピーしました