「: 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;

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

 

 

 
 
 

カテゴリー: book, html5, noncategory | コメントは受け付けていません。

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)

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

 
 
 

カテゴリー: book, html5, noncategory, programming | コメントは受け付けていません。

AIは人間を目指すのか、人間を超えるのか

 
 清水亮さんのブログを読んでいて考えたのが、「AIは人間をめざすのか、人間を超えるのか」ということ。

 最近、AI(人工知能)が話題になっていることを私も感じている。AI(人工知能)が人間を超えるシンギュラリティは、2045年に起こるともいわれている。

 では、このときの人間を超えるとはどういうことか。いや、その前に超えるためには、どこまでも近づかないといけないだろう。マラソンだって、前を走っている選手を追い越そうと思ったら、まずはその選手に追いつかないといけない。

 そもそも、人間とは超えなければいけないものなのか、という気もする。人間は不完全だし、物忘れもするし、うっかりミスもするし、年をとると体力や気力、記憶力などが衰える(人が多い)。

 では、まず人間的なAI(人工知能)をめざすには、そのような「年をとると衰える」機能を盛り込むのか。その必要があるのか。そうしたほうが、たしかに「人間的」なのかもしれない。

 だとすれば、人間に近づくとはミスをしたり、忘れたり、うっかりしたりすることなのだろうか。そういったことが(自然に)できるようになったAI(人工知能)があったとしたら、人は「人間らしいAI(人工知能)だな」と言うのだろうか。仮に言ったとしても、それはホメ言葉なのだろうか。「ダメなAI(人工知能)」というレッテルを貼られるようなものなのか。

「人間を超える」ことを目指すとしても、では、その場合の「人間の定義」は何か、どういった存在で、どういったことができて、どういったことができないのを人間というのか。

 そのようなことから考えないといけないのではないか。もちろん、そのようなことを考えてAI(人工知能)の開発に取り組んでいる研究者やプログラマーなどもいるのだろう。まずは、そういったことを調べてみる必要がありそうだ。

 そして、まだ調べたわけでもないが、人間を超えるとは、もしかしたら究極的には神に近づくということなのか。仮にすだとすると、深層学習(ディープラーニング)によって進化し続けたAI(人口知能)とは、新しい神のことなのか。New God

 いや、そうとは思えないし(今のところ)、私の考えはどこかで間違っているのかもしれない。こう書いていたら、深層学習(ディープラーニング)によって、AI(人口知能)はどこを目指すのか、大いに気になってきた。

 ボブ・ディランの名曲「風に吹かれて(Blowin’ in the Wind)」ではないけれど、答えは風の中なのか。

 その答えを、AI(人口知能)に聞いてみるべきなのか。
 
 
 

カテゴリー: noncategory, thinking | コメントは受け付けていません。

ヒアリにヒヤリ

 
 ヒアリにヒヤリ。なんて、だじゃれを言ってる場合ではない。南米原産のアリ「ヒアリ」が、神戸港のコンテナヤード(コンテナの受け渡し、集積、保管をする場所)のアスファルト舗装にできた亀裂で、約100匹見つかった。ヒアリは猛毒で持った針で何度も刺すほど攻撃的で、人が刺されると死に至ることもあるという。

カテゴリー: noncategory | コメントは受け付けていません。

走ることでより健康に

 
 午前中、血液検査の結果を聞き、医師からジョギングをすすめられ、3kmほどだがひさしぶりに走った。それ以外は問題ないということだったので、ときどき、時間をつくって走ろうと思う。医師いわく、「走れるときに30分から1時間。距離やタイム、スピードなどを特に気にしなくてもけっこうですが、少し息が上がるくらいの走り方で」とのことだった。ジョギングの体重、67.6kg。BMI指数22を理想とすれば、目指すは、59.1kgとなる。
 
 
 

カテゴリー: noncategory, sports | コメントは受け付けていません。

イライラよ、さようなら

 
 イライラすることがあって、早朝からナチュラルローソンへ。マウンテンバイクを漕ぎ、隅田川を眺めるうちに、かなりイライラは解消された。人間というのは単純なものだ。いや、私が単純なだけか。
 ローソンのマチカフェ・コーヒーを飲みながら、トブラローネ ミルクを食べる。Audibleで石田衣良さんの「フォーティ」を聴く。
 かなり面白く、次へ次へ、と気になるが、あまりのんびりしてはいられない。パソコンを開いて、仕事を進めることにする。
 

 
 

カテゴリー: book, noncategory | コメントは受け付けていません。

WordPressブログの写真サイズ変更

 
 前回の投稿から、写真のサイズを変えてみた。というのも、前々からもうちょっと画像を大きく表示したいと思っていたのだが、方法が分からなかったのである。
 いや、その方法について考えていなかった、というべきか。
 
 で、今回やってみたのが、単純に画像のサイズを、HTMLソース上で大きくする方法。僕が使っているワードプレスのブログではもともと、

 width-“300” “heght=”225”

となっているのだが、それがこちら(下記)。

 
 で、もう少し大きくしたい、1行の文章の左右幅に画像の幅をできるだけ合わせたいと思い、そうするために、「投稿の編集」のページを見て、画像サイズをそれぞれ1.8倍の

 width-“480” “heght=”405”

にしてみた。つまり、
幅300px(ピクセル)から420pxへ、高さ225pxから405pxへ拡大、というわけだ。

 で、その1.8倍拡大した画像がこちら(下記)。
 

 
 WordPressの画像サイズについて、一度アップしたブログの画像(写真やイラストなど)を後から変更することもできるので、興味のある人はやってみてはいかがですか。
 
 
 

カテゴリー: illustration, noncategory, photo, sketch | コメントは受け付けていません。

鬼平太も読める『深川福々』46号

 
20170417_fukapuku46
 
 フリーペーパー『深川福々』(第46号)、絶賛配布中(って、配布スタートからちょっと日数がたってしまいましたが)。深川にお住まいの情報デザイナー アンドレアス・シュナイダーさんのインタビューをはじめ、魅力いっぱいで、深川界隈マップ付き。私の4コマ漫画「鬼平太生半可帳」もあったりして、ぜひお手にとってお読みください。配布場所については、こちらの『深川福々』公式ウェブサイト(WEB版)をご覧ください。
 


 

カテゴリー: comic, noncategory | コメントは受け付けていません。

「いつやるの?」「今でしょ」は普遍的ないい言葉

 今朝、自分のfacebookページを見たところ、4年前に自分がこんな書き込みをしていたことを思い出した。いや、思い出したというより、ほとんど忘れていた。

 数年前に流行った「そんなの関係ねえ!」は、社会とのコミュニケーションを拒絶しているようなニュアンスが感じられ、あまり好きになれなかったが、最近の流行語(といっていいかな)「いつやるの?」「今でしょ」は前向きな気がして、けっこう好感を抱いている。

 で、こんなことを書いていたのか、と思いながら、次のようなことをfacebookに添えた。
 
 4年前にこう書いたのか。「いつやるの?」「今でしょ」はすでに流行語でははないが、自分に言い聞かせるのに、普遍的ないい言葉かもしれない。
 
 

 上記のように書いたのは今朝で、いまは夕方。あらためて見ても、シンプルでありながら、モチベーションを上げたり、すぐに行動することを促したりするのにいい言葉だと思う。
 
 
 

カテゴリー: noncategory, thinking | コメントは受け付けていません。

成功するための才能とは「行動する能力」のこと

 
 妻のコートなどをもらいにクリーニング店への向かいながら、Audible(amazonの音声サービス、ということでいいのかな)でマイケル・ボルダックの『達成への科学』を聴きはじめる。
 まだ途中なのだが、成功哲学の祖といわれるナポレオン・ヒルの言葉「願望とは、すべての富の始まりである」が耳に残り、メモをとる。
 また、マイケル・ボルダックが初めて訪れたセミナーで耳にしたという「勝者とは生まれながらでなく、つくられるものだ」も印象的だ。
「成功とは学ぶことのあるスキルである」も、マイケル・ボルダックが大金をはたいて足を運んだ、4日間のセミナーのタイトルだという。

 というような音声を聴きながら帰宅した私は、書棚にあったある本を思い出し、ページを繰った。そこにはこんな言葉が書かれていた。

 めざましい成功を収めている人を目の当たりにすると、きっと何か特別な才能に恵まれた人に違いないと思いがちだが、それは心理的な罠にすぎない。
 もっとよく見てほしい。そうすれば、大成功した人たちが、普通の人にはないものを持っているとするなら、それは行動する能力だとわかるだろう。それは誰もが自分の中に持っている「才能」であり、いくらでも伸ばすことができるものだ。

 これは、アンソニー・ロビンズ著『世界No.1カリスマコーチが教える 一瞬で自分を変える法』(本田健さん訳、三笠書房)に収められている言葉。
 
 これを、こうやってブログに書き写していると、なんだか自分の中にエネルギーが増えてくる気がする。気がするだけかもしれないし、私は単純なだけかもしれないが、それでもいいだろう。思い込みはエネルギーになるはずだから。そう、これも根拠のない自信のひとつかもしれない。

 

 
 
 

カテゴリー: book, noncategory, thinking | コメントは受け付けていません。