#5ゼロからwebの基本「HTML」「CSS」編 〜５日目〜 『実際に入力してみる２（<title>要素など）』
「こんばんは」あるいは「おはようございます」それとも「こんにちは」
ゆーたろです。
前回は<html>要素とひと言入力してファイルに保存してプレビューする所までやったので、今回は<title>要素などもう少しいろんな要素を使ってみましょう。
今日の勉強のオトモ曲👇
- provided courtesy of iTunes
- タイトルを入れてみよう
まず、<html>のすぐ下に<head></head>を書いてみましょう。
<head>〜</head> は「head要素」。（このHTML文書の情報を入れるところ）みたいです。
「head」はヘッド。頭という意味で、この部分に「ページのタイトル」「文字コード」「キーワード」などなど、いろいろな情報を入れることができるみたいです。
次は、<head>から</head>の間に、<title> </title>と書き、さらにその中に好きなタイトルを書いてみてください。
<title>〜</title> は「title要素」
「title」はタイトル。そのままの意味で、このHTML文書のタイトルをになります。
ここまでを保存してブラウザでプレビューしてみてください。
こんなふうに、いま書いたタイトルが表示されてますでしょうか？
※title要素は、今度説明する h１要素よりも、検索ロボットが重要視する、一番の要素だそうです。なのでtitle要素は重要。
ちなみに「head要素」はHTML文書に関する情報を入れるところで「head要素」に書いた情報は「title要素」以外はブラウザで表示され内容です。
- <body>要素を書いてみよう
「body」はボディは体です。ウェブページとして表示される実際の内容は「body要素」の中に書きます。
body要素は、レイアウトする内容の 言わば内容です。
body要素に色や画像を指定する事で、画面全体の背景を変えたり文字のサイズや色、行間、センター合わせか左寄せかなど、基本のレイアウト情報を指定することによりbody要素の中に書いた全部の要素に反映さセル事が出来ます。
早速<head>〜</head>の前回書いた内容を <body> </body> で囲んでおきましょう。
だいぶ形になって来た気がします。笑
- 最後に
無理せずゆっくり今回はここまでにしましょう。
HTMLの要素は体の部分の名前になっているのでここまではけっこう覚えやすいですね！
次回 →「文書型宣言」
今回のおすすめ商品はこれ👇
夏は日焼け止め必須！２種類使い分けているのですが、こっち大切。
#4ゼロからwebの基本「HTML」「CSS」編 〜４日目〜 『実際に入力してみる』
「こんばんは」あるいは「おはようございます」それとも「こんにちは」
ゆーたろです。
前回はテキストエディタで新規ファイルを開いた所までやったと思います。今回はその中に色々打ってみましょう。
今日の勉強のオトモ曲👇
- provided courtesy of iTunes
- テキストエディタに打ち込んでみる
今日から早速テキストエディタに色々打ち込んでみましょう。
前回保存したファイルを開いてみてください。
| １ | <html> |
| ２ | </html> |
| ３ | |
| ４ | |
| ５ | |
| ６ |
となっていると思います。
※HTMLは基本小文字で統一して書く癖をつけておく
HTMLは大文字小文字の区分は無いみたいなのですが、CSSやXMLには大文字小文字の区分がありこれから使うようになった際にエラーで困ってしまう可能性があるので、基本小文字で書くようにしましょう。
HTMLはブラウザに対する指示書の役割を果たしているので
<html> →「ここからhtml要素が始まる」
</html> →「ここでhtml要素終了」
と、指示していることになります。
HTMLでは、前回説明したh.pなどの要素も大抵< >で囲まれた開始タグで始まり、</ >で囲まれた終了タグで終わります。（終了タグのない要素もある）
では、今書いた<html>と</html>の間になんでも好きなことを書いてみましょう。
| １ | <html> |
| ２ | 星の王子さま |
| ３ | </html> |
| ４ | |
| ５ | |
| ６ |
- 拡張子「.html」をつけて保存する
このファイルに適当なファイル名をつけて保存して拡張子は「.html」です。
※拡張子 →ファイル名.拡張子 今回の場合 →ファイル名.html
- テキストエンコーディングを指定する
保存する時の「テキストエンコーディング」は「UTF-8」にしましょう。
※HTML5 のテキストエンコーディングはUTF-8を使用することが推奨されているみたいなので。
テキストエディタによっては「UTF-8」は「BOMあり」「BOM無し」を選択できる場合がありますが、「BOM無し」にしておこう。
※「BOM無し」は「UTF-8N」という表現もあり、windowsのメモ帳は選択肢が「BOMあり」しかないみたいなのでやっぱり前回紹介したようなコーディング用のテキストエディタを使用しましょう。
ちなみに保存したファイルを再度開いたときに、文字化けするなど、うまく開けない場合は、テキストエンコーディングを見直してみるのも一つの手みたいです。
- フォルダを作ってその中に保存しよう
自分の分かりやすい場所にフォルダを作って、その中に保存しましょう。
もちろんフォルダの名前は適当で大丈夫です。 ←簡単な方が後で困らない
※ちなみにMacの「テキストエディット」などはデフォがリッチテキストになってるみたいなので単なるテキストファイルにしてから保存してください。
- ブラウザなどでプレビューする
保存したファイルをブラウザなどでプレビューしてみましょう。
こんな感じに自分が書いた文字だけが表示されていたら成功です。
もし文字化けするのであれば下のように<html>の下に<meta charset="utf-8">というのを追加してみると大丈夫だと思います。
- 最後に
今回はここまでにしましょう。いつも以上に進んだと思います！
説明不足なところもあるかも知れないのでわからない所は調べてみてください。笑
次回は →タイトル<title>要素などをやって行きましょう。
今回のおすすめ商品はこれ👇
朝起きた時の髪質結構良き
#3ゼロからwebの基本「HTML」「CSS」編 〜3日目〜 『HTMLのタグについて』
「こんばんは」あるいは「おはようございます」それとも「こんにちは」
ゆーたろです。
今日はまず下準備として、「主なHTMLのタグ」と
明日から早速実践しながらHTMLを学べるようにコーディング用のテキストディタで
新規ファイルを開くやり方を少し紹介して行こうと思います。
今日の勉強のオトモ曲はこれ👇
- provided courtesy of iTunes
- 主なHTMLのタグ
| タグ名 | 意味 |
| h | 見出し：h1, h2, h3... |
| p | 段落 |
| a | リンクを挿入 |
| li | 箇条書き |
| strong | 太文字で強調 |
ここら辺はヘ〜程度で流して貰って大丈夫です。
実際にタイプしながら覚えた方がすごく覚えやすいと思うので！
- テキストエディタで新規ファイルを開いてみる
テキストを保存できるソフトウェアを起動してください。
とりあえずなので、OSに標準でついているテキストエディタ「windならメモ帳（Notepad)」「Macなら（テキストエディット）」で大丈夫です。
※ちなみに自分はAtomというコーディング用テキストエディタを使ってます。Atomの方が最初のダウンロードして日本語表示設定してしまえば使いやすいと思います。慣れておくという意味も込めて。
開いたら
| 1 |
<html> |
| 2 | </html> |
と入力してフォルダを作ってその中に保存しておきましょう。
詳しくは明日からやっていくので今日はここまでです。
- 最後に
ついに明日から実際に入力していき、プレビューで見てみたりしてみたいと思います。
次回→『実際に入力してみる』
今回のおすすめ商品はこれ👇
#2ゼロからwebの基本「HTML」「CSS」編 〜２日目〜 『HTML・CSSとは』
「こんばんは」あるいは「おはようございます」それとも「こんにちは」
ゆーたろです。
今日は早速「HTML」とは何か、「CSS」とは何かを自分なりの解釈を含めて解説していきたいと思います！
※あくまで未経験者が調べて勝手に解釈して書いているので過信は禁物です。
今日の勉強のオトモ曲はこれ👇
- provided courtesy of iTunes
- HTMLとは
早速「HTML」とは何かについて解説していきます。
HTMLとは「ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）」の略称で、WEBページを作成するための言語だそうです。
ちなみに、「マークアップ」→文章の構成や、文章の役割を示すという意味
「ランゲージ」 →言語
おそらく「ハイパーなテキストを作るための文章の役割を示す言語」。たぶん笑
HTMLを使用すると
- 文字の大きさを変える
- 太字にしたり文字を強調させる
- 見出しやタイトルを作る
- 画像を貼る
事ができるみたいです。
さらに「CSS」と組み合わせることによって自分達が普段見ているwebページのようにカラフルでおしゃれにする事が出来てしまうとか.....
そんなすごく役立つ「HTML」のタグについては次回から学んでいきましょう。
- CSSとは
さっきHTMLの時少し出て来たCSSについて解説していきます。
CSSとは「カスケーディングスタイルシート（Cascading Style Sheets）」の略で、文章にデザインを施したいときに使う言語だそうです。
ちなみに、「カスケード」→滝、連なった滝、連続した物、数珠繋ぎ
おそらく、「連続して連なったスタイルシート」 （そのまま）
CSSはHTMLと組み合わせて使用する言語で、CSSを使用することにより
- スタイルや色を変える
- レイアウトやデザインを指定する
事が出来ます。
HTMLが「文章構造」ならCSSは「見栄え」って感じですね。
- 今日のまとめ
要するに「HTML」で文章の構造を作り、「CSS」で見栄えをよくしていくという感じですね。
ここだけだと単純に見えるのですが本に例えるとまだプロローグ、ゲームに例えるとチュートリアルです。
なので次回からはさらに気合を入れてHTMLのタグについて学んで行きたいと思います。
- 最後に
１日の勉強量が少ないかも知れませんが
学生さんなら学校の「課題、バイト、遊び、恋愛...」
社会人さんなら「仕事、家のこと、遊び、恋愛...」
その他にも「家事、育児、家族サービス」などにも時間を使って空いた時間でいっしょに頑張って行きましょう！
次回、『HTMLのタグについて』
今日おすすめする商品はこれ👇
お出かけ時、デート時はこれ必須。１本はカバンに入れとくべき！
