HTML学習の始まり！ﾊﾟﾁﾊﾟﾁ

月城はりー

いやー、ブログ書き始めたばかりなのにその日の朝から体調不良、、、
まじか、、、
そんなついてない時でもやるべきことをやった方が気が紛れる(ง🔥Д🔥)ง
皆様も辛い時こそ気を紛らわすためにも頑張って見ましょう！！


今日は新しく目次を入れてみました！
見やすくなればいいな！

HTML/CSSとは

全くの初心者はHTML/CSSって聞くとプログラミング言語だって思うよね！
だけどこの2つはマークアップ言語って言うんだって。

プログラミング言語と言えば、Java、PHP、Pythonなどがかなり有名だったり、トレンドだったりするけど、これらは通常画面では見えないとこ(バックエンド)で動く。
一方で、HTML/CSSは画面に表示する言語だから、これらとは分けて考えられてるらしい。

ただ、プログラミングを行う上で、必ず画面に表示する機能を持たなければ一般のユーザーには利用できません。
そこで最低限のHTMLとCSSの学習をします。

HTMLの学習をする際はコードエディター(コードを書き込むアプリ)を入れないといけないみたいなので入れました。


Visual Studio Codeをダウンロード

初投稿だったかな？その時綴りが間違っていたけど、まぁ気にしないでください。

早速ダウンロードしていきます。
下のURLをから開くことが出来ます。

このアプリの良さはコードを楽にする機能があるようです。
例えば"html5"と記載すると基本骨格が形成されます。

分からないことがあれば以下の方法で試して見てください。


あと少しで、準備完了

最初の画面

開くとこんな画面が待っています。
赤い矢印の四角形のボタンを押して、

  • Japanese Language Pack for Visual Studio Code

  • HTML CSS Support

の二つをインストールして再起動しましょう！！
これで準備完了！！


HTMLを書くための前準備

.txtファイルを作製し、ファイル名をhtml 練習.htmlに変更します。
それをVisual Studio Code (VS Code)にドラッグアンドドロップして開きます。
html:5ととりあえず入力し、Enterを押します。
※”！”と入力後shift+tabもできるという話もあります。
コードは以下の通りに表示されます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

このコードは一部だけ変更する点があります。
↓デフォルト

<html lang="en">


これでは英語設定になっているため、下のように変えれば準備完了です！
↓変更後

<html lang="ja">


HTMLの基本①

HTMLにはheadタグとbodyタグがあり、headタグは裏側のシステム、bodyタグは写真や文字を画面に表示するコードを記載していきます。

普通に言ってしまいましたが、タグというのは<  >このカッコの中の最初に書いてある言葉のことを指します。
上記基本セットでは、上から
htmlタグ、headタグ、metaタグと続きます。
タグにはその中身をどのようなものを記載しているかを表現しています。

headタグ内の意味

話を戻して、headタグにはキーボードのセットを指定するコード

<meta charset="UTF-8">

やデバイスのモニターサイズに合わせてサイズを変えるコード

<meta name="viewport" content="width=device-width" />

CSSとリンクさせるためのコード

 <link rel="stylesheet" href="style.css" />

があります。
また、唯一画面で表記されるコードとして

<title>Hello, world!</title>

があります。
これはブラウザを開いた時のタブに記載されている言葉が入ります。



HTMLの基本②

bodyタグには画面に表示される写真や文字が入ると記載しましたが、ここからがHTMLの本題になります。
bodyタグは基本上に書いたものが上に来ます。
横並びにしたい時は上に記載されているものは左に、下に記載されているものは右に行くようです。(CSSで調節されます)


HTMLの基本③

ここからが特に今日困りました。
タグの種類についてです。
まずブロックレベル要素とインライン要素にタグを分類することが出来ます。
ChatGPTの力を借り、特徴をまとめました。

1. ブロックレベル要素:
• 例: <div>, <p>, <h1> ~ <h6>, <ul>, <ol>, <li>, <table>, <form> など。
• 特徴: 新しい行から始まり、水平方向に最大の幅を占めます。
2. インライン要素:
• 例: <span>, <a>, <strong>, <em>, <img>, <br>, <input> など。
• 特徴: 新しい行から始まらず、要素が占める幅はその内容に合わせられます。

ChatGPT

つまり、行への影響の有無で要素の意味や使い方が変わって来るようです。
また、上記タグは全て<  ></  >で始まりと終わりの位置を指定しています。

一覧を見たい方はこちらのサイトが分かりやすかったので載せておきます。

今日はとりあえずここまでにしておきます。
本日もお疲れ様でした。

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