がじぇっと研究室

PC操作やソフトウェアでの困ったを解決するお手伝い・お役立ち情報やおススメガジェット…さらに研究を重ねスキルアップを目指す情報共有スペースです‼

【初心者向け】HTMLとは? 簡単に説明 サイト作り ワードプレスで使えるHTMLタグを紹介!初心者でも簡単にカスタマイズできる!

f:id:zurasan:20200502181327j:plain

今回は、ブログサイトを作っていく上で避けて通れない「HTML」を初心者向けに簡単に説明したいと思います。

しかし、難しいことはありません!

せっかくブログを書いているのに、色もそっけもないのはなんだか寂しいですよね。

でも難しいことを覚えられるか心配…という方も、少し大まかに把握していただければ、すぐにご自分のブログで使えるんです!

 

 

HTMLとは?

まず「HTML」とは何か?というところから始めます。

ホームページ・WEBサイト・ブログ…名称は様々ですが、こういったものの「見た目」を作り上げているのが「HTML」になります。

ブログを書いている人なら一度は目にしたことがあるかもしれません。

半角英数字を決まった並びで書き出し、表したいものの指示に使われます。

例えば、文字を太くしたい場合は、

 

文字を太く → <strong>文字を太く</strong>  → 文字を太く
 
 
赤い文字で表記したようにHTML編集画面で打ち込むと、右側の文字のように太字になり表示されます。
つまり、
<   >               </  > 挟んだ文字に指示を与える事ができます。
 
他にも、文字色を変えたり、枠を付けたり、リンクを貼ったり…などのブログを装飾するための指示を与える決まった文字列。
これを「HTMLタグ」と呼びます。
 
HTMLタグは正しく記述し、正しく配置しないと効果を与えられません。
格闘ゲームで言うところの技のコマンド、Excelで言うなら関数と言ったところでしょうか。
 

では、他のタグも紹介していきましょう。
 
リンクを貼る
 <a href="リンク先URL">文字</a>
 
リンク先を新しいタブで表示させる
<a href="リンク先URL" target="_blank">文字</a>
 
横一直線の細い線
<hr>
 
 
囲み枠(水色)
<div style="border: 5px solid #87cefa; padding: 10px; border-: 0px; background: ##ffffff;">文字</div>
 
 
文章を改行する
 <br>
 
 ”文字” のところには、ブラウザ上で表示させたい文字列を記入
 
色を指定する場合は、色コードや色名を入れます。
 (色コードとは、#○○○など 色名とは、色をそのまま英語にしたものです)

では、ここまで紹介したHTMLタグを利用して練習をしてみましょう。
まだ自分のページを所有していなくても練習ができます。
 
Windowsでの説明をしていきます。
標準搭載されているメモ機能で十分ですので、是非挑戦してみてください。
 
まず、メモを起動し見本のように打ち込んでみて下さい。
そのままコピーしても大丈夫です。
(タグ内の下線部分の文字は自由に書いてみて下さい。)
 
 

 

見本
 
 
<h1>がじぇっと研究所</h1>
<br>
 <font color="red"> がじぇっと研究所とは?</font>
<br>
PC操作やソフトウェアでの困った事を解決するお手伝いやオススメを紹介する情報共有スペースです!
<br>
<hr>
<br>
 <a href="https://gadget-labo.hatenablog.com/">ここをクリックすると表示されます</a>
 

 
メモ機能で上記のように書き込めたら、名前を付けて保存を選択します。
その時、任意の名前の後に【 .html  】を付けて、保存しましょう。これでこのファイルはHTMLであると認識させる事ができます(拡張子といいます)
では、その保存したファイルをGoogleの検索ページへドラッグしてくると…
HTMLで書いたものが表示されます!
 
 
他にも練習できるようページを用意してくれているサイトも存在しますので確認してみて下さい。
さらに、様々なタグがたくさんあります。
そして、決まりや応用法もたくさん存在します。
 一からサイトを構築するにはもっと難しい事をしなければいけませんが、通常のブログを作る際の知識として、覚えておくと良いなと思う範囲でご紹介しました。
 
ブログサイトを装飾するために必要な知識は身に着けておいて損はありません。
テーマをインストールすればワンクリックで装飾できるシステムが備わっているので絶対に全部をタグで生成する必要は少なくなっています。ただ、知識として身に着けておくだけで理解を深め、さらに凝ったデザインにする事も、一からサイトを構築する事も、トラブルに対応する事もできるようになります。
専門的な用語が出てきてお手上げ状態になり時間を割かれる事が減れば自然と効率アップします。
納得のいくデザインができれば、自信につながりモチベーションも上がりますので、
是非知識をつけ、楽しくブログを続けていってほしいと思います。
 
 

がじぇっと研究室管理人です。

このサイトでは、パソコンやガジェットでの困った事への解決提案や

役立つ情報をご提供したいと思っています!

ガジェット好きの管理人がのんびり情報公開しています。