Progate 勉強 備忘録
やっぱりプログラミングは覚えたいなあ。ということで、止まっていた時を戻そう。
この自粛期間、そして新部署になったので、本来の目的であったエンジニアとして独立して稼ぐ！という目標に向かっていこう。というわけでプロゲート再始動します。備忘録的にここにもまとめていくので、参考にしてみて下さい。
プロゲートはコチラからどうぞ↓
■用語集
！HTMLとは・・・Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、Webページを作るための最も基本的なマークアップ言語のひとつ。WEBページのほとんどがこの言語で書かれている。見ているサイトで右クリックで「ページソースを表示」でHTMLを見ることができる。
!cssとは・・・（Cascading Style Sheets、カスケーディング・スタイル・シート）の略で、ウェブページのスタイルを指定するための言語です。大きさ・配置を決めるもの。HTMLで構成や文章の表示場所を決め、cssで装飾するイメージです。
！マークアップ言語とは・・・文章を構造化する言語。ここがタイトルですよーとかここが本文ですよーと伝えるための言語。
！ブラウザ=browse=「閲覧する」のこと。WEBサイトを見るためのソフトの事。google chrome、Internet Explorer(IE)、safariなどのこと。
■HTML書き方 超初級編
●考え方・・・基本的には、「<●>で始まり</●>で終わり」というひと固まりだと考えやすい。
・<h></h>=heading＝見出しの略 h1が一番大きい。
・<p></p>=paragraph＝段落の略。
・<a></a>=リンクを作成する要素。アンカー。※herf属性=aタグの一種。リンク先を指定する属性のこと。
・<img>=イメージ、画像のこと。※src属性=文書内に表示する画像を指定できる。属性値にURIを指定することで、画像やスクリプト、フレーム内の文書などの場所を設定することができる。
・<!…>＝コメントのこと。ブラウザでは表示されない。ソースにメモ書きとして使う
・<ul></ul>=unordered list（順序がないリスト）のこと。・○○・○○のような箇条書き作成に使う。
・<ol></ol>=Ordered List(順序があるリスト)のこと。①○○②○○のような箇条書き作成に使う。
・<li></li>=list itemの略。箇条書きリストを作成できる。
・<○○ class>・・・要素に名前をつける 例）li class="名前” 。cssで.名前 で識別するため。
・<div></div>・・・divで囲った部分を要素としてまとめて扱うことができるようになる。
・<span>・・・一部の色を変える 変更したい要素を挟む。<span>●●</span>
・<input>・・・一行のテキストを受け取るための要素。終了タグはいらない。
・<textarea></textarea>・・・複数行のテキストを受け取るための要素。
※type属性・・・オブジェクトやスクリプトなどのMIMEタイプや、入力コントロールの種類、リストのスタイルなどを設定するための属性。例）属性付与・・・submit type属性にsubmitを加えると「送信」になる。
※value属性・・・入力コントロールの初期値やラベル、オブジェクトに与えるパラメータ、順序付きリストの項目番号を設定するための属性。
※ブロック要素・・・幅いっぱいに広がる要素。<h>や<div>など。
※インライン要素・・・改行されない要素。<span>や<a>など。
■HTMLの全体構造
・<html>の要素には<head>と<body>が必要。<head>にはページに関する情報、<body>には実際に表示したい内容を書く。ブラウザに表示されるのは<body>情報のみ。
・<head>に入れるもの・・・文字化けを防ぐために、<head>要素に<meta charset="utf-8">を入れる。これはHTML5で推奨される文字コード。定型文みたいなもん。<title>はブラウザのタグに表示される。cssのhrefで読み込むために<link rel="stylesheet">が必要。<link rel="stylesheet" href="stylesheet.css">
・Webサイトの構造はヘッダー・メイン・フッターの3要素で成り立つ。
・メイン要素の構成・・・「copy-container」、「contents」、「contact-form」の3つの要素で構成されている。
■css書き方 超基本編
・考え方・・・基本的に 始まりは: 終わりは；となる。
・セレクタ・・・cssで変更する対象のこと。
・プロパティ・・・変更する項目のこと。
・/**/・・・コメントを入れることができる。
・font-size・・・文字大きさを変える 単位はpx(ピクセル）
・font-family・・・フォントの種類を変える。フォント名にスペースがある場合は、"”で囲む。
・background-color・・・背景色を変える
・width・・・横幅を変える 単位px
・height・・・高さを変える 単位px
・padding・・・余白を作る padding :値; これで上下左右全部余白作れる。padding-top⇒上、padding-bottom⇒下、padding-left⇒左、padding-right⇒右となる。「値 スペース 値 スペース・・・」と書けば、時計回りに上下左右の余白は設定される。
・border・・・線を引く 書き方はborder:太さ 種類 色
・margin・・・外側の余白、paddingは内側の余白。
・ボックスモデル・・・基本外側余白（margin)・枠線(border)・内側余白(padding)がある。
とりあえず初級編は完了です！次は中級編にいきます！
この記事が気に入ったらサポートをしてみませんか？