ホームページ研究LABO

デザイン

変形画像＆見出し・テキスト｜LIQUID　BLOCKS

アコーディオンカーテンSWELL

吹き出し｜SWELL

キャプションブロック｜SWELL

画像重ねデザインデスクトップのみ｜Grids

Font AwesomeでHタグ装飾

PタグアイコンフォントAmazon

H2アイコンフォントAmazon

.head-border

• position: relative; … ボーダーを擬似要素で作るため、位置の起点にする。
• display: inline-block; … インラインブロックにしてボーダーの位置を調整。
• padding: 0 55px; … 横を0pxにしてしまうとボーダーが文字に被ってしまう。

.head-border:擬似要素

• position: absolute; … 親要素(relative)を起点にする。
• top: 50%; … ボーダーを垂直方向真ん中に指定。
• width: 50px; … ボーダーの横幅。
• height: 5px; … ボーダーの高さ。厚み。
• left:0; / right:0; … 親要素のpaddingで横幅を調整しているので、位置を0に指定。

H2センター寄せ アイコンフォントAmazon作成方法

引用元：【HTML・CSS】見出しの左右両端に線を入れる方法

画像アイコンでHタグ装飾

アニメーション｜Shortcodes Ultimate

bounceIn

wobble

flip

fadeInRightBig

rotateInDownRight

lightSpeedIn

アニメーション｜Animate.css

準備中

メニューのテキストを画像に置き換える方法｜WordPres