【180505】2週間の報告 ～CSSはじめました～
はじめに
また遅れちゃいました。ごめんなさい。更新曜日を木金にすれば、この失敗もなかったことになるのかなとか考えました。今回土曜更新なんで関係ないですけど。ごめんなさい。もしもう一度遅れるようならば、メインの更新を木曜に、事前に準備できたなら水曜に変更します。
【追記】前回遅れたときも土曜日に更新してました。本当にありがとうございました。
遅れた理由としては、2日に「Deemo」を買ったことが挙げられます。何年も前から言われ続けていることではあるんですが、めちゃくちゃ曲がいいのと譜面もかなり楽しいのでやり続けました。作業に影響が出ない程度で楽しみたいと思います。Deemo、いいですよ。
さて、真面目な話に入りますが、前回のブログでは、僕がやったこと(方法)を紹介しそのレビューみたいなことを書きました。しかし、一番重要な学んだ内容については殆ど触れていませんでした。
ので、今回以降は2週間で学んだことについて、多少の知識がある人が見たときにわかる程度にまとめてみようと思います。
なお、初心者が書く内容ですので、間違っている部分も出てくると思います。それを見つけたときは、できる限り、ブログのコメントかTwitterで報告してもらえるとめちゃくちゃありがたいです。ぜひよろしくおねがいします。
やったことまとめ
この2週間は前回紹介した本を読み進めていました。具体的にはSTEP8～13の途中までです。その間で学んだことをまとめます。
なお、前回学んだことを軽くまとめると、
・HTMLの書き方
・いろんなタグ
・ツリー構造
です。できれば5月中に、このことについてまとめたいですね。
HTMLの勉強
動画・音声の挿入法
上で書いていますが、前回学習したことはふっとばします。いずれまとめるのでそれを読んでもらえるとわかると思います。書いたらリンク貼ります。今回は前回の学習内容がわかっている体での説明になるので、わけわかんないよばーかってなると思います。ごめんなさい。
さて、動画と音声の挿入方法ですが、それぞれ固有のタグを使います。それは動画が<video>、音声が<audio>です。
使い方としては、音声や動画のあるファイルを指定する、ただそれだけです。imgタグと似たような感じですね。属性もimgタグとおなじでsrc属性でファイル先を指定できます。また、どちらも終了タグが必要です。
画像のpタグは、要素内容の通り、音声が再生できなかったときに出てくる文字を書くときなどに使います。動画の場合も同じです。詳しくは後で説明します。
また、audio/video要素に使える属性は他にもあります。全ては書ききれないので、使いそうなやつだけまとめます。
・src属性
上で説明しましたが、ファイルを指定するのに使います。
・controls属性
これは動画や音声の再生や一時停止などができるインターフェースを表示できます。
・wigth・height属性
これはvideoタグで使います。動画の大きさを指定できます。が、cssでも指定できますし、cssで書けば全てのvideoタグに作用するので、そっちのほうがいいかもしれません。強い人教えてください。
こうしてスルッと書きましたが、1つ問題があります。それは、使えるファイルの形式がブラウザによってちがうことです。例えば音声の場合、Chromeは基本どれでもできますが、IEだとWAB形式が使えないなどです。こういうときにpタグの文字が出てきます。
それを解決する方法として、複数のファイルを指定することが挙げられます。そのときに使うのが<source>です。
audio/video要素の子要素にsource要素を書き、src属性でファイルの指定、type属性でMIMEタイプを指定することで、ファイルを指定できます。終了タグは不要です。MIMEタイプとは、どんなファイルかやファイルの形式について表す方法のことです。type属性を書いておけば、ファイルではなくそっちを見て形式を判断します。このsourceタグを連ねて書くことで複数のファイルを指定できます。
複数のファイルを指定した場合、上から順番に見ていきます。画像の場合、mp3形式から最初に見て、次にwebm形式を見て、ここまでで表示できるものがなかったらpタグの要素内容を表示するという感じです。動画も同じです。
余談ですが、chromeを使っているはずなのに動画が表示されないという事が起きました。ファイル名やタイプの指定方法も間違っていなかったので、なぜなのかわかりませんでした。が、後日ソースを確認したら、要素名をmoviesという存在しない要素にしていました。みなさんも気をつけましょう。
CSSの書き方・基本的なこと
上の説明が思った以上に長くなって、書いててきつくなってきたので、簡潔に説明します。より詳しい説明はぐぐったら沢山の人がしているのでそちらを見てください。
CSS(Cascading Style Sheet)とは、HTMLを装飾する言語のことです。例えばですが、pタグで書いた文字って黒で面白くないですよね？
それを
こう書くだけで、
こんな感じの派手な字に変えられます。
他にもただのHTMLだけでは単調なものも、CSSを書くことで、見やすく、見ていてとても楽しいサイトを作れます。基本的にすべての人気なサイトはCSSで装飾されています。
そんなCSSの書き方ですが、
セレクタ{プロパティ: 値;}
のようにして書きます。それぞれについて軽く説明します。
・セレクタ
見た目を適用する対象を表しています。HTMLのタグ名だったりを書きます。
・プロパティ
見た目の変更点を表しています。例えば、最初のCSSのコードのcolorプロパティでは文字の色を変更できます。他にも、文字の大きさや背景色など様々なプロパティが規定されています。
・値
プロパティで書いた点について、具体的にどのように変更するかを表しています。この部分には、プロパティによって書ける内容が決まっており、そこを間違えると正しく反映されなくなります。文字の大きさのこと言ってるのに「赤」って答えても、は？ ってなるだけだよねって話です。
これをたくさん書いて修飾していきます。この説明ではわからなかったかもしれませんが、実際に書いてみればわかっていくと思います。CSSやHTMLは書いたことがすぐに反映されるので、実際に勉強していて、わかりやすいし納得しやすいです。
上のCSSのコードを見るとわかりますが、選択したセレクタに対しては、1度に複数のプロパティ・値を選択できます。記述を少なくできるので楽ですね。
そのCSSの適用の仕方には、3つの方法があります。
1つ目はHTMLのheadタグの中にstyle要素として書く方法です。
このように、そのまま書きます。簡単ですね。
2つ目はタグの中にstyle属性として書く方法です。普通に属性を書くように「style＝””」と書いて、ダブルクォーテーションの中に上と同じように書きます。
3つ目はHTMLファイルとは別にCSSのファイルを作り、そこに書く方法です。拡張子が.cssのファイルを作り、そこに記述していきます。このとき、headタグの中に、link要素でスタイルシートのファイルを適用させる記述をしないと反映されないので、注意が必要です。
この3つの内、基本的に3つ目を使うことが多いです。理由としては、後から見直したときに見やすいこと、編集しやすいこと等が挙げられます。
で、こうやって3つの方法を挙げたわけですが、もちろん違いがあります。それは優先度の違いです。
HTMLは上から1行ずつ順番に読んでいきます。そのため、上で書いていたことでも、下で書き直せば上書きされます。だから、下に書いたものほど優先度が高くなります。
ので、３つの方法で優先度を大きい順に並べると、2＞1＞3になります。もしそれ以外に違いがあったら教えてください。
他にも規則はまあまあありますが、書ききれないので自分で調べてください。
ボックスモデルについて
これについてなんですが、上でstep13の途中って書いているように、まだ終わっていないんですね。また、説明できるほどよく理解できていないので、まとめられる程度に理解できるようになったら、別で記事を書きます。説明しようとするとかなり長くなりそうな感じがするんですが、いい感じでまとめられるようにがんばります。
最後に
いい感じにまとめられたんじゃないかなと思います。大部分は本を参考にして、一部ウェブから補うという形でまとめたつもりです。なにか意見等がありましたら、いつでもお待ちしています。
今のところ2週間に1回で更新してますけど、それに加えて何か書けたらいいですね。今回書いてて、以前やったことを再確認できてよかったと思います。
ただし、長くなるので、書いててかなり時間がかかりますね。このブログを書くのに数日かかってます。遅れたのも仕方がないですね。ブログ自体は続けたいんですけど…。それなりの時間が取られてなかなかにきついので、なにか思いついたらやるかもしれないです。
次の2週間では、とりあえずこの本を読破するのと、やってみたいことがあるのでそれをできたらと思います。
ここまでご覧いただきありがとうございました！ ぜひ次回もみていただけると嬉しいです！ さすがに次回は遅れないようにします！
