CSS3-UIの新ドラフトではime-modeプロパティが廃止に | スラド IT
CSS Basic User Interface Module Level 3 (CSS3 UI)（Working Draft 2015-02-24）で、「ime-mode」プロパティが廃止となった（「水底の血」ブログ、参考訳）。 ime-modeは、HTMLのinput要素でIMEの状態を設定するCSSプロパティ。IMEを使った日本語入力を禁止したり、入力時の初期状態を制御するといった用途を想定しているようだ。Internet Explorer 5.0の独自仕様として登場し、他のWebブラウザでも一部実装された。たとえばFirefoxでは多くの議論の結果、ベンダプレフィックスなし、デフォルトで有効として実装され、その上でWebデザイナに対しては一般のサイトで使用しないようにアナウンスし、IMEの状態を制御されたくないユーザーに対してはユーザスタイルシートによる上書きを案内した（Mozil
なんでもかんでもpicture要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点
画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。 Cloud Fourというアメリカの制作会社のブログ で、<picture>要素の使い方について注意を促していて、とても重要な情報だと思ったのでこちらでもシェアします。先日書いたレスポンシブ・イメージとPicturefill 2のまとめとあわせて、近い将来、レスポンシブ・イメージ実装の参考になれば幸いです。 まずは推奨の記述方法から レスポンシブ・イメージ実装の際に推奨されるHTMLの記述方法は以下のとおりです： とりあえず、これだけ覚えておけば、細かいところはこの記事をはてブ しておいて、使う時にもう一度見な
フォントサイズをremで指定する。（emとの比較） | バシャログ。
こんにちは。mackyです。 CSS3で追加されたremという単位が便利な理由をpxやemと比較してまとめてみました。 IE8以下は非対応ですので、px指定を追加する必要がありますが、 スマートフォンやRWDにはとても便利です。 ちなみに、 remというのは、「root+em」（ルートエム）の略でhtmlのサイズを継承するemだと。 なるほど、とてもわかりやすいです。 そのまえにem（pxも）の継承をおさらい。 px(ピクセル) ピクセル単位の指定。 環境によって変化しない絶対単位です。 em(エム) 文字の高さを基準にした単位。1emは1文字分で、環境によって大きさが変化する相対単位。 bodyなどでfont-sizeの指定をしていない場合、あるいはfont-size:100%なら「1em=16px」が基準になります。 まずはpxとemをおさらい pxとemについてのわかりやすい説明はこ
box-sizing は魔法のコトバ！もうpaddingやborderを含めた幅の計算はヤメヤメ | Cappee Design
あとで読みたい人は… CSS3 の box-sizing プロパティがかなり便利です。 あるのは知っていたのですが実際何案件か使ってみてやっぱり便利でした。 CSS覚えたての頃よくやった横幅や高さを指定する時のミスがなくなります。 「あれ、なんで崩れるんだろ？」 「padding と border 分マイナスするの忘れてた～」 ってのがよくありました。（今もたまに。。） それが魔法のコトバ「box-sizing」を唱えれば、マイナスすることなく横幅や高さを指定することができます。 これはものすごい効率化になりますね！ box-sizing の書き方 box-sizing プロパティでボックスサイズ(width, height ) の算出方法を 指定します。 指定できるのはこちらの２種類です。 content-box … 【デフォルト値】padding と border を要素の幅と高さに含
[JS]アイデアが素晴らしい！ページにちょっとしたアクセントを加えるスクリプトのまとめ
そのまま使ってもよし、アイデアに刺激されインスパイアされてもよし、の工夫をこらした素晴らしいアイデアのスクリプトを紹介します。
Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
今回このブログ - Webデザインレシピを、iPhone などでも見れるようにリデザインしました。使用したのは CSS3 の Media Queries（メディアクエリ）。メディアクエリの使い方や感想、気をつけたい注意書きをまとめてみました！ 遅ればせながらこのブログ – Webデザインレシピを、スマートフォンでも見れるように改修しました。このブログは WordPress で書いているので、スマートフォンや iPad への対応方法はいくつもあるのですが、今回は CSS3 の Media Queries（メディアクエリ）を使って、iPad、iPhone など、いろんなデバイスに対応（対応というか、一応見れる程度）にしてみました。 なので Media Queries を使ったスマートフォン対応と、リデザインしながら思ったことなどをまとめてみました。 CSS3 Media Queries 目次
画像を使わずCSSだけで任意の間隔の破線を描く | 12px.com
cssで破線を使おうと思ったらdottedとdashedの2種類しか用意されていないので、それ以外の間隔の破線を使用したい場合にはあらかじめ白黒のgif画像を用意して、背景に繰り返して使用する事が多いです。 しかしCSS3のlinear-gradientを使用すれば任意の間隔の破線を描画する事が可能です。 CSS3を使用するので対応ブラウザがちょっと狭くなりますが 1 2 、画像を用意するのとくらべて線分や間隔の調整も容易になりますし、Retinaディスプレイにも対応する事を考えたら（奇数の破線を使用する場合など）2種類の画像を用意する手間が省けますのでCSSで描画する方が楽チンです。 手順やり方は下記の4つの指定をすれば良いだけです。 破線の部分はbackground-imageを使用して背景画像として描画します縞模様はlinear-gradientを使用してグラデーションの濃淡で表現し
いろんなパンくずリストを画像を使わずに CSS で再現してみた。 - buena suerte!
CSS Triangle を使ったパンくずリストを見てて、この方法だと単色はともかく、グラデーションかけたい時、ボーダーで作った三角がネックでうまくいかないだろうなっておもった。 参考記事：Breadcrumb Navigation with CSS Triangles | CSS-Tricks 前回、 iPhone Buttons を再現した際に使った方法でグラデーションかけられそうなので試してみた。 オリジナルの詳しい解説は既にコリスさんにありますので割愛。 大分書き進めた後に気づいたけど、コメントにあった span を使う方法のがパッと見簡単やないかな……こっち使うほうがいいかもしれんね…… 動作確認 Chrome(7.0.517.41) で確認。もしかすると、ウィンドウ幅が小さいと崩れるかも。横幅 1024px で最大化して確認してます。 同じ webkit の Safari でも
[18-4] 円形（放射）グラデーションを作ろう (radial-gradient)
[18-4] 円形（放射）グラデーションを作ろう (radial-gradient) 最終更新日：2017年11月01日 （初回投稿日：2011年08月08日） 参考：CSS Image Values and Replaced Content Module Level 3 本日のINDEX 円形グラデーションを指定してみよう 円形グラデーションの構文 「開始色」「終了色」の2つが最低限必要 色を途中で変えてみよう（カラーストップについて） 中心点やサイズの指定 古いブラウザ用の「ベンダープレフィックス」 ● 2017年10月：サンプルファイルを変更しました。それに伴い本文も編集しました。 ● 2015年02月：この記事には ベンダープレフィックス（-webkit- などの接頭辞）を使っていましたが、不要と判断し記事から削除しました。 ただし、オールドブラウザ対策として 「ベンダープレフィッ
![[18-4] 円形（放射）グラデーションを作ろう (radial-gradient)](https://cdn-ak-scissors.b.st-hatena.com/image/square/c46464c05b373f0e64f1537cb2ef13930e98abb1/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-62.fc2.com%2Fh%2Fo%2Fn%2Fhonttoni%2F131113-1ellip.gif)
[css] contentプロパティで挿入できるコンテンツ – WebTecNote
clearFixでお馴染みなCSSの擬似セレクタ::beforeと::afterではcontentプロパティというものが使えるわけですが、 ::beforeと::afterがIE7以下未対応ということもあって使ってない人は未だ多かろうと思います。 しかしながらレガシーなIEで表示されないから使わないというのは非常に勿体無いので、 今一度contentプロパティで挿入出来る内容についてまとめておこうと思います。 ※2019年現在は全ブラウザ対応しています。 挿入出来るモノ 大きく分けると３つです。 テキスト プロパティの値 画像 content:”テキスト” 半角英数や半角の記号ならそのままでOK。ただしクォーテーションなどのメタ文字は\でエスケープしないと表示されない。 日本語などの2バイト文字も書いたまま表示されるけど、数値文字参照の値で書いた方が無難です。 例：タイトルの前に★マークを
![[css] contentプロパティで挿入できるコンテンツ – WebTecNote](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
WEB/スマートフォンサイトにおけるフォントサイズのベストな指定方法 | 株式会社NONAME Produce(n2p)｜デジタルプロモーション企画・制作
諸説あるWEBサイトの文字サイズ指定。 現時点でベストなのかな～と思う指定をまとめてみました！ パソコン用サイト [fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”
Original Hover Effects with CSS3
Hover Style #1 A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. Read More Hover Style #1 A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. Read More Hover Style #1 A wonderful serenity has taken possession of my entire soul, like these
[CSS]フォームにちょっとだけアニメーションを加えて楽しくするスタイルシート -Animated Toggles
フォームのチェックボックスとラジオボタンに余分はタグは使用せずに、ちょっとだけアニメーションを加えて楽しくするスタイルシートを紹介します。 Animated Toggles HTML チェックボックスもラジオボタンも通常通りにマークアップします。 余分なタグは特にありません。 <form> <h1>Animated Toggles!</h1> <div class="controls"> <input id='check-1' type="checkbox" name='check-1' checked='checked' /> <label for="check-1">Apples</label> <input id='check-2' type="checkbox" name='check-1' /> <label for="check-2">Oranges</label> </div
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Welcome to webcreatornote.com
CodePen - Front End Developer Playground & Code Editor in the Browser
CSS の background-image のサイズ指定 - わからん
CSS Regionsを使った新しい CSSレイアウトを作る方法
HTML5/CSS3のテンプレートのまとめ | コリス
Home
