「: hover」と「 : hover」の小さいようで大きな違い

『HTML5&CSS3 デザインレシピ集』(狩野祐東 著、技術評論社)という本を見ていたら「105 ボックス全体をリンクにしたい」という項目があり、やってみることにした。下記は例文にコピーの前に、コピー1行目を追加してみたもの。

 HTMLファイルの中身に下記のソースコードを入れ(ファイル名は「index.html」などにして)、
 
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>html5&CSS3デザインレシピ集 105 ボックス全体をリンクにしたい</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<a href=”contact.html”>
 <div class=”campaign”>
<h1>夏だから理想のボディへ<br>
入会金無料キャンペーン実施中</h1>
<p>資料請求・お問い合わせはこちら</p>
</div>
</a>
</body>
</html>

 CSSファイルの中身に下記を入れ込んだ(ファイル名は「style.css」にして、「index.html」と同じフォルダに入れるなど、PCの同じ階層に配置する)。

a {
text-decoration: none;
}
.campaign {
width: 50%;
margin: 0 auto;
padding: 20px;
background: #389bc2;
color: #ffffff;
text-align: center;
}
.campaign: hover {
background: #ff0033;
}

ところが、画面に現れたボックスにマウスをのせても(マウスオーバーしても)、ボックスの地色(文字の背景色)が変わらないのでなぜだろうと、いろいろチェックしてみたら、cssの最後の

.campaign: hover {
background: #ff0033;
}

.campaign:hover {
background: #ff0033;
}

としていなかったから、であった。

 違いは、hoverの前に空白があるかないかで、つまり正しくは

a {
text-decoration: none;
}
.campaign {
width: 50%;
margin: 0 auto;
padding: 20px;
background: #389bc2;
color: #ffffff;
text-align: center;
}
.campaign:hover {
background: #ff0033;
}

である、と。

.campaign: hover {

.campaign:hover {

の違いは小さいようで、大違いなのですね。

 このところプログラミングを勉強中で、『リーダブルコード より良いコードを書くためのシンプルで実践的なテクニック』(Dustin Boswell・Trevor Foucher 著、角征典 訳、オライリー・ジャパン)という本もちらちら見たりしていて、書けないながらもコードの読みやすさ、見やすさも少しは気にしているつもり。

 とはいえ、この場合の

.campaign: hover {

とhoverの前に少しアキをつくるのは、(私は読みやすいのでは、と思ったが)それは自分勝手な考え方だったのだろう。
 
 
 色を指定する部分のCSSは、

background: #ff0033;

でも

background:#ff0033;

でも同じように作用する(効く)のになんだかなぁ、と思うのは、たんに私があまりわかってないからなのだろうか。

 

 

 
 
 

HTML5のセクション名はシンプルでいい感じ

プログラミングをできると言ってみたものの、ほぼ独学で、大したレベルでないことは自覚している。

で、そんなレベルの私にとって、気になっていることのひとつが、ウェブサイトのデザインにおけるCSSの指定だ。で、そのCSSの指定をするために、HTMLの各要素にどのような名前をつけておくといいのか、というのが気にかかっている。CSSのクラスだ、やれIDだ、というのも気になるが、その前に整理しておくことがあるよねと思いつつ、ネットで調べていたら、「HTMLクイックリファレンス」に行き着いた。

いや、行き着いたというのは違うな。これまでの何度も見たことがあるウェブサイトなのだが、今回、私が注目したのは下記の内容である。「HTMLクイックリファレンス」中の「HTML5リファレンス」のうち、紺色の帯に白抜き文字で「セクション Sections」と書かれている部分がわかりやすい。

セクション Sections
<body>…… 文書の本体を表す
<section>…… 一つのセクションであることを示すHTML5から追加
<nav>…… ナビゲーションであることを示すHTML5から追加
<article>…… 記事であることを示すHTML5から追加
<aside>…… 余談・補足情報のセクションであることを示すHTML5から追加
<h1><h6> …… 見出しを付ける
<hgroup> …… セクションの見出しを表す、見出しをまとめる【廃止予定】
<header> ……ヘッダであることを示すHTML5から追加
<footer> …… フッタであることを示すHTML5から追加
<address> …… 連絡先・問合せ先を表す

※本当は( )でなく、< >というヤマカッコでくくりたかったのだが、このブログが表示された画面を確認すると、うまく表示できていなかったので、( )で表示させていただいた。まあ、きょうのところはお許しください。

(この部分、あとから書き込んだ)ヤマカッコが表示できなくて困っていたのだが、『HTML5&CSS3 デザインレシピ集』(狩野祐東 著、技術評論社)という書籍のP.100(042 HTMLで使用できない記号を表示したい)を見て方法がわかったので修正した。他にもいろいろ役立ちそうなので、同書については下記にリンクを貼っておこうと思う。

簡単な個人のサイトなら、まずはというか、立ち上げ時期くらいなら、上のセクション名を使えば、各セクションの名前はほぼ、ことたりるのではないだろうか。「HTMLクイックリファレンス」のここ(HTML5のページ)に出ているので、私のようなレベル、つまりウェブサイトのアップロードの手順くらいはわかっていても、初心者のレベルから中級者のレベルになかなか進めない人は見てみてもいいだろう。

ウェブサイトのトップページということに限定するなら、作りにもよるけど、プライベートなウェブサイトのようなもので、最低限のシンプルな構成でよし、とするなら

・ヘッダ(header)
・ナビゲータ(nav)
・セクション(section)
・アーティクル(article)
・アサイド(aside)
・フッタ(footer)
・アドレス(address)

くらいで、最初のうちはいいのではないだろうか。具体例があったほうがわかりやすいだろうから、自分のサイトなどを何かを例に挙げながら、そのうち、この続きを書いてみようと思う。
 
 

 
 
 

56歳からコードを書き始めて食べていく方法、というブログに刺激を受けて

 
 ある人のTwitter経由で知ったのだが、この「56歳からコードを書き始めて食べていく方法」というブログに大いに刺激を受けた。これは、ログインしないと読めないかもしれないけど、年齢を理由にいろいろ諦めかけている人に読んでもらいたいと思う。

 実は、僕もプログラミングがいま以上にできるようになりたいと思っていた。いや、過去形でなく、現在もそう思っている。僕の場合、「コードを書き始めて食べていく」とまでは正直、考えていなかった(もちろん、簡単なことではないだろうが、食べていけるのならそれもいいとは思う。重ねて言うが、簡単なことではないだろう。

 そもそも、僕の場合はプログラミングを学ぶことで何をしたいのか。きちんとまとめてこともなかったが、順不同で書いてみる。

・www.okulab.com(オークラボ.com)というWebメディア(現状ではメディアと言えないけど)をもっと頻繁に更新したい。スマホで見られることに主眼を置き、レスポンシブ対応にする。

・www.okulab.com(オークラボ.com)の中に、私が運営している広告・企画オフィス「baseball(ベースボール)」のページをつくる。オフィスの簡単な紹介、作品ページ(ポートフォリオ)をつくる。

・www.sketcheese.com(スケッチーズ.com)という、「絵が好きな人のためのサイト(絵を描くのが好きな人、絵を見るのが好き人などのためのサイト)」を立ち上げる。スマホで見られることに主眼を置き、レスポンシブ対応にする。

(その他)
・iPhoneアプリを企画・開発したい。
・LINEスタンプをつくりたい。これについては、すでに「のんびり屋のポブー」という、ブタさんのスタンプを作成してリリースしているが、次は「動くスタンプ」をつくりたい。

 上記のために身につける必要があるのは、
・HTML(HTML5)
・CSS(CSS3)
・JavaScript

・Swift

などだろうか。
ソフトウェアでいえば、ある程度使えたほうがいいのは、
・Adobe Dreamweaver
・Adobe Photoshop
・Adobe Illustrator
など。

あとは、オークラボ.comのコンテンツとして、動画も出てくるだろうから
・Adobe Premiere Pro
・iMovie
など。

DTMで音楽を作成できるDAW(Digital Audio Workstation)の
・GarageBand
など。

まだ書きたいけど、ここにいろいろ書いても
机上の空論で終わってもしょうがない。

だから、今回書くのはここまでにしておき、
あとは、プログラミングに取り組みながら、
学びながら手を動かしながら、
その都度、書いていこうと思う。
 
 

HTML5のDOCTYPE宣言

 

 
HTML5のDOCTYPE宣言は、とても簡単。

だけ。

このDOCTYPE宣伝を最初に入れておけば、ブラウザはこのウェブサイトはHTML5で作られているんだな、とわかるのだろう。シンプルで素晴らしい。
(ちなみに、上記の画像はグーグルの「ブラウザやウェブについて知っておきたい20のこと」というサイトのトップページ。真ん中の上の四角形は、トップページのソースを表示し、DOCTYPE宣言が入っているあたりの文字が見られるしたもの)

今まではどうか。

たとえば、人気サイトの¥「ほぼ日刊イトイ新聞」の(ホーム画面の)場合、

となっている。このほぼ日のDOCTYPE宣言はとりたてて長いわけでなく、一般的なものだと思うが、それと比べても

は、ものすごく短いのがわかるだろう。

話が前後するけど、DOCTYPE宣言というのは、ウェブサイトを作成する際、HTMLソースの最初に入れる決まりになっているもの。

ほぼ日のindexのトップhttp://www.1101.com/index.htmlには、DOCTYPE宣言は入っていない。だから、絶対に入れないといけないわけでないのかな。

まあでも、たいてい、ウェブサイトのソースの先頭に、DOCTYPE宣言が入っているはずだ。