未経験からのシステム開発職〜１週目その１〜

はじめの課題はwebページ作成

はじめの課題はwebページ作成です。こちらが完成予想図です。

見よう見まねで作っていきます！

だめだめです。その後、社長に一から基本を叩き込まれます。

社長の教えを元に、気合を入れて一から作り直していきます！

サイズを決める

まずはじめに、各要素のサイズを正確に決めます。イラストレーターなどのソフトを利用し、長さをpxで描いていきます。

 

htmlファイルの冒頭部分を作る

長さが決まれば、早速htmlファイルを書いていきます。適当なテキストエディターを用います。私はCoda2というソフトを使います。他にはDreamWeaverなどが有名です。余談は置いておいて、まずはじめに、冒頭に決まり文句を書いていきます。

 

 

6行目はcssリセットと呼ばれるものです。これはブラウザ ごとの独自のスタイルを解除し、どのブラウザで読み込まれても表示のされ方が変わらないようにするためのものだそうです。7行目で今回使用するcssファイル名を指定します。

ヘッダーを作る

それでは一番上の黒い帯から作っていきます。
<divに名前をheaderとつけて、cssファイルで色と高さを指定します。後でロゴとメニューの要素を中に入れるので、おまじない[overflow: hidden;]を付け加えます。理由はわかりませんが、これがないと、cssが中の要素に効かなくなる事があるそうです。また、後から他の人が見て分かり易いように、始まり：<!–ここからheader–>と終わり : <!–ここまでheader–>を書いておきます。さらに、どの閉じタグか見分けられるように</div>のあとに<!–要素の名前–>と書きます。はじめのうちは混乱してしまうことが多いので、面倒ですが書く癖をつけます！
＜＜htmlファイル＞＞

 

 

＜＜cssファイル＞＞

 

そして、次にサイト全体の横幅を980pxにするために、headerの中に新しく<div>をcontinerと名前をつけて入れます。これが中央に来るように、おまじない[margin: 0 auto;]を付け加えておきます。
＜＜htmlファイル＞＞

 

＜＜cssファイル＞＞

 

さて、この中にロゴとメニューの要素を追加していきます。それぞれ<div class=”headerLogo”>,<div class=”headerMenu”>を作り、幅を980pxの半分の490pxにし、floatで左と右に寄せてやります。headerMenuの中にリストを作成し、長さ[width:33%;]で三等分、[float:left;]で横に並べます。[text-align: center;]でリスト中の文字を左右中央に移動させ、[padding:15px 0 15px 0 ;]で文字を中央に配置します。さらに[boeder-right:]で右側に白い境界線を引き、4行目でリストの最後の要素だけ境界線表示をキャンセルしています。
＜＜htmlファイル＞＞

 

＜＜cssファイル＞＞

 

これが完成画像です。

 

ここで、注意点があります。3行目でpaddingの代わりにmarginを使用すると、境界の幅が変わってしまいます。

 

これでリンクを貼れば、ヘッダーは完了です。あとはこの下にトップ画像を配置して、本文を書いていきます。（※ここで紹介した方法は一例です。ご注意ください。）

長くなりましたので続きは
未経験からのシステム開発職〜１週目その２〜
をご覧ください！