HTML関連の記事一覧




●ページの公開時間や更新時間はGoogleの検索結果に表示される

早速本題ですが、ページの公開日時や更新日時をHTMLタグでページ内に書いておくと、Googleで検索する際に表示されますよ、というお話。

パッと見で、新しい情報か、古い情報かがすぐ分かって便利ですね。


以下の画像は「授与品袋」で検索した結果。

スニペットの部分に「2010/50/21」と日付が表示されています。

20150227-HTML5のtimeタグでページの更新日時-01


これは、授与品袋・手提げ紙袋・たとう紙(吉田印刷所)のページのフッター部分にある「公開時間」が反映されています。横に更新時間もありますが、そこの日時はGoogleの検索結果では出てきていません。

つまり、検索結果をコントロールすることができるのです。

20150227-HTML5のtimeタグでページの更新日時-02


そのために使うのが、HTML5のtimeタグです。

timeタグは日付を表す際に使用します。それだけで特に公開日時や更新日時を表すものではありません。


細かなtimeタグの話は上記ページをご覧頂くことにして、記事タイトルにある「ページの更新日時をHTML5のtimeタグを使用して表現」してみましょう。

記事の続きを読む



20150120-X-UA-Compatible-Chrome-Frame-01

サイトのCMSを入れ替え行いつつも、過去制作したサイトを見直してみると、今になって「コレは必要なのか?」みたいなものがあります。


以下のページは、はてなブックマークも1200位付いているすごいページですが、公開当時このページを参考にされていた方も多いのではないでしょうか? 私も参考にしてサイト作りには反映していました。


IE対策では以下の様に説明されています。

IE対策

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

IEで閲覧している場合、Google Chrome Frameで表示します。

Google Chrome Frameがインストールされていない場合は、IEの利用可能な最新のレンダリングエンジンで表示します。

Google Chrome Frame(GCF)とは、IEでGoogle Chrome相当のレンダリングエンジンを利用可能にするIEのプラグインです。 インストールすると、IE8以下でもCanvas、CSS3、HTML5、高速なJavaScriptエンジンが利用できるようになります。

【HTML】最近のPCサイトに見るテンプレ要素まとめ | istis

Google Chrome Frame! 懐かしい! これが普及していたらInternet Explorer対策ももっと簡単だったろうに…と思ったり(=モダンな技術を搭載したブラウザーに移行されていれば制作はもっと楽だったはず)。


記事の続きを読む



小杉聖さんのFacebookの投稿を見て、自分が関わっているサイトのフォームを直してみようかなと思ってみた。


シニアだけでなく、いわゆる「初心者だから?」と自称するタイプの人を対象にしたホームページは、ここまでやっていいと思う。さすが・・・!

エラー項目の見せ方が素敵で目から鱗が落ちた。

こういうのってプラグインに頼ってるとなかなかできないよね。

入力欄は統合したほうがいいのも同意。

今は色々なjsライブラリあるし。

「名前と名字」って文言は、わざとなのかなあ?

こんなにあった!シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-シニアマーケティング、ウェブユーザビリティ評価

小杉 聖 - シニアだけでなく、いわゆる「初心者だから?」と自称するタイプの人を対象にしたホームページは、ここまでやっていいと思う。さ...
投稿 by 小杉 聖.


一気に変えるのではなく、少しずつ変えてみて、何が良いのか考えてみようと思います。


●とあるCMSの標準フォーム

まずはとあるCMSから出力される標準の形。

20141217-フォームの表示のさせ方-01

これって今でも見る形ですけど、「*」が何を表しているのか分かりづらい!! わかるかこんなの!

知っている人なら知っているでしょうけど、「*」は「必須」を意味しています。申し訳程度に「*は入力必須項目です」とフォームに書いてあるけど(それもフォームの末尾に!)、普通の人は分かりませんわ。

記事の続きを読む



このブログのフッター部分にはメッセージを送るフォームがあります。

このフォームで何も書かずに「確認する」ボタンを押してフォーム送信したらどうなるのでしょうか。

20140424-フォームコントロール-HTML5-01


ページが移動して(画面が遷移して)エラーが表示されます。

「名前を入力して下さい」「メッセージを入力して下さい」というエラーが表示されます。

20140424-フォームコントロール-HTML5-02


こういうパターン、一昔前にはよくありましたよね。フォーム送信した後にエラーが表示されるパターン。

一昔前のフォームであれば、これでも仕方が無いのですが、HTML5の時代です。フォームのエレメントに属性を付けるだけで、フォームを送信する前にエラーのチェックができるのです。

属性は5秒以内で付けられる簡単なものですので、フォーム入力がある場合、ぜひ付けておきましょう。

それではその属性を紹介します。Firefox 28・Internet Explorer 11・Chrome 34での動作も調べてみました。

記事の続きを読む



20120618-HTML5のOGPにはxmlnsは不要-01

Geek_Tatoo by Massimo Valiani


HTML5でウェブサイトを作成していて、気になったことがありました。


気になった瞬間はFacebookやGoogle+で使用されるOGP(Open Graph protocol)のためのメタタグを設定していた時のことです。


ネットで検索すると必ずと言っていいほど「xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" を<html>のタグに追加しましょう」みたいなことが書いてあります。


こんな感じですね。

<html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

この記述本当に必要ですか?


記事の続きを読む



ブログ著者

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について

サイト内検索