CSSに関するthink49のブックマーク (8)

  • CSS3で実現するアローアイコン

    CSS3で実現するアローアイコン スマートフォンなどでリンク領域を示すことなどで使われることが多いアローアイコン。これをCSS3を使って表現する方法を紹介します。 ちなみにアローアイコンとはこんなかんじのリストの右にある矢印。(アローアイコンの正式名称とかあるのかしら) まず、HTMLは次のようにします。今回は便宜的にアローアイコンを付けるa要素にclass属性「arrow」を付加しています。 <ul> <li><a href="#" class="arrow">link</a></li> <li><a href="#" class="arrow">link</a></li> <li><a href="#" class="arrow">link</a></li> <li><a href="#">link</a></li> <ul> .arrowには以下のようなCSSを指定します。 li a

    CSS3で実現するアローアイコン
    think49
    think49 2013/07/09
    これは面白い。L字型 border を transform で45度回転させる事で矢印「>」を表現するテクニック。
  • スクリプトが無効の場合のスタイル

    たとえばホームページのビジュアル要素など、いったん非表示にしておいてスクリプトでふわっとフェードインさせたい、みたいなことはよくある。そのとき非表示にする操作も JavaScript にやらせると一瞬見えてしまうことがあるので CSS で非表示化したいが、それだとスクリプトが無効の場合に何も表示されなくなってしまう… というような、スクリプトによる操作を前提にしたスタイルのフォールバックをどうするかという問題。 ここのところよく使っていたのは、JavaScripthtml 要素の class 属性を操作し、それをもとに CSS を書くという手。Modernizr でも使われてるあれ。 (function () { var root = document.documentElement; root.className = root.className.replace(/\bno[-_]

    スクリプトが無効の場合のスタイル
    think49
    think49 2012/07/01
    単純に document.styleSheets[0].insertRule() でいいんじゃないかなーと。
  • 新型MacBook Proのおかげで大半のウェブサイトはデザインやり直し? |SEO Japan by アイオイクスSEO Japan|アイオイクスのSEO・CV改善・Webサイト集客情報ブログ

    ついに新型MacBook Proが登場し特にRetina採用の美しいディスプレイが話題を呼んでいます。画面が綺麗になることはユーザーにはとっても良いことなのでしょうが、この鮮明すぎる解像度が既存のウェブデザインに大きな波紋を呼んでいるようで。。。今回はそんなウェブデザイナー・ウェブ運営者が気になる話題をThe Next Webから。 – – SEO Japan 昨日AppleのWWDCを見た他の誰もと同じように、私は、最新のRetinaディスプレイ搭載のMacBook Proを自分の物にしたいと思っている。もちろん、2,200ドルからという価格を考えると、飛びつくには待たなければならないだろう。何とかなると信じて思い切るつもりでいるが、そう考えているのは私だけではないと思う。待っている間に、この新しいリリースの何が特別なのかを見る価値はある。 新しいMacBook Proモデルは、ハイエン

    新型MacBook Proのおかげで大半のウェブサイトはデザインやり直し? |SEO Japan by アイオイクスSEO Japan|アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
    think49
    think49 2012/06/25
    そんなことより固定幅レイアウトを採用しているサイトの問題が深刻な気がします。calc() とリキッドデザインで十分だと思いますが、妥協点として縦横比でレイアウトできると面白いかも。
  • CSSや画像の命名規則について - kojika17

    コーディングで時間のかかる要素の1つとして、id,class名や画像名などの命名規則が挙げられます。 特に中規模、大規模のサイトで、適当な名前を付けると名前が被る確率が上がり、 その結果、画像の上書きや不要なプロパティがかかってしまうなど、よくない結果になることも考えられます。 一つの例として、私の命名規則について紹介してます。参考程度に読んで頂けると幸いです。 カテゴリに分類して、つなげる。 ページのどの位置に属すか分類し、つなげる方法を取っています。 基的に、CSSや画像名は同じにします。同名にすることで、名前を考える手間も省け、変更箇所の特定がしやすくなります。 例: CSS #top-side-nav 画像 top-side-nav-home.png top-side-nav-company.png 上記のように命名することで、 デザインを見なくても、どのような箇所に使われている

    CSSや画像の命名規則について - kojika17
    think49
    think49 2012/02/11
    パフォーマンス重視ならIDセレクタになるのは自然な発想だと思うけど、DRY 的には効率が良くないので一長一短かな。著者のやり方だと同じスタイルを何度も書くことになるので管理性は良くない。
  • 中里一日記: HTMLに「見た目ではなく意図を書く」という幻想

    HTMLに「見た目ではなく意図を書く」という幻想 『Coders at Work』を立ち読みした。 Brendan Eichが10日間でJavaScriptを設計実装させられたと知り、ますます1994年のNetscape社を爆破したくなった。Netscape社がうまくいっていないことは製品からも見て取れたが(マイナーバージョンが上がるたびに同じバグをエンバグ→修正→エンバグ→修正と繰り返した事件を覚えている)、ここまでひどかったとは想像できなかった。アメリカのドキュメンタリー屋には、Netscape社がどんなクソの山だったかを証言するドキュメンタリーを制作してほしい。 私には想像もつかないレベルでプログラミングしているお歴々のありがたいお言葉を拝読しながら、私は疑問に思った。誰かのクソをってクソをひりだしてそれをまた別の誰かにわせる、あの世界との接点がどこにもない、と。 誰かのクソを

    think49
    think49 2011/12/29
    #HTML + #CSS の分離構造にはメンテしやすいメリットがあって、そこを否定するならCSS不要論に等しいと思う。CSSが嫌ならWiki記法をマスターしてHTMLに変換させる方が現実的じゃないかなー。
  • ブラウザ デフォルトCSSのチートシートを作ってみた。(力尽きた) - kojika17

    ' CSSリセットを改変している時に、「CSSリセットは当に必要か?」ということを疑問に思うようになってきました。 ブラウザのデフォルトであるユーザーエージェントスタイルシートをCSSリセットでnormalにして、さらにboldに戻すということをしています。 これだと単に、記述量と処理を増やしているだけに過ぎません。 「デフォルトCSSを理解すれば、CSSリセットはいらないのではないか?」という考えの元、デフォルトのCSSを調べてみました。 ユーザーエージェントスタイルシートの調査 ブラウザのアプリケーションファイルに潜ってCSSを探したところ、Fire FoxのCSSのみ探し出せました。 それ以外はアプリケーションの中にCSSが含まれている場合などにより、デフォルトCSS探せませんでした。 ただしIEに関しては、まとめたれたサイトがあったので、これを参考にします。 Internet E

    ブラウザ デフォルトCSSのチートシートを作ってみた。(力尽きた) - kojika17
    think49
    think49 2011/03/12
    これは力作。これを元に CSV 化してみようかな。
  • NameBright - Coming Soon

    NameBright.com - Next Generation Domain Registration thisiserichoffman.com is coming soon

    think49
    think49 2011/03/10
    角丸(border-radius), 透過色(opacity), 影(box-shadow), グラデーションのジェネレータ。プレビューしながらスライダーを動かすタイプ。
  • XHTML+CSSでキャメルケースを使うべきではない7つの理由 | tshinobu.com

    XHTML+CSSのid/class名でキャメルケースを使うべきではない7つの理由を、CSS WIZARDRYの「CSS: CamelCase Seriously Sucks!」から覚え書きです。下記はその意訳です(間違っていたらすみません)。 はじめに 今、この記事が何人かの人をいらだたせることは分かっているし、私が普段どのようにコードを記述しているのか伝えたいのではありません。私はシングルラインCSSがキライです。ただ、明瞭で、道理にかなった、理解しやすく、首尾一貫したコードであるならば、そんなに文句を言うことはありません。私の目から見て最も重要なのは一貫性です。しかしながら、キャメルケースは、質的に矛盾していることが明らかなのです。 1. CSSはハイフンで区切られた構文 CSSはハイフンで区切られた構文です。どういうことかというと、font-size、line-height、bo

    think49
    think49 2010/12/12
    JavaScript ではキャメルケースが基本なので慣れてしまいました。読みやすさも慣れの問題と感じます。一貫性がカギはその通りだと思うので自分の中で一貫性が保たれていればいいと思います。
  • 1