未経験からでもWEBエンジニアになれるブログ(さぼり気味)

可能な限り楽して生きていきたい。好きなものだけ食べて痩せたい。控えめに行っても玉の輿乗りたい。ほんとはプライベートブログにしたい。何もしてないのに尊敬されたい。家から出たくない。

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では必須で、

画像説明用のポップアップ、または画像がトラブルにより表示されない場合の代替テキストでしたが、今では画像タイトルだけでなく、画像があらわすものを文章として表す必要があります。

 

googlebot検索およびSEOの対策のため、

<...alt="ユニーク値">←地名や商標、固有名詞

といった記述が好ましいそうです。


---------------------------------------------------------------

 

次は画像形式について。

 

 

JPEG,PNG,GIFなんかはよく耳にしますが、
どう違うのか、ざっくり説明します。

 

 


JPEG
[長所]
色数が1677万色のフルカラー、パソコン搭載のすべての色が使えるそう。
また、日本人が大好きな質感重視のグラデーション表現が得意。

[短所]
角版のみ。切り抜き不可。静止画のみ。

 

角版って、四角形ってことです。
要するに、容量も標準的なので、角版画像のみであれば使いやすい。

 

【GIF】
[長所]
切り抜き可能。コマ送り単位だがアニメーション可能

[短所]
色数が少ない。(256色まで。)
質感はカバーできない。

 

色数を使わない小さめのアイコン(アクセントグラフィック)や、ちょっとしたアニメーションに向いている。

 

 

PNG
[長所]
サイズを問わず、切り抜き可能。グラデーションも得意。透明度の概念もあります。

 

[短所]
データ容量がでかい。

 

 JPEGとGIFの良いとこ取りな感じのPNG。最近はスマホに完全対応したHTML5にあわせ、広く普及してきています。ただ、容量がでかい。

 

 

ニーズにあわせてこの3つを使い分けていきましょう。

 

 

--------------------------------------------------------------

 

 

さて、画像参照のやり方について、

 

<img src="パス名/画像名".....>


ソース部分について、パス名の参照のやり方がややこしい。

 

ソースコードがないとやっぱりわかりづらいので、

練習したプログラムとその結果を見ながら復習していきます。

 

 

まずは普通に画像を参照してみます。

f:id:mocha0426:20170718230222p:plain

 

結果がこちら。

 

 

f:id:mocha0426:20170718230231p:plain

 

 

alt部分において記載した説明文は、

 

f:id:mocha0426:20170718230227p:plain

こんな風に反映されます。

 

 

 

 

次はややこしいパスの参照方法。同一フォルダ内に画像がなかったり、別の場所から参照対象を引っ張ってきたりする必要がある時。

プログラム内部にコメントアウトで詳細を記載してます。

 

フォルダの参照先は画像左側にあるフォルダツリーが視覚的に階層を表してくれているので、わかりやすいかも。

 

f:id:mocha0426:20170718230424p:plain

 

練習でいくつか作成してます。

f:id:mocha0426:20170718230657p:plain

f:id:mocha0426:20170718230727p:plain

 

編集中のコードを保存してあるフォルダを基準とした時、

../⇦こいつがつまり、編集中のフォルダの1つ上の階層のフォルダをさす。

../../⇦これだと2つ外。

ただの/だと、1つ下の階層を指しちゃうので注意。

 

 

---------------------------------------------------------------

 はい、次は

 

アンカータグを用いたリンクの作成

 

<a href="(リンク先).html">リンク先へ</a>

 

中身の"(リンク先).html"は例なので、真似しないでね

 

これをアンカータグといい、リンクを作成するときに使用するタグ。


リンクの参照方法は以下実際に作成したプログラムを見ながら復習します。

 

ぶっちゃけやりかたはimgの時と同じなので、

 

同じです。

 


hrefはhyper reference(ハイパーリファレンス)の略で、ここでリンク先を指定してあげます。

 

これもフレージングコンテンツなので、ブロック要素でくくりましょう。

 

 

f:id:mocha0426:20170718231919p:plain

 

結果はこちら。

f:id:mocha0426:20170718231947p:plain

 

 

また別のindexにおいて同じようにリンク付けしてあげることで、

f:id:mocha0426:20170718232021p:plain

 

 

f:id:mocha0426:20170718232110p:plain

f:id:mocha0426:20170718232122p:plain

この延々とリンクを回り続ける無限ループに陥ることができます。

 

 

 

このリンク参照において出てくる単語がこちら、

 

[相対パス]
自身のPC内の行き先を示す。
住所で言うと「うちから見て2件となり」みたいな表現。


[絶対パス]
他サイトへのリンクなどがこれにあたる。
住所で言うと緯度と経度で特定する感じ。google map使う的な感じ。

 

 

<a href="yah○o.co.jp" target="_blank">

 

target="_blank"があれば別タブで開くことができる。
他にも_parentsとか_selfとかあるけど、SEOの観点から実際には使われません。らしいです。

 

 


----------------------------------------------------------------------

 

はい、今回の授業はここまででした。

 

人の金で牛タン食いたいです。

 

また明日!