【1st】DAY1『Progate HTML & CSS 初級編(4章まで)』

プログラミング

デイトラ1stの一日目の課題です。

内容

今日はProgate HTML & CSS 初級編(4章まで)です。

やってみて思ったこと

所要時間は40分程度でした。デイトラを知る前に少し勉強をしていたのもあり、スムーズに終えられました。

Progateをやってみて、やっぱり使いやすいなと思いました。間違っても、どこが間違っているのか丁寧に教えてくれるので初心者にはありがたいです。

キーワード

Webページを作成するためには「HTML」と「CSS」の知識が必要になります。ほかにも「JavsScript」や「jQuery」といった言語も必要にはなりますが、デイトラ1stでは最初の2つだけで問題ありません。

タグ

いろんなタグでそれぞれのテキストに違った意味合いを持たせることができます

タグには開始タグと終了タグがあり、終了タグには/(スラッシュ)を忘れないようにしましょう

見出し

見出しには<h1>から<h6>があります
数字が大きいほど文字が小さくなります

<h1>はWebページ1ページにつき1つだけ設定するのが好ましいです

コメント

コメントはブラウザ上には表示されず、メモとして使えるので便利です

現時点では使うことはないですが、後半のほうになってきたときに自分がどのようにコーディングしていくかをメモしたり、コードを反映させたくないけど消したくないときにコメントにしたりします

リンク

リンクは<a>を使います。
使用する際の形としては、<a href=”url”>text</a>というように書きます

aタグはhrefと一緒に使われます。
hrefは「Hypertext Reference(ハイパーテキスト リファレンス)」の略です。

画像

画像を表示したい時には、<img>を使います。
使用する際の形としては、<img src=”url”> というように書きます。

注意点としては、<p>や<a>とは違って終了タグが必要ないことです。

imgタグはsrcと一緒に使われます。
srcは「Sourse(ソース)」の略です。

hrefとsrcの違いはとりあえずはタグごとで使うものが違うくらいの理解で大丈夫です

リスト

リストを作成する際には、<li>を使います
また、<li>のかたまりを<ul>や<ol>で囲みます

<ul>は「unorderedlist」のことで順序のないリストのことです。
順序がないので番号はつきませんが、リストアイテムの前に「・」がつきます

<ol>は「orderedlist」のことで順序のあるリストのことです。
順序があるので、それぞれのリストアイテムに対して番号がつきます。

番号や点はCSSを使って消すことができます。
やり方は<li>に対して、「list-style: none;」を指定します。

CSS

CSSを使えばHTMLに対して、色や場所などの指定ができます。

CSSはHTMLとは別のファイルを作成します。
ファイルの拡張子は「.css」です。

CSSをHTMLに適用させるには、HTMLファイルにCSSファイルを読み込む必要があります。
読み込み方は、<head>内に<link rel=”stylesheet” href=”CSSファイル名”>を入れるだけです。

文字の色

文字の色を指定する際には、「color」を使います。

指定する方法は何種類かあるのですが、今回は16進数のカラーコードを使用しました。
他の書き方を知りたい方はこちらをご覧ください。

書き方は「color: #0000ff;」というように書きます。
前から2文字ずつが1つのかたまりとなって、順番に赤・緑・青の割合を指定します。

色のコードは覚える必要はありません。ネットで調べればすぐにわかります。
ここのサイトはおすすめです。

文字のサイズ

文字のサイズを指定する際には、「font-size」を使います。

指定する単位は「px(ピクセル)」です。

参考にした記事です。

高さと横幅

高さを指定する際には、「height」を使います。

横幅を指定する際には、「width」を使います。

ともに「px」をつけ忘れてはいけません。

タグに名前を付ける

名前を付けるには、「class」や「id」を使います。この2つの違いは、同じ名前を何度も使えるか1度しか使えないかです。

HTMLファイルでの書き方は、「class=”名前”」、「id=”名前”」です。

また、CSSファイルでは「.名前 {セレクタ: プロパティ;}」のように書きます。

参考記事

<head>要素

<head>要素には設定に関する情報を書いていきます。
<head>要素内に書いた情報はWebページ上では表示されません。

<head>内に必ず入れないといけない3つの要素
<meta charset=”utf-8″>

文字コードを指定しています。

参考記事

<title>ページタイトル</title>

ページタイトルはページ上部のブラウザのタブに表示されます。
この記事の場合だと、以下のようになっています。

<title>【1st】DAY1『Progate HTML & CSS 初級編(4章まで)』  |  プロサイ</title>
<link rel=”stylesheet” href=”stylesheet.css”>

これは先程書いた通りです。

以上の3つはそれぞれがどんなことを表しているのかをざっくりと覚えていればOKです。

<div>要素

「div」は「division」の略で、レイアウトの構成要素です。

横並び

「floatプロパティ」を使います。
「float: left;」を指定すると要素が左から順に並んでいきます。

しかし、横並びにするときに「float」で指定することはあまりないようです。

floatを使う際の注意点

余白

余白を指定するときは「padding」や「margin」を使います。「padding」は要素の内側に余白を作ります。それに対して「margin」は要素と要素の間に余白を作ります。

参考記事

以上がDAY1でした。

コメント