altにスタイルを当てたいと思ったことがなかったので知らなかったけど、普通にスタイルをあてられるようだった。 色を変える フォントサイズを変える 画像のリンク切れなどでalt属性が目に見えていたら、画像が読めないことに対処しがちで、altの見た目をカスタマイズしよう、と思い当たったことがなかった。 骨折したときにギプスに落書きする、みたいな活動。
altにもスタイルを当てられる - hitode909の日記
altにスタイルを当てたいと思ったことがなかったので知らなかったけど、普通にスタイルをあてられるようだった。 色を変える フォントサイズを変える 画像のリンク切れなどでalt属性が目に見えていたら、画像が読めないことに対処しがちで、altの見た目をカスタマイズしよう、と思い当たったことがなかった。 骨折したときにギプスに落書きする、みたいな活動。
Spring-cleaning Unused CSS With Grunt, Gulp, Broccoli or Brunch
Spring-cleaning Unused CSS With Grunt, Gulp, Broccoli or Brunch March 27, 2014 [caption id="attachment_6609" align="aligncenter" width="640"] The tough economic times on Tatooine hit everyone hard, including the Jawas.[/caption] Delivering a fast experience on the web usually involves reducing server response time, minification of CSS/JS/HTML and an optimisation of images and above-the-fold conten
CSS内の画像埋込で高速化(Data URI) - Qiita
スタイルシートの中で画像を多数呼出していると、HTTPリクエストが大量発生してページの読み込みが遅くなります。このような場合、CSS Spriteを使って回避することが一般的ですが、Data URIを使うと運用はもっと簡単です。 CSSファイルへの埋込 例えばOSSCafeの場合、サイトのCSS内で16ほどの画像ファイルを読込んでいます。 body { background-image:url(images/body.png) } body>header { background-image: url(images/header.png) } body>header div.center>h1 { background-image:url(images/logo.png) } ...(略) body { background-image:url(data:image/png;base64,
iOS 7 の隠しフォント， ヒラギノ角ゴ W1/W2 を CSS で指定する（追記：Yosemite でも可）
論より証拠，というわけでまずは iOS 7 を搭載した iPhone/iPad/iPod touch で下記の文字列をご覧くださいませ． ※ 2014 年 10 月 24 日追記：OS X Yosemite でも表示されるようになりました． ヒラギノ角ゴ W1 ヒラギノ角ゴ W2 ヒラギノ角ゴ W3 ヒラギノ角ゴ W6 ※ ヒラギノ角ゴ W3/W6 は iOS 6 以前から存在するフォントですが，比較のために用意しました． iOS 7 端末をもってないという方は以下にスクリーンショットを用意しましたのでご覧くださいませ． CSS での指定方法は ヒラギノ角ゴ W1 font-family: ".HiraKakuInterface-W1"; ヒラギノ角ゴ W2 font-family: ".HiraKakuInterface-W2"; 以上です．クォーテーション（""）と先頭のピリオド（.）
CodeGrid - フロントエンドに関わる人々のガイド
HTML/CSS 387 CSS仕様 121 CSS設計 53 HTML仕様 40 SVG 25 スタイルガイド 14 HTML/CSSの実践 135 HTML/CSSドリル 4 フォント 3 データ形式 6 性能と品質 49 セキュリティ 16 パフォーマンス 12 アクセシビリティ 21 デザイン 65 ディレクション 50 ドキュメンテーション 7 JavaScript 593 ECMAScript 45 ライブラリ 71 ブラウザAPI 38 WebGL 42 テスト 36 JavaScriptの実践 64 JavaScriptの設計 9 JavaScriptドリル 15 非同期通信 5 Vue.js 73 DOM 9 Angular 30 Electron 4 Web Components 14 jQuery 24 Backbone 17 TypeScript 24 Coffee
qrcode.64p.org をリニュアールした - tokuhirom's blog
http://qrcode.64p.org/ qrcode.64p.org は、開発サーバーの URL をガラケーでみたいときなどにつかっているのだが、自宅サーバーがぶっこわれたことにより復旧が面倒になったので、クライアントサイドですべてうごくようにつくりなおしてみた。 ソースはこちら https://github.com/tokuhirom/qrcode 5年ぐらい前に JS でうごく QR Code レンダラみたいなのがはやったけど、あのときは速度がおそくて実用的ではなかったが、現在では JS engine も高速になっているし、canvas 要素も一般的で、また canvas 要素がつかえないブラウザでも ExplorerCanvas.js や uuCanvas.js などが利用できるので、いよいよ実用的になってきた印象。 それだけだとあんまおもしろくないので、無駄に xcss.js
CSS3 properties exposed | css3files.com
Enables to animate an element. Every animation consists of the animation properties, e.g. delay and duration, and the related keyframes, which define its appearance. Compatibility -webkit-animation Safari 5+, Chrome 10+ iOS 3.2+ Android 4+ Blackberry 7+ @-webkit-keyframes animation Firefox 16+ Internet Explorer 10+ Opera 12.1+ IE Mobile 10+ @keyframes Not supported by Firefox prior to version 5, I
福德正神
请在以下填写您的注册信息 推荐人帐号: 上级代理帐号或推荐人帐号,如没有可以不填 会员账号： *账号规则：账号必须为6-15位数字和字母组合 登录密码： *密码规则：密码长度要有6-20个字符，以及必须含有数字和字母组合 确认密码： *确认您的登录密码,请输入和以上一致的密码 真实姓名： 真实姓名必须与你用于提款的银行户口名字一致 提款密码： *取款必须认证,势必记住 邮箱： *电子邮箱(email)格式：888888@qq.com QQ号码： 请输入QQ号码 手机号码： *手机号码格式: 18888888888 短信验证码： 发送验证码 验证码： 已有账戶? Copyright © 福德正神 All Rights Reserved. 关闭
特定のclass属性を持った任意の要素にマッチするXPath | 3.14
結論特定のclass属性を持った任意の要素にマッチするXPath(hogeは指定したいclass属性名) //*[contains(concat(" ",normalize-space(@class)," "), " hoge ")] 特定の要素にしたい場合は適当に div[contains(concat(" ",normalize-space(@class)," "), " hoge ")] などとする． 概要特定のclass属性を持った任意の要素にマッチするXPathというのはアドオンやUserJavaScript，スクレイピングの際にDOMノードを特定するために良く使いますが，XPathの書き方がマズイ人がたまにいます．普通に考えたらXPathはこうなります． XPath1:: //*[@class="hoge"] class属性は以下の引用部分に書かれているとおり，スタイルシート以
タグクラウドみたいなのの単語の折り返しに関して
単語の禁則処理に関しては、結構無頓着であんまりそういう事がなかったのもあり、イマイチ分かってないんですけど、ブラウザによる差異が激しい問題の一つだと思います。たぶん。 Firefox3になってから、URLなどが長い場合折り返されるようになったみたいだけど、単純な半角英数の羅列だとやっぱり折り返してくれないんですね。ちと残念。 で、今回はむしろ折り返さないで欲しいっていう状況の時の処理に悩んだのでメモがてら。 サンプルは以下より確認できます。 単語の禁則処理に関してのサンプル 取りあえず、サンプル見てもらうと2つ似たようなのがあるんですが、タグクラウドみたいなのを作ったときに普通に作ると多分2番目みたいになるかと思います。 通常はコレで問題ないのです。 なにせ、1番目みたいにすると、長いテキストが入った場合に折り返してくれないので、はみ出したりしてしまいます。 更に、IE6だとoverflo
CSS のセレクタの名前の整理 - IT戦記
はじめに 「CSS のセレクタ」っていうと以下のようなものを想像すると思うんですけど div.container ul > li じゃあ、 div はセレクタ？ .container はセレクタ？ div.container はセレクタ？ > はセレクタ？ などなど色々と疑問が出てくる訳で、どういう名前で呼べばいいか。自分のために書いておく。 これ系のエントリでは、以下のエントリが一番参考になります http://d.hatena.ne.jp/kiririmode/20080516/p1 Selectors group カンマで区切られたセレクタのリスト div.container ul > li, div#hoge.hoge ~ span#fuga.fuga Selector カンマで区切られてる一個一個のやつ div.container ul > li とか div#hoge.hoge
IE で一時的に要素のスタイルを変更する - IT戦記
いろいろためしたけど、以下が一番楽 // 変更 element.runtimeStyle.cssText = ' width: 100%; height: 100%'; // 戻す element.runtimeStyle.cssText = ''; 特に、戻すときに cssText 以外のプロパティを空にしても、おかしな挙動をするので cssText を使うといい。 しかも IE だけは、 CSSStyleSheet オブジェクトにも cssText が使える // これも IE だけ var sheet = document.createStyleSheet(); sheet.cssText = 'div { hoge: hoge; fuga: fuga } div div { piyo: piyo }'; sheet.cssText = '';
めも - IT戦記
このメモについて id:amachang の私的な学習目的 IE6 の標準モードに関するバグ いろいろとポイント layout IE6 の視覚整形モデルの中で要素は、大きく分けて layout を持つ要素と、 layout を持たない要素に分けることができる。 layout を持つ要素とは、自分のサイズや位置に責任を持つ要素である。 layout を持つ要素は、四角形の領域を作る。 layout を持たない要素は、直近の layout を持つ要素のサイズおよび位置と、そこの間にあるすべての要素の margin, padding, border によってその開始点、折り返し点が決まる。 layout を持たない要素は、四角形の領域を作らない。上下左右の間隔を保持しているだけに過ぎない。 layout を持たない要素間の上下マージン（相殺されるマージン）は二つの要素間の共有のもので、ある要素特
Make your pages load faster by combining and compressing javascript and css files | rakaz
Make your pages load faster by combining and compressing javascript and css files As some of you may know, I am currently working on a content management system. Although I am not able to share all of the code – it is proprietary after all – I already made one debugging tool public. This tool can be used to test some common techniques which decreases the bandwidth generated by feed consumers. Toda
getComputedStyle について調べてたら深みにハマったのでメモ - IT戦記
getComputedStyle とは！？ ある要素にどんなスタイルが当たっているかを計算してくれる。便利な関数。 使いかたはめっちゃ簡単！ var style = getComputedStyle(element, ''); alert(style.fontSize); // 14px alert(style.color); // rgb(0, 0, 0) ちなみに第二引数は疑似要素の style を取りたい場合に使います。通常は空文字列でいい。 でも、 getComputedStyle はこのままでは IE, Safari では動かない。 Safari では window(グローバル領域) に getComputedStyle は定義されてなくて、 document.defaultView だけに getComputedStyle が定義されている。 ちなみに、 Firefox, Op
[CSS]IE6でよく遭遇する6つのバグとその解決方法 | コリス
CSS Trickのエントリーから、IE6でよく遭遇する6つのバグとその解決方法の紹介です。 IE CSS Bugs That’ll Get You Every Time ボックスモデルのバグ マージンが二倍になってしまうバグ min-width, min-heihgtと同等の指定 Stepdownバグ hover擬似クラスをa要素以外にも対応 透過PNGを透過表示に対応 ボックスモデルのバグ <textarea name="code" class="css" cols="60" rows="5"> div#box{ width:100px; border:2px solid black; padding:10px; } </textarea>
MediaQuery まとめ - IT戦記
Media Query とは CSS3 から導入される Media Type を大幅に拡張する仕様です。 そもそも Media Type とは Media Type とは CSS 2 系に元々ある仕様で CSS を適用するメディア（パソコンの画面、テレビ、プリンタ用紙など）を指定するときに使います。 以下の例だと、 media 属性の中に記述されている all や screen や print が Media Type です。 <link rel="stylesheet" type="text/css" href="共通の.css" media="all" /> <link rel="stylesheet" type="text/css" href="パソコンの画面の.css" media="screen" /> <link rel="stylesheet" type="text/css"
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
cow2design.com
【図解】CSSだけで画像の縦横比を維持したサムネイルを表示する - Qiita
画像を良い感じに切り取ってblock要素に納める