• html＋css

画像を写真風に白フチと影を付ける・・・。

　　

 
html

<figure><img class="frame" src="https://popmedia.jp/wp/wp-content/uploads/2016/12/paso1.gif" alt="paso1" width="241" height="350" /></figure>  

1 2	<figure><img class="frame" src="https://popmedia.jp/wp/wp-content/uploads/2016/12/paso1.gif" alt="paso1" width="241" height="350" /></figure>

CSS

.frame { max-width: 95%; padding: 8px; box-sizing: border-box; box-shadow: 0px 0px 8px #666; background: #fff; }

1 2 3 4 5 6 7

.frame {     max-width: 95%;     padding: 8px;     box-sizing: border-box;     box-shadow: 0px 0px 8px #666;     background: #fff; }

• html＋css

漢字にふりがなを付けるルビ（ruby）

記事とウィジェットの両方が複製できる プラグイン

関連記事

1. 

   レスポンシブテーブル

2. 

   CSSで画像を円形に切り抜く方法

3. 

   装飾用のボックスデザイン

4. 

   画像の下に文字を回り込ませない

5. 

   CSS3の「transform:scale()」でhoverした時に画像を拡大する

6. 

   文字装飾