「コーディングどうやってやるの？」「コーディングのやり方ってこれであってるの？」
ってコーディング初心者の方は、慣れるまでは思いますよね。
私も最初は不安でしょうがなかったです。
今もその気持ちは少しありますが、何年かサイトコーディングやってきて、納品を何回もしてきて、今はこれがいいんじゃないか、
っていう方法を紹介します。速さに優先度をおいてます。
（—ですがスキルがへぼい、しょぼい、と思った方はスルーしてください。）
最近やった、7ページの小さいサイトのベーシックなサイトのコーディングの構築
について、一からできるまでを私がどうやって制作しているのか、を書いていきます。
普段なら外注することが多いのですが、今回の案件は、
・案件が小さく予算が少なかった
・また動きもなく、割と簡単にできそうだった
ため、自分でやってみました。
どちらかと初心者向けのコーディングについてのレポートです。
前提として以下のようなサイトの機能を設定しました。
サイトの機能（クリニックサイトで基本的な機能があるもの。スライドはなし）
レスポンシブ対応
twitter、FBのウィジット表示
お知らせ（→これはWordPressで表示）
フォーム（→これはWordPressのプラグインで）
ページTOPへ
2カラム
それでは以下から手順を説明していきます。
0.サイトコーディング/ファイル準備
以下のファイルを準備しました。
- html/css/jqery
- bootstrap
- Font Awesome
- html/css/jqery
色々ありますが、私lessやscssなどはほとんど使ったことがないです。
（今度使ってみたい。。）
javascriptが今はよいみたいですが、jqueryが実装時間が速くて
javascriptよくわかってない私でも使えるのがよいです。
bootstrap
今回、bootstrapを使用しました。
今までsnowというテンプレートやFoundationなど、また何も使わなかったりしましたが、
私的にはbootstrapは楽！なのがよいと思います。
ちょっととんがってない感ありますが、楽でポップでよいと思います。
初心者は、bootstrapを使うのがおすすめです。
（というか、本質的なことをわかってなくて主張していますが、
bootstrap案件も多いし、ググったらすぐソースがでてくるし、簡単なのでやっといて損はないかと。）
bootstrapを使う、といっても全部をbootstrapでレイアウトするのでなく
- 大きなグリッドレイアウト
- ナビ
- PC/mobileの切り替え表示
- フォームのパーツ
などで使用しています。
それ以外の細かいレイアウトは普通にコーディングしたほうが速いと思います。
bootstrapの準備の仕方は以下がわかりやすいです。
Font Awesome
電話やメールのアイコンにFont Awesomeを使いました。定番ですね。
ファイルの準備ができたら、次に進みます。
1.画像準備する
前提
ページデザインは、photoshopを使っています。
モバイル（375px）とPC（1600pxのドキュメントで1200pxのグリッドレイアウトをしています）の2つのファイルを作成して
タブレットは、コーディングで調整しました。
実作業
psdから使用する画像を準備します。
画像アセット生成する
画像アセット機能はcs6から使えます。
設定：ファイル＞生成>画像アセット にチェックをつけ
使用する画像をグループ化して、グループ名に.pngをつけると
ファイル保存時に画像がフォルダで生成される便利機能です。
もうスライス使わなくてよいので、その手間が短縮されますね！
画像アセットの生成時に画像が大きくなる場合
画像が大きかったり、使用したいサイズじゃなかったりする場合は
選択ツールで希望の画像のサイズに囲ってマスクした状態でグループ化すると
希望どおりに画像生成ができます。
ファイル名（グループ名）のつけ方は、一定のルールをつけるとファイルを探すときに早くなります。
私は以下のようにルール化しています。
写真画像はimg
img(_場所)_内容.png 例 img_header_copy.png など
アイコンはicon
icon(_場所)_内容.png 例 img_header_tell.png など
タイトルはttl
ttl_機能_内容.png 例 ttl_h3_case.png など
背景はbg
bg(_場所)_内容.png 例 bg_header_keyvisual.png など
ロゴはlogo
logo(_場所)_内容.png 例 logo_footer_small.png など
また、モバイルとPCで別画像にする場合は、
PCのファイル名と同じにして、_sp として、ファイルがすぐわかるようにしておきます。
例 img_header_copy.png のmobile は img_header_copy_sp.png
細かいですが、こういったルールがないとファイル名を決めるのも探すのも、意外と時間がかかってしまうので、ここは結構大事かも、と思います。
また、整理されていないpsdから画像作成して、
イライラするときにオススメなphotoshopの拡張機能がLayers controlです。
空のレイヤーやスマートオブジェクトのラスタライズなどをボタン1回でしてくれます。
これで一度整理してから画像作成していくのもよいかと思います。
2.シャドーコーディングからマークアップ
0.1の準備をしつつ、
レイアウトをみながらシャドーコーディングを行います。
どのようにコーディングをするか、大体想定する、シャドーコーディング、をします。
今回は、
01.ヘッダー、フッターはwidth100％で横並び、モバイルで要素を減らしてバーガーナビ表示
02.ナビはwidth1200pxで横並び、モバイルでヘッダー部分に移行
03.コンテンツは、60％40％のグリッドレイアウトで、モバイルは上下表示
という部分で、bootstrapを中心にレイアウトする形にしました。
01：ヘッダーフッター
ヘッダー、フッターの横並びは、要素が細かいのでbootstrapでなくflex-boxを使いました。
flexは本当に便利！！なので、横並び要素などでよく使います。
02：ナビ
ナビの位置
ヘッダーのナビはbootstrapのコンポーネントNavbarを使いました。
モバイル時の位置の切り替えは、positon:absolute
で変更しました。
03：コンテンツ
1200pxの幅で60％40％は、bootstrapのグリッドレイアウトで以下のように設定しました。
<div class=”container”>
<div class=”row”>
<div class=”col-sm-7″>
…
</div>
<div class=”col-sm-5″>
…
</div>
</div>
</div>
bootstrapのグリッドレイアウト
Grid system
col-sm-7,col-sm-5
としているので767px以下はコンテンツが自動的に100%表示になります！便利！
マークアップ
小さい案件なので、マークアップの時からレイアウトをシャドーコーディングで想定したクラスも付けていきながらマークアップします。
bootstrapは、マークアップが終わった段階である程度のレイアウト確認ができるのでざっくり大きく外れていないかをブラウザで確認します。
3.cssでレイアウトをつくっていく
cssレイアウトで余白が一番大事だと思います。
余白で気を使っているかいないか、がでるところです。
なので、私は余白を一番最後にもっていきます。
以下、cssで調整する順番です。
1.色、フォントサイズ、line-hight
2.細かい横並びなどのレイアウト
3.jsとからむようなレイアウトパーツ差し込み
4.仕上げの余白調整
1.色、フォントサイズ、line-hight
photoshopから色やフォントサイズ、などを正確に写経します。
色などカラーピッカーなどでもってきてもよいのですが、
photoshopの場合はcssHatというプラグインが有料で4800円とか？（忘れた）でしたが
あります。これすごい便利！
コリスさんでも紹介されていました。
要素を選択するだけで、時間ロスもなくすぐにcssの記述まで表示されるツールです。
秒速で要素のコーディングができます。
ただ、スタイル効果のcssコード反映に時間がかかったりするので、
最初はこのクセに慣れる必要がありそうですが、
慣れるとcssの反映が速くなるのでおすすめです。
cssHatを使いながら
PC（1200px以上の表示）とmobile（767px以下の表示設定を375pxで確認しながら）で設定します。
2.細かい横並びなどのレイアウト
細かいレイアウトを余白は気にせずにレイアウトします。
今は大体、flexを使いました。
3.基本的なサイトにあるソースを用意する
一般的にパーツとして必要な部分を追加します。
以下のようなサイトには必ずあるものは、私はソースとしてもっているので、それをそのまま使います。
ページTOPへ
ページTOPへのボタンを押してスムーススクロールするのと、
ページ上部だとボタンがみえないようにしています。
◇js部分
$(function(){
$('[data-scroll]').on('click', function() {
var speed = 500,
$self = $(this),
$href = $self.attr('href'),
$margin = $self.attr('data-scroll') ? parseInt($self.attr('data-scroll')) : 0,
$target = $($href);
var pos = ( $target[0] && $target !== '#page_top' ) ? $target.offset().top - $margin : 0;
$('html,body').animate({scrollTop: pos}, speed, 'swing');
$self.blur();
return false;
});// end function.onClick
});// end function
(function(){/*————————————*
* ページトップボタン
*————————————*/
var pageTop = document.querySelector(‘#topagetop’);
window.addEventListener(‘scroll’, function() {
if(window.scrollY>300){
pageTop.style.display = ‘block’;
}else{
pageTop.style.display = ‘none’;
}
}, false);
})();◇htnl部分
ヘッダー部分jqueryのバージョンが大事です
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>アンカー
<a href=”#page_top” data-scroll>なにか要素</a>
（jquery古いし、functionごとに文法がそろってないし正しいか不明なのですが、問題なく動きます。）
こちらでスムーススクロールのソースをいただきました！ありがとうございます。https://qiita.com/yuking11/items/2beff13f30826ff147f0
SNSウィジット表示
公式からもってきます
iframeのソース
<iframe src=”https://www.facebook.com/plugins/page.php?href=https%3a%2f%2fwww%2efacebook%2&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId” width=”340″ height=”500″ style=”border:none;overflow:hidden” scrolling=”no” frameborder=”0″ allowTransparency=”true” allow=”encrypted-media”></iframe>https%3a%2f%2fwww%2efacebook%2部分を自身のurlにデコードしておきかえる
以下で作成してコピペする
https://publish.twitter.com/#
ナビ
ナビのパターンはいろいろもっておいて、状況に合わせて使いわけします。
以上をコード埋め込みして、パーツなどはpsdからもってきてレイアウトします。
4.仕上げの余白調整
1から3が終わったら、仕上げに余白を調整します。
コンテンツとコンテンツの間のパディングやマージンをpsdをみながら
正確に調整します。
PC（1200px以上の表示）とmobile（767px以下の表示設定を375pxで確認しながら）でpsdをみながら設定します。
実際、ブラウザでみて最後に微調整します。
なぜか1600pxで作ると若干余白とフォントサイズを小さくしないと
大きすぎる問題があるので、そこも調整します。
5.レスポンシブ対応のcssを調整する
4までの手順でPC1200pxとSP375pxのレイアウトは完了しましたが、1200px~375pxの調整が必要なので、
コンテンツごとにブラウザで確認しながら間のレイアウトを調整します。
よく調整するのは以下です。
・ヘッダーの要素が900px位で入りきらないので、コピーをなくして対応
・小コンテンツの2カラムで900px位で文章がはみ出しているので
その部分を画像などのwidthを小さくするか、シングルカラムにする。
※これが結構時間かかってしまうのですが、もうちょっと上手いやり方があったらどなたか教えていただけますか？
私のレスポンシブ対応の考え方で以下の範囲は、気を使ってレイアウトします。
・モバイルの 480px以下 375pxあたり、特に
・タブレットの767px
それ以外の766px~480px、969~768pxはレイアウトが崩れていなければOKとしています。
なので、bootstrapのブレイクポイントのあたりをレイアウトして
あとは、はみ出したり、カラム落ちしたり、文字サイズがおかしかったり
がなければOKで
これは外注さんに対しても同じようにチェックします。
今まで外注さんにお願いしてびっくりしたコーディング、ほんとにいろいろあるんですが、
・タブレットでみても1200px幅で作られていて、横スクロールすると要素が消える
・767pxでhidden,visibleの切り替えをミスったみたいで、2枚の画像がみえる
・文字サイズが極端に大きかったり、小さかったりする
・中途半端な画面解像度で文字サイズが全く指定されていなくて、デフォルトサイズになる
などがありました。
良識の範囲で、おかしいところは直すべきです。
ブラウザ・デバイス確認を怠ると上記みたいなレイアウトになるので、
時間がかかっても修正する必要はあると思います。
また、ブラウザ・デバイスの確認ですが、私は以下のように確認しています。
- Windows chrome,firefox,IE,edge(どれも最新版をチェック)
- ipd safari chrome
- iphone5s safari
- andoroid7.0 chrome
（Macもってないので、未確認です。ipadで確認します。はまったときに困るので本当はほしいけど。。）
クライアントのもっているデバイスは、最初の打ち合わせ時になんとなくやりとりのなかで確認しておくのもポイントです。
（相手が制作会社だとあんまり意味ないですが）
大手や役所関係の会社は古いブラウザやOSなので、注意が必要です。
でも、今回のようなweb案件ですと、あんまり変なレイアウト崩れも起きないですので、そこまで注力しなくてもよい部分かと思います。
6.他ページのコーディングへ
TOPができたら、他ページのコーディングに入ります。
これはTOPと同じ流れでcssは、TOPのものを流用しながら進めるのであまり時間がかからないです。
フォームはまた今度詳しく書きます！
簡単なサイトコーディングいちから完成までまとめ
以上が2018年の私の通常行っているコーディング手順です。
ちなみに、今回はまったところは、以下です。こういうのは今後はまらないように記憶しておきたいです。
facebookウィジットのレスポンシブ対応
Facebookのウィジットってレスポンシブ対応してないんですよね。。
枠の透明度設定
ナビのjsが急に動かなくなった
これはよくわからないまま、cssを前のバージョンに戻して作り直したらなおりました。
私は、こんな感じでコーディングしています。
このコーディング手順が少しでも何かお役に立てればうれしいです！