width・heightの設定を確認

svgのある画面でVue.jsにてv-bindで要素の表示・非表示を切り替えていたところ、
svgの中身がピクピクと小さくなったり大きくなったりする（ちらつく）場面に遭遇。
height・widthの片方を指定するとサイズが定まらず事象が起こる模様。

簡単な対処法にも関わらず手間取ったためメモします。

  // svgをwrapした要素
  #svg_img {
    width: 100px;
    height: 20px; // heightの指定が抜けていた
  }

この記事について

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）

はじめに

Button をオーバーライドして

shadow = 'none'

にしておけば、オフにできるかなと思ったけど
押下した時に現れる影は消せていないことが判明したので、ちょこっと付け加えることにした

押下前

押下時

解決

これだけ
none の付け方に注目

import {createMuiTheme, makeStyles} from '@material-ui/core/styles';
import {MuiThemeProvider} from "@material-ui/core";

const theme = createMuiTheme({
  shadows: ["none"]
});

const Index = () => {
  return(
    <MuiThemeProvider theme={theme}>
      <Button variant={valiant} className={classes.button}>
        ボタンだよん    
      </Button>
    </MuiThemeProvider>
  )
}

最後に

「この画面では、俺はリプルエフェクトだけが欲しいんだ！！！影はいらん！！」
という方は試してみてくださいな

はじめに

未来電子テクノロジーでインターンをしている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;
}