エンジニア歴1年未満でもサイト変換ができる！？その弐

前回のブログでは、題名・画像1枚・画像の説明文という3つの要素があるだけのウェブページを作りました。
今回は、メニューバーや製品の特長、料金プランなどのリアルな要素があるウェブサイトを作った話をします。

ゼロからウェブサイトを作る

ある日、先輩から以下のようなことを言われました。

新製品サイトクローンのプロモーションサイトを作ってほしい
書いてほしい内容はあるけどデザインなどは全て任せる

というわけで新製品サイトクローンのプロモーションサイトを作ることになりました。

HTML、CSSには早く慣れたいと思っていたので、絶好のチャンスでした。

ひな形から考えて中身を作っていく

しかし実際に手を付け始めると、何からすればいいのか迷いました。
そこで先輩から、まず参考にするサイトを見つけなさいとアドバイスをもらいました。

時代に合った洗練されたサイトにしてほしいという要望があったので、そのようなサイト（主に海外のサイト）をひたすら探し見ていました。
色々なサイトがある中で、動きが派手なものか、シンプルなものか、ポップなものか、色々あり選択肢は広がりましたが、まずは製品の特長が分かりやすくみえそうなサイトを参考にしました。

気に入ったサイトを見つけると、このレイアウトはどうHTMLを書いたら出来上がるのか、サイトのソースコードを見て分析しました。
この部分は<div>タグにクラスを付けて下にあるブロックと区別させているのか、などのひな形を自分がサイトを作るうえで参考にしました。

デザインというよりは、レイアウトを参考にしました。

このように既存のサイトのひな型を参考にすることによって、要素がたくさんあるサイトでもひな形の中にHTMLを当てはめればいいので頭が混乱せずに済みました。

HTMLの基本にはもう慣れていたので、ひな形の中に内容を埋めていくことにはそこまで時間はかかりませんでした。

サイトに動きを付ける

今回プロモーションサイトのなかで以下のような動きをつけようとしました。

アイコンを押したらその下に製品の特長が出てくる

海外のサイトを見ていた際に、強調したい部分が見やすいかつ、動きがあるのでサイトを見ていて飽きないと思ったので取り入れました。

しかし私はサイトに上記のような動きを付けることが初めてだったので、いざ実装しようとなるとなにからやればいいか分かりませんでした。サイトに動きを付けるということは、JavaScriptを使うのかな？と考えることができるくらいでした。

研修でJavaScriptの概念などはざっくり習いましたが、きちんと触って勉強はしていなかったので使うことに抵抗がありました。

アイコンを押したら今までなかったスペースに文字が出てくるなんて不思議で、何が起こっているのか分かりませんでした。

先輩に助けを求めると、以下のようなことを教えてもらいました。

JavaScriptには「ここをクリックしたとき」という関数がある
jQueryには要素を見せたり隠したりできる関数がある

ということはクリックしたときに、製品の特長が書かれている部分を見せたり隠したりすればいいのかと理解しました。

とりあえずJavaScriptの関数と、jQueryの関数をそれぞれ検索してみました。
そうすると使うものはonclick関数とtoggle関数というものだとすぐに出てきました。
しかしそこから自分のソースコードに当てはめて使うことが難しかったです。

サイトに載っているものをそのまま書いても、たいてい動きません。
このセレクタは自分のソースコードには存在しないから変えなければいけない、など結局コードを理解できなきゃ参考にもできないので知識不足を痛感しました。

英単語を調べるかのように、このセレクタは何の意味なのかと調べ、どこを変えたらうまく動くのか読み解いていきました。

$(".row ul").hide(); //jQueryの関数
$("img.photo1").click(function(){ //JavaScriptの関数
    $("article1").toggle(); //jQueryの関数
})
$("img.photo2").click(function(){
    $("article3").toggle();
})
$("img.photo3").click(function(){
    $("article3").toggle();
})
$(".close1").click(function(){
    $("article1").hide();
})
$(".close2").click(function(){
    $("article2").hide();
})
$(".close3").click(function(){
    $("article3").hide();
})

そして上記のように書き上げることができました。
この動きを実装するだけでも、3つほどの単語を覚えました。
よく使う基本的なものだったので、後々にも役に立ちました。

サイトをレスポンシブ化する

最後にもう一つ初めてやることがありました。
それはサイトをレスポンシブ化することです。
デバイスによって画面幅が変わることで、サイトのレイアウトを見やすく動かす必要がありました。

やり方が分からなかったので聞いてみると以下のように言われました。

社内でもほとんど使ったことがないからあまり教えられないけど、Bootstrapを使ってほしい

なのでBootstrapとはなにか、というところから自分でリファレンスを読んで勉強しました。

コンテンツが横に3つ並んでいたものが、画面幅が小さくなったら縦に3つ並ぶようにしたかったのです。

それができるやり方を探し実装しようとしました。

探してみるとHTMLにクラスを付け加えて動かすものだったので、またもや自分の場合どこに当てはめたらいいか考えるのが大変でした。

このタグにクラスをつけ足せばうまく動くかなと思ったら動かなかったり…
初めは当てずっぽうでやっていましたが、だんだん触っていくうちに、このタグにこのクラスを付けたらうまくいくと予想できるようになりました。
そして以下のようなコードを書くことができました。

<div class="container-fluid">
 <h2>...</h2>
 <div class="row"> //親要素にこのクラスをつけないとうまくいかなかった
  <div class="col-sm-4"> //このクラスで三等分している
   <div class="content">...</div>
   <ul class="article1">...</ul>
  </div>
  <div class="col-sm-4">...</div>
  <div class="col-sm-4">...</div>
 </div>
</div>  

サイトを作るうえでの基本的な知識が身についた

あとは使い勝手だったりサイトに合う画像を選んだり、製品のイメージに合ったロゴを作ったり…
細かい部分を調整していきました。

正直ここまで考えてサイトを作らなければいけないのかと痛感しました。

この最後の仕上げともいう細かい部分には、かなり時間はかかりました。
その色味には何の意味があるのか、どうしてこのロゴにしたのかと質問攻めにされました。

そうして初めてゼロからリアルな要素があるウェブサイトを作ることができました。
前回はHTMLとCSSだけでしか作れなかったのに、今回はその2つに加えJavaScriptも使うことができました。

今回ですっかりHTMLとCSSには慣れ、JavaScriptの関数やセレクタの概念なども少し分かるようになりました。

これを機にさらに手を動かして慣れたいと思い、リクルートサイトの改修なども一人でやりました。

こうなるともうジーンコードが扱えます。

次回はジーンコードを使って実際に仕事をした話をします！