Webポートフォリオ制作の３日目はコーディング編です。
1日目はWebポートフォリオの設計、2日目はデザインしてきました。3日目はデザインをしたものもとにし、コーディングにしていき、Webサイトにしていきます。
ついに今回で完成です。フィニッシュです！！
１日目-
３日でWebポートフォリオを作ろう！リソースや情報等など（１日目 設計編）
２日目-
３日でWebポートフォリオを作ろう！リソースや情報等など（2日目 デザイン編）
３日目 –
３日でWebポートフォリオを作ろう！リソースや情報等など（3日目 コーディング編）
3日目 コーディング編
目次
スライスツールを使って画像を書き出す
目次
スライスツールを使って画像を書き出す
Photoshopのスライスツールを使って、デザインしたものをパーツごとに書き出していこう！
ゴリゴリっと！
スライスツールのショートカットキーは【C】
各パーツを書き出していきましょーい！
コーディングの準備
Webオーサリングツール
コーディングする際に、htmlやcssを書いていくツールです。
代表的なものはAdacobe DreamWeaverがありますね！
Mac/windows/Linux
NetBeans IDE
統合開発環境 (IDE) 。オープンソースでフリーソフトです。
Mac
Coda 2
有料ですが、とても美しく使いやすいです。
Windows
TeraPad
フリーソフトで、テキストエディタですが、とてもシンプルで使いやすくhtml/cssのコーディングもできます。
Intype
タブで切り替えることができるコーディング用途を想定したエディタです。フリーです！すごい！
html/css参考サイト
HTMLクイック・リファレンス
困った時はクイック・リファレンス！
コーディング開始！
２日目のデザインで、header、contents,footerとわけてきましが、コーディングの際にも役たちます。
1
ということで、あとは要素の中に色々入れていきます。
そしてcssで細かくレイアウトしていくという感じです。
参考になるサイト
ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ – Web Resipes
画像いっぱいの背景にしたいという時にとても参考になります！
横並びメニュー｜上級CSSレイアウト講座
横並びのグローバルメニューの方法やテクニック！！
CSS3 角丸を表現する border-radius | CSS Lecture
ポートフォリオで使える
ポートフォリオページにWEBサイトのスクリーンショットを載せたりする場合、Lightboxで表示する方法もあります。
Lightbox2
http://lokeshdhakar.com/projects/lightbox2/
上記サイトよりLightboxをダウンロードしてきます。
解答し、「css」「js」「images」ファイルはポートフォリオサイトにアップロード。
1
を記述。
headerに下記ソースを追加記述
1
aタグに「rel=”lightbox”」を追加。下記例です。
1
まとめ
３日で作るポートフォリオですが、今回のステップで一応最後です。
作れそうでしょうか？３日で作る、、と書いてありますが焦らずゆっくり楽しみながら作って頂ければ！と思います。
なにか質問等ございましたら、twitter、facebook、コメント等で頂ければ幸いでございます。ありがとうございました。
