![html5-memo.com](https://cdn-ak-scissors.b.st-hatena.com/image/square/bbfa2935874f73fc15218c5b8aaeadbecb5e57a5/height=288;version=1;width=512/http%3A%2F%2Fwww.html5-memo.com%2Fwp-content%2Fuploads%2F2012%2F08%2FA87.jpg)
textShadowForIE9、スクリーンリーダーなどアクセシビリティ面への配慮を加えた新版に書き直して再度公開です。 テストケース 以前に公開していたtextShadowForMSIEなどを利用している方はこの新版に差し替えていただけますよう強くお願い申し上げる次第です。 使用方法 CSSファイルからtext-shadowの値を自動的に読み込んで適用させていますので基本的に以下の設定をするだけでOKです。 また、手動で個別指定できるようにもしています。(後述) ソースをコピーしてJavaScriptファイル(textshadow.jsなど)を作成し、HTMLから外部JavaScriptとして読み込む。 または、既存のJavaScriptファイルにソースをコピペして追加。 以前のスクリプトからの主な変更点 スクリーンリーダーでダブって読み上げられないよう、影にはWAI-ARIAのaria
みなさんは、HTMLやCSSのコーディングには何を使っていますか? デザイナーの方であればDreamweaverをメインで使っている人が多いと思います。 デベロッパーの場合は、自分の好きなテキストエディターを使いこなしているでしょう。 しかし、実際にはコーディングをしながら見た目や動きを確認するためにブラウザを横でたちあげてデバッグしながら作業を進めていくと思います。 コードを修正→ファイルの保存→ブラウザで更新→確認 この手順を繰り返すのですが、これがなかなか面倒です。 できれば、コードを修正したタイミングですぐに確認できるとベストですよね。 そこで今回ご紹介するのが、HTML5、CSS3、JavaScriptをリアルタイムに編集して確認ができる軽量HTMLエディタ「Liveweave」です。 「Liveweave」は、ブラウザ上で動作するHTMLエディタです。 コーディングエリアとレン
最近知ったグラデーションに特化したCSS3ジェネレータを紹介します。国産ということで何となく嬉しくなりました。 グラデーションの色は自由に追加できて直感的に操作できます。色を減らすのにちょっと悩みましたが、消したいポイントを左へドラッグすると消えます。 円形グラデーションも作ることができます。こちらも直感的な簡単操作です。 もちろんリアルタイムでプレビューされます。 深く考えなくてもサンプルがたくさんあるので、サンプルからいじっていくのもいいですね。 いい感じの実用的なサンプルが色ごとで分けられています。 通常は背景のグラデーション部分のみのコードが表示されていますが、「All」にすることですべてのコードが表示されます。 ベンダープレフィックスもブラウザごとで付けることができます。ただしベンダープレフィックスが付くのはbackgroundのみのようです。 テキストシャドウやボックスシャドウ
角丸にドロップシャドウ、グラデーションにアニメーションなど、超簡単にCSS3スタイルの作成&コード生成をしてくれる「CSS3 ジェネレーター」まとめ!! html5-css3-orange-logos / Nelson Felix Giga どうも!おつぱ( @OZPA )です! 今回は、角丸やドロップシャドウ、グラデーションに2D/3Dアニメーションなど、CSS3に対応したスタイルを簡単に作成、さらにコードを生成してくれる「CSS3 ジェネレーター」を厳選して8つご紹介! ウオアアアアアアアア さて、CSS3対応ブラウザも増え、角丸、ドロップシャドウ、グラデーションにWebフォント、はたまた2D/3Dのトランスフォーム(回転/拡大縮小/移動)やアニメーションなどなど…リッチなUIがコードのみで表現できるようになりました。 関連:[CSS]GoodDesign賞にノミネートされて落選するこ
ウェブのインターフェイスだけでなく、現実の世界でもたくさんの角丸を目にします。角丸は一時のトレンドではなく、デザインのスタンダードと言ってもよいでしょう。 そんな角丸がなぜ好まれるのか、どう使えばよいのか、ウェブページにどのように実装するのかなどを紹介します。 Rounded Corners and Why They Are Here to Stay 下記は各ポイントを意訳したものです。 角丸は目に、そして脳に優しい< 角丸のイメージは安心 -Appleのこだわり 角丸はいつ使用するべきか 角丸の実装:CSS3< 角丸の実装:古い方法 終わりに 角丸は目に、そして脳に優しい ビジュアル認知の権威:Jürg Nänni教授によると、『鋭角の長方形は同じ大きさの楕円より認知するのに努力を必要とする。人間の目は円形のものをより速く捉えることができる。」と述べています。 鋭角と角丸の視線の流れ 鋭
CSS3には興味深い様々なプロパティがありますが、これらを勉強するにあたって知っておきたいCSS3の基礎をまとめてみます。 過去の記事に手を加えたものや新たに書いたものなど幅広くまとめてみましたので、ぜひ抑えておいてください。 今回は結構ボリュームもあるので目次を作っています。 1. スタイルシートの構造 CSS3に限ったことではないですが、CSSの構造は下の図のように、セレクタ、プロパティ、値となっています。 もちろんプロパティと値は一対です。CSSといえば、プロパティのイメージが強いですが、セレクタも結構奥が深いです。 CSS3ではセレクタもプロパティも新たに追加されていますので、違いをちゃんと理解しておきましょう。 2. CSS3セレクタ CSSセレクタはスタイルを適用する対象を選択するものです。普段何気なく使っているclassやidなどもセレクタの1つです。 CSS3セレクタはW3
CSS3のジェネレータを紹介します。海外サイトがほとんどですが簡単に使えると思います。それぞれ特徴があって面白いので、試しに色々作ってみればCSS3プロパティの勉強にもなります。 CSS3プロパティ全般 ボックスやテキストなど広範囲にわたって設定可能なジェネレータです。比較的有名なものが多いです。 CSS3.0 Maker テキストまわりから、角丸やシャドウ、回転など色々作れます。指定できる要素は以下のとおりです。 CSS Transform Box Shadow Text Shadow Text Rotation RGBA @Font Face Outline Offset Transition CSS Gradient CSS3 Generator これも指定できる要素はかなり多いです。レイアウトがシンプルで見やすいです。 Border Radius Box Shadow Text S
ベンダー接頭辞(プレフィックス)については最近いろいろと議論が活発ですが、そういう難しい話ではなくて、現状のCSSについての話です。 新しいCSSモジュールを使うために、ブラウザごとに接頭辞をつけなくてはいけない場合があります。まあそれについては現状では仕方ないことなんですが、接頭辞なしでも動作するようになったものでも、いつまで経っても接頭辞つきのものを書くのはどうなのかなと思うわけです。 CSSのコードも冗長で読みづらくなりますし、もう使われていない(使われることもない)であろうものを残しておくのもちょっとなー。 実際に運用されているサイトなんかだとそうそう簡単に手を入れられないかもしれませんが……。 また、はてなダイアリーの方でも書きましたが、ブログのチュートリアルを見ていて「もうその接頭辞つきの役目は終わった(終わりつつある)のに、なんでそれしか書いてないの」と思うことが結構あります
まだまだ現場レベルではブラウザの問題もあり、なかなかフルでは利用できないCSS3ですが、スマートフォンを中心に徐々に利用されてきています。今日紹介するのはCSS3で実現するテクニック集「15 Thorough & New CSS3 Tutorials」。 Orman Clark’s Vertical Navigation Menu: The CSS3 Version メニューからプレイヤーなど様々なWEB上で利用できるチュートリアルが公開されています。今日はその中から気になったものをピックアップして紹介したいと思います。 詳しくは以下 How to Build a Kick-Butt CSS3 Mega Drop-Down Menu CSS3で実現する目がドロップダウンメニュー Page Transitions with CSS3 フェードインからダイナミックなものまでCSS3で実現するチ
<ul id="menu"> <li><a href="#">html</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Perl</a></li> </ul> HTMLは最後まで変更しません。 #menu { width:530px; padding:0; margin:0; list-style-type: none; } #menu li { width:20%; float:left; padding:0; margin:0; text-align:center; } #menu li a { width:auto; color:#fff; font-size:12px; font-weight:
昨年2011年10月に仕事で運営に携わっている大学ウェブサイトでレスポンシブWebデザイン (しかもフル可変グリッドレイアウト) を導入して、はや半年。約6ヶ月間、レスポンシブWebデザイン(RWD)で制作したウェブサイトを運営してみて思ったことをまとめてみました。これからレスポンシブWebデザインを導入したいと考えている方の参考になれば幸いです。 プロジェクトの概要 大学のウェブサイトをリニューアルするにあたり、さまざまな状況や制限などを考慮、また、今後3〜5年を見据えて、レスポンシブWebデザインを取り入れた制作を行いました。大学公式ブログでもリニューアルについて紹介しているので、ぜひそちらもご覧ください。そこで書いたように、以下のような思いもあり、このリニューアルを行いました: 今回、新しい試みを行った背景には、このウェブサイトが「大学のウェブサイト」であることが大きな要因の一つとし
このサイトの右上に斜めになったメニューがありますが、これはCSS3(+背景画像)でできています。 IEの場合はスタイルシートを変更して画像で再現されるようにしています。 このメニューをCSS3で作るときに若干コツがいったので、CSS3で斜めに傾いたメニューを作る時のメモ。 HTMLコード HTMLコードはこのような最小限でシンプルなもので実装しています。 </p> <ul> <li id="demo-menu1" class="demo-menu"><a href="./">MENU1</a></li> <li id="demo-menu2" class="demo-menu"><a href="./">MENU2</a></li> <li id="demo-menu3" class="demo-menu"><a href="./">MENU3</a></li> <li id="demo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く