HTML + CSS 基礎のまとめ

お疲れさまです。

本日は今まで勉強してきたHTML・CSSのまとめとして、

webページ（デザインのみ）を作りました！！

↓縦長なので一部のみ↓

可愛くできて満足です。

文章は課題指定のものを使ったので、気にしないでください。 

完全版はCodepenで公開しております。

• ページレイアウト全体
  http://codepen.io/yutainoue0077/full/vghxw
• HTML + CSS付き
  http://codepen.io/yutainoue0077/pen/vghxw
  
• 背景素材をお借りした百花繚乱さま
  

  http://flowerillust.com/index.html

HTML・CSSを作った時に、

Codepenを使えばすぐに共有・公開できるので便利ですね。

使い方は下記の流れです。

1. Codepenにsign up
2. 右上のタブからNew Panを選択
3. HTML・CSSを投げ込み、Saveする
4. 右上のタブからYour Profileを開く
5. 保存したデザインにカーソルを合わせ、
   右上のタブからOpen Full Pageを選択
6. 開いたページのURLをブログに張り付け

作ったHTML・CSS（JSも可）を誰かに自慢したい時にご利用ください。

※おまけ

CSS編集する時に最初は

コード弄って　→　ページ更新　→　レイアウト確認

とやっていて、すごく面倒でした。

しかし、ページの気になる箇所で右クリックして

『要素を検証』という機能を使うと、

その場でCSSを試せることを知りました。

最初から知っていればよかった。。。と思いましたので、

これから勉強される方は是非ご活用ください。