今回はESET mac版の公式サイトで使用した擬似要素（:before・:after）を使ったbox-shadowのエフェクトを紹介していきたいと思います。
ESET Cybersecurity（イーセット サイバーセキュリティ）と
ESET Smart Securityのサイトでデザインアクセントとして実装しています。（2011/11/15現在）
HTML/CSSの記事一覧
Webサイトにアニメーションを取り入れる場合には、いくつか方法があると思います。代表的なところでいうと、
- ・JavaScript、jQuery
- ・Flash
- ・CSSアニメーション
などが挙げられます。
ただ複雑な動きとなると、高度なコードを書く必要があったりと、それなりに難しくなります。ですが、シンプルなアニメーションでも組み合わせることで、パッと見複雑に見える動きを付けることができます。
そのアニメーション手法というのは、先日、京都で開催された”Ti.Developers.meeting vol.03（Titanium mobileでのアプリ開発者が集まる関西方面のミートアップ）”でのコバヤシトールさん（@toru0325 / もぐもぐエンターテイメントアプリ – MogSnap）のセッションで紹介されていたもので、その斬新な技法に驚かされたと共に、日頃の制作に対する姿勢の面でも改めて感じる部分がありましたので、今回の記事では、そのあたりをまとめてみようと思います。（追記2011/10/21：コバヤシトールさんが紹介されていたのは、Titanium mobileでのアニメーションで、この記事でのサンプルは、その手法をCSSアニメーションにアレンジしたものとなります。）
続きを読む
この数カ月でHTML5のサイトが国内にも増えてきました。先日10周年を迎えた EC studio のサイトもHTML5で制作しています。マークアップの面でのHTML5の導入となりましたが、難しいと思う以上に勉強になることが多くありました。（今も改善を続けています。）
http://www.ecstudio.jp/
個人サイト以外でHTML5を導入するのをためらっている人が多いと思うので、今からでも使っていくためのコツやノウハウをまとめてみました。
続きを読む
iPadが日本で販売されます。
新しいデバイスの登場でサイト制作者の方はいろんな意味でドキドキワクワクしているところだと思いますが、今回はiPadでのブラウジングのことや、それに対する基本的な対応方法を説明します。
続きを読む
iPhone向けに最適化するための対応は慣れるまでは簡単ではないと思う方が多いかもしれませんが、WordPressではプラグインで簡単に対応できます。
今回はよく利用されているであろう3つのプラグインを紹介します。
続きを読む
[追記]2010/07/27
すでに販売されているiPhone4（iOS4）でサンプルを検証したところ、埋め込みで再生はできなくなっていました。iOS4のリリース以前の3GS+iOS4では可能であったことを確認していますので、仕様の変更があった可能性があります。あらためて方法が分かれば記事におこしたいとおもいます。
iPhoneのMobile SafariではHTML5が使えるというのは以前に書いた記事でも紹介したことがあるのですが、HTML5の各要素がすべて完全に使えるというわけではありません。
その中の一つであるvideo要素はマークアップ上使うことは可能ですが、いざ動画を見ようとするとQuicktimeが起動するのでvideo要素を使うメリットがほとんどありませんでした。
しかしvideo要素はOS4.0からページに埋め込まれる形で再生できるようになります。
続きを読む
EC studioの主要なサービスを集計して
2009年度のブラウザアクセスの平均の割合をまとめてみました。
サイトのブラウザ動向を把握してると、デザインやコーディングを
ブラウザごとに違った方法でアプローチすることができます。
今回は2009年度のブラウザ動向を確認し、
今後どのような傾向になっていくのかを予想したいと思います。
1ヶ月約1万セッション以上のサイトを対象にして、
2009年度全体と上半期（2009/01/01～2009/06/30）、
下半期（2009/07/01～2009/12/31）別にまとめてみました。
データは「ウェブマスター向けサイト」、「一般ユーザー向けサイト」
に分けて記載しています。
以下のブラウザは省略して記載しています。
Internet Explorer = IE
また、Internet Explorerのみバージョン別に記載しています。
Zen-CodingでHTML/CSSコーディング作業の効率があがった人が増えてきたのではないかと思いますが、そこでさらにカスタマイズすることで効率化アップする方法を紹介します。
Zen-Codingではあらかじめ多くのHTML/CSSのショートコード、スニペットが登録されていますが、Zen-Codingを構成するファイルを少し修正するだけで、オリジナルのコードを登録することができます。
JavaScriptを触ることにはなりますが、JavaScriptを知らなくても大丈夫なぐらい簡単です。
続きを読む
前回の記事ではZen-Codingの導入方法について解説しました。
今回はZen-Codingの機能とそれを実行するためのショートカットの解説をします。
※2010/02/22現在の最新バージョン「Zen Coding for Aptana v0.6.0.1」を対象にしています。
なおAptana（Eclipse）の場合だとAptanaの方の機能に多くのショートカットが割り当てられているので、利用する環境によってはショートカットを変更する必要があります。Zen-Codingのデフォルトのショートカットが機能しない場合は、記事最後にまとめる変更方法を参考にしてください。
続きを読む
最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか？
Zen-CodingはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。
独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。
Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。
※音が出ますのでご注意ください。
Zen Coding v0.5 from Sergey Chikuyonok on Vimeo
一体何がおこわれているのか？という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。
Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studioでの設定の仕方を説明します。
※弊社の場合は Eclipseのプラグインとしてインストールしていますが、それでも問題はありません。
[追記：2010/02/24]
AptanaプラグインをつかっていないEclipseでも導入できるようです。（otchyさんありがとうございます。）
http://www.otchy.net/20100224/zen-coding-for-general-eclipse/
※導入後の使い方などは次の記事を参照ください。
Zen-Codingのショートカットをまとめてみました
Zen-Codingでさらにコーディングを1.5倍くらい速くするためのカスタマイズ方法
続きを読む
ページの先頭に戻る