サイトを運用するなら、HTML言語の習得が必要になってきますが、結論から言えばHTML言語とCSS言語は瓜二つです。
片方の言語をマスターしても、両方同時に併用して学習しないと使い所がありません。
- HTMLはサイト内の文章を書く技術
- ある程度のコードが完成されてる場所が多い
- ブログ運営をしていれば勝手に身に付く
サイト内の無料テーマには既にHTMLコードが記載されているので、知識が絶対に必要というわけではありません。デザインを触りたいのであればHTMLの基礎知識は必要ですけどね。
✅この記事でわかることとは？
- HTMLの基礎知識の学習の必要性
- コード進行のやり方や使い方
- 学習ステップの踏み方
HTMLの仕組みを理解しよう！見出しと段落の基礎知識！
- HTMLの仕組みを理解しよう！
- HTMLの応用してみよう！
- リストを作って見やすいページにする！
HTMLはホームページを作成する際に、コマンドを打ち込むエディタを利用して、その中のテキストにタグと呼ばれる印をつけます。このタグが無ければ、コードが上手く機能しません。
- コードはタグから始まって、タグで終わるのがプログラミングの基礎知識
- 開始もしくは終止の合図が無ければエラー反応を起こしてしまう
タグはある値の印なので、文章の前と後ろの<>のことを示しています。
例えば、当記事のh2タイトルを作りたければ…
<h2>HTMLの仕組みを理解しよう！見出しと段落の基礎を学習しよう！</h2>上記のような<>で印をつけていくのですが、後ろには</>をつけて「終わり」を知らせます。
<>でコードを指定する必要がなぜあるのか考えれば、様々な断りがありますが、言葉のように決まっていることなので、これを無視してコード進行をすることは出来ません。
タグってなに？どんな使い方があるの？
- タグの必要性とは？
- 見出しの作り方とは？
- 段落の作り方とは？
タグの必要性とは？
<>の始まりを「開始タグ」といい、の終わりを「終了タグ」といいます。この終了タグはスラッシュ（/）が無ければプログラムとして認識されることはありません。
例えば、<>の始まりに対して、同じ<>で終えるとします。すると、コンピューター側が終わりの指定されていないと認識するので、プログラムが動き続けるかエラーを起こすしかないと判断されます。
プログラムを起動させたいのであれば、PCに命令する合図が必要になります。その合図が、タグです。
タグの問題を解決することができれば、起動する際にエラーが出るという悩みは解消されることでしょう。
見出しの作り方とは？
h2～h6の見出しが存在しますが、実際に使うのはh2～h4までです。番号の若い順から大きい文字として読者に届けられます。タグ（<>）の中に任意の数字を入力（h2～h4）して開始タグを生成後、終止タグ()の中に同じようにh2～h4を入力します。
タグ（<>）を使ってh2の見出しを作成後に任意の文字を入力して、h2の終了タグ()で締めくくります。見出しはタグの中に2文字含めるだけなので、実際にコードを使ってみることで、多少の達成感を味わうことが出来ます。
文章を書く上で、見出しは「まとめ」のような役割を持つので、読者の目に留まるようになるよ。
見出しの使い方の問題を解決することができれば、カテゴリー分けという悩みは解消されることでしょう。
段落の作り方とは？
段落のコードは最も単純で、タグ(<>)の中にpを入れるだけです。
簡単に出来てしまうので、最初のうちは終止タグ(＜/＞)を使うことを忘れてしまい、コードが認識してくれないというエラーが多発しています。そうならないためにも注意していきたい部分になります。
読者に読みやすい文章はHTMLで構成しますが、段落は読者に読みやすい文章を届けることが出来ます。
段落の問題を解決することができれば、直帰率が高いという悩みは解消されることでしょう。
HTMLの応用してみよう！リンクと属性の基礎知識！
- HTMLの仕組みを理解しよう！
- HTMLの応用してみよう！
- リストを作って見やすいページにする！
記事を読む際に、青い文字でページを飛ぶことの出来るワードを見かけたことがあると思いますが、それがリンクと呼ばれています。
リンクというのはURLのことを示しており、<>の中にaを含めたコードのことを言います。実際にエディタを使って<>の中にa含めて、文字を入力すると完成後のページでは「リンク」の部分が青くなるのでわかりやすいです。
<a>リンク</a>リンクを使うことで、ページを分けた説明や解説ができます。サイト構築にしてもブログにしてもリンクを使わない選択肢はありません。1つのページ内で完結にまとめ上げると読者から読みづらいページになってしまいます。
読者の見やすいページを作るためにもリンク構成は必要不可欠なので、見栄えのいいサイトを作っていきましょう。
リンクを活用する方法とは？ページを指定するには？
- リンクの活用方法とは
- 属性の書き方とは
- 画像を表示方法とは
リンクの活用方法とは
- コードを入力しただけでは指定リンクを定めることが出来ません。
- コード内には「href」や「””」などの要素がある。
- href属性を使うことでページ指定することが出来る
リンクの完成形態は「<a href=”https://mafurab.com/”>まふらのトップページ</a>」となり、当サイトのリンクを指定することが出来ます。
サイト構築する上で「herf」や「””」などのコードは活用するので、リンク指定が出来れば、様々なコードが書けることでしょう。
初歩的な基礎知識になるので、慣れるまではリンク指定から学ぶと良さそうです。
- エディタを使って実際に書いてみよう。
- ページ指定をして遊んでみよう。
- ページの移るリンクを作る。
- 新しいタブで開かれるように設定。
- 真似をして段々とやってみよう。
属性の書き方とは
- <>の開始タグに記述することを属性。
- 属性を使う場合は「” “」を忘れない。
- 記述しなければエラーが起きてしまう。
属性を使うには指定することが必要なので、「” “」が無ければ属性として働きません。
コードはPCに命令を出すために必要なモノです。単純なことですが書くことを忘れたらエラーを引き起こします。
リンクを張る際には「herf」や「””」などのコードを使わなければ、うまく起動しません。
- 要素名の後ろには半角スペースが必要。
- 属性の後ろに＝(イコール)を付ける。
- 属性は””(ダブルクオート)で囲む。
- <○○の ○○は＝"○○です">
- スペースはエラーの原因にもなる。
画像を表示方法とは
- ページに表示したい画像を<>の中にimgで記述する
- 指定画像をプログラムに入れる
- 画像を表示させるのであれば img src を覚えておく
実際にプログラミングを作るとなれば「<img src=”画像のURL”>」となりますが、終了タグを使ってません。
つまり、この終了タグ(</>)は画像を表示させる上では不要です。
コードを暗記してしまうと、画像を表示させるコードの際にも終了タグを使ってしまうので注意しましょう。
- 属性を変えるだけでOK。
- 任意のページはコピペだけ。
- 終了タグは使わない。
- コードを書いて体に覚えさせる
- imgの次はスペース
リストでページを綺麗にする！訪問者の目に留まる！
- HTMLの仕組みを理解しよう！
- リンクと属性を使って基礎知識を固めよう！
- リストを作って見やすいページにする！
リストはソースコードを使って作成していきます。点と番号を使って見やすい表を読者に伝えることが出来ます。
- リストでは親要素と子要素の2構成で1つのモノをプログラムできる
- 子要素は一定のコードしか使えないです
<ul>
<li>文字を入力</li>
<li>文字を入力</li>
<li>文字を入力</li>
</ul><ol>
<li>文字を入力</li>
<li>文字を入力</li>
<li>文字を入力</li>
</ol>SEO対策になるからサイトが検索エンジンに対して有利になるという話もありますが、大幅に評価基準が変わることはなさそうです。
文章中のリストとして使うこともありです。使い方は人それぞれなので、いろいろなアレンジが必要になってくることでしょう。
リストの注意点とは？エラーが起きやすい？
- リスト作成の注意点とは
- 点のリスト作成とは
- 番号のリスト作成とは
リスト作成の注意点とは
リストを作成する際は、親要素を<>の中にul、olの使う方を記載して開始タグと終了タグを書きます。作成時に注意することはスペルミス、終了タグ()の2つです。
親要素の中に子要素であるliは「点」や「番号」のリストによって変動することはありません。
簡潔に言うと、子要素がliではなくllになってしまっていた、<>で指定をしているのに終わりのコードを忘れていたというケースです。
初心者にありがちな問題を解決することができれば、エラーを起こしてしまうという悩みは解消されることでしょう。
点のリスト作成とは
親要素は「ul」で子要素は「li」です。主に関連性の低い場合に使われることが多いので、使い勝手は番号リストの方が良いのかなと感じます。
番号であれば、数字の順序で手順の説明と解釈することが出来ます。しかし、点のリストだと目安程度にしかならないので、文章中の文字分けとして使われていることが多いです。
サイト内に少しの変化を設けたい、デザインを少し変えたいというときよく使われます。
デザインの問題を解決することができれば、つまならい文章を書いてしまうという悩みは解消されることでしょう。
番号のリスト作成とは
点のリストと異なり、親要素は「ol」で子要素は同じ単語で「li」を使っていきます。サイトにアクセスしてきた訪問者側に手順や順序を示したい時によく使われています。
「ol」と「ul」の違いだけでもサイトの見栄えは大きく変わるので、直帰率等に影響する可能性が大いにあります。
読者の促し方問題を解決することができれば、直帰率という悩みは解消されることでしょう。
【HTML/CSSの始め方】何をする？【初心者向け】手順を解説！
