DogooBaco Loading

2016.12.13

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

web

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

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

 

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

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

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

 

 

 

目次

 

 

 

タスクランナー Gulp

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

 

 

Gulpのインストール

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

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

 

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

 

$ npm install gulp --save-dev

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

 

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

npm init

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

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

 

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

 

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

 

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

 

 

Gulpを書いてみる

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

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


var gulp = require('gulp');

// 画像圧縮
var imagemin = require('gulp-imagemin');
gulp.task('imagemin', function() {
gulp.src(['resources/images_origin/*.png','resources/images_origin/*.jpg','resources/images_origin/*gif'])
.pipe(imagemin())
.pipe(gulp.dest('resources/images/'));
});

// sass コンパイル
var sass = require('gulp-sass');
gulp.task('sass', function() {
gulp.src('resources/stylesheet/**/*.sass')
.pipe(sass())
.pipe(gulp.dest('resources/stylesheet/'));
});

gulp.task('watch', function(){
gulp.watch('resources/stylesheet/**/*.sass', ['sass']),
gulp.watch(['resources/images_origin/*.png','resources/images_origin/*.jpg','resources/images_origin/*gif'], ['imagemin']);
});
gulp.task('default', ['sass', 'imagemin']);

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のような形でコーディングをしています。

 

変数設定


// color
$blueBase: #008ec3
$blueLink: #00b3f6
$grayLight1: #f8f8f8
$grayLight2: #d9d9d9
$grayDark: #adb8bc

シンプルです^^

 

 

mixin

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

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


@mixin clearfix
  &:after
    content: " "
    display: block
    clear: both

// mediaQuery
@mixin mediaSp
  @media screen and (max-width: 687px)
    @content

 

 

module化

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

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

 

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

 

 

 

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

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

.m__animateFrameWrap
  display: block
  overflow: hidden
  position: relative
  &:before,
  &:after
    background-color: $blueLink
    content: ""
    display: block
    height: 0px
    position: absolute
    transition: all ease 0.4s
    width: 5px
    z-index: 2
  &:before
    left: 0px
    top: 0px
  &:after
    right: 0px
    bottom: 0px
  img
    transform: scale(1)
    transition: all ease 0.4s

〜〜中略〜〜

  // hover処理
  &:hover
    img
      transform: scale(1.1)
    &:before,
    &:after
      height: 100%
    .m__animateFrame
      &:before,
      &:after
        width: 100%

 

 

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

 

 

 

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

.m__mvArea
  background-size: cover !important
  box-sizing: border-box
  left: 0px
  padding: 30px 30px 0px 30px
  position: fixed
  top: 0px
  width: 100%
  z-index: -1

〜〜中略〜〜

  // 大きいサイズのMV
  &--L
    text-align: center
    .inner
      display: table
      height: 450px
      +mediaSp
        height: 120px
      .pageTtl
        display: table-cell
        vertical-align: middle
        .ttlEn
          margin-bottom: 24px
          +mediaSp
            margin-bottom: 6px

  // 中サイズのMV
  &--M
    background-color: $blueBase
    text-align: center
    .inner
      display: table
      height: 240px
      +mediaSp
        height: 120px
      .pageTtl
        display: table-cell
        vertical-align: middle
        .ttlEn
          margin-bottom: 18px


  // 小サイズのMV
  &--S
    background-color: $blueBase
    .inner
      display: table
      height: 145px
      +mediaSp
        height: 100px
      .pageTtl
        display: table-cell
        padding-left: 30px
        vertical-align: middle
        +mediaSp
          padding-left: 15px
        .ttlEn
          margin-right: 10px
          vertical-align: bottom
          +mediaSp
            margin-right: 5px
        .ttlJp
          vertical-align: bottom

 

 

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

 

 

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

.m__mvArea--M
  // ブログカテゴリ別背景画像
  $blogCatNameList: usual-day, tech, with-guest, news
  @each $blogCatName in $blogCatNameList
    &.blogCat
      &_#{$blogCatName}
        background-image: url(../images/img_mv_blog_#{$blogCatName}.jpg)
        background-repeat: no-repeat

 

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

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

 

 

 

その他ポイント

 

 

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

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

 

■利用したサービス

 

■使い方参考サイト様

 

 

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

 

 

以上!

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

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

 

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

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

 

 

制作ブログ目次