IT全般の知識が乏しいです。少しずつ身に着けていきたいです。
ネット上に様々な知識が無料で公開されているので、極論それをすべて吸収して実務で発揮できればよいのですが、超天才でないかぎりなかなか難しいのではないかと思います。(私には無理)
すぐになまけてしまう性格なので、プロが教えてくれるスクール等に通って、メンターに管理してほしいのですが(勉強のプロセスが確立されているし)
社会人のため時間が取りづらいことと、お金も今はない為、無料のプログラミングが学べるProgateをちょこちょこ進めていこうと思います。
いくつかコースがあるようなのですが、左上から順にこなしていきたいと思います。
レッスン内のすべてを載せるのではなく、各章の演習等をちょろちょろっと載せていこうかと
【HTML & CSS 初級編】
HTMLに触れてみよう
・Webページは「HTML」と「CSS」で作られています。
→うーん。業務でまぁまぁ触ってきたから、なんとなく知ってる。
HTMLがタグ<>と呼ばれるもので画面を構成する言語で、CSSがそのタグの見た目、色、デザインを定義する言語的な感じで使ってきた。
・演習
Hello Wordという文字をh1タグで囲う。
プレビューの「Hello Word」がでかくなった。
h1というタグは見出しの意味らしい。6段階(h1～h6)まであって、順々に小さくなるとのこと。
h1要素
見出しと段落
・h1タグの「h」はheading(見出し)の意味とのこと。
・pタグの「p」はparagraph(段落)の略とのこと。
・上記2つで文字を囲うと勝手に改行されるとのこと。
そういえばされていた
・「<!-- -->」はコメント。「<!--」と「-->」の間に文字を書くと、その文字はブラウザには表示されない。
画面には表示させたくないけど、後から自分が書いたプログラムを見たときに、その部分の説明の為につけるもの。
・演習
編集前
以下３つの文字ををh1、h2、pで囲う
編集後
pタグのところは、次の行がないから、囲わなくても一緒に見える・・・
リンク
・リンクはaタグを使用する。これは何かの略？→「Anchor」(アンカー)
・リンクの見た目は文字にしてaタグで囲って、実際に飛ばしたいURLはhref属性に記述する。
<ahref="https://prog-8.com">Progate</a>・演習
結果だけ載せますね・・・
画像
・画像はimgタグ。imageの略かな。
・テキストを囲むことがないため、終了タグのはいらないとのこと。
・src属性に画像のURLを記述する。
<imgsrc="https://prog-8.com/images/family.jpg">・演習
うーん
リスト
・箇条書きのリストが作れる。liタグ。Listの略と思う。
・さらに「ul」タグと「ol」タグがあってこれらをの下にli」タグを書くことによって先頭に「・」がついたり番号がついたりするらしい。
ulはUnordered Listの略。
olはOrdered Listの略。
こんな感じ
<!DOCTYPE html><html><body><ul><li>ゆーえる</li><li>ゆーえる</li><li>ゆーえる</li></ul><ol><li>おーえる</li><li>おーえる</li><li>おーえる</li></ol></body></html>
・インデントは見た目そろえるための隙間。タグが階層構造になっているときはインデントをつけてあげると見た目がよくなって全体が見わたしやすい。
・演習
文字の色
CSSに入ってきました。
意外とこれ長いな・・・
・HTMLだけじゃ見た目がしょぼい。CSSでかっこよく！
・CSSはHTMLとは別のファイルに記述するとのこと。
→まぁHTML上にStyleタグを使用して記載することもあるし、各タグのStyle属性に直接書くこともある。
・どこのタグの何をどうするのかを定義するとのこと。
→例： h1タグのcolor(色を) red(赤)にする
・CSS内にコメントを書くときは「/」と「/」で囲う。
・演習
文字の大きさを変える
・font-sizeを使う。ピクセル(px)を単位として使用する。
ピクセル単位って何？→https://uxmilk.jp/48376
うんなんか違うきがするけど。なんとなくわかった。
・font-familyでフォントの種類。
・演習
見本のフォントサイズがなんか変・・・
背景色を変える、高さと幅も
・background-colorプロパティ。わかりやすい名前な気がする。
・高さがheight、幅がwidth。
・演習
見本と違くね・・・
タグに名前をつける
・今までのやり方だと、h1タグならh1タグのすべてに適用されてしまう。
特定のh1タグに適用したい場合は、CSS側にドット＋名前で定義して、h1タグのclass属性にその名前を指定する。
css
.test{color:red;}html
<h1class="test">あああ<h1><h1>いいい<h1>・演習
HTMLの全体構造
・HTMLにはheadとbodyがある。いままで記述してきたのはbodyのほう。
・HTMLの一番上にDOCTYPE宣言というものをするらしい。
HTMLのバージョン宣言。おまじないとして覚えればいいらしい。
・headはWebページには表示されない。いまはまだ無視。
・演習
HTMLの全体構造(2)
・headの中では3つの要素を記述する
1. 文字コード
2. title
3. 使用するCSSの読み込み
・文字コードの指定は、このHTMLが何の文字コードが書かれているかを表す。文字コードとは文字を数値で表したもの。人間の見た目上は文字だけど、コンピュータはそれを数値で認識している。たとえば「あ」は数値〇〇というふうにそれぞれの文字に割り当てられている。utf-8は全世界の文字をカバーしている。推奨。
ネット上の説明→https://ferret-plus.com/7006
・titleはそのままタイトルになる。ブラウザの上のほうのタブに名称がでる。
・スタイルシートの読み込みはhref属性にファイルパスを記述する。絶対パスだったり相対パスだったり。演習では相対パスの模様。
→https://techacademy.jp/magazine/5801
・演習
全体のレイアウト
・レイアウトはdivタグで構成していくとのこと。
業務でも一番これを扱ってましたね・・・。
divisionの略で、要素をグループ化するために使用するとのこと。
・演習
長いので次回で・・・
説明載せながら、キャプチャ取りながらだとすごい時間かかる・・・
次回は、今回の続きの13章「ヘッダーの構造」からやります。
演習のキャプチャはいらないか・・・
Progate側でコーディングに誤りがないかチェックしてくれるから、ここに正解載せても意味ないか・・・。