新しいを創造する知恵2015.03.05未経験からのシステム開発職〜1週目その1〜はじめまして、創新ラボ新入社員の横枕です。未経験からのシステム開発職への転職ということで、IT業界へ就職を考えている方々へ向けて、これから定期的に奮闘の軌跡を発信していきます。(※ここで紹介する方法は一例です。ヘッダーを作るTweetはじめの課題はwebページ作成はじめの課題はwebページ作成です。こちらが完成予想図です。見よう見まねで作っていきます!だめだめです。その後、社長に一から基本を叩き込まれます。社長の教えを元に、気合を入れて一から作り直していきます!サイズを決めるまずはじめに、各要素のサイズを正確に決めます。イラストレーターなどのソフトを利用し、長さをpxで描いていきます。htmlファイルの冒頭部分を作る長さが決まれば、早速htmlファイルを書いていきます。適当なテキストエディターを用います。私はCoda2というソフトを使います。他にはDreamWeaverなどが有名です。余談は置いておいて、まずはじめに、冒頭に決まり文句を書いていきます。href="style.css"></head><body></body></html>6行目はcssリセットと呼ばれるものです。ごとの独自のスタイルを解除し、どのブラウザで読み込まれても表示のされ方が変わらないようにするためのものだそうです。7行目で今回使用するcssファイル名を指定します。ヘッダーを作るそれでは一番上の黒い帯から作っていきます。<divに名前をheaderとつけて、cssファイルで色と高さを指定します。hidden;]を付け加えます。理由はわかりませんが、これがないと、cssが中の要素に効かなくなる事があるそうです。<!–ここまでheader–>を書いておきます。どの閉じタグか見分けられるように</div>のあとに<!–要素の名前–>と書きます。hidden;}そして、次にサイト全体の横幅を980pxにするために、headerの中に新しく<div>をcontinerと名前をつけて入れます。auto;]を付け加えておきます。hidden;}さて、この中にロゴとメニューの要素を追加していきます。class=”headerMenu”>を作り、幅を980pxの半分の490pxにし、floatで左と右に寄せてやります。headerMenuの中にリストを作成し、長さ[width:33%;]で三等分、[float:left;]で横に並べます。;]で文字を中央に配置します。[boeder-right:]で右側に白い境界線を引き、4行目でリストの最後の要素だけ境界線表示をキャンセルしています。none;}これが完成画像です。ここで、注意点があります。3行目でpaddingの代わりにmarginを使用すると、境界の幅が変わってしまいます。これでリンクを貼れば、ヘッダーは完了です。あとはこの下にトップ画像を配置して、本文を書いていきます。(※ここで紹介した方法は一例です。2016.01.18母親のケータイをiPhoneに変えて気づいたこと。