@supports @documentに関する覚え書き
「CSS Conditional Rules Module Level 3」にあるFeature queriesとDocument queriesの簡単な説明と覚え書きです。 Media-specific style sheets（@media）は色んなところで解説されてるのでここではやりません。 この記事を書いている時点で、「CSS Conditional Rules Module Level 3」はEditor’s Draft 7 June 2011が最新版ですので、それに従って説明したいと思います。 内容は今後アップデートされるでしょうし、これはあくまでも簡単な覚え書きですので、ぜひ原文もご参照ください。 CSS Conditional Rules Module Level 3 Feature queries: the ‘@supports’ rule@supportsルールは、ユー
Embed Signboard
使い方 五輪エンブレムのアニメーションを作れます。 作ったものは簡単に貼り付けることが出来ます。 Signboard Settings Horizontal Characters 縦の分割数を指定します、デフォルト値は3です。 Vertical Characters 横の分割数を指定します、デフォルト値は7です。 Display Time 一つのメッセージが表示される時間を1/1000秒単位で指定します、デフォルト値は1500です。 Duration 次のメッセージへのアニメーションにかかる時間を1/1000秒単位で指定します、デフォルト値は1000です。 Signboard Messages エンブレムで表現するメッセージを記述します。 使用できる文字はaからz、0から9、!.':;/_と半角スペースです。 一回のメッセージで表示される文字数は縦の分割数 x 横の分割数です、デフォルトだ
IE 6とIE 7のためのCSSハック16選（1/3） - ＠IT
有限会社タグパンダ 喜安 亮介 2009/11/17 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック＆フィルタTipsをお届けします（編集部） Webブラウザ別CSSハック一覧表 前回の「IE 6で泣かないための、9つのCSSハック」では、仕様通りの正しいコーディングを行っているにもかかわらず、Internet Explorer（以下、IE） 6で見ると、レイアウトがズレてしまうなどのさまざまな問題を解決するための9つのテクニックを紹介しました。 今回は、IE 6とIE 7のためのCSSハックのテクニックを下記に分けて紹介します。 IE 6をハック（IE 6のみに効く、もしくはIE 6のみに効かないハック） IE 6のみに効くハック スタ
The Shapes Of CSS | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into
img:after { content: attr(alt); } としても何も表示されないのは、仕様的に正しい挙動です
img:after { content: attr(alt); } としても何も表示されないのは、仕様的に正しい挙動です 公開日: 2011年5月11日 タグ: css お分かりの方には何てことないというか今さらな話ですが、割と出来なくて悩んでる方が多いように見受けられたので。Twitter のツイートを検索してみてもたまに話題に上がってるっぽいし。 「画像にキャプションを表示する」などの名目でこの img:after { content: attr(alt) } のような[1] CSS 例を挙げているところがいくつかあるのですが、実際にこのような CSS を書いても alt 属性値が画像の後ろに表示される事はありません。Opera では表示されるようですが（あと私の記憶にはないのですが、どうやら古い Mozilla もこのような実装になっていたみたい[2]です）他のモダンブラウザでは基本
知らないといつまでたってもHTMLとCSSが理解できない暗黙の仕様4つ
調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。
HTML5 × CSS3 × jQueryを真面目に勉強 – #11 Path風サークルメニューを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPathにある、あのサークルメニューを再現してみたので、ここにその手順をまとめておくとします。 Pathはネイティブアプリなので、JavaないしObjective-Cにて実装されていますが、こちとらはそんなハイソなテクニックは使わずに、JavaScriptとCSS3だけで行けるところまで行ってみます。 はじめに とりあえずサークルメニューの要件を大まかに書きだしてみました。 トグルボタンをクリックしてメニューアイテムの表示/非表示を切り替えたい 各メニューは円周上に均等に配置された状態で表示させたい 表示/非表示はアニメーションで切り替わるようにしたい メニュー数の増減には柔軟に対応できるようにしたい その他、各メニューの間隔や角度、表示時の距離などはオプショで指定できるようにしたい ひとまずこんなもんで良いでしょう。次にこれらの要件をどのように実装す
Eclipse Foundation発のWebブラウザ上で動作するIDE「Orion 1.0」リリース | OSDN Magazine
Eclipse FoundationのOrion開発チームは10月29日、Webブラウザ上で動作するIDE（統合開発環境）「Orion 1.0」を公開した。今後は4か月おきに新バージョンをリリースして機能を拡充するという。 OrionはEclipse Foundationが2011年1月に発表したプロジェクト。「Web世界の変化に対応できるアジャイル性を持つIDE」を目指しており、拡張性や高い再利用性などの特徴を持つという。JavaScriptおよびHTML、CSSの開発に向けた機能を持ち、ローカルへのインストールなしにWebブラウザだけで開発が行えるのが特徴。Orionのコンポーネントは他プロジェクトでも採用されており、FirefoxのJavaScript開発ツール「Scratchpad」やVMwareのJavaScriptエディタ「Scripted」などがOrionのコンポーネントを利
これはお役立ち！リンク先のfaviconをリンクアイコンとして表示させる方法！ | バンクーバーのうぇぶ屋
よくリンクにアイコンを付けることってありますよね？アレをリンク先のfaviconを自動で表示させることってできればって思ったことってないっすか？ そんなWEB屋なら一度は（？）考えたことのあるfaviconのアイコン化がこんな感じで実装できることをつい先日知ることになり、びっくり感動してしまったので是非ご紹介させて頂ければこれ幸いです！ 元記事はこちら！ Favicons Next To External Links | CSS-Tricks これ実装すると、つまり下のような感じになるわけっすね！ これ、何をしてるのか気になって見てみたら、そもそもgetFaviconっていうサービスがあるらしいことをしりました。これはリンク先のURLをパラメーターとして渡すと、リンク先の<link>情報みて、faviconのURL引っ張ってくるって仕組みらしいですね。 http://g.etfv.co/h
JavascriptでCSSのプロパティ値を取得する方法 « 来栖川電算
ビジネスに役立つ AI をお届けします 来栖川電算は AI 技術の研究開発から応用まで幅広いサービスを提供する名古屋工業大学発ベンチャー(2003 年設立)です。未踏ソフトウェア創造事業の採択者やソフトウェア分野の様々なコンテストの入賞者が在籍しています。最先端の AI 技術だけでなく、膨大な高品質データを生み出す技術、ハードウェアの限界性能を引き出す実装技術、高品質なソフトウェアを実現する設計技術にも定評があります。 手軽に使える様々な認識エンジン 来栖川電算の認識エンジンを活用すれば、センサーデータに埋め込まれた意味を手軽に抽出できます。種類ごとに用意された認識エンジンは教師データや設定を変えるだけで様々なタスクへ応用できます。Linux・Android・iOS 用のライブラリ、WebAPI、コマンドラインツールなどプログラマフレンドリーな SDK を提供しています。トレーニングやコン
HTML5 のリセット・スタイルシート - html5doctor - HTML5.JP
サイト内検索 この記事は、html5doctor に掲載されている記事「HTML5 Reset Stylesheet」を日本語訳したものです。この記事では、HTML5 でマークアップしたページにも対応した、リセット・スタイルシートについて解説しています。最後に、HTML5 向けのリセット・スタイルシートもダウンロードできます。 原文タイトル HTML5 Reset Stylesheet 原文ページ URL http://html5doctor.com/html-5-reset-stylesheet/ 著者 Richard Clark 氏 原文投稿日 2009-07-27 一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを
CSS のコメントの書き方コレアレ
CSSもHTMLと同じように、ソース中にコメントを挿入することができます。 /*と*/で囲った文字列がコメントになりますが、入れ子にすることはできません。また、他のプログラムにあるような「#」や「//」といった単一行コメントはありません。 適切なコメントを挿入することで、複数人での作業するときや、時間がたってから編集するときなどにコードの見通しが良くなります。ブラウザ間の差異を埋めるための宣言やハックなんかも、適用させるブラウザ名や理由などをきちんとコメントで書いておきたいですね。 僕は、スタイルをグループに分けて記述するときなど、コメントを目立たせるために次のように記述しています。 /* ------------------------------ Header ------------------------------ */ div#header { } . . /* -------
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Internet Explorer デベロッパー センター
HTMLとCSSでカメラを書いたよ