見出し画像
Photo by satoshi_st

プログラミング備忘録【HTML編】

じょん

プログラミングを始める時にまず最初に覚えるのが
HTML ではないでしょうか？
今回は自分の復習も兼ねて備忘録として
HTMLの概要説明をまとめています。

なぜ始めにHTMLなのか

インターネットを使い、サイトを閲覧するときに
まず始めに目に入るのがTOPページになります。
そのTOPページの見た目を作るのが
HTMLです。＊CSSは次回まとめます。
どれだけたくさんの言語を使い、複雑な処理を行える
コードを作ったとしてもそれを見せるファイルがないと
ユーザーにサービスを提供することができません。

マイクラで言うと家の骨組みがHTML　←学習しろ∑(ﾟДﾟ)

画像1

HTMLの構造

<!DOCTYPE html>
<html>
 <head>
   <!-- 見た目に反映されない部分 -->
   <!-- サイトの情報を記載していく -->
 </head>

 <body>
   <!-- "反映される部分" -->
   <h1>トップページ</h1>
 </body>
</html>

このコードを上から順番に読んでいくと
<!DOCTYPE html>
文章がHTML文章であることを宣言する要素
この記述がないとレイアウトが崩れてしまう恐れがあります。
<html>要素
HTMLの文章の始まりと終わりを示す要素になります。
<head>要素
WEBサイトの情報を記載している要素です。
サイトに表示されることがないので
参照するファイルのリンクはこちらに記載します。
<body>要素
この中にいろいろなコードを書くことで
WEBサイトの見た目を変更していくことが可能です。
上記のコードだとこのように表示されます。

スクリーンショット 2020-04-28 9.09.48

要素の種類

上記で使用した<h1>要素以外にも
様々な要素がHTMLには用意されています。

<h1><h2><h3><h4><h5><h6>
文章の見出しを指定する要素で数字が大きいほどフォントが小さい
<p>
文章の段落を示す要素
<header>
サイトの見出しを作るときに使用する要素
メニュー部分に使用しています。
<main>
主要な内容を記載している部分に適用する要素
大雑把に言うと真ん中に表示させる部分
<footer>
サイトの下部に表示する要素
著作者に関する情報、関連文書へのリンク、著作権情報等が記載されます。
著作権情報：Copyright © 2014 〇〇 Inc. All Rights Reserved.
MDN言語使用サイトを参照しています。
詳しい情報が知りたい方は　こちら　にどうぞ

エディタの便利機能

HTMLを記載していくエディタを紹介します。
・Sublime Text・Atom・サクラエディタなど様々なエディタがありますが
僕はVS codeを使用しています。
理由は簡単で、ドットインストール の学習でもテックキャンプの学習でも
VS codeを使用しているからです。（右にならえ）
コードを書いていると右クリックしたり選択したりって言う行為が
だんだんと面倒になってきて、ショートカットを探しました。

shift+option+↓　行のコピー ※行全体を選択する必要はない
option+↓　　　  行を丸ごと移動できる ※行全体を選択する必要がない
command+D　　同一の単語を複数選択できる
command+N　　新しいファイルの作成(new)
command+S　　ファイルの保存(save)
shift+control+@　ターミナルの起動(rails学習時便利）
command+F　　単語の検索（コードが長くなったときに便利）
自分がよく使っているのはこの辺りです。
ショートカットは積極的に使って慣れる事が重要だと思います。

ここまで読んでいただきありがとうございます。

この記事が気に入ったらサポートをしてみませんか？