Web・デザインスクールホームページ作成講座レッスンノート adobe illustratorを用いたレイアウト作成とHTML/CSSコーディングの書き出し方

adobe illustratorを用いたレイアウト作成とHTML/CSSコーディングの書き出し方

ホームページ作成講座のレッスンノート

レッスンノートって?レッスンノートって?

体験レッスンでしたが、具体的に制作したいものがあったので実制作をしながらレッスンを進めていきました。

制作しているゲームを紹介するページをつくりたいということで、作成したワイヤーフレームを元に、Adobe illustratorを使ったレイアウトデザイン作業やHTML/CSSコーディング作業を進めていきました。


とりあえず、普段、どのようなスタイルでコーディングをしているのか、どの程度のことを理解していてできるのかを把握するためにも、普段のようにコーディングを進めてもらいました。

html5の基本フォーマット
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サイトのタイトル</title>
<link rel="stylesheet" type="text/css" href="css/html5reset.css" />
<!--&#91;if lt IE 9&#93;>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<!&#91;endif&#93;-->
</head>
<body>

//ここにサイトに表示するコンテンツ内容を記述

</body>
</html>


さらにbodyの中に<header></header>と<div id = “main”></idv>と<footer></footer>を記述して、それぞれにサンプルテキストを入れて表示してみました。

そのままだと、単純にテキストが縦に並んで表示されるだけなので、
試しにheaderに対するCSSとして、heightとbackground-colorを指定して、どう表示が変わるのかを確認しました。

これによって、一番上の領域が赤くなりましたが、上と左右に余白ができている状態でした。

headerにmargin:0;を指定しても変わらず、ブラウザの要素を検証機能でHTMLに対して指定されているスタイルを確認したところ、bodyに対してmarginが設定されていたので、marginの値を0に変更することで、余白をなくすことができました。




Adobe illstratorでの作業


新規ファイル作成で、ドキュメントプロファイルでWEBを選択することで、画面の大きさを考慮したファイルを作成することができます。

これが、ページを表示した時に最初に見える範囲(ファーストビュー)になります。

ヘッダー画像やアイコンなどを配置する領域枠や要素(画像やテキスト)を配置していきます。

実際には、ページは縦長でスクロールさせる必要があるので、
ドキュメント設定ーアートボードを編集から白い四角をドラッグすることで、大きさを縦長に伸ばしていくことができます。

長方形ツールを使って四角で領域を描いたり、余白を図るスペースを作ったりしていきます。
ダブルクリックすることで数値を入力して長方形を作成することができます。
一度作成した長方形を数値指定で大きさを変更するには、表示ーウィンドウー変形を選んで、変形パネルを開くことで行うことができます。


長方形を少しずつ移動するときは、キーボードの上下左右の矢印キーで移動させるのが便利です。

また、レイアウトで位置を揃えるのに便利な方法として、ガイドの出し方をお伝えしました。
表示ー定規を選択すると、上と左に目盛りが出てくるので、ここをクリックしてドラッグすることでガイド線を引くことができます。
このレッスンノートを書いたコーチ

自身の作品がグッドデザイン賞を受賞!実務・講師経験ともに豊富なので安心

自分で作る夢のマイホームページ作り講座
栗林賢 (ホームページ作成)

高田馬場・池袋・練馬・石神井公園・秋津・小手指・入間市・仏子・所沢・西武新宿

レッスンノート ページ先頭へ

ホームページ作成情報

サイタのホームページ作成講師がブログを通して、ホームページ作成情報を発信。更新情報のチェックはこちらから!

twitter

ホームページ作成の先生

@HomepageCyta