web-portfolio-coding

3日でWebポートフォリオを作ろう!リソースや情報等など(3日目 コーディング編)

  • このエントリーをはてなブックマークに追加

Webポートフォリオ制作の3日目はコーディング編です。
1日目はWebポートフォリオの設計、2日目はデザインしてきました。3日目はデザインをしたものもとにし、コーディングにしていき、Webサイトにしていきます。
ついに今回で完成です。フィニッシュです!!


1日目-
3日でWebポートフォリオを作ろう!リソースや情報等など(1日目 設計編)

2日目-
3日でWebポートフォリオを作ろう!リソースや情報等など(2日目 デザイン編)

3日目 -
3日で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クイック・リファレンス
困った時はクイック・リファレンス!

コーディング開始!




2日目のデザインで、header、contents,footerとわけてきましが、コーディングの際にも役たちます。

<div id="header">ヘッダー部分に入る要素を入れる</div>
<div id="contents">コンテンツ部分に入る要素を入れる</div>
<div id="footer">フッター部分に入る要素を入れる</div>

ということで、あとは要素の中に色々入れていきます。
そしてcssで細かくレイアウトしていくという感じです。

参考になるサイト

ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ – Web Resipes
画像いっぱいの背景にしたいという時にとても参考になります!

横並びメニュー|上級CSSレイアウト講座
横並びのグローバルメニューの方法やテクニック!!

CSS3 角丸を表現する border-radius | CSS Lecture

ポートフォリオで使える

ポートフォリオページにWEBサイトのスクリーンショットを載せたりする場合、Lightboxで表示する方法もあります。

Lightbox2
http://lokeshdhakar.com/projects/lightbox2/

上記サイトよりLightboxをダウンロードしてきます。
解答し、「css」「js」「images」ファイルはポートフォリオサイトにアップロード。

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>

を記述。

headerに下記ソースを追加記述

<link href="css/lightbox.css" rel="stylesheet" />

aタグに「rel=”lightbox”」を追加。下記例です。

<a href="images/image-1.jpg" rel="lightbox" title=""><img src="images/image-1.jpg"></a>

まとめ

3日で作るポートフォリオですが、今回のステップで一応最後です。
作れそうでしょうか?3日で作る、、と書いてありますが焦らずゆっくり楽しみながら作って頂ければ!と思います。
なにか質問等ございましたら、twitter、facebook、コメント等で頂ければ幸いでございます。ありがとうございました。

おすすめ記事

  1. 新卒webデザイナーで採用してもらえるような紙ポートフォリオの作り方
  2. 新米webデザイナーにおすすめしたい本
  3. 魅力的なパワーポイントを作る際に参考になるデザインのいろいろ
  4. 国内の素敵なwebデザイナーさんのポートフォリオのまとめ 2012/8/18
  5. Webポートフォリオを制作いたしました「ポケットラボ ポートフォリオ」

関連記事

PAGE TOP