動機
これまで独学（テキストとweb情報ベース）でHTML/CSS/Javascriptを学習しながら、HTAを個人利用の範疇で作ってきた。 しかし、ツールとして使えはするものの、如何せんコードが煩雑だったり、ページの見栄えも一昔前のデザインにしか見えず、自分のスキルとして出すにはあまりに恥ずかしい出来栄えだ。一念発起し、有償のオンライン講座を受講することにした。
学習を進める中でポートフォリオの案が浮かべば理想。なければ今あるものをブラッシュアップ出来るスキル習得を目指す。
環境
OS/ブラウザ
Windows10/Google Chrome
使用ツール
Visual Studio Code
インストールした拡張機能は↓-
Japanese Language Pack for Visual Studio Code → 日本語化、普通に読める日本語なので有用
-
Live Sass Compiler → 講座で入れろと言われた。Sassで書いたことないから期待
-
Live Server → お馴染みのWebserver環境。少し前は存在を知らずiframeに悩まされた。
-
Prettier - Code formatter
→ これも講座で言われた。コードをいい感じに整形してくれるらしい
インライン要素とブロック要素について
インライン要素 `,,,etc…`ブロック要素
<div>,<h*>,<table>,etc…
<body>
<div>hello1-1</div>
<div>hello1-2</div>
<span>hello2-2</span>
<span>hello2-1</span>
<style>
div{
width:100px;
height: 100px;
background-color: red;
}
span{
width:100px;
height: 100px;
background-color: blue;
}
</style>
</body>
1.ブロック要素は改行される
2.インライン要素はwidthやheightなどの一部属性が効かない
displayプロパティでblock要素とinline要素を変えられるのも初めて知った。(noneとblockくらいしか使ったことなかったし、中間のinline-blockなんてのもあるのね。)
あまりこれまで意識してこなかったが、結構重要かもしれない。