‘CSS3’ タグのついている投稿
HTML5/CSS3がもたらす変革とは
１．はじめに
今年初めのメールマガジンでスマートフォンについて触れましたが、スマートフォンの
普及の裏では、WEBサイトを構成する言語であるHTMLの標準がここ数年で大きく変動し
つつあります。
2012年に勧告されると言われているHTML5をApple社がいち早く標準サポートした理由と、
それにより今後どのような変革がもたらされるのかを、今回のメールマガジンでは、
HTML標準の現状をご理解いただくとともにHTMLの歴史を少しだけ振り返りながら
ご紹介をしていきたいと思います。
この投稿の続きを読む »
Facebookページ テンプレート
Facebookページのテンプレートセットを公開いたします。HTML/CSSは至って普通ですが個人的なクセが随所にあるのは勘弁してください。Facebookページのお約束さえ守って作れば問題ありません。
CSSは若干ですがCSS SpriteとOOCSSを使ってみたり、transitionでリンク部をフワッと変化させてみました。
デザイン時にページサイズには気を付ける必要があります。
横幅520pxとイマドキのデザインでは狭いです。
高さは800pxですがJavascriptで変更する事が出来ます。
プレビュー用にPNG画像を添付します。
| fbTemp.html | FacebookページのHTML/CSSファイル |
|---|---|
| a00h.gif a01.gif a01h.gif cmn_img.png | 画像ファイル |
| 00_facebook_page_template.psd | Facebookページデザイン用PSDファイル |
Javascriptファイルはお手数ですが配布元からダウンロードしてください。
下記の appId にはアプリケーション作成時のIDを入力してください。
<script type="text/javascript">
FB.init({
appId : 'XXXXXXXXXXXXXXX', // enter iFrame appId
status : true, // check login status
cookie : true, // enable cookies
xfbml : true, //parse XFBML
logging : true
});
FB.Canvas.setSize({ height: 1500 }); // content height
↓ダウンロード
Facebookページテンプレート : 751KB
Facebookページよりも、このブログを見やすく使いやすくする方が先のような気がしています。
巷で噂のレスポンシブなデザイン
結論から言うとスマフォ、タブレットには必要な手法であり、TriAxでも是非取り入れていきたい。
今更ながらレスポンシブデザインに興味を持ち、HTML5/CSS3 特設サイトのソースコードを拝見させていただいた。
設計がいかに重要か思い知らされます。
サイトを見ていて「可変レイアウト」との違いをざっくり言うと可変レイアウトはデザインやカラムがウィンドウサイズに依存しないレイアウトのことで、レスポンシブとは一言で言うとカラムはもちろんインターフェースさえも画面サイズに応じて「再配置」される、といった手法。さらに解像度に依存しないCSSの事も頭に入れておかないと…。
…と記事を書いていて思い出したのですが、実は去年ボツになった案件で制作しましたので、後日紹介させていただきます。
iPhone リンクを長押しした時のポップアップメニューの制御
iPhone でリンクを長押しした時に表示されるポップアップメニューは便利でよく使うのですが、これを制御する CSS があります。
使い勝手に配慮する必要があると思いますが、下記の CSS を body などに記述することで制御する事が出来ます。
-webkit-touch-callout:none
