IE 9以下に存在するセレクター数制限にはまった 開発中にいきなりCSSが壊れて原因を探っていたらこれに行き着きました。IE 9以下では1つのCSSファイル当たり4,095個までしかセレクターを認識しない。4,096個以上は無視される。ええええ。。 SCSSだと割とカジュ... 続きを読む

• less.carbonfairy.org
• コンピュータ・IT

昨日の日記 で書いた通り、こうしたtumblrを始めてみました。http://96x96.net/仕組みとしては、一つの投稿ごとそれぞれ CSS で border-image と 背景画像を指定して実現しています。マウスオーバーで動くのは単純な Transitions ですし、基本的にはそんなに難... 続きを読む

• d:id:rikuo
• コンピュータ・IT

結構前に、ここの名刺印刷が良かった！的な記事を書いたんですけど、結構な方に紹介者コードを利用して登録してもらったようで嬉しい限り！ 今回頼んだ名刺の出来がすごく良かった 名刺印刷をどこに頼むかお悩みの方はぜひ！ さて、適切なタイトルが浮かばなく... 続きを読む

• css-happylife.com
• コンピュータ・IT

iPhone 4Sが発売間近。 買おうか迷って一旦諦めたはずがまた迷い始めました、hakoishiです。 siriに甘い言葉をささやきたい。英語できないけど。 さて、コーディングで縦中央にオブジェクトを配置したいことって少なくないですよね。 しかしながら、cssはそうい... 続きを読む

• c-brains.jp
• コンピュータ・IT

css【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを | Webクリエイターボックスを読んで、「CSSだけである程度できそうだな」と思ったのでやってみた。 まず基本となるHTMLを用意するとりあえず、角丸四角形でボタンらしきものを作る。 htm... 続きを読む

• d:id:snaka72
• コンピュータ・IT

CSS lint found 0 errors and 0 warnings. How can you fix it? See the details below. 続きを読む

• csslint.net
• コンピュータ・IT

Chrome推奨なのですべてのブラウザでは無理なのですが、なかなかクレージーな実験をした人がいるようですね。 ↑ かなりど派手なBox Shadowを実現しています。 ↑ はてはアニメーションまで・・・飛び跳ねたりしちゃっていますよ。 もちろんソースも見ることが... 続きを読む

• www.ideaxidea.com
• コンピュータ・IT

Click on a pattern to expand Textareas are editable Want to submit a new one? Drop me a line at me [at] this domain Enjoy! By Lea Verou • If no other author is mentioned, the pattern is created by Lea Verou 続きを読む

• leaverou.me
• コンピュータ・IT

通常フロートした要素とデフォルトの文書フローで配置された要素は重なります。CSS 2.1仕様書のフロートの解説にある図Dがその例です。なので、通常フロートした要素に続くリストはそのブレット(や数字等)がフロートした要素の下に隠れてしまいます。この挙動に... 続きを読む

• hail2u.net
• コンピュータ・IT

画像に続けてfigcaptionをそのまま普通に表示するといまいちなことが多いです。それでも英語ならイタリック体にするとかでなんとなくその文字列がfigure要素に係っているものだということが表現できるような気がしますが、日本語の斜体はいろいろアレなので使い... 続きを読む

• hail2u.net
• コンピュータ・IT

段落の区切りに使うhr要素をちょっと凝ったデザインにするという話は以前書きました。似たような話はCSS-Tricksでも最近取り上げられていますね。しかしこれらはhr要素でのテクニックです。では、例えばsection要素の最後にこういったちょっと凝った感じの区切... 続きを読む

• hail2u.net
• コンピュータ・IT

Google Web Fonts APIのtextパラメーターを利用すると、ダイナミックにフォントのグリフを削減できます。本来はファイルサイズを軽減してモバイル向けに最適化するというような目的で設けられているパラメーターのようですが、これを利用して&だけ他のフォント... 続きを読む

• hail2u.net
• コンピュータ・IT

前書いたiOSのSafariで幅計算がおかしくなる件、もうちょい調査してみた。 どうもfont-sizeが11px、10px、9pxのときにマルチバイト一文字につき、offsetWidthの値がそれぞれ1pxづつ大きい値になるというバグっぽい。 「あ」の文字のspan要素のoffsetWidthをJSで... 続きを読む

• webtech-walker.com
• コンピュータ・IT

JeffreyFrancesco.org I'm playing Hammond-Organ, Melodion, and more keyboard instruments… About Information Weblog Contact ツイッターでも書いたのですが、preの背景をブラウザの幅いっぱいに拡大する というエントリ読んでて「ほうほう :before/after ... 続きを読む

• jeffreyfrancesco.org
• コンピュータ・IT

HamlとSassのバージョン3.1が4月24日にリリースされました。元々両者は同じプロジェクトだったのですが、今回のリリースから別々のgemとなり、インストールも別にできるようになりました。 Hamlはインデントを使ってシンプルにHTMLを生成できるテンプレートエン... 続きを読む

• el.jibun.atmarkit.co.jp
• コンピュータ・IT

pre要素でソースコードを折り返すためのCSSです。最近は色々なSyntax Highlighterが登場しているので必要ないかもしれませんが、URLなどの横に長い文字列をpre要素で表示したいときに有効かもしれません。 １．CSS 以下のCSSでpre要素の文字が折り返せます。「w... 続きを読む

• www.koikikukan.com
• コンピュータ・IT

こちらのブログで紹介されていた最適化方法をテストしてみました。HTML5/JavaScript platform game optimised for iPad | Seb Lee-Delislehttp://sebleedelisle.com/2011/04/html5javascript-platform-game-optimised-for-ipad/最適化の方法はHTMLのエレメント... 続きを読む

• d:id:nakamura001
• コンピュータ・IT

最近のブラウザではWebフォントの利用を可能にする@font-faceをサポートしており、使われているサイトもよく見かけるようになった。@font-faceはWebフォントの利用に限らず、ローカルのフォントの再定義にも使えるので、ユーザースタイルシートで利用すればＭＳ... 続きを読む

• hail2u.net
• コンピュータ・IT

CSSを拡張するためのメタ言語として、代表的なものに「SCSS(Sass)」と「LESS」があります。今回、導入を検討するにあたり、両者を比較しました。結果的には、「SCSS(Sass)」を導入することにしましたが、特に「SCSS(Sass)」を選択する決め手となった点に重点を... 続きを読む

• dxd8.com
• コンピュータ・IT

As we have seen during these past few months, CSS3 and HTML5 have demonstrated that designing is now possible without using graphic programs and relying entirely on code. On today’s tutorial we will show you how to make the fascinating set o... 続きを読む

• www.tutorialshock.com
• コンピュータ・IT

CSSでDOM要素に対してアルファフィルターを適用させたいときは、クロスブラウザを意識すると次のような記述になると思います。 もうすこし古いMozilla系ブラウザを対象にするなら-moz-opacityの定義も追加してあげるとことになりますが、 今回はIEに絞った話の... 続きを読む

• blog.katsuma.tv
• コンピュータ・IT

ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行の... 続きを読む

• hail2u.net
• コンピュータ・IT

box-shadow プロパティは、CSS3の「Background and Borders Module Level3」で定義されているプロパティだ。ボックスに対して1つもしくは複数のシャドウを適用できる。今回のCSS3道場では、box-shadowプロパティをWebデザインに取り入れる具体的な方法を紹介し... 続きを読む

• ascii.jp
• コンピュータ・IT

Google Chromeでfloatレイアウトが崩れる事象が発生しました。 かなりレアケースと思われますが、備忘録として以下に詳細を残しておきます。 １．サンプル サンプルはdl/dt/dd要素を使ったfloatレイアウトで、コメントフォームを想定しています。 (X)HTML（赤色... 続きを読む

• www.koikikukan.com
• コンピュータ・IT

CssUserAgentはJavaScript製/Web用のオープンソース・ソフトウェア。CSSは便利だが、ブラウザによって指定が異なってしまうケースに対応しようと思うと途端に煩雑になってしまう。特にここ数年のようにWebブラウザの種類が増えると大変だ。 このようなクラスが... 続きを読む

• www.moongift.jp
• コンピュータ・IT

なんとなくブログの見た目を少しいじった(テスト前になると部屋を片付けたくなるアレ)。シングルカラムだと横に間延びするのは前から気になってたので、max-widthを1000pxで設定して、あとフッターをシンプルに。で、はてなスターってデフォルトだとマウスを乗... 続きを読む

• d:id:os0x
• コンピュータ・IT

CSS3のtransformプロパティでscale()(または-ms-filterでMatrix())を使うと、ブロックの拡大と縮小ができる。これを利用するとVerdanaをCondensedなフォントっぽく細くしたり、ワープロ時代の倍角文字や縦倍角文字を実現することが簡単にできる。コンテンツ本文... 続きを読む

• hail2u.net
• コンピュータ・IT

Google Chrome, Safari, Lunascape Webkit など、webkit 系ブラウザで利用できる ::-webkit-scrollbar 擬似要素に関する覚え書きです。 これはその名の通り、スクロールバーをデザインするときに使います。 基本的な説明は Safari のブログに書かれていますので... 続きを読む

• unformedbuilding.com
• コンピュータ・IT

CSS3で可能になった新しいレイアウト法「ボックスレイアウト」。 新しいといっても、それはあくまでレイアウトの指定方法であり、レイアウトの形自体は普段我々がよく使っているものです。 基本的に縦に区切られた2カラム、3カラム、4カラム…といったレイアウ... 続きを読む

• monodez.com
• コンピュータ・IT

Dropboxの底力 私はDropboxのヘビーユーザ。 すでに50GB($9.99/月または$99/年)は残り60%に達している。 ファイルの同期、共有、公開。シンプルながら面倒なタスクがシンプルにできることが最大の魅力だ。 The Ultimate Dropbox Toolkit & Guideにて30以上のTip... 続きを読む

• css.studiomohawk.com
• コンピュータ・IT