なまけもの活動日記

ゲームや音楽、サブカルチャーがすき。

12/26 インターン HTMLを楽しもう②

冬休みです。うれしい。積み本と積みゲーをやるぞと意気込んでます。

 

 さて、今回は年内最後のインターンです。HTMLも最後みたいです。

 

*タイピングについて

タイピングですが、前回よりスコアか下がってしまっていました。多分ですが、私は中指と薬指のあたりを正しく使ってタイピング出来てない気がします。そのあたりの文字でよくミスる。冬休みはこれも課題ですね。

 

*画像ファイル

jpg→写真とか。透過なし。圧縮で画像が劣化

png→背景透過あり。

gif→コマ動画にできる

 

この3つを覚えとかなきゃいけないです。jpgとpngはよく使うので、どっちの方が今あっているかなとかわかるようにならないとですね。

 

黄金比白銀比

黄金比という言葉は知っていても比率はちゃんと覚えられてなかったり、白銀比という言葉はそもそも知らなかったり。今後、なにかをデザインする機会があれば応用していきたいです。キティちゃんにも応用されていて、身近なものにも沢山使われているんだなあ、と実感しました。

 

*HTMLを楽しむ

今回は画像を動かしたり、マウスカーソルを合わせると表示される画像が変わったりするものを組みました。

<marquee>→動く

 

f:id:Oomi:20191227131703j:image

画像が変わったりするやつはながいのでスライドで。onmauseとかはUnityちょっと基礎の基礎齧ったときも見たことがあって、なるほどー!?って思いました。他のこともできそう。

 

どちらもサイトなどで使われていて、こんな風になってるんだー!と思いました。画像が変化する方は、入力ミスなどで時間がかかったので、これからサイトを作るときはそこに気をつけたいです。

 

リストは、2種類あって、

<ol>…数

<ul>…点々

の二つです。間に両方とも、<li>と打つことでリストができていきます。

 

この二つの違いは、先頭が数字か・かという違いです。改行しながらリストを作らなくていいのはめちゃくちゃいいですね。

 

また、表はこんな感じ。

<table  border=1>→後ろの1は枠線の太さ

 td→表のたて

 tr→表のよこ

 th→表の見出し部分

 

これらを組み合わせて作ります。やってみたらなんとなくわかるけど、文字だとちょっとわかりにくい。

 

コメントアウトの機能もあるみたいです。書いとくと、後で仕様変更するときとか良さそう。

YouTubeの埋め込みも、共有から簡単に出来ます。すごい。

 

*HTMLの構造

HTMLの構造としては、この形になっています。

f:id:Oomi:20191227132228j:image

 

また、ブロック要素とインライン要素にわけれます。ブロック要素の中にインライン要素が入るイメージ。入れ子構造です。

 

 

今回でHTMLの解説は終了。大まかなところは習ったので、ウェブサイトとかを参考にしながら、冬休みの間にページをつくりたいとおもいます。ちょっとずつコードの意味がわかってきて楽しい。頑張ろう。