html、css JavaScript PC・IT知識 サイト構築 プログラミング

え、まだfloat:leftで消耗してるの? - 2010年代前半から変わったHTML / Javascript トレンド

投稿日:

7年前に学習したトレンドから変わってる...!!

 

現在プログラミングスクールでプログラミングを一からやり直しています。

その中で最初の導入として HTML / CSS / Javascript を使用しているのですが、記法がちょいちょい変わっていて戸惑います。

7年前にそれらの基礎を学んだ私にとって、いくつかびっくりした点があったので、今回はその中の代表的な2つをご紹介します。

 

 

float:left なんて使わないよ?

 

ナウでヤングな若者たちは、float:leftなんて使わないみたいです。おじさん辛い。

いろんな方法があるのですが、便利だなあと思ったのは display:flex;を利用する方法。

これを、例えば

<ul class="menu">
  <li>hoge</li>
  <li>hoge</li>
  <li>hoge</li>
</ul>

みたいな文があったら、

.menu{
  display: flex;
}

と指定してあげるだけで、li要素が横並びになってしまう...!

すごすぎる。まだ慣れないけどすごすぎる。

使い方についてはこのサイトで学ぶと理解が深まります。同期が教えてくれました。

https://flexboxfroggy.com/

 

ちなみに、これと一緒によく使う設定は以下の通り。

 

  • flex-direction ... 横方向に並ばせる?縦方向に並ばせる?
    • row ... 横
    • row-reverse ... 横、逆順
    • column ... 縦
    • column-reverse ... 縦、逆順
  • justify-content ... 各コンテンツの並び方の指定
    • flex-start ... 始点寄せ
    • flex-end ... 終点寄せ
    • center ... 中央寄せ
    • space-between ...間を開けて
    • space-around ... 間を開けて(周囲にスペース)
  • align-items
    • flex-start
    • flex-end
    • center
    • baseline
    • stretch
  • align-self ... 個別に設定
  • align-content ... 複数行の指定
    • flex-start
    • flex-end
    • center
    • space-between
    • space-around
    • stretch
  • order 順番を変える
  • flex-wrap
    • nowrap ... 折り返さずに1行にまとめる
    • wrap ... 折り返す
    • wrap-reverse
  • flex-flow ... flex-direction + flex-wrap

justify-content と flex-wrap が使えればある程度作成はできるのではないかな、と。

orderとかも使ってみたいですね。

floatみたいに、どこでclearをするか、とか余計な心配をしなくていいのがいいですね!

 

var変数なんて使わないよ?

letを使いなさい

これが結構驚いたことでしたね。var使うのはもうおじいちゃんです by おじいちゃん

今時のJavaScriptはletを使いなさい、と。

ES2015 (ES6) で新基準が策定されたみたいです。

https://qiita.com/tuno-tky/items/74ca595a9232bcbcd727

では var と let の違いはなんでしょうか?

このサイトに詳しく書いてありました。

https://qiita.com/y-temp4/items/289686fbdde896d22b5e

違いはそれぞれのスコープ。

var は 関数スコープ

let は ブロックスコープです。

「は?」という感じですが、つまりこういうことです。

スコープとは、ざっくり言うとどこまでその変数が適用されるか、という範囲のことです。

先ほど申し上げた通り、varは関数全体が終わるまでがスコープです。

つまり、varで宣言した変数は{}で囲ったブロック部分の変更も保持してしまうわけです。

ブロックは結構使うんですかね?これから学習を進めていく中で理解できるかもしれません(ご存知の方、教えてください)。

 


知ってる知識でもこの有様なのですから、これからどうなってしまうのか...。不安しかないですが頑張って追いついていこうと思います。

 

 

 

 

 

「面白いじゃん」と思ったらぜひシェアをお願いします!

-html、css, JavaScript, PC・IT知識, サイト構築, プログラミング

Copyright© ちゃいら随筆 , 2019 All Rights Reserved Powered by STINGER.