初めまして
初めまして、レギュラン星人です。グリッドマン面白かったですね。
業界未経験からエンジニアになりました。今はとりあえずフロントエンドエンジニアとして頑張ってます。三か月目です。
とりあえず備忘録として基礎的なことから自分の学習したことを書いていきます。
HTML
HTMLとは
Hyper Text Markup Languageの略。
ハイパーテキスト、マークアップ言語。
要素をマークアップ<></>して文書の構造を作る言語である。not プログラミング言語。
- タグ
<></>のこと - 要素 タグで囲われた部分も含めた塊のこと。
HPを作成するなど、WWWの見た目に関わる言語ということで私は認識しています。
- WWW(ワールド・ワイド・ウェブ)
ウェブと呼んでいることが多いもの。「文書、画像、動画、音楽etc…」を公開したり、閲覧したりする仕組みのこと。WWWは無数の文書同士がハイパーリンクして結びついている。
ウェブページが閲覧できるまでの仕組み、も先輩から調べてみな？と言われたので近々記事を書きます。
HTMLを書くのにあたって使用環境
使用しているもの
- テキストエディタ
Visual Studio Code
とても使いやすい。フロントエンドエンジニアからバックエンドエンジニアまで広く使える。
公式リンク https://code.visualstudio.com
日本語化 https://qiita.com/ntkgcj/items/e77331932c7983dea830
VSCodeでHTML作成環境を整える https://qiita.com/84zume/items/476a29264fdc98d98201
お世話になった記事を添えて。
- 開発環境
XAMPP
ローカル環境を構築するのに使用。
現状ApacheとMySQLのみ使用。
公式リンク https://www.apachefriends.org/jp/index.html
最初ローカル環境を作成するのに四苦八苦したので、それも記事にする予定
勉強に使うサイト
サルワカ https://saruwakakun.com/
よく利用。初心者向けに分かりやすい。今回のHTML、CSSに関してもほとんどここを読んで理解したことを書いています。
Qiita https://qiita.com/
ここ。ものすごく強い人がものすごく使いどころのわからないプログラムを公開したりしている。
HTMLの書き方
[^1]: 本当に基礎的なことしか書いていないかと思いますので補足事項大歓迎です。
タグで中身を囲む。
< tag > element < /tag >
タグの中にタグを書くことも可能。（下画像参照）
画像の部分は宣言という。（HTML5。記述日現在最新のHTMLバージョン）
1.宣言のタグの意味
html タグで囲まれた部分はHTMLですよ、と表している。
head ウェブページの情報、設定を書く。基本的に画面に表示されない。
title ウェブページのタイトルを表す。ブラウザのタブや検索エンジンに表示されるのはこの部分。
meta charset 文字コードを指定する。日本語ならUTF-8。
ウェブページを構成する部分
2.よく使うタグ
body 必須。この中に画面に表示される部分を書く。
h1～h6 見出しタグ。１から順に大きく表示される。
参考にしたリンク https://saruwakakun.com/html-css/basic/h1-h2-h3
私は初期、見出しというより大きく表示したい文字とかデザインで使ってたがサイトの構成が崩れたので、見出しのためだけに使いましょう。
p 段落を表す。ブロック要素。パラグラフの略。
基本的には本文にはｐタグを使う。
a リンクを貼り付けする。
img 画像を貼付する。書き方が他と少し異なる。
<img src="画像のURL" alt="画像の説明" >
補足で、aタグとimgタグで画像にリンクを張ることもできる。
<a href="ここにURL">
<img src="画像のURL" alt="画像の説明">
</a>
ul ol li 箇条書きリストを作る
ul 箇条書きリストの範囲を作る
Unordered list（順不同リスト）の略
ol 番号付きの箇条書きリストを作る。
Ordered list(順序リスト)の略
li ・で表示される箇条書きリストを作る。
list item(リスト アイテム)の略
箇条書きリストについてのCSSはCSSについて記載する際に書きます。
br 改行する。
コードに慣れて書くのが上達するとpタグとCSSだけで改行しなくて済らしい。私はまだお世話になることあり
コメントアウトは<!-- コメントアウトしたい文章 -->
3.id class名
タグに名前を付けることができる。
<p class="example"> ~ </p>
<div id="aaaaa"> ~ </div>
どちらも好きな名前を付けることができる。
3.1. 英数字で名前を付けること。かなカナ漢字だと読み込まないこともあるので・・・
id HTML内の文書で一度だけ同じidを使える。
class 何回でも同じclassを使うことができる
4.divとspan
この違いを理解してないとヤバいって言われたのでこの記事作りました
div かたまりをつくる
span かたまりをつくる
div、spanどちらもその部分にデザインを指定できる。
4.1なにが違うの？
インライン要素、ブロック要素という違いをもちます。
私のまとめになりますが
div ブロック要素 width/heightで幅を指定できる タグをなんでも使える
span インライン要素 幅や高さを文字数などで決める タグは一部のものを使える(a imgなど)
下のように、divの中にspanを使うことはできてもspanの中にdivを入れることはできません。
<div>
<span>
</span>
</div>
入れられない理由としては、displayというcssタグでinline要素の中にはblock要素が入れられないというルールがあるから。
[^2]: 特に自信ないので注釈やコメントお願いします～(´;ω;｀)
divやspanはなるべく使わない方がコードが見やすくなる。多用すればいいってものじゃないのはよく覚えておきましょう（自分に対して）
CSS
カスケーディング・スタイル・シート(スタイルシート)のこと。
ウェブページのスタイルを指定するための言語。
HTMLだけでは見栄えまでは変えられないので、文字と画像だけ並んだ単純なページしか作れない。
デザインやレイアウトを決めるのにCSSを利用する。
CSSの書き方
タグを指定して、見た目を変える
画像右のように、タグに対して設定を書くのが基本。
CSSを利用して、文字の色を変えたり文字の大きさを変えたり、marginやpaddingなどの領域を設定できる。
[^3]: CSSファイルを作成して読み込む以外にもHTMLファイルにstyleタグを使用して書く、HTMLタグに書き込む方法もある。
1.外部ファイルで指定する際の書き方
先頭に@charset "UTF-8";と書く。
その下にCSSを書く。
HTMLファイルのhead内にCSSを読み込むコードを書く。
<link rel="stylesheet" href="ファイル名.css">
2.CSSの文法
セレクタ{プロパティ:値}
の順番に決まっている。プロパティと値を{}で囲み、プロパティと値を:でつなぐ。複数のプロパティを指定するときには;で区切り書く。その後、プロパティ:値 を書く。
セレクタ
デザインの適用先を書く。タグ名、class名、id名を書く。プロパティ
セレクタで指定されたものの変更するものを書く。
例として、font、margin、padding、color…値
見た目をどのように変えるのかを書く。
fontならsize、marginやpaddingならpxや%などで領域の幅、colorならredや#f00などで色の指定。
2.1.セレクタの書き方
タグで指定
そのままタグ名を書けばOK
h1 {font-size:40px; margin:40px 0; color:#000;}id名で指定
#id名で指定
#list-1 {width:63%; padding-left:1em; color: #333;}
- class名で指定
.class名で指定
.left-content {text-align:left;}
複数指定するときには、タグ、class名、id名を,で区切り並べていく。
2.2.子孫セレクタ
タグ内の、特定のタグに適用させる書き方。下の例では、mainタグ内のpタグ内のspanタグに適用される。
.main p span{color:#ff0}
cssタグについては、基本的なことだけ記述したのでタグの意味などは他のものを書こうと思う。
終わりに
入社して４か月目にして色々あってOJTが今始まりました。
先輩に課題を出してもらいつつ、HTML/CSS以外にも、ローカル環境の作り方やFTP転送の方法、gitの使い方などを教えてもらったり調べたりしながら日々勉強の毎日です。
備忘録ができる程度には書けることもできたので初投稿してみました！！まだまだ初心者ですが備忘録程度に書いていきつつ技術力を磨いていきたいと思います。