今日の学習時間

1.5h(トータル5.0h)

今日の学習内容

デイトラ初級編DAY7 ゼロからサイトを作ってみよう③

画像の上に文字を載せよう！とのことだったので、まずはレッスン動画を見ずに自力でコーディングし、その後動画を見て答え合わせをしました。
結果、見た目はほぼ同じようにコーディングすることができました！

お手本との相違
* topセクションをdiv.containerで囲んでいなかった
* top-titleにpadding-top、top-subtitleにpadding-bottomをつけていたが、topそのものに上下のpaddingを入れればOKだった

レスポンシブ対応
768pxタブレットのmaxサイズなのでmax-width:767pxがスマホ版となる

float:noneでfloat解除

PC版と、レスポンシブ対応したスマホ版サイトが完成！
明日からは復習としてゼロから自力でコーディングしていきます。

どうも、7noteです。IE好きの方はみないでください。

（この記事は、IEの影響で安易に使えないCSS3選の記事です。）

ちょうど本日、
「Microsoft 365サービスが「IE 11」サポートを2021年8月終了--旧「Edge」予定も明らかに」
というニュース記事が上がっており、一瞬

---

「えっ、ついにIE終了か？！」

---

と思いましたが違いました、残念。

Microsoft 365サービスにおけるIE11のサポートを終了するだけなので、まだまだIEは続くようですね。

はぁ。。。

IEさえいなければ、こんなに使えるCSSがたくさんあるのに。

filter:～～;（画像の色変えれるのに・・・）

画像にぼかしや色変化などのグラフィック効果が可能になる。

filter: blur(5px);      /* ぼかし */
filter: contrast(200%); /* コントラストを強く */
filter: grayscale(80%); /* グレースケールに変更 */
filter: hue-rotate(90deg); /*色相を変更(回転)*/
filter: drop-shadow(16px 16px 20px red) invert(75%); /*影*/

これがあれば、１種類の画像で複数色に対応できたり、
コントラストを調整させたりが可能になるのに・・・

positon: sticky;（スクロール固定できるのに・・・）

スクロールの途中からついてくる要素を作れる

position: sticky;

引用：https://developer.mozilla.org/ja/docs/Web/CSS/position

あと、stickyはSafariだと、display: inline;かdisplay: inline-block;だと効かないとか。
display: block;かdisplay: flex;を指定している要素にstickyを当てるようにしましょう。

（※PolyfillがあればIEでも可能）

object-fit:～～;（画像のトリミング変えれるのに・・・）

object-fit: cover;を使うと、img要素でもbackground-size: cover;のような自動トリミングを使うことができます。

object-fit: cover;

wordpressとかで呼び出した画像のトリミングなどをcssで一発解決できたら楽ちんなのに。。。

（※PolyfillがあればIEでも可能）

まとめ

まだまだフロントエンジニアによるIEとの戦いは続きますが、めげずに技術や情報を駆使していいサイト作りを続けていきましょう！
他にもIEの影響で使えないCSSなどがあれば共有ください！記事に追加させてもらいます！

おそまつ！

（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）

はじめに

自分が勉強した内容のまとめなので、正確性は保証しません。

こちらのサイトにcodesandboxを埋め込んでいます。

実際の振る舞いを見ながらコードの確認ができるので非常に便利です。

https://moneyhack.tech/Nuxt.js/04-Nuxt/

シンプルにcodesandboxめちゃくちゃおすすめなので、気になる方使ってみてください。

宣言したデータを画面上に描画する

次のコードが最もシンプルなデータ宣言です。

<template>
  <div id="app">{{ message }}</div>
</template>

<script>
export default {
  data: function() {
    return {
      message: "メッセージ"
    };
  }
};
</script>

{{ message }} と記載されている箇所が、宣言したデータを表示しています。

{{ ここはデータ名と一致させる必要があります }}

データを宣言しているのは data: function()の部分です。

message に"メッセージ"を定義しています。

これがデータ描画の基本的な手法です。ここから実際に使われる様々な手法を紹介します。

宣言したデータを属性に反映させる(v-bind)

文字列の展開に加え、要素の属性を束縛（バインディング）することもできます。

class や id の属性を束縛し、動的に色を変更したりすることも可能となります。

<template>
  <div id="app">
    <div v-bind:class="color">文字色が変化するコード</div>
    <button @click="colorChange">変更</button>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      color: "black"
    };
  },
  methods: {
    colorChange: function() {
      this.color = "red";
    }
  }
};
</script>

<style>
.black {
  color: black;
}
.red {
  color: red;
}
</style>

見慣れない記述も増えていますが、今回注目していただきたいのは次のコードです。

<div v-bind:class="color">文字色が変化するコード</div>

v-bind:class によって属性を束縛していることがわかると思います。

今回のコードではボタン操作イベントによって切り替えを行いましたが、

属性の切り替え方法は無限に存在するので、上手に属性の束縛を使っていきましょう。

要素の有無をデータで切り替える(v-if)

要素の条件分岐を使い、要素の有無を切り替えることもできます。

<template>
  <div id="app">
    <span v-if="seen">Now you see me</span>
    <button @click="seenChange">消去</button>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      seen: true
    };
  },
  methods: {
    seenChange: function() {
      this.seen = false;
    }
  }
};
</script>

今回注目していただきたいのは、次のコードです。

<span v-if="seen">Now you see me</span>

v-if によって、要素に条件を追加しています。

seen が true であれば要素を表示し、false であれば非表示としています。

今回はボタン操作により、表示から非表示への切り替えを行っています。

ループ描画をデータで実現する(v-for)

配列データを使い、ループ処理によって描画を行うこともできます。

<template>
  <div id="app">
    <li v-for="todo in todos">{{ todo.text }}</li>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      todos: [
        { text: "Learn JavaScript" },
        { text: "Learn Vue" },
        { text: "Build something awesome" }
      ]
    };
  }
};
</script>

今回注目していただきたいのは次のコードです。

<li v-for="todo in todos">{{ todo.text }}</li>

描画方法は最初に紹介した{{}}で囲う方法ですが、

todos の配列を呼び出し、ループ処理による描画を行っています。

ユーザー入力を反映する(v-model)

ユーザーの入力をリアルタイムに反映させることもできます。

次の sandbox で入力を弄ってみてください。

表示される文字が入力と同時に変化することがわかります。

<template>
  <div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      message: "Hello Nuxt.js!!"
    };
  }
};
</script>

今回注目していただきたいのは次のコードです。

<input v-model="message">

通常の input タグに v-model が記載されています。

この v-model がユーザーの入力とアプリケーションの状態の双方向バインディングを提供しています。

ユーザー入力によるメソッドの呼び出し

ユーザー操作によりメソッドを呼び出すこともできます。

v-on:click で呼び出すこともできますし、@click でも呼び出すことができます。

<template>
  <div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">Reverse Message</button>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      message: "Hello Nuxt.js!!"
    };
  },
  methods: {
    reverseMessage: function() {
      this.message = this.message
        .split("")
        .reverse()
        .join("");
    }
  }
};
</script>

今回注目していただきたいのは次のコードです。

<button v-on:click="reverseMessage">Reverse Message</button>

button タグに v-on:click が追加されています。

v-on:click 以降には呼び出したい script のメソッド名を記載しています。

おわり

データ描画、v-bind、v-if、v-for、v-model、v-on:click と表現方法を学びました。

いまいち消化しきれていない方は、実際に手を動かして動作を確認することをおすすめします。

そこまで難しくない表現方法のため、

全て習得してしまい、自身のやりたいことに合わせて使い分けていきましょう。

HTML

<!-- サンプル -->

CSS

/* サンプル */

JavaScript

（１行の場合）　// サンプル
（複数行の場合） /* サンプル */

著作権フリー系

・Pixabay(ピクサベイ)
著作権フリー画像集

イケてるサイト系

・muuuuu.org
クオリティが高い縦に長いサイト集

タッチタイピング練習サイト系

・ひよこタイピング

・コードドリル　文字列一覧

コードチェック系

・HTML 5 Outliner

・The W3C Markup Validation Service
文法チェック

今のPJにBacklogがないので備忘録

問題

・webサイトの縦に長いページだと縦スクバーが2本出てくる
・参考サイトで出てきた以下記述を消すと、横スクが出てくる＆縦スクがbodyの内側に出てきちゃう

css

html, body {
width: 100%;
overflow-x: hidden;　←消す
}

https://kotori-blog.com/css/scroll-y/

解決方法

css

html, header {
width: 100%;
overflow-x: hidden;
}

bodyをheaderにするだけでした。
これに1時間近くかけてたの工数泥棒としか言えず…。

開発でよく使用する便利技をここに残しておきます。
これいいなと思ったものはここに残すつもりなので都度更新するかもしれません。

---

要素の上下中央寄せ

---

要素の上下中央寄せの方法はいくつかあります。
その中でも、自分が開発を行う上でよく使うのをいくつか紹介させて頂きます。

---

完成例

---

---

html

---

<div class="c-box">
  <div class="c-box__inner"></div>
</div>

---

flex

---

まずはflexを使った上下中央寄せをご紹介します。

---

.c-box {
  display: flex;
  align-items: center;
  width: 200px;
  height: 200px;
  border: 1px solid #333;
}
.c-box__inner {
  width: 30px;
  height: 30px;
  background: #333;
}

---

display: flex;はcssのレイアウト技法の一つです。
align-itemsは垂直方向の揃え方を指定します。(display: flex;を指定しないと使用できません。)
centerプロパティで垂直方向の中央に配置しています。

---

position + transform

---

次はpositionとtransformを使ってやってみます。

---

.c-box {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #333;
}
.c-box__inner {
  position: absolute;
  top: 50%;
  width: 30px;
  height: 30px;
  background: #333;
  transform: translateY(-50%);
}

---

こっちのやり方では親のc-boxにposition: relativeを設定。
子のc-box__innerにposition: absolute;とtop: 50%;で上下中央に配置していますが
これだけだと子の要素の高さ(30px)分、下に行ってしまうのでtransform: translateY(-50%);で要素の半分(50%)を上にずらしています。
translateYはY軸の位置を決めます。

---

calc

---

次はwidthなどで最近見かけるようになってcalcを使ったやり方を紹介します。

---

.c-box {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #333;
}
.c-box__inner {
  position: absolute;
  top: calc(50% - 15px);
  width: 30px;
  height: 30px;
  background: #333;
}

---

こちらも上の例とほぼほぼ同じですが、違う点はtransformを使用していないのと
topプロパティにcalcを使っています。
calcはcssの値の計算に使える関数です。
top: calc(50% - 15px);でtop: 50%から子要素の高さの半分の15pxを引いているので中央に来るようになっています。
calcはwidthなどでも多く使える場面があるので覚えておくといいかもしれません。

---

要素の左右中央寄せ

---

次は左右中央寄せの仕方を何パターンかご紹介します。

---

text-align

---

これは紹介不要だと思いますが、一応紹介しておきます。

---

<p>ダミーテキストです。</p>

p {
  text-align: center;
}

---

これだけです。
主にテキストの位置関係で使用します。
テキストを中央に寄せたい場合、左に寄せたい場合、右に寄せたい場合も使用できますので知らない方は是非調べてみてください。

---

---

margin

---

これもよく使うので紹介するほどでもないですが

---

<div class="c-box">
  <div class="c-box__inner"></div>
</div>

.c-box {
  width: 200px;
  height: 200px;
  border: 1px solid #333;
}
.c-box__inner {
  width: 30px;
  height: 30px;
  background: #333;
  margin: 0 auto;
}

---

こんな感じでmargin: 0 auto;を使えば左右中央寄せができます。
また、margin: 0 0 0 auto;などとすると右寄せにもできます。

---

flex

---

またflexですが、縦ができるのであればもちろん横もできます。

---

<div class="c-box">
  <div class="c-box__inner"></div>
</div>

.c-box {
  display: flex;
  justify-content: center;
  width: 200px;
  height: 200px;
  border: 1px solid #333;
}
.c-box__inner {
  width: 30px;
  height: 30px;
  background: #333;
}

---

このようにコードは上でやった上下中央寄せと同じコードですが一箇所だけ違います。
align-itemsは垂直方向の位置指定でしたが、
justify-contentプロパティを今回は入れています。
justify-contentプロパティは水平方向の位置指定ができるのでcenterの値を入れると左右中央に配置できます。

---

position + transform

---

次はpositionとtransformでやってみますが、こちらも上で紹介したこととほぼほぼ同じことをします。

---

.c-box {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #333;
}
.c-box__inner {
  position: absolute;
  left: 50%;
  width: 30px;
  height: 30px;
  background: #333;
  transform: translateX(-50%);
}

---

このように変わった部分は子要素のtransform: translateX(-50%);の部分だけです。
(左右中央寄せなのでtop→leftに変わってます。)

---

flex系

---

flex

---

flexは上でも紹介していますが、中でもよく使うものをご紹介します。

---

justify-content

---

2つ以上の要素を左右の端に置いたり、均等に並べたい場合によく使用するのが
justify-contentプロパティです。
その他にも要素の横位置の調整だったりでも多く使用します。

---

<div class="c-box">
  <div class="c-box__inner"></div>
  <div class="c-box__inner c-box__inner--red"></div>
</div>

.c-box {
  display: flex;
  justify-content: space-between;
  width: 200px;
  height: 200px;
  border: 1px solid #333;
}
.c-box__inner {
  width: 30px;
  height: 30px;
  background: #333;
}
.c-box__inner--red {
  background: #ff0000;
}

---

---

このように2つの要素を両端に置くことができました。
使う場面は多くあるのですが、短かなところで言うとサイトのheaderなどで左にロゴがあって、右にメニューがあるようなものとかだとイメージしやすいかと思います。

---

まとめ

---

こんな感じで自分がよく使うcssを紹介しましたが、皆さんはどうでしょうか？
こんなの便利だよとかあれば是非ご紹介してください。