HTML/CSSのド基礎を勉強。リンクや用語のメモ 2020/4/9
👆noteヘッダーはillustratorで、イチから30分ほどで作ってみました。
4/9に、webデザインの職業訓練のための予習をProgateで行ったので勉強した内容をまとめました。
ProgateのHTML/CSS初級編を復習した
↓言わずと知れたProgate
半年前くらいにやって放置していたので、最初から復習し直した。
結構忘れているね。
ゲーム感覚でサクサク進められるので、全くHTML/CSSの知識が無い私でも、楽しく勉強できます。
そもそもタグや用語の読み方が分からないので調べました😃
HTML/CSSやっていくと、英語っぽいのがいっぱいでてくるので、とっつきにくい。
でも、意味を一個一個理解すると、文章みたいに理解できるのが気持ちいい。
読み方：ドックタイプ
Document Type Definitionの略。
文章の先頭に記載する宣言文。
charset
キャラセット or チャーセット
【li 】 「リスト」と読みます。 リストの項目を記述するタグ。
エイチレフ・エッチレフ・英語の略だと、「Hypertext Reference ※ハイパーテキスト リファレンス」となります。 元々「href」は「aタグ」とセットになるので、「a href」になります。 「a href」の読み方は「アンカーエイチレフ」と読みます。
なんとなくで読んでると、一生調べなさそうなので、最初は時間かかるけど調べつつ進めました🐢
CSSを読み込むためのlinkタグがよく分からない😂
<link rel="stylesheet" href="stylesheet.css">
ぼんやりとしか覚えていなくて、linkの意味やrelの意味で引っ掛かる。
調べてみると、relはファイルとの関係性、hrefはファイルの場所（URL）を示す。
え？なんか、スッと入って来なくて、ムズくないですか？
↓サルワカさんの説明が、図もあり、分かりやすかったです。
relでファイルとの関係性を、hrefでそのファイルがある場所（URL）を指定します。
relは「relation（関係）」の略です。つまり「linkタグが書かれているページとhrefで指定しているページとの間で、どのような関係があるのか」をここで示すわけですね。
https://saruwakakun.com/html-css/basic/link-rel
Atoｍのメニューバーの日本語化をする💡
基礎の基礎が少し分かってきたので、Progate上ではなく、テキストエディタでも、触れるかやってみました。
ただProgate 推奨のAtomはメニューバーも全部英語で分かりづらい。
調べてみると、[File]→[Settings]→[+Install]に進み、検索欄にJapanese-menuと入力してJapanese-menuをインストールすると、日本語にできました。
☟参考サイト
https://eng-entrance.com/atom-editor
作業時間と進捗
HTML/CSS初級編 56％
作業時間 4h18min
4/10の勉強予定
✔Progate HTML/CSSの初級編80%
✔Dreamweaverの基礎
あんまりガッチリやっても続かないのでこんな感じで。
デザインの勉強してる人、一緒に頑張りましょう🐑💖
この記事が気に入ったらサポートをしてみませんか？