画像をいれる

上記のように<img>タグを囲ったthumbnailクラスの<div>を追加します。

CSSも追加。

「margin: 0 auto;」は「margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto;」を簡略化した書き方なので、結果的にthumbnailクラスは300pxの幅をもったまま、ボックスの真ん中に位置するようになります↓

ここでoverflow: hidden;を入れているのは、縦に長い画像のときに高さ300pxの枠からはみ出ないようにするためです。

あとでも使いますし、実際の制作でもよく使うので、知らなかった人は覚えておいて損はないですよ(^-^)

文字をいれる

ここは簡単ですね。下に<p>タグで文字を追加します。

クラスもよしなに追加しましょう。

まあスタイルは自由ですｗ

最終的にこうなりますね！

あとはリボンだけです。

ribbonクラスを追加

とりあえず以下のようにクラスを追加します。

しかしこのままでは画像の上にリボンが挿入されてレイアウトが崩れてしまうのです！

なので、positionプロパティを使ってリボンの位置を独立させます。

boxクラスに対してabsoluteにするので、boxクラスにはposition: relative;を追加します。

（レイアウトが独立した）

回転・移動させる

さておまちかね！やっとCSS3です。

CSS3のtransformプロパティを使って、このribbonクラスを回転・移動させましょう！

Sublime TextでSnippetsを使ってる人は、transformと打ってtabキーを押すと以下のようにベンダープレフィクス（CSS3のブラウザ対策）を全てつけてくれます。

ド便利！

これにrotate(-45deg)と追加してください。

rotateは回転、-45degは、45度反時計回りに傾ける、という意味です。

すると……

傾いた！

更に、リボンを少し左側に移動したいと思います。

positionプロパティの値を変更してもいいのですが、今回はせっかくなのでCSS3で移動させてみましょう。

translate(X軸の移動幅, Y軸の移動幅)といった要領で調整します。

X軸・Y軸ともに-70pxにしてみてください。

translateを使うときに注意しなければならないのが、移動する方向はサイトの軸ではなく要素自身のX軸・Y軸なので、たとえば現在傾いてるribbonクラスからみると、以下のように移動するということです。

さて、↓こうなりましたか？

はみ出たリボンを隠す

このままではリボンがはみ出てしまっているので、boxクラスに、ある一行を追加します。

……そう、overflow: hidden;ですね(￣▽￣)

（はみ出た部分が非表示に）

グラデーションをつける

リボンの形が出来上がったところで、プラスアルファとしてグラデーションを追加してみましょう！

CSS3におけるグラデーションはlinear-gradientを使います。

0%というのはグラデーションの開始位置、100%は終了位置を占めしています。

他にも50%の位置に色を指定したり、向きを変えられたりもできますが、それはまた今度！

ではついでに、ribbonクラスの背景もグラデーションにしてしまいましょう(･ω･)ﾉ

だんだんといい感じになってきましたね！！

影をつける

最後に、ボックスと文字に影をつけてみたいと思います。

ボックス要素に影をつけるためにはbox-shadowプロパティを使います。

数字が色々とありますが、box-shadowプロパティはそれぞれ、影の「X軸、Y軸、ぼかし具合、色」を示しています。

他にも広がり具合や、内側に影をつける指定などもできます！
（また今度(￣▽￣)）

さてこうなりました↓

同じ要領でribbonクラスにも影をつけてみましょう！

さらに、text-shadowプロパティをつかって、文字に影をつけることもできます。

今回はbox-shadowと同じ値で指定してみましょう。

これで完成！！

おつかれさまでした∠(´▽｀*)