株式会社プライムネットワークスタッフが、html5やCSS3、phpなどのWEB技術に関することやワードプレスなどのCMSについて学んだことなどを紹介して行きたいと思います。
日本でも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デザイン対応してみたいと思います。
ツイート
本日は、少し古い話になるのですが、去年の4月にGoogleが発表したガイドライン「Google HTML/CSS Style Guide」の中のhtmlについて思うことを書きます。
まず、このガイドライン、発表は英語の文章で出されたのですが、一年以上たった今も、日本語に翻訳されていません。原文英語（しかも、テキストばかりなのにやたらと重い！！よほど参照されているのかな？）
英文なんて簡単に読めるものじゃないので、頑張ってくださいよ、グーグル株式会社の日本人！
さてさて、そんなわけで、英文を読めない私は、REFLECTDESIGNさんが翻訳してくれている「Google HTML/CSS Style Guide」を適当に和訳してみたを読ませていただきました。
その中で、私が気になったものだけについて感想を述べます。
まずは、「埋め込みリソース」からプロトコル表記を省略するということについてなのですが、これは大丈夫なのか？なんて思ってしまいました。
まずプロトコル表記がなんなのかというと、URLの前につく「http:」「https:」のことで、これって重要じゃないの？なんて思いました。
しかも、これを省略するとかなり不格好なソースになります。
このプロトコルについては詳しくないのでなんとでも言えますが、どうせなら「//」も無くして欲しいものです。
よくソースを見やすくするために「インデント」、つまり字下げをするかと思いますが、これについては、「半角スペースを２つ」で行うのが望ましいそうです。
もともと私は「インデントしない派」で、全てを左寄せで記述していたのですが（1行改行でコント-ロールする派）、どうも新人さんに教える時にこれでは不都合が多く（つまり見づらい・・・）、近年では「タブ」によってインデントしておりました。
でも、そんなにGoogleさんが言うのであれば、今日よりインデントを「半角スペースx2」に変えますよ！
また、htmlタグの要素や属性、属性の値などは全て小文字で記述するとのことですが、これは私もそう思います。
中には全て大文字で記述されているものもありますが、はっきりいって気持ち悪い。ただ、あくまでも個人的な意見なので、大文字で書かれている方はスルーしてください。
まぁ、昨今のjQuaryやら各フレームワークのことを考えると、エンコードは「UTF-8」というのは問題ありませんね。
この部分が一番驚きです！
まぁドキュメントタイプは推奨されるのが、<!DOCTYPE html>という形式でいいらしいので、かなりシンプルになります。
ただ、驚きはここからです！
なんと「省略できるタグは省略」するとのことで、「ザHTML」とも言うべき「html」「head」「body」が省略できます！（オプション扱いですが・・・）
<!DOCTYPE html>
<html>
<head>
<title>いいのか本当に</title>
</head>
<body>
<p>見づらくなるような</p>
</body>
</html><!DOCTYPE html>
<title>いいのか本当に</title>
<p>見づらくなるような
んん、随分シンプルになって文字入力の手間が増えるけど、ちょっと見づらくない？
特に他人の書いたソースを分析するときに物凄く面倒くさいことになりそう。
Firebugや開発ツールなど上手く機能するのかな？
XHTMLがかなり厳格だったため、どっぷりと浸かってきた私としては、まぁ、気持ち悪い。
とはいえ、スマホなどの普及によりデータの軽減は必須となってきているので、この新たな取り組みは、いいことなのかもしれませんね。
ただし、注意しなければならないのは、あくまでもGoogleの見解であって、W3Cの勧告ではないため、現段階では自分で納得出来る部分だけを採用すればいいのかなと思っています。
とはいえ、検索結果を牛耳っているGoogleですから、このガイドラインを守るとSEO的な効果はあがるのでしょうかね？
ツイート
