CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | .frame-img { position : relative ; /* キャプション表示に必要 */ display : block ; margin : 0 auto ; /* 必要であれば指定 */ padding : 0 ; /* 〃 */ border : 0 ; /* 〃 */ } .frame-img > img { width : 100% ; height : auto ; } /* キャプション部のスタイル */ .frame-img > em { position : absolute ; left : 50% ; transform: translate( -50% , 0 ); bottom : 20px ; background-color : rgba( 0 , 0 , 0 , 0.5 ); padding : 5px ; text-align : center ; font-weight : bold ; color : #fff ; } .slope- caption { overflow : hidden ; /* キャプションのはみ出た部分を表示しない */ } /* キャプション部のスタイル再定義 */ .slope- caption > em { transform: translate( -50% , 0 ) rotate( -5 deg); /* -5deg:傾きの角度 */ bottom : 10% ; width : 100% ; padding : 15px ; background-color : #3fb374 ; border : 5px solid #fff ; } |
補足
- 傾けないキャプションの表示方法は 画像のレスポンシブ対応(画像上にキャプション表示) を参照。
- slope-caption クラスで、傾いたキャプションのデザインを設定。
- レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。
HTML
1 2 3 4 | < ul > < li >< span class = "frame-img" >< img alt = "画像" src = "./files/image-01.jpg" />< em >兵庫県立フラワーセンター</ em ></ span ></ li > < li >< span class = "frame-img slope-caption" >< img alt = "画像" src = "./files/image-01.jpg" />< em >兵庫県立フラワーセンター</ em ></ span ></ li > </ ul > |
補足
- frame-img クラスに加えて slope-caption クラスを設定することで、キャプションを傾けることができる。