この記事について

BEMを使ってコーディングしていくとき、
コンテンツ量の多いサイトになると毎回のように混乱してうわあああああああああ三(卍^o^)卍ﾄﾞｩﾙﾙﾙﾙ
ってなるので
自分の頭の中をまとめる意味で簡単なワイヤーフレームを使って解説するぞ〜〜〜！！！！！！

BEMって何？って人は先にこっちを読んでな↓
[HTML/SCSS]BEM設計を図を使って解説してみる

さて、今回は下のワイヤーフレームを見ながらBEMるぞ。
なんか全部について解説してたらはちゃめちゃな長さになってしまったので、2回にわけてお送りします。
今回はheaderとfooterをいざBEMる。

かかってこ〜〜〜〜い

想定としてはコーポレイトサイトっぽい感じ。
いくつかページが存在してて、ヘッダーとフッターは共通化してなって言われてるていでやってみるぞい。

headerってBlockつくるぞい

ヘッダーに関してはheaderっていうBlockを作っちゃえば
あとはElementしかなさそうな作りなので、そんなに悩むことなさげやね。

こんな感じ！

・・・よき？

前の記事でも言ったけど、Block内の要素は他のElementの中に入っていようがBlock内の要素に変わりないので、header__linkとかheader__right__linkとかしちゃいそうになるけど、
header__linkでOK。

で、一応HTMLとSCSSはこんな感じやね。
SCSSの中身テキトーだからまぁ&の使いかただけ見てくれ。

header.html

<header class="header">
  <div class="header__left">
    <img src="/header_logo.svg" alt="headerlogo" class="header__logo">
  </div>
  <div class="header__right">
    <a href="/corporate.html" class="header__link">corporate</a>
    <a href="/service.html" class="header__link">service</a>
    <a href="/contact.html" class="header__link">contact</a>
    <a href="/recruit.html" class="header__link">recruit</a>
  </div>
</header>

header.scss

.header{
  position:fixed;
  width:100%;
  background:#454242;
  padding:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  &__left{
    padding:5px;
  }
  &__logo{
    width:30px;
  }
  &__right{
    width:30%
  }
  &__link{
    padding:0 10px;
    color:#fff;
  }
}

footerってBlockも作るぞい

フッターはテキストとボタンだけの簡単な作りやね。
headerと同じくfooterのBlockを作ってその中にElementを置いていこうぜ。

ただ、ボタンはページ内にデザインが同じっぽいものが複数存在するよな。
共通化したいよな。めんどくさいけどやるよ！

まず、footerのボタンはページにある他のボタンと比べて明らかにでかいので、
ボタンのModifierとして扱うぞ。

つまりこうじゃ。

「footerBlockの中なのに、急にbutton--bigとかいうBlock爆誕してるじゃん・・・大丈夫？」
って思うかもしれんけど、
Blockの中に別のBlockがあるぶんには全く問題ないので大丈夫だぞ。

buttonBlock　爆誕

ページの他の基準となるボタンを探してきて、そいつのSCSSを先に書くぞい。
index.htmlの一番上のところにいるボタンが基準のボタンデザインぽいよね。

じゃあこいつのSCSSを書いてしまおう。

button.scss

%button,.button{
  display:block;
  text-align:center;
  margin: 0 auto;
  color:#fff;
  background:#454242;
  width:120px;
  padding:8px 0;
}

「ん？この%何？」って思った人いると思うけど、これはプレースホルダーセレクタって言って、
あとで使い回したい記述をまとめて@extendするための書き方やで。

「え？別にbuttonクラスもあるしそれを@extendすればよくない・・？」
って思うかもしれんけど、なんかクラス自体を@extendしてきちゃうとたまに変な風に記述を取ってきちゃうパターンがあるらしい・・・。

だから基本的には@extendする時はプレースホルダーセレクタを使ってな！

(@extendについてはこれ日本語訳して読むとわかるかも？)
Extending silent classes in Sass

button--bigBlock　爆誕

基準となるbuttonBlockができたので、
footerのでかいボタンをBlockのModifierとして作っていくぞ。

button.scss

%button,.button{
  display:block;
  text-align:center;
  margin: 0 auto;
  color:#fff;
  background:#454242;
  width:120px;
  padding:8px 0;
  //ここから新しい記述ぞ
  &--big{
    @extend %button;
    background:#fff;
    color:#454242;
    width:280px;
    padding:20px 0;
  }
}

さっき言った通り%buttonを　@extendしてきて、変更箇所だけを記述してるよ。

footerのまとめ

というわけでfooterのHTMLとSCSSはこうなるぞ。

footer.html

<footer class="footer">
  <p class="footer__text">テキストテキストテキストテキストテキスト<br>テキストテキストテキストテキスト</p>
  <a href="/contact" class="button--big">ボタン</a>
</footer>

footer.scss

.footer{
  background:#454242;
  position:absolute;
  bottom:0;
  width:100%;
  padding:20px;
  text-align:center;
  &__text{
    color:#fff;
  }
}

button.scss

%button,.button{
  display:block;
  text-align:center;
  margin: 0 auto;
  color:#fff;
  background:#454242;
  width:120px;
  padding:8px 0;
  &--big{
    @extend %button;
    background:#fff;
    color:#454242;
    width:280px;
    padding:20px 0;
  }
}

SCSSはblockごとにファイルを分ける必要があるから、
footerにはfooter.scssとbutton.scssの2つを使う必要があるぞ。

headerとfooterのまとめ

なんとなくわかったかね？？

その2はindexページのコンテンツについて見ていくぞ〜
[BEM設計]うわああああ三(卍^o^)卍ってならないBEMの書き方をワイヤーフレーム使って整理するぞ（その2）

はじめに

jsで曜日を求めたい時、getDay()を使うと下記のような整数が返ってきます。

整数	en	ja
0	Sun	日
1	Mon	月
2	Tue	火
3	Wed	水
4	The	木
5	Fri	金
6	Sat	土

いや、Sunとか日とかを取得したいんだけど…という時に使いまわしたい関数を作ってみました。

ソース

test.js

function getWeekday(date, lang) {

    var list = {
        ja: ["日", "月", "火", "水", "木", "金", "土"],
        en: ["Sun", "Mon", "Tue", "Wed", "The", "Fri", "Sat"]
    }

    //dateチェック
    if (date == undefined || date == "") {
        date = new Date().getDay();
    } else if (date.constructor.name == "Date") {
        date = date.getDay();
    } else if (!Number.isInteger(date)) {
        return "第一引数が不正です。";
    } else if (date < 0 || date > 6) {
        return "第一引数が不正です。";
    } else {
        date = Number(date);
    }

    //langチェック
    if (lang == undefined || lang == "") {
        lang = "ja";
    } else if (lang != "ja" && lang != "en") {
        return "第二引数が不正です。";
    }

    return list[lang][date];

}

使い方

第一引数(date)
Dateオブジェクト、または0～6の整数を入力します。
省略または空白にすると今の曜日を求めます。

第二引数(lang)
jaまたはenを入力します。
省略または空白にするとja形式で出力されます。

console

//今日の日本語
getWeekday()
"月"
getWeekday("","ja")
"月"

//今日の英語
getWeekday("","en")
"Mon"

//整数2に対応する日本語
getWeekday(2)
"火"
getWeekday("2")
"火"

//特定の日の日本語
getWeekday(new Date("2019-8-15"))
"木"

//エラーパターン

getWeekday("今日は何曜日？")
"第一引数が不正です。"

getWeekday(10)
"第一引数が不正です。"

getWeekday(1.1)
"第一引数が不正です。"

getWeekday("","jp")
"第二引数が不正です。"

はじめに

未来電子テクノロジーでインターンをしているMaomao Maoです。

プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。

今回は、ヘッダー・フッダーについてまとめようと思います。

ヘッダー・フッダー

まず、レイアウトはdiv要素によって構成していきます。
下記は、ヘッダーはheader、メインはmain、フッターはfooterと言うClass名を使っています。

ヘッダー
<div class="header">
</div>
メイン
<div class="main">
</div>
フッター
<div class="footer">
</div>

ヘッダー・フッダーを編集する時に役立つ

・リストのマークをなくす

li{
　list-style: none;
}

・ヘッダーの中身を横並びにする

li{
　float: left;
}

・余白を調整する
paddingを使います。

.logo1{
 padding: 20px;
}

・余白をある方向だけにする

.logo1{
 padding-top: 20px;
 padding-right: 20px;
 padding-bottom: 20px;
 padding-left: 20px;
}

・一部の文字の色を変える
spanを使います。
例えばテキストを赤にしたいという文章の中で、赤のところの色だけを変えたい時、

HTML
<h1>
テキストを<span>赤</span>にしたい
</h1>

CSS
span{
　color: red;
}

・枠線をつける
borderを使います。

.logo{
 border: 5px solid red;
}

・下線をつける

.logo{
 border-bottom: 5px solid red;
}