SELF-SERVICE

  

だいぶん前に読んだのに紹介してなかったので。


HTML解体新書-仕様から紐解く本格入門

htmlの見た目ではなく、文書構造を正しく作るための「仕様書」的な本です。
htmlのタグの意味や構造上の仕様などを詳しく紹介されています。
htmlの仕様は普遍的ではなく、常に見直され、解釈が変わっていくものではありますが、ベースとしての仕様を知るにはすごくいいものでした。

すべてのhtmlコーダーに読んでほしいけど、あんまり気にしてない人は読まなくてもいいのかな。
個人的には大満足な一冊でした。  

印刷の世界では、
・ゴシック体：見出しや写真のキャプション、リスト等で使う書体
・明朝体：読んでて疲れにくいので本文で使う書体
という認識でしたが、Webなどのスクリーン系だとそれが逆になるようで。

ゴシック体というのは、小さなサイズでも読みやすいというのが特徴で、Webの場合、本文が一番小さな文字になるので、本文はゴシックというのが定番になります。

明朝体は小さなサイズで使うと細い横棒が視認できなくなり読みづらくなりますが、大きなサイズで見出しで使うと、ユーザー側に強く情報を伝えることができます。

……というのをデジハリの卒業制作チェックで伝えていたのですが、今朝のJアラートでそのいい例がありました。


「国民保護に関する情報」という大きな見出しは明朝体で目立たせ、きちんと読ませたい本文は小さな文字でも読みやすいゴシック体になっています。  続きを読む

映像の講師の影響のようですが……。

<header id="header" class="header">

のようなID、class指定をされていることがあります。

そもそも、<header>タグは、多くのコーダーが<div id="header">のような記述をするので、それなら……ということでできたタグなので、<header id="header">というのはちょっとナンセンスな気がします。
「<div id="header">＝<header>」と理解していいと思っています。
なので、<header>だけで十分だと考えます。（footerも同様です）

それで、例えば、
<header id="header">
に対して、
.header {
width: 100%;
height: 50px;
}
としていた場合、
<header>
に修正したら、
header {
width: 100%;
height: 50px;
}
にするだけなので、大きな修正はありません。


じゃあ、<header>にIDやclassを指定することはないのかというと、例えば、トップページと下層ページで違う見た目のヘッダーにしたい場合に指定します。例えばトップページは<header id="top">で、下層は<header>とか。
下層にもid="page"みたいにかけてもいいし、下層にだけIDかけて、トップはかけないというやり方でもいいのですが。

結局のところ、「個別になにか指定するためにIDやclassをかける」という基本を覚えておけば、こういう無駄なIDやclassをなくすことができます。
あと無駄なdivとかも防ぐことができますね。  

IDは「ページ内で一回しか使わない『強い指示』」、classは「ページ内で複数回使える弱い指示」と考えてください。
まだ<header>タグがなかった時代は<div id="header">と書くことが多かったのは、ヘッダーはページに1つしかないからです。ページ内の唯一無二なものについてはIDを使います。
classはページ内で何度も使えるものです。同じ見た目の枠とかを作る時にclass指定をすると便利です。
classよりIDのほうが強いので、
<div id="hoge" class="hogehoge">
に対して、
#hoge{margin:10px;}
.hogehoge{margin:30px;}
とした場合、IDの方が強いのでmarginは10pxになります。
※というか、一つの要素に対してIDもclassも設定することってあるかな……。  

最近、スタジオ佐賀の卒業制作でよく見かけるのがclassの多用。
classの設定自体は悪くないけど、省略可能なclass設定が非常に多いように思います。

例えば、
<ul class="list">
<li class="list_child"><a href="#">aaa</a></li>
<li class="list_child"><a href="#">bbb</a></li>
<li class="list_child"><a href="#">ccc</a></li>
</ul>
とある場合なら、liにかけているclass="list_child"はあまり意味がないかなと。
この場合、cssのかけ方としては、list_childにかけていたcssをul.list liに対してかければ解決します。
※ul.list li　は、「class="list"が設定されたul　の中のli」という意味ですね。

そうすると、htmlがシンプルに
<ul class="list">
<li><a href="#">aaa</a></li>
<li><a href="#">bbb</a></li>
<li><a href="#">ccc</a></li>
</ul>
で済むわけです。
こうすることで、htmlがシンプルになるので、htmlのコーディングが楽になり、修正もやりやすくなるかと思います。
classのかけ忘れでレイアウトが崩れることもないですしね。

じゃあ、どういうときにclassをかけるかというと、
<ul class="list">
<li><a href="#">aaa</a></li>
<li class="active"><a href="#">bbb</a></li>
<li><a href="#">ccc</a></li>
</ul>
のように、特定のものに対してだけ特別な設定をしたいときとか。
例えば上の例でいうと、classでactiveにしているものだけは、背景を赤にする……とか。
要素全部にclassかけていくのは面倒だし、ミスの原因にもなりそうなので避けたいところです。  

Google Fontsに日本語が…ってのを見て、あぁWebフォントが正式リリースされたのね…って思ってみてたら、ダウンロードできる（インストールできる）フォントでした。

https://fonts.google.com/?subset=japanese

ってことは、ダウンロードしてPhotoshopでデザインに使って、htmlで実装する時にWebフォントで指定すれば、そのままの形で見えるようになるってことかな。

Google様なのでいつサービスが止まるかわからないけど、これは試してみたいですね。  

Webフォントを使うことで、MacでもWindowsでもブラウザが違っていても同じフォントでWebサイトを表示させることができます。
Webフォントについてはwikipedia（Webフォント）を参照。

さて、Webフォントですが、有料のものから無料のものまでいろいろとあります。
手軽に始めるのなら無料のものから……と思うと、Googleが提供しているものがよろしいかと思います。

Google Fonts + 日本語 早期アクセス

使い方は、リンク先を参照してほしいのですが、head内にlinkの記述を追加するのと、cssの設定を加えるだけです。

組み込むことでこんな感じでWebフォントを使うことができます。


日本語フォントの選択肢は少ないと思いますが、欧文フォントだと選択肢も多いと思います。
Googleの欧文Webフォントというのもありますし。

手軽に使えるものなので、必要に応じて使ってみてください。