初めてのHTML5+CSS3で簡単だったこと 難しかったこと

冬は撮りたいと思える被写体がなくて篭ってます。
たまに遠出するとガタガタです。
雪の東京で遊んで新潟に帰ったら、インフルエンザBで一週間寝込みました。
人生初のインフルはキツかったです。
気力も体力も持っていかれました。

回復してきたところで、食をテーマにしたHTMLサイトを作ることになったので、折角だからHTML5とCSS3で作ってみました。
サンプルはコチラ
IE対策をしていませんので、GooglechromeかFirefoxで見てください。

ご覧の通り、トップページがすごく寂しくて、どこにリンクがあるのかもよく判らない不親切サイトです。
いりぐちをクリックするとメニューのあるページになります。

この体裁でピンと来た人はお仲間ですね。
いつか東京でニアミスしましょうw

さて私のHTML歴なんですが、xhtml+CSS2のサイトをかれこれ6年ほど、ちまちまと更新し続けています。
HTML5+CSS3は初めてで、DOCTYPE宣言も知りませんでした。
まずはそこからグーグル先生に訊く状態でのスタートでした。

検索トップに出てきた HTMLクイックリファレンス
HTML5でマークアップしてみようを見て驚き!
なんて短い宣言!そして文字コード指定!
そして調べていくとtype=”text/css”とscript type=”text/javascript”も不要!!
なんてスッキリてるんでしょう!!
しかも無理してdivを使わなくてもいい「セクション」なるものがあって超便利。
divをdivで囲ってさらにdivで何が何やら…という状態が少し解消されますね。
(いつも自分でつけたidやclassを誤認する)
そんな訳で、HTML5は初心者向けの基本的な解説をいくつか読んで、どうにかなりました。

次はCSS3です。
サイトの見た目を整えるにはコレが必要不可欠。

このサイトでやりたかったことは

  • フルスクリーンの背景画像
  • 背景画像を見せつつ読みやすい表示を心掛ける
  • どのページにいるのか判りやすい表示を心掛ける
  • トップに戻るボタンを実装する
  • Lightbox系画像ポップアップを実装する

です。

結果的にすべて実装できましたが、Wordpressの経験上「トップに戻るボタンを実装する」「Lightbox系画像ポップアップを実装する」はjQueryなので、一度もjavascriptをやったことがないため、最悪諦めるつもりでいました。

フルスクリーンの背景画像

たまご

WordPressテーマや、主に海外で配布されているHTML5テンプレートではよく見かける、ブラウザ幅に合わせてリサイズされるフルスクリーンの背景
ご飯写真をドン!と表示させたかったので、あれがどーーーーしてもやりたくて調べました。
いつもお世話になってるサイトさんが沢山出てきましたので、そちらをいくつか参考にして、実装できました。
参考:背景画像を画面サイズに合わせて表示するCss

背景画像を見せつつ読みやすい表示を心掛ける

これもWordpressなんかでよく見かける半透明の背景を使えば、うっすらと背景画像が見えつつ文字も読めるハズ…
おお!opacityなるものを使えばいいんだな!!
………ここで最初の躓き
背景と一緒に文字も半透明になるんですけど…

これopacityではダメで、backgroundをrgbaで指定しないと文字をそのままに出来ないんだそうです。
参考:CSSで半透明、opacityとrgbaの違い

そして私はここでInternet Explorerの全てを捨てる決意を固めたのです。
一応表示されるようにHTMLにおまじないを書いてますが、ぶっちゃけもうどうでもいいです。
IE爆発しろ

どのページにいるのか判りやすい表示を心掛ける

表示しているページのメニューだけ色や画像を変えれば「今ここを表示してるんだな」と判ってもらえると思います。
大手サイトでもやってますよね。
CSS2でメニューのタグをページごとに変えてやってきたので、コレは面倒だけど出来るなあと思いつつググったら、bodyとlistにタグをつけて識別するというのを見つけました。
参考:CSS でナビゲーションを強化する方法
この方がメニューのリストタグがキレイで見やすいです。

これでCSSで最低限やりたいことが実装できました。
これで調子に乗って
角を丸くしたり、マウスオーバーでアニメーションさせたり好き放題やりました。
が、ここで二度目の躓き。
なぜかGooglechromeでグラデーションが表示されない!!
色んなサイトを参考にしても実装できない!!
Firefoxではグラデーションになってるのに!!
………ということはchromeの問題なんだな、と思ってchromeに絞って調べた結果がコチラ。
もうチュートリアル記事には -webkit-gradient() 書かなくてもいいんじゃないかな

工エエェェ(´д`)ェェエエ工

最新のchromeは記述が違うのかよおおおおおお
という訳でコチラのように記述したところグラデーションが表示されました。

でもじゃあ何で私のブラウザで色んなサイトのグラデーションが表示されているんだろう?
謎は解けませんが放って置くことにします。

次は難関jQueryです。
Wrodpressではダッシュボードでプラグインをインストールすればいいアレです。

トップに戻るボタンを実装する

サイトの一番上のタグににリンク張れば一瞬で上まで飛ぶことは判ってます。
でもWrodpressみたいにスルスルっと上に移動して欲しいんですよ!!
最初は頑張ってコピペで自分で作ってみようかと思ったんですが
そもそも書き方を知らなかった
ので早々に諦めました。

Wrodpressでプラグインをカスタマイズするときにググると、HTML用プラグインのカスタマイズも出てきますよね。
そこでHTML用プラグインのカスタマイズが見つかったScrollUp
を使用することに。
参考:[JS]スクロールに追従するページの先頭へアニメーションで戻るボタンが簡単に設置できるスクリプト -scrollUp
コレは簡単に実装できました。それで満足してカスタマイズしてませんw

Lightbox系画像ポップアップを実装する

javascriptが競合することってあるのかな?あるんだろうな…ああやっぱり…
そんな不安を抱えつつ、やはり詳しいカスタマイズが見つかったLightbox2をダウンロードしてみることに。
中を覗いてjQueryのバージョンを確認すると、ラッキーなことに同じです!
やった!万歳!これで勝てる!

人生そんなにうまく行くわけがない。

詳しいサイトはコチラなんですが、前のバージョンv2.51の解説なんですね。
現在はv2.6で記述が変わってました。
本家サイトをちゃんと読もうよ…。

本家サイトの単独表示指定サンプルです。
<a href=”img/image-1.jpg” data-lightbox=”image-1″ title=”My caption”>image #1</a>
実際に私が書いたものです。
<a href=”cake.jpg” data-lightbox=”cake” title=”苺のショートケーキ”><img src=”cake.jpg” alt=”” height=”100″ width=”150″></a>

本家サイトのグループ表示指定サンプルです。
<a href=”img/image-2.jpg” data-lightbox=”roadtrip”>image #2</a>
<a href=”img/image-3.jpg” data-lightbox=”roadtrip”>image #3</a>
<a href=”img/image-4.jpg” data-lightbox=”roadtrip”>image #4</a>
実際に私が書いたものです。
<a href=”choco2.jpg” data-lightbox=”sweet” title=”チョコレート”><img src=”choco2.jpg” alt=”” height=”100″ width=”150″></a>
<a href=”cup.jpg” data-lightbox=”sweet” title=”クッキー”><img src=”cup.jpg” alt=”” height=”100″ width=”150″></a>
<a href=”donuts.jpg” data-lightbox=”sweet” title=”ドーナツ”><img src=”donuts.jpg” alt=”” height=”100″ width=”150″></a>

v2.6ではdata-lightboxで呼び出して、グループを指定しているんですね。
こちらも実装できただけで満足して、カスタマイズしてません。

そんなこんなで約一週間ほどでサンプルサイトが完成しました。
初めてにしてはそこそこ満足してますが、CSS3が面白くなってきて中途半端にアレコレやっちゃって、デザイン的には多分半年後くらいにうわあああと頭を抱えることでしょう。
今すでになりつつありますけども。
これは次回頑張る糧にするという事で、ネットにあげておきます。

右下にTOPボタン

そのほか参考にしたサイトはコチラ。皆様本当に有難うございます。
コピペでできる!CSS3の素敵効果でテキストリンクを装飾する小技あれこれ
CSS3で作るシンプルなマウスオーバーアニメーション5種
初歩的なjQueryプラグインの設置方法

最後になりましたがHTMLサイトに使用した写真は、大川さんで有名なぱくたそからお借りしました。
自分では食品の写真を撮らないので、大変重宝しました。
有難うございました。

おかげ様で出来ました

スポンサードリンク
Pocket
LINEで送る

Bookmark the permalink.

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • スポンサードリンク