コーディング実践

「スマホ時代にふさわしい、 いまどきのWebサイトコーディング術」のセミナーは前回に引き続き、黒葛原道先生。

今回は「コーディング実習」ということで、実際にデザインデータをもとにコーディングをしました。全15回のこの講座も今回を入れてあと2回となり、目標は今週と来週を使って一つのページを仕上げること。今まで習って来たことの集大成ということで、限られた時間で受講生のみなさんはどこまで完成させられるのでしょうか。

 

まずはざっくり手順を教えていただきました。

【1】Photoshopでデザインデータを開く ・必要な画像を書き出す ・HTMLを書く

【2】 CSSを書く
【3】JSを書く

ちなみに「ボタンやテキストなど、CSSでできるところは画像を書き出さずにCSSで作成しましょう」とのアドバイスが。というのも、PC版を作るだけでなく、スマホ版にすることも考慮した際に、画像で書き出していると文字サイズなどの変換が容易ではなくなるそうです。

 

さらにコーディングのルールも提示されました。

・Bootstrapを使用すること
・BootstrapのComponentsは使わない
 ※navbar、jumbotronなどは自分で書きましょう
・JSはjQueryを使用すること

 

コーディングをする受講生は真剣そのもの。黒葛原さんも途中で、質問に答えながら、前で同じ課題を実演してくださいました。後半からは、みなさん集中集中。会場はパソコンのカチャカチャとキーボードを叩く音だけが聞こえていました。

 

さて、来週は最終回。みなさんの出来はいかに?楽しみですね。

関連記事

  1. CSSフレームワーク 「Bootstrap」を活用しよう

  2. なんだか楽しそうなHTML5・CSS3