<webNote~WPとゲームHOMEwebサイト制作WordPresswebサイトの制作について必要なこと、大事なことを記載しています。所持しているIT関連本の中より、良さそうな本を選んでみました。ONLINEゲーム関連一覧sports本HOMEwebサイト制作WordPresswebサイトの制作について必要なこと、大事なことを記載しています。所持しているIT関連本の中より、良さそうな本を選んでみました。コピー2019.07.23この記事は約7分で読めます。見出しの端を作る見出しの端に付ける四角形や三角形の作り方がわかると、それからアレンジでき、いろんな形の見出しを作ることができます。見出しの右端の装飾部分を詳しく記載していきます。前回は以下のことについて記載していますので、下のリンクのページをご参考ください。リボン風見出しのソースとその説明https://web.vogue.tokyo/wp-headlineリボン風見出しのソースリボン風見出しは見出しの真ん中、左端、右端に分けて作ります。左端がbefore疑似要素、右端はafter疑似要素でできています。rgba(0,0,0,0.1);}影の付け方は前回の記載を参考にしてください。見出しに影(グレー)を付けたので、影の部分と見出しの右端の部分を調整します。位置の指示はpsitionプロパティで記載します。top:100%;left:0%(基準地から左0%)top100%のままで、leftを0~100%まで動かすと次のように位置が移動します。top:100%;right:0%(基準値から右0%)topは100%のままで、rightを~100%まで動かすと次のように位置が移動します。#efefef)にしています。#efefef,(グレー)右方向へ30px影を作っていますので、30pxはみ出してます。psitionプロパティafterの三角形(または四角形)の位置をright:0にすると30pxはみ出してしまいます。すると、はみ出した部分がなくなり、リボンの端と四角の端が綺麗に接しています。top:100%;right:-30psitionプロパティ影と三角形の位置を調整すると以下のようになります。疑似要素はcontentプロパティがないと働きません。}リボンの右端のソースです。10px;/*線の幅*/border-style:solid;/*実線に指定*/border-color:transparent;/*線の色は透明に指定*/border-left-color:#ff69b4;/*左の線の色を指定*/}四角形・三角形を作るわかりやすいようにボーダーを100pxとし、次のように色分けをしています。100px;border-top-color:黄色border-bottom-color:緑border-left-color:ピンクborder-right-color:青psitionプロパティ上記画像より、三角形を作るにはボーターの下と左、緑とピンクが必要です。100px;border-bottom-color:緑border-left-color:ピンクafter疑似要素ボーダーの左とピンクだけ残すと三角形となり、リボンの折り返し部分となります。ボーダーの緑の部分を透明にします。100px;border-bottom-color:transparent;(透明)border-left-color:ピンクリボン風見出しわかりやすいように影をグレーにしたり、数値を変えていたので、元に戻します。0px;border-bottom-color:transparent;(透明)border-left-color:ピンクbefore疑似要素とafter疑似要素とは?before疑似要素とafter疑似要素を使うと、指定した要素の前または後に、指定した内容を入れるという働きをします。その内容はcontentプロパティで指定します。疑似要素はcontentプロパティがないと働きません。contentプロパティこのように書きます。“;は空要素のままでも記載します。14px;}midasiはHTMLで書いた文字で、wordpressはCSSで入れた文字です。四角形から三角形を作る見出しの作り方4つのボーダーでできている四角形のうち、2つのボーダーだけ残します。/*実線に指定*/2つのボーダーのうち1つのボーダーを透明にします。siteSITEMAPプライバシーポリシー。リネーム一覧スポンサーリンクタイトルとURLをコピーしました。