HTML/CSS-6日目
タイトルは嘘です。本当は５日目の余った時間でCSSやりました。
嘘は人生の潤滑油だそうです。
あらためまして、
今回からCSS始まります。
人のお金で牛タン食いて〜
人の牛タンで金食いて〜
初回なので
基礎の基礎から始まります。
---------------------------
CSSってなに？って人へ。
これをみなさい。（丸投げ）
多分このブログよりぜんっぜんわかりやすいわ。やめときゃよかった(号泣)
ます最初に、
HTMLとCSSをつなげます。
HTMLってなに？って人へ。
これをみなさい。
あと私の今までのブログも見て、まじで
で、
それでよ
HTMLのhead内部、
この中の、
<link rel="stylesheet" href="style.css">
この行です。囲
rel="stylesheet"
スタイルシートとして、
href="style.css"
style.cssというファイルを参照せよ。
という命令になるらしい。先生の意訳。
これがないとどれだけCSS頑張っても無駄になっちゃいます、気をつけて。
で、新規CSSを作成するとき、
頭につけるのは
@charset "utf-8";
これ。文字コードの宣言ですね。
なんにおいても、CSSでは
；←こいつ忘れないように。
さて、内容に移ります。
h1 {color:white;}
CSSの表記の基本です。
このとき、
h1部分をセレクタ、
color部分をプロパティ、
white部分を値と呼びます。
表記の際のインデントが少し特殊ですので気をつけましょう。
簡単に書いてみます。
こんな感じです。エディタによっては勝手にインデント綺麗にしてくれるかも。
プロパティはもう見たとおりです。
background-colorは背景色、
font-sizeは文字の大きさ。
font-family: serif;
これはフォントの種類です。
serifとsans-serifがメインになります。説明がめんどいので調べてください。
colorについては、colorというプロパティがもうフォントの色を示すので、
font-colorではないことに注意しましょう。
さくさく書いていきます。
出力してみましょう。
やべめっちゃセンス悪い色合い
女とは思えない
でもとりあえずこんな感じです。
序盤は簡単ン( ◠‿◠ )
明日から本格的にがっつり始まると思います。
頑張りましょう。
*1:すごいどうでもいいけど、背景色を黒にしました。
HTML/CSS-5日目
むっちゃ暑い。
蒸し鶏になりたい。
鶏肉食べたい。
さっき目次を作ることを覚えました。
ブログ生活が充実しますね。知らんけど。
今日の内容は〜〜こちらっ( ◠‿◠ )
-------------------------------------------------
その前に、
先日の補足になりますが、
<section>と<article>の理想的な使い方
<section>は章や節を表す
<article>は独立した自己完結した記事をあらわす
<article>
<section>
<h1>見出し</h1>
<p>本文</p>
</section>
<section>
<h1>見出し</h1>
<p>本文</p>
</section>
</article>
こういう風に作ると検索にひっかり易くなるので、SEO対策に有利です。
はいじゃあ行ってみよう〜
----------------------------------------
フォームを作成する
HTMLの授業も終盤へ入ってまいりました。
たぶん今日で終わりです。だいぶできるようになったんじゃない？知らんけども。
フォームって名前とか住所とか、お問い合わせとか入れるやつです。
この記事読むだけでフォーム作れるようになるのでしかとご覧あれ！！！！！！( ◠‿◠ )！！！
で、
これですね。
今日はこれを作っていきます。
<form>〜</form>
このタグにパーツをぶち込むことで作成していきます。このタグはユーザから入力されたデータをメールとして送信する設定をwebページに記述するものです。
ちなみにいろいろぶち込んでも、<form>タグの外に漏れちゃったりすると一切動作しませんのでご注意！
アクセシビリティの観点にも注意して作成します。
アクセシビリティとは近づきやすさや利用しやすさ、つまりちょっとした便利さに配慮して作りましょうということ。
これでいうと、赤い枠だけでなく青い枠部分もクリックして入力可能、ということですね。
さて、
<form> には属性が二つあります。
<form action="○" method="○">
actionの値にはCGIプログラムのファイル名、methodの値には基本的にはpostを入れます。
<form>のパーツはすべてフレージングコンテンツなので、<p>タグで縛っておいてあげます。
では、みていきましょう。
名前を入力する
まず名前。一行分のテキストエリアをつくります。
<input type="text" name="name" id="name">
この<input type="text">というタグでテキストボックスが簡単に作成できます。
ただ、まだこの時点ではアクセシビリティ設定はされてないので、テキストボックスをクリックしないと入力は不可能です。
このようにlabelタグでくくって、
このオレンジ下線部の内容が同じになるように記述すると、勝手に関連付けてくれます。これも先日やったidと同じ、完全一致が条件になります。
これを書くことで、最初に言った赤枠青枠の話が改善されるわけです。
つまり、ちょっと使いやすくなった。
この青い下線部に関しては、データを送信したときに受信側がどの項目として受け取るか、その内容の名前という意味。
たとえば、山田太郎と入力されていたとき、受信者に、
「この山田太郎というのは、nameというフォームに入力されたものなので、お客様の名前です」
と伝えてくれる的な？なんかわかりづらいな？
結局受信側のデータベースに登録するときにちょっとやさしいみたいなやつです。
パスワードを入力する
次、ログインパスワード用のフォーム。
オレンジの下線部で関連付けし、
青い下線部で「パスワードとして入力されたデータです」と伝える。
<input type="password">
この記述で、入力文字列が黒丸になるようなボックスが作成されました。
ラジオボタンを作成する
はい、次、ラジオボタン。
ラジオボタンは、ひとつしか選択できないときのためのボタンです。性別とか。
ここでも性別のときに使われてます。
○男性 ○女性
の部分です。
<input type="radio">
これでラジオボタンは発生しますが、、
新しい属性が出てきました。
ラジオボタンはひとつを選択して文字データを送信します。
この選択されたときに送信する文字データを入力しておくのが、valueです。
要するに、表向きが男性/女性のラジオボタンでも、
valueの値を犬とか猫とかにしとくと、ユーザーは男性を選んでつもりなのに
届いた内容は犬になってるみたいな感じ。いたずら心が働きます。
選択するボタンは「男性」より前に発生させたいので、コードの書き始めの位置に気をつけましょう。
ちなみに、
この緑の下線部統一してないと、二つ以上選択可能になるので注意。
もう全体の半分出来上がりました。
プルダウンメニューを作成する
次、年齢。
<select>タグで仕上げましょう。
緑のわくのvalueが実際に送信される内容。
青の下線部が送信される名目。
<select>でプルダウンメニューを作成し、
このタグは子要素として<option>を持つことができますので、<option>で選択肢を作ってあげましょう。
このようにプルダウンで完成されます。
チェックボックスを作成する
つぎのチェックボックスがなんかめんどい。
書くこと多いけど、やってることは変わりません。
<input type="checkbox">
これで複数選択可能なチェックボックスが発生します。
完成です。
テキストボックス(でかい)を作成する
じゃあつぎ、テキストエリア。
これは空タグではありません。閉じタグ必須です。
属性がいろいろあるので、見ていきましょう。
colsでフィールド幅、rowsで行数を指定できます。
colsに関してはブラウザの文字サイズに依存することが多いので、あんまり当てになりません。CSSで指定しましょう。
このタグにはほかにも属性があります。
size="フィールドの幅(文字数)"
value="デフォルトで表示するテキスト"
maxlength="入力可能な文字数"
などなど。
送信ボタンを作成する
最後、ボタン作ります。
<input type="submit">で送信ボタン、
<input type="reset" >でリセットボタンができます。
簡単。これはラベルによる関連付けも必要ありません。
ただこの場合におけるvalueは、
ボタン内の表示テキストをあらわしています。ややこしいかよ。
はい、完成しました。
このくらいできればいいでしょうとのことで、HTML講座は終了しました。
次回より、CSSに入ります。
人のお金で焼肉に行く
長年の夢です。
アディオス
HTML/CSS-4日目
こないだから使ってるBracketsですが、ライブプレビューに不良があるとき、
ファイルから直接開いて動作確認したほうがいいみたいです◎
どうせ今晩も昨日の残りのカレーやんと思うと、何もやる気がおきません。
じゃあ早速、今回の講義を復習します。
----------------------------------
画像配置応用編
二つ以上の画像を横並びに配置したいとき
ひとつの<p>のなかに<img>を数の分だけ置いてあげます。
<p><img...><img...></p>
こんな感じで。
結果はこちら。
<p>の中に配置する<img>タグは隙間や改行はなし(改行コードのせいで隙間が開きます)
なぜこうなるかというと、
<img>はインライン要素だから。
インライン要素は領域を持たないので、隙間なく敷き詰めて配置してくれます。
この性質を利用して画像を横並びに配置するんですね。
この出力画像でいうと、赤い枠線のカバーする範囲内が<p>タグの領域です。<img>はインライン要素なので、写真が表紙されているその範囲しか領域を持ちません。
また、ボタンにリンクを持たせたいとき、これもひとつの<p>タグの中に<img>と<a>を入れ込みます。
が、そのとき、さらに<a>の中に<img>を入れ込みます。マトリョシカ的考え。
ちなみに、細かい指定はCSSで行いますが、まだ授業はそこまで進んでないんで、
いまはHTMLにCSSをインライン記述してます(´；ω；｀)ﾌﾞﾜｯ
------------------------------------------------
ページ内リンクについて
ページ内リンクとは、
たとえば目次がリンクになっていて、クリックすると同じページ内のその項目に飛ぶ的名、そんな感じのやつです。
ここではリンクとそのリンク先に同じid名を持たせることで、その二つを関連付けします。
<a href="#sec1"></a>
↓
↓ジャンプ
↓
<section id="sec1>
ここで#はidと同じ意味を持ちます。
よって、二つのリンクが結び付けられるわけです。
idを指定するとき、id名は、
○必ず半角英数名で
○数字スタートはNG
この2つに気をつけて、かつ
出発点と到達点のid名が完全に一致するようにします。
----------------------------
<div>と<section>、<article>
<section><article>はHTML5からの新入りです。
<div>と<section>に関しては、2つとも似たような意味で、範囲を確保するという部分では変わりませんが、どう使い分けられるのか簡単に説明します。
<div>→ブロック要素として領域を確保する。セマンティック(意味を持たないタグ)なので、SEO対策の観点では不向きとされる。
<section>→同じくブロック要素として領域を確保する。こちらは章、節といった意味合いをもつタグなので、SEOの観点から検索に有利。
ちなみに、
<article>→ひとつの自己完結した記事として独立させる(という意味を持つ)
結局このあたりの使い分けは人によって曖昧らしいのですが、SEO対策として使い分けができると良いねっていってた。ばあちゃんが。
----------------------------------------------------
<nav>
「主要な」ナビゲーション
フローコンテンツのひとつで、
webサイト内共通で使われるグローバルナビゲーションと呼ばれるセクションなどに使われます。
基本的には中に<ul>が入る！
<h1>など見出しが入る例も多数あります。
--------------------------------------------------
表を作りたいとき
<table>タグを使うことで表を発生させることが可能です。
とりあえず、
コードを見たほうがわかりやすいかも。
<table>タグで基本となる表の一番外の枠組みを作り、
ネスト（入れ子）として
<tr>タグをはさむことで行を発生させます。
さらにその中で<td>を使うことでセルを作ります。
ブラウザで確認します。
いまいち仕組みがわかんなかったので、<tr>の中身をちょっと増やしてみました
予想では外枠の大きさは変えてないので、中のセルがめっちゃ小さくなってa,s,d分増えるパターンかなと。
むっちゃ雑やん。
でも外枠の大きさは死守してくれています。要するに、<td>が増えればその分、横にセルが増えるってことですね。え、なんとなくわかった。
これNG例なんですけど、
表と表の間を空けたいとき、<br>を使ってしまうと怒られます(誰かに)
<br>はインライン要素なので、<body>の中にそのまま投げ込むのはCSSがなかった時代の技法で。今はタブーだそう。2017年はCSSで指定してね。ハート。
-----------------------------------------------
では次、セルを連結してみます。
横方向に連結したいとき、<td>にcolspan属性を与えます。
正の値を与えることで、その数の分だけセルを連結します。
考え方としては、ほかのセルに比べて横方向にその数ぶん伸びるというのが正しいそう。
コードはこんな感じで
結果は以下。
もうなんか雑くね？ｗｗｗ
本当に伸びてるだけというのがよくわかりました。ぜんぜん連結ではないので、
コードから
<td>2</td>
の部分を抹消して（コメントアウトで殺して）あげるしかないようだ。
すっきりしました。
たて向き伸張のrowspanについても、同じ。
いい感じに雑に連結（伸ばして）くれます。
余分なセルは抹消（コメントで殺）してあげましょう。
では最後にこちら。
このコードの出力はどんな形の図になるでしょうか。
答えは↓
これで〜〜〜す（雑）
また明日〜〜〜〜
HTML/CSS−3日目
今日の昼、
外は明るいのに土砂降り、風と雷が止まず、
どこぞの救急車と消防のサイレンの音がすごくて、
この世の終わりかと思った。
死ぬ前にモテキきてほしい。
さて今回の授業では、
USBのウイルスチェックやHDD、メモリをちょっと学んでからHTMLに入りました。
あと今回から内容ごとに--------これで区切っていこうと思います。
は〜い席ついて復習始めま〜す
------------------------------------------
USBのウイルスチェックは
win7の場合Windows security Essentials
win8以降の場合はWindows Defenderを使用しましょう。
どっちももともと入ってるプログラムだそうです。
macの場合は知りません(笑)
それから、USB自体そんなにもちがいいものでもないので、
あくまでもデータの持ち運び用としてのみの使用が望ましいそう。
マシンはcorei5がお勧めらしい。
------------------------------------------
今回はimgタグから。
<img src="パス名/ファイル名" width="幅" height="高さ" alt="説明文(代替文)">
4つの属性を持つタグで、順不同で認識されます。
srcにおけるパス名とファイル名のみ気をつけましょう。
また、インライン要素なので<p>や<h1>などのフローコンテンツ内に入れ込みます。
altについては、旧XHTMLでは必須で、
画像説明用のポップアップ、または画像がトラブルにより表示されない場合の代替テキストでしたが、今では画像タイトルだけでなく、画像があらわすものを文章として表す必要があります。
<...alt="ユニーク値">←地名や商標、固有名詞
といった記述が好ましいそうです。
---------------------------------------------------------------
次は画像形式について。
JPEG,PNG,GIFなんかはよく耳にしますが、
どう違うのか、ざっくり説明します。
【JPEG】
[長所]
色数が1677万色のフルカラー、パソコン搭載のすべての色が使えるそう。
また、日本人が大好きな質感重視のグラデーション表現が得意。
[短所]
角版のみ。切り抜き不可。静止画のみ。
角版って、四角形ってことです。
要するに、容量も標準的なので、角版画像のみであれば使いやすい。
【GIF】
[長所]
切り抜き可能。コマ送り単位だがアニメーション可能。
[短所]
色数が少ない。(256色まで。)
質感はカバーできない。
色数を使わない小さめのアイコン(アクセントグラフィック)や、ちょっとしたアニメーションに向いている。
【PNG】
[長所]
サイズを問わず、切り抜き可能。グラデーションも得意。透明度の概念もあります。
[短所]
データ容量がでかい。
JPEGとGIFの良いとこ取りな感じのPNG。最近はスマホに完全対応したHTML5にあわせ、広く普及してきています。ただ、容量がでかい。
ニーズにあわせてこの３つを使い分けていきましょう。
--------------------------------------------------------------
さて、画像参照のやり方について、
<img src="パス名/画像名".....>
ソース部分について、パス名の参照のやり方がややこしい。
ソースコードがないとやっぱりわかりづらいので、
練習したプログラムとその結果を見ながら復習していきます。
まずは普通に画像を参照してみます。
結果がこちら。
alt部分において記載した説明文は、
こんな風に反映されます。
次はややこしいパスの参照方法。同一フォルダ内に画像がなかったり、別の場所から参照対象を引っ張ってきたりする必要がある時。
プログラム内部にコメントアウトで詳細を記載してます。
フォルダの参照先は画像左側にあるフォルダツリーが視覚的に階層を表してくれているので、わかりやすいかも。
練習でいくつか作成してます。
編集中のコードを保存してあるフォルダを基準とした時、
../⇦こいつがつまり、編集中のフォルダの１つ上の階層のフォルダをさす。
../../⇦これだと２つ外。
ただの/だと、１つ下の階層を指しちゃうので注意。
---------------------------------------------------------------
はい、次は
アンカータグを用いたリンクの作成
<a href="(リンク先).html">リンク先へ</a>
中身の"(リンク先).html"は例なので、真似しないでね
これをアンカータグといい、リンクを作成するときに使用するタグ。
リンクの参照方法は以下実際に作成したプログラムを見ながら復習します。
ぶっちゃけやりかたはimgの時と同じなので、
同じです。
hrefはhyper reference(ハイパーリファレンス)の略で、ここでリンク先を指定してあげます。
これもフレージングコンテンツなので、ブロック要素でくくりましょう。
結果はこちら。
また別のindexにおいて同じようにリンク付けしてあげることで、
この延々とリンクを回り続ける無限ループに陥ることができます。
このリンク参照において出てくる単語がこちら、
[相対パス]
自身のPC内の行き先を示す。
住所で言うと「うちから見て2件となり」みたいな表現。
[絶対パス]
他サイトへのリンクなどがこれにあたる。
住所で言うと緯度と経度で特定する感じ。google map使う的な感じ。
<a href="yah○o.co.jp" target="_blank">
target="_blank"があれば別タブで開くことができる。
他にも_parentsとか_selfとかあるけど、SEOの観点から実際には使われません。らしいです。
----------------------------------------------------------------------
はい、今回の授業はここまででした。
人の金で牛タン食いたいです。
また明日！
HTML/CSS-2日目
HTML/CSS 二日目の講義です。
先日より引き続き、基礎的なところから始まり、簡単なタグの使用例をいくつか。
------------------------------------------------------------------------------
まず開始してから先生の雑学が少々、、、
どうも街中の街頭ビジョンや電車の広告はしっかり見ておいて損はないそう。
目を引かれるデザインというものはそれだけで価値があるらしい。
でも、「なんとなく良いな」と思わせるのは天才の仕事で、
はじめは「写真がいい」「レイアウトがいい」「コピーがいい」とか、
言葉で説明できるような良さを出していく練習をこつこつしなさい、と。
それから何かをプレゼンするときや説明するとき、その言葉の一つ一つを美しくするために、普段から綺麗な言葉を選びなさい、とか。
素敵なことを教えてくれる先生です(*´﹃｀*)
さて、今回の授業。
HTML雑学と、簡単なタグの使い方と、ブロック要素、インライン要素についての講義でした。
復習れっつごー↑↑
----------------------------------------------------------------------------
まず雑学。
コードを書く皆さんならもう当たり前のことだとは思いますが、
HTMLの最小基本構文自体は基本はテンプレで存在するのでいちいち書くことのほうが少ないってこと。<!DOCTYPE html>とか、<html lang="ja">とか。<body>に入るまでの部分。
あ、あと、HTMLにおいて、なぜ”マークアップ”するか？ってことについて、
理由は二つ。
①ブラウザがマークアップされている言葉を解析し、ホームページとして表示する仕様だから
②タグによる意味づけがSEO対策上で有利になるから(このサイトは何をメインにしているか等)
ちゃんと意味があるんですね～(●´ڡ`●)
では実技。
プログラムを書く上で、基本的な書き方は
タグを置くとき、開始タグと同時に終了タグを書いてしまってから、中身を記述します。
<h1>
</h1>
先にこれを書いてから
<h1>
カワイイは、作れる。
</h1>
こうやって中身を入れます。
ちなみにカワイイは作れるとは思ってません。作ったものは壊れます。
どうでも良いけどいまめっちゃドーナツ食べたい。
で、ここからはタグの話。
今回習ったタグは以下箇条書き（ごめんなさい）
○改行に使用する<br>は連続して使わない。できればCSSで解決しよう。
○<ul>→箇条書き（マーカーリスト）
<ol>→連番リスト
→リストマーカーを消すコードもある。
○<dl><dt><dd>→説明リスト、用語、用語の説明に使用する。ECサイトによく使われます。
google「ECサイト作るならdl使ったほうが売れるよ！(｀・ω・´)」
○リスト等はブラウザで見える形と同じでインデントを重視してやるとよい！
○!!<dd>は<dt>のネストではない。⇦割とネストだと思ってる方、多いらしいです。
○<hr>延々とひたすら線引いてやるやつ
○<small>特殊文字を実体参照するためのタグ。インラインコンテンツなのでブロック要素で囲んであげて。特殊文字については以下をどうぞ。
○<div>→最近はあんまり使わない。<section><article>がHTML5から出てきたので、そっちがメインになってる。
○<section>⇨パーツや要素を囲うもの。このタグの中に<h1>が入れ子として必ず存在している必要がある。
○<article>⇨当該webサイト内でコンテンツとして独立しているものをくくりたい時に使用する。
○コメントアウトの多重化は不可。
こんな感じです。まあまあ1日に習う量じゃないというのがマジな感想。５分お手洗いに抜けたらもうついていけません。すげえ。
また、まさかのタイミングでついでのように
ブロックレベル要素とインライン要素についても教えてくれました。
こちらは図式でノートとったんですが、いまいちこれうpの仕方もわかんないんで、こちらも箇条書きで。
○ブロック要素は、
→<body>をたんすに見立てると、
<div>とか、<p>とか、そういうのです。
○インライン要素
→フレージング要素。
<span>とか、<em>とか。
○ブロック要素の中にほかのブロック要素、
○インライン要素として存在するタグ<em><strlng>
ブロック要素の中に放り込みましょう。
これらは文字が存在する領域のみカバーするので、
と、文字に起こすとこんな感じ。
プログラムにしてみると、出力結果は以下画像です。
上の方に書いたタグ云々の部分も反映されてます。（リストとか）
HTML/CSS-1日目
久々の投稿ですε-(´∀｀; )
今までHTML/CSSの勉強をしてきましたが（たった二回）
今回紆余曲折ありまして、職業訓練校へ入学する流れとなり( ◠‿◠ )
webデザイナー、webディレクターを目指すための講義に通いますので、その様子（？）を復習も兼ねてお届けします。
どうも内容はかなり濃厚、、、( ＾∀＾)
そのぶんついていくのが大変だそうですが、半年で詰め込めるものは詰め込んでやろうかと！↑↑
もう３日たったんですが、先日から実践的な授業に入りましたんで、今日からまたつらつらと更新していきたいと考えております。
と、いうわけで前回までの流れをぶった切って、今回より
職業訓練ブログになっちゃいます。許してください。なんでもしますから。（なんでもするとは言ってない）
とはいえ、授業自体がWebデザイナーを目指すためのカリキュラムですので、
今までと（たった二回）内容はそんなに変更ないかなと( ◠‿◠ )
--------------------------------
さて、早速昨日の授業に入ります。
HTML講座第一回（全７回）
今回は『HTMLとは何か？』から、
コーディングする上で、コードの最初に書く能書き的な部分までを学習してます。
前半は今までと内容かぶっちゃうかもですが、役に立つ知識です、多分( ✌︎'ω')✌︎
職業訓練校ではmacbookではなくwindowsマシンを使用してます。
コーディングで使用するのはbracketsというコードエディター。
現在バージョンは1.10。macでもwindowsでも無料で落とせます。
このbrackets、コード編集しながらリアルタイムでブラウザプレビューできます。
いや、だいたい他のエディターでもできるとは思うんですけども( ＾∀＾)
使ってみて思ったんですが、初心者に優しいエディターです◎
そりゃ職業訓練校にはPCに触れるのが何年振り、なんて方もいらっしゃいますので(^o^)◎
拡張機能も充実してて、書いたコードのインデントをなおしてくれたり、閉じタグを自動でつけてくれたり( ✌︎'ω')✌︎
ひとまずインストールして、開いてみます。
早速こんな画面が！！！！
これをライブプレビューしてみます。（見切れてますが、右側雷マーク）
↓
おおお、、、、ようこその説明文を早速HTMLで見せつけてくる、そのスタンス、好きよ❤️
という訳でエディターはインストールできましたんで、各自お好きな拡張機能を入れ込みまして、準備完了です。
ここまででひと段落。訓練校の先生はHTMLやXHTMLについての雑学を淡々と披露してくださいました。どうも現在までのHTMLの規格や仕様はW３Cってサイトで確認できるみたいです。リンク埋め込んどきますね。
この後、インターネット上でデータをやりとりする際の注意事項なんかを教えてもらいました。
「⚠️データの編集はローカルで行いまッシャァ」
とか、基本的なとこです。
さて、そんな話があり、HTMLに触れてみようとのことで、
この部分を理解しつつ進めると言った感じで、最終的に「今日中に覚えろ」とのことで。
いわば最初に置く「おまじない」的ポジジョン（学生時代習ったC言語ではこの部分をおまじないと教わりましたwww）
ざっくり説明すると、
<!DOCTYPE html>
⇨ドキュメントタイプ宣言、以下のHTMLはこの宣言に乗っ取って記述する必要がある。
<html lang="ja">
⇨今から日本語(Japanese=ja)で書くよ的な宣言らしい。
<head>
⇨ヘッド部分（サイトからは見えない部分）の記述用、開始タグ。
<meta charset="utf-8">
<meta name="robots" content="all">
⇨ロボット検索の対象になる許可を出します。googleとかで検索されて、自分のサイトが引っかかっても平気な時のみ。逆にNGな場合の記述もあります。
<meta name="description" content="####">
⇨スニペット部分（検索した時にタイトルの下に出てくる概要部分）の記述を行うためのコードです。今回でいうと#####の部分がスニペットに当たります。ちなみに、#はシャープではなく、『ハッシュ』と読みます。考え中の時にとりあえず入れとく文字だそう。
こんな感じです。( ◠‿◠ )
スニペットがピンとこない人、以下をどうぞ。
一通りおまじないをかけ終わったら、<h1><h2>の見出しタグや、<p>タグ、
<img ....>など閉じタグが存在しない空タグなどを簡単に説明してもらい、
SEOの観点からのタグの使い方（ちゃんとh1,h2の区別つけましょうね、h1からいきなりh3に飛んだりしないようにね等）、やっぱり独学じゃ気づかないようなところまで習いました。
途中気になった<id>と<class>の使い分けや、<em>と<strong>の違いをこっそりググりつつ、こんな感じで今回の授業は終了。
今回の授業ではHTMLの、なんだ、基礎？的な部分をですね、学びました。
では本日も授業へ行って参る！！
（あとで気づいたんですが、brackets、凝ってますね( ◠‿◠ )）
2日目 HTML−<タグ>
こんにちは。
今回から入っていきます、HTMLの序章of序章。
早速ですが、Atomを使用してhtmlを以下のように記述してみました。
上記画像に記載してあるHTMLですが、
<p class="title">Helllo,world!:)</p>
これを日本語（？）に直すと、
＜タグ 属性名＝”値”＞内容＜/タグ＞
＜/タグ＞←これを終了タグと言います。この＜タグ＞で囲まれた文章１セットを、要素と言います。
終了タグがなくて良いものもあるみたいですね。
これがHTMLを書く上での基本になる形だと思ってます。
これをブラウザで開いてみると、
無事に表示されました！( ◠‿◠ )嬉しい
ちなみにここで使用しているのは<p>タグで、文章を表すparagraphを意味しているようです。
マークアップするとその文章ごとで改行してくれるのでばり便利。
また、今回、属性名と値については、CSSの記載用につけてます。
（直接タグを指定してCSSを書いてしまうのはあまりよろしくないとのことで属性と値を指定しています。）
HTMLで直接スタイルを指定する場合もありますが、大きなプログラムになるとCSSが膨大になってしまうため、好ましくないようです。
また、値について、”（ダブルクォーテーション）を用いて囲んでいますが、これがシングルクォーテーションの場合や、ない場合もあるみたいですね。
今回は＜タグ＞について学びました。次回はHTMLを書き始めるにあたって必要なコード（頭の部分？？？）について学びます( ◠‿◠ )
