株式会社プライムネットワークスタッフが、html5やCSS3、phpなどのWEB技術に関することやワードプレスなどのCMSについて学んだことなどを紹介して行きたいと思います。
HTML5には、イマイチわかりにくいエレメントとして、figure要素があります。
今回は、この要素について調べてみます。
そもそも、このfigure要素は「図表などの自己完結型のコンテンツを表す」要素で、単体で独立したものでなければなりません。
ですので、イメージ画像だからfigure要素で囲えばいいやなんていう単純なものではありません。
というのも、figure自体、その文章から取り除いても文脈に問題がないものでなければならないうえ、さらにその文章からも参照される性質のものであることが前提となっています。
ですので、長い文章の中で、キャッチとして、ちょっとしたイラストや写真を差し込む場合、このfigureは使うことができません。
また、このfigureには、キャプションや注釈をつけることができるオプションとして、figcaptionというものがあり、必要に応じて使用することができます。
例を示すと、
<p>リンゴを食べると、歯茎から血がでませんか？。</p>
<figure id="apple">
<img src="http://blog.cnobi.jp/v1/blog/user/5633e8cdc4ca595ef263a094dab8ce28/1455850543" alt="リンゴのイラスト">
<figcaption>リンゴ</figcaption>
</figure>
リンゴを食べると、歯茎から血がでませんか？。
まぁ、例文の程度の低さは否めませんが、この文章において、リンゴの画像がなくても成立はしていますよね。
画像については、pタグで囲むだの、imgタグそのままだのと使い方に議論は耐えませんが、ことfigureにおいては、明確な使い方が見えてきていますね。
日本でも7月に発売されたばかりのSurface Pro 3。
マイクロソフトにしてはデザインもよく、ちょっと欲しいななんて思えるタブレットなのですが、お値段が少々高めですよね。
あれが5万円程度であれば即買なのですが、10万オーバーともなると、普通にノートパソコンを買ったほうがいいかななんて思ってしまいます。
さて、そんな中、YouTubeのマイクロソフト公式チャンネルでは、MacBook Airとの比較広告が3本掲載されていました。
なかなか面白いCMだなとは思ったのですが、かなり偏った比較となっていて、逆に逆効果なのではないかなともさえ、思ってしまいました。
見てもらえれば、わかるのですが、なぜにMacBook Airと比較するの？？
なんて思ってしまいます。
ペンでの入力であったり、取り外せるということをクローズアップしていますが、そもそもそんな機能必要か？なんて思ってしまいます。
しかも、現在の値段で言えば、MacBook Air13インチよりも2万円程高いうえに、お値段的には、MacBookPro13インチとの戦いのほうが妥当な気がします。
（しかもタッチカバー別売りで1万超えですから、オトク感がない・・・）
それに動画を見ると「surface、キーボードいらないじゃん」なんて、突っ込みたくなります。
iPadとの比較であれば「タブレットにキーボートがつく」という足し算でプッシュできると思うのですが、ノートパソコンとの比較であれば、どう考えても引き算でしかありません。
そもそも、ノートパソコンにタッチスクリーンなんて望んでいませんからね・・・
ツイート
いまやweb制作の世界では、スマートフォンは外すことのできない端末となっています。
かつてはガラケーが主流だったので、それぞれに対応させるために実質PCの見栄えとガラケーの見栄えの2つのサイトが必要でした。
しかし、現在ではガラケーも風前の灯火となり、そのガラケーよりも高機能はスマホが登場したので、わざわざPC用、スマホ用という2つのサイトを作る必要がなくなり、ひとつのソースで端末ごとに見栄えを変更できるようになりました。
そしてそれを実現するのが、いま流行りのレスポンシブWEBデザインというものです。
だからといって、レスポンシブWEBデザインが完璧なものかというと、そういうわけでもないのですが、この手法により、各サイトのメンテナンス性は確実に上がりました。
このレスポンシブWEBデザインは、一体どういうものかというと、サイト制作で作ったhtmlをそれぞれの端末に合わせて作成したCSSを読み込ませるというもの。
つまり、アクセスしてきた端末が、PCならPC用のCSSを、タブレットならタブレット用のCSSを、スマホならスマホ用のCSSを読みこませるのです。
このレスポンシブWEBデザインを実現するには様々な方法があるのですが、その中で最も簡単で扱い易いものが「メディアクエリ」というもので、これは、link 要素とstyle要素のmedia属性で、表示対象となるメディアの種類を特定することを可能にする仕組みのことなのです。
さて、ここまで簡単にレスポンシブWEBデザインを説明してきましたが、ここからが私のための勉強タイムです。
まず、私はすでにレスポンシブWEBデザインの制作に取り組んでおり、ある程度のことはできるようになってはいるのですが、このレスポンシブWEBデザインにしたときの画像の取り扱いがイマイチ理解できておりませんでした。
そこで調べているとレスポンシブWEBデザインで画像を扱うためには、CSSで画像の伸縮させるためのおまじないみたいなものがあるようです。
img {
max-width: 100%;
height: auto;
width /***/: auto;
}
まぁ、普通に考えるとこのソースは発想できないですよね。
なんですか、この3行目は！！！
まぁ、とにかく画像の扱いがわかったので、このコードを使って、実際にレスポンシブWEBデザイン対応してみたいと思います。
ツイート
