美容室No.11様webサイト制作 〜第4回コーディング編〜

こんにちは!クリスマスが近づいています^^

クリスマスの思い出というと、幼少期我が家では、中くらいのクリスマスツリーに欲しいもの・願いごとを書いた紙を吊るす、という何か別のイベントのようなことが恒例となっていました。

先日個人で制作をさせていただいておりました、埼玉県川越の美容室「No.11 (ナンバージュウイチ)」様のwebサイトをリリースいたしました!

こちらのサイトの制作の記録を簡単にでも残しておきたいなと思い、5回にわたって制作ブログを書いております^^

今回は「第4回 コーディング編」です!

目次

タスクランナー Gulp

今回は初めて自分で「Gulp」を導入してみました!

Gulpのインストール

nomal様に手ほどきをいただき、Gulpの導入方法など参考サイトを教えていただきました!nomal様に大感謝です!!

以下参考にさせていただいたサイト様です!

導入にあたり、ハマった点が一点^^;

をしようとすると、エラーが出てしまっていました。。

どうやら以下が原因だったようです。

でプロジェクトフォルダを作成するという手順があるのですが、その際にGulpプロジェクトの諸々の設定をします。

基本表示されるものそのままでOKなのですが、「”name”:」というプロジェクト内でのgulpディレクトリ名を設定する項目があるのですが、ここを「gulp」にしているとエラーになってしまうようです。

nameを固有のものに変更し、もう一度$ npm install gulp –save-devをしたところ、無事インストールすることができました^^

「とにかくアウトプットするブログ」様の以下の記事を参考にさせていただきました!

これで無事Gulpのインストールが完了!晴れてタスクランナーが使えるようになりました^^

Gulpを書いてみる

今回Gulpで行ったのは「sassコンパイル」と「画像圧縮」。そしてこれらをwatchで監視・自動処理してもらうようにすることです。

gulpファイルは以下のようになりました!

4〜9行目が「画像圧縮」用の処理です。
「resources/images_origin/」ディレクト内の、png、jpg、gifファイルの画像容量を圧縮して、
圧縮されたものを「resources/images/」内に保存せよ、という記述になります。

12〜17行目が「sassコンパイル」用の処理です。
こちらも見たままですが、「resources/stylesheet」ディレクトリ内の.sassファイルをcssにコンパイルして、
「resources/stylesheet/」以下に.cssとして保存せよ、という記述。

各コードの細かい説明は、先程の参考サイト様をご参考ください!とてもわかりやすくまとめてくださっています^^

最後の19〜23行目は、wathcの設定です。
通常gulpのタスクを走らせるためには都度コマンドを叩かないといけません。
(例えば$gulp と叩くと、defaultと指定してあるタスクが実行されます)

しかしタスク実行のために都度コマンドを叩くのは面倒…
というのを解消してくれるのがこのwacth機能です^^

watchを起動しておくと、常にgulpの処理を監視していてくれるようになり、何か処理が起こったときは(例えばsassファイルを保存したとき など)
コマンドを叩かずとも、コンパイル処理を自動で実行してくれるようになります!

19〜23行目のように、watchの中に、監視しておきたいタスクを記載して、
あとはコマンドラインで $gulp watch を叩けばwatchが起動状態になってくれます。

これでsassを利用できるコーディング環境が用意できました!

cssコーディング

sassを使用して、BEM✕SMACSSのような形でコーディングをしています。

変数設定

シンプルです^^

mixin

mixin、もっとうまく使っていけばよかったな〜とという反省。。

時間を見つけてメンテナンスしていこうと思います…!

module化

ボタン、タイトル、メインビジュアル周りは主にmodule化を試みた箇所になります。

  • 正方形リンク アニメーション
  • メインビジュアルエリアのサイズ展開
  • ブログ詳細ページ メインビジュアル背景画像展開

■正方形リンクアニメーション

 

全部を記載すると長くなってしまうので、一部だけ…

hover時に表示される水色の枠線をbefore,afterの擬似クラスで作り、hover時にそれぞれの高さ、横幅がボタンの大きさに対してアニメーション(transitionで指定)をしながら100%の長さになるようになっています。

■メインビジュアルエリアのサイズ展開

初めにメインビジュアル共通の要素を設定(白い二重線のデザイン、固定表示…など)をし、
次にS、M、Lサイズの縦幅+デザインの違いの設定をBEMの「Modifier(–)」の形式で記述するようにしました^^

■ブログ詳細ページ メインビジュアル背景画像展開

ブログには日常、技術・道具、お客さまとの写真、お知らせ、の4つのカテゴリを用意しています。
ブログ各記事ページでは、各記事のカテゴリごとに表示されるメインビジュアルの写真を変えたかったので、
sassの「each」を用いて、各記事詳細ページのclass名ごとに表示される背景画像を変更するようにしました!

主に使ったのはこのあたりです!

その他にheader、footer、グロナビあたりはlayoutでまとめるなどしています^^

その他ポイント

 

サイトは前ページレスポンシブデザインになっています!

Google Mapのカスタマイズ(色・アイコン)なんかもやってみています^^

■利用したサービス

■使い方参考サイト様

こういった流れで12ページ分のレスポンシブページをまずは静的にコーディングをしました!

以上!

静的コーディングで期間的には1.5週間くらい。実際の時間は計算していませんが、まぁまぁなペース?

あっそうだ、エディタはsublimetextを使用しています!軽くてとてもよい。

いよいよWordPressを組み込んでいきます…!!

次回は最後の第5回目「WordPress編」です!

制作ブログ目次

Recommended

Tags

contact

お仕事、お見積のご依頼、その他ご相談は下記フォームからお気軽にお問い合わせ下さい。

お名前
メールアドレス
お問い合わせ内容
top