【初心者向け 091】html/css練習

ツールインストール

Node.js

JavaScriptのランタイムエンバイロンメントです。
JavaScriptは、基本的にWeb Browerで動作するプログラミング言語なので、JavaのようにOSに直接アクセスすることには制限があります。
しかし、WEBの利用性を高めるため、JSでも一部の機能をOSにアクセスができるようになりました。Google Meetのような画像会議で典型的な一例ですね。

NodeはJSで組んだコードでOSにアクセスできるように繋がってくれる架け橋みたいなものです。
Nodeを設置する理由はviteとscssという新しいテクノロジーを活用するために必要からです。

cmdからnode -v でバージョンをチェックし、npmというcommandが入力できるかをチッェクします。npmはnode.jsをパッケージを管理するツールです。

vite

フロントエンド開発のツールです。vue,react,JS,TS,SCSSなどフロントエンドの色々なものを活用できるDevelopment Serverであり、Serverがポートをlisteningする場合、リアルタイムでデーターを反映します。

Flex box(Container) more attribute

flex-flow: row wrap;

flex-directionとflex-wrapを設定することができます。

gap:10px

flex boxの間隔を設定するattributeです。

今まで、一番基礎になるmain axis, cross axis, justify-contents, align-itemsは勉強したことがありますが、flex-flowは初めてでした。
他にもshrink, growなども属性もありまして、grid,scssなども勉強したいと考えています。

Clone coding

まだ、基礎授業ですが、韓国のカカオトークをClone codingしています。はやくCSSをマスターし、本格的にJavaScriptとreactでWEBサイトのクォリティーを高めたいと考えます。

bottom:0を利用して、一番下にcomponentsを下ろすことやbottom,topは
default position(static)からは適応されないこと、absolute, relativeなどスクールでは学んだことないposition,BEM(cssのためのtag　表記方法）についてしっかり経験ができた良かったです。