【未経験】バカでもわかったHTML・CSS【超入門】

NO IMAGE

みなさん、おはばんちは。じーぺいです。

今日は!やっと!プログラミング学習を開始することができました。
基本のきの字 HTML CSSがめっっちゃわかりやすく、しかも面白く学習できました。

今日の学習の気づきです。

・「言語」というだけあって簡単なものは記述内容が推測できる。
例えば img は何となく image という単語が推測できて画像かな?と思える。だから丸暗記入らないのかも。
・=とか””とか<>とか出てくるけど、日本語でいう『てにをは』みたいなものでこれも自然と感覚的に身につきそう。
・最後に出てきた div 要素が今後詰まりそうな予感。わかりやすく、簡素にするために考えられたであろうdiv が、初心者には逆にわかりにくい皮肉。全体像が掴めればきっとわかると思って明日頑張る。

ちなみに平日は仕事があり勉強時間が取れないので朝活を始めています。
勉強開始時には必ずtwitterでつぶやいていますので、一緒に頑張ってくださる方、是非フォローをお願いします!
本ページ上部の『twitter』リンクから見ていただけると嬉しいです。

以下に自分の勉強メモを記載しておきます。

プログラミングに興味があり何を書いてあるか分からないけど興味ある方は
是非 プロゲート から学習して見てください。そして初心者仲間になりましょう。

知見があり、メモを読んでいただいた方(こんなの読む人いないか笑)は間違っているところ是非ご指摘下さい。

==============================================================================================================
HTML
WEBページに表示される文を記述するもの。
基本的に
<>  任意の文章  </>
の形式で書き進める。また<></>内に要素を指定することで特別な文字として表示ができる。
例)文字をWEBページのリンクしたい場合など

以下によく使う要素と記述例


〜以下解説〜
href=”〜” で 〜にアクセスできるようにする。
じーぺい は じーぺいという文字がリンクとして表示される。
href はhyperlink referenceの略?と覚えた。リンクをリファレンス(参照)する。

img src=で画像表示
テキストを囲まないので終了タグいらない

親要素と子要素の考え方
要素を要素で囲むことを入れ子という。

  • 要素の場合は囲む要素(親要素)によって子要素の表示され方が違う。
    入れ子の場合は見やすさのためインデント(字下げといって数字分の空白をつくる)
    Tabキーで字下げできる描き初めには必ずと入れる。最新のHTMLバージョンを使用するため必ず記述する。
    HTMLファイルはとで構成される。
    内にはWEBページの設定を記述し、WEBページには表示されない内にはほぼ3つの定型文でこうせいされるとのことで・文字化け防止のための記述・ページタイトルつけるための記述・CSSを紐づけるための記述となる。丸暗記する必要は無さそう内が表示される部分

    要素で要素をグループ化する。

    まだよくわからないが、グループ化すると編集しやすい。
    おそらく、グループ化した要素の高さや色や大きさなどまとめて変更したい場合に楽で見やすさもあり、後からの修正もしやすくなるのかなと。要するに複数項目を複数条件で一気に変更できるようにするのかな?

    HTMLファイルで記述したものをカスタマイズするものでHTMLとは別ファイルに記述して後からがっちゃんこする。
    HTMLファイルの「どこの」「何を」「どうするか」をしていく。例)見出しの色を赤くするなど

    CSSにもインデント(字下げ)をしておく
    どこの には改行 何を には: その行の終わりには; をつける必要あり

    CSSのコメントは/* */で囲う
    Color
    Font-size (文字の大きさpxで指定)
    Font-family(フォントを指定。フォント名にスペースある場合は”で囲む)
    Background-color背景色を変える
    Width 横幅変える pxで指定
    Height 高さ変える pxで指定

    同一要素のうち(複数の<li>など)特定のものだけにCSSで装飾したい場合はclass の指定をする。クラスの名前は自分が分かれば何でもよく、”で囲う必要あり

  • ジーペイ
  • CSSでクラスを指定するときは先頭に『.』をつける
    .selected{
    Color:red;
    }
    複数の要素に同じクラスをつけることも可能

    要素に何か足すときは=つけるのかな??