<span>タグで作るnoimage画像風表示

もくじ

• 表示例
• HTMLコード
• CSSコード

表示例

HTMLコード

• • <span class="noimage" title="No Image"></span>

CSSコード

• • .noimage{
  • /*横幅*/width:calc(100px * 1.618);
  • /*縦幅*/height:100px;line-height:calc(100px - 1px);
  • /*枠線*/border:solid 1px rgb(199,199,199);
  • /*背景*/background-color:rgb(249,249,249);
  • /*文字*/color:rgb(99,99,99);font-size:18px;
  • /*角丸*/border-radius:4px;
  • /*外影*/box-shadow:0 0 2px 1px rgb(236,236,236);
  • /*---以下はそのまま---*/
  • display:inline-block;margin:0;padding:0;text-align:center;font-family:"Helvetica Neue","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;letter-spacing:0.04em;
  • }
  • .noimage::before{
  • /*title内の文字を表示*/content:attr(title);
  • }
• これは縦100pxの場合のCSSです。
  横幅は黄金比率になるよう自動で計算しています。