ブログの書き方

初心者がHTMLの勉強始めてみました②設備編

投稿日:2016年6月24日 更新日:

僕がなぜHTMLの勉強をしたいのかは、前回の記事を読んでみてください。みなさんも自分のブログをカスタマイズしてみたいですよね。

今回はHTMLとは何ぞや?の補足と実際の始め方や必要な物を書いていきます。これから書いていくのはWindowsでの方法なのでMacユーザーの方はスミマセン。でも基本的なところは一緒だと思うので流れだけでも勉強していってね。

HTMLについて復習と付け足し

PAK105215431_TP_V

HTMLとは

プログラミング言語の名称で、話す相手は今これを読んでくれてる読者(人間)ではなく、コンピューターである(正確にはブラウザなのか?)。そしてコンピューターが人間にも分かりやすいように書いてくれたのがwebサイトなのです。

ちなみにこれから勉強していくのは「HTML5」というものです。HTMLにもバージョンがあり、その最新版が「HTML5」です(2016/6/24現在)。Windowsで例を出すとXPやVista、7や8って感じです。

検索する時はHTMLでOK

上でも書いたように、最新のバージョンであるので過去のバージョンと互換性があります。ですので「HTML」で検索した結果を「HTML5」で使う事ができます。

一部例外があって、廃止される項目もあるという事です。しかし廃止される様なものですから、使用頻度が非常に低いなど僕のような初心者にはあまり関係のない話です。

HTML5を勉強する時にIEは微妙?

結論を先に言うと基本的に問題ない。IE8以前のバージョンはHTML5に対応していないので、HTML5で書いてあるwebサイトは読み込めません。しかし現行のバージョンはIE11であるので心配ないし、もっと言ったらWindows10では標準のブラウザがMicrosoftEdgeになったので尚更です。

しかし正直に言うと「問題ない」程度で理想的ではないと思う。現在のwebブラウザのシェア率はブラウザー何使ってる?で書いた通りchromeが非常に多いです。これからもこの流れは加速していき、chromeが一般的なブラウザになると思われます。

よってwebサイトを作る段階からchromeでの動作確認を重視して行こう、というのが今のところ僕の意見です。

HTMLを勉強するのに必要な物

C789_pentonotepc_TP_V

普通のパソコンでおk

プログラミングを勉強するとなると、最新の高機能ななパソコンが必要そうな気がしますが、今あなたが使っているパソコンで全く問題ないです。今回の「問題ない」は「本当に心配ない」の意味です!

あのースマホでこれを読んでる人スミマセン。圧倒的初心者の僕にはスマホで練習する方法が分かりませんので、パソコンでやってみてください。パソコン持ってない人はもっとごめんなさい。

使うのはメモ帳とブラウザの2つだけ

最低限の道具としてWindowsに元々入っている「メモ帳」と「ブラウザ」さえあれば準備完了です。あとは「書いて」「保存して」「ブラウザで開く」だけです。

できればTeraPadという無料のテキストエディタ(文章を書くソフト)を使ってみてください。今何行目にいるのか把握できたり、タグに色がついたりといった機能があり便利なので僕も使ってみようと思います。あと、ブラウザはできればchromeでおなしゃす

実際にやってみんべ

今回は誰でも気軽にチャレンジできるように、メモ帳を使ってみます。

まずは書いてみる

とりあえず下の文字をメモ帳にコピペしてみてください。それぞれの意味は後で説明します。

<!DOCTYPE html>
<html>
<title>HTMLを勉強するぞ!</title>

<h1>これが大きい見出し</h1>


<h4>コッチは小さい見出し</h4>



とにかく書いてみるべ

</html>

出来たら.htmlで保存する

保存の仕方
↑の画像のように、ファイル⇒名前を付けて保存⇒「すべてのファイル」を選択⇒ファイル名は半角英数字で最後に「.html」を付ける。

実際に動かしてみる

動かし方
作成したファイルを右クリックして⇒プログラムから開く⇒使いたいブラウザをクリックしてください。

一応説明します

結果
こんな表示が出れば成功です。
それぞれの言葉の意味は次の通りです。

<!DOCTYPE html>
<html>
<title>HTMLを勉強するぞ!</title>

<h1>これが大きい見出し</h1>


<h4>コッチは小さい見出し</h4>



とにかく書いてみるべ

</html>

1行目は「宣言文」。これから書き始めます、という意味。

2行目と7行目の<html></html>この間に書いています、という意味。

3行目の<title></title>はこの間にタイトルを書いていますって意味。成功画像の赤丸で囲んだ部分に表示されています。

4、5行目の<h1></h1>は「見出し」を作るという意味の言葉で、数字が大きい程文字の大きさも大きくなります。また僕のブログのようにデザインそのものを変える事も可能です。

6行目の<p></p>は段落を付けるという意味です。この一行だけでは分かりくかったですが、今から画像作り直すのめんどくさいのでこのままで行きますw

まとめ

どうだったでしょうか?誰でも簡単に始められる事が分かっていただけたでしょうか?この機会に皆さんもちょっとだけでもチャレンジしてみてはいかがでしょうか?

追記:2016年12月
↓コレ買いましたが、ぶっちゃけ全然読んでませんwww最近は全部B君任せですw

↓関連記事↓

初心者がHTMLの勉強をするぞ!①導入部分
インターネット初心者の僕ですが、ブログを書き始めてサイト運営というものを少しずつ勉強しています。今回は「プログラミングを少しずつでも勉強していくぞ」という意思表示と必要性・今思いつく勉強項目を書いていきます。... 【続きを読む】
HTML初心者向け記事③。強調の必要性とやり方
どうも万年初心者のsohtaです。HTMLの勉強記事の第3回目もなんとか記事にする事ができました。今回は強調の必要性とやり方の紹介をしたいと思います。結果から言うと使い方は文字を挟むだけでOKなんですが、ちゃんと意味も一緒に勉強しましょう!... 【続きを読む】

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

-ブログの書き方
-, , , , , ,


comment

メールアドレスが公開されることはありません。

CAPTCHA