タグを表示

オバマさんのサイトのHTMLソースコードにロゴマークのアスキーアートが隠れてる件

barackobama.comのソースコードにAAが!HTML5+レスポンシブWebデザインな上に新しい要素をどんどん取り入れているオバマさんのサイトはいろいろ勉強になりそうです。

@kasumiiです。こんにちは。

有名なのかもしれませんが、今まで知らなかったのでメモ。

たまたまオバマさんのウェブサイトを見ていたら、「ソースコードにAAが!」っていうはてブコメントを見かけたので早速ソースコードを表示してみたら……

【オバマ氏のサイト】Barack Obama

              .:+uuuuuuuuuuu+:.
          ./sssssssssssssssssssss/-
       ./aaaaaaaaaaaaaaaaaaaaaaaaaaa/.
     .+uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu+.
   `/sssssssssssssssssssssssssssssssssss/
  `aaaaaaaaaaaaa:-`       `-:aaaaaaaaaaaaa.
 `uuuuuuuuuuu/.               ./uuuuuuuuuuu.
 sssssssssss.                   .sssssssssss`
-aaaaaaaaaa`                     `+aaaaaaaaa:
uuuuuuuuuu.                       `uuuuuuuuuu
ssssss-```                         ```-ssssss
`       ....aaaaaaaaaaaaaaaaaaaaa....       `
...+uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu+...
-ssssssssssssss+//-```                  `````
 aaaaa+/:-`            ...aaaaaaaaaaaaaaaaaa.
 `/-``        ..::uuuuuuuuuuuuuuuuuuuuuuuuu.
        .:/+sssssssssssssssss-```      ````
     /aaaaaaaaaaaaa+/:-``       ...aaaaaa
     .+uuuuuuu/:-``        .-:/+uuuuuuu-
       ./s/-`         -:+sssssssssss+.
                  -/aaaaaaaaaaaaa+-`
              .:+usausausausa+:-

こんなアスキーアートが仕込まれてるじゃありませんか。

これはオバマさんのロゴマーク、ライジングサンAA!!

しかもこのアスキーアート、よく見ると「USA」の3文字から成り立っています。遊び心があっていいですねーw

barackobama.com はレスポンシブWebデザインの例として取り上げられることも多いですが、ソースコードをざっと見ただけでもきちんと細かなところまで対応されている様子。

たとえば、OGP設定はもちろん、iPhoneでホーム画面に登録されたときのアイコンもきちんと設定されているし、MicroformatsのhCard/hCalendarやTwitter Cards、Smart App Bannersなども対応済み。

ソースコードやサイトの作りをじっくり研究してみるのも勉強になりそうですね。

このページの一番上へ

サイトのトップページへ

このページの一番下へ