CSSに関するNOBEのブックマーク (23)

  • 5509.me

    This domain may be for sale!

    NOBE
    NOBE 2011/04/08
  • WebサイトをiPhoneで見やすくする5つの方法

    2017年6月29日 Webサイト制作, Webデザイン, 便利ツール iPhone持ってないくせにWebクリエイターボックスをiPhoneで見やすいよう改良しました。iPhoneからhttp://webcreatorbox.comにアクセスすると自動的にhttp://webcreatorbox.mobify.meにリダイレクトされます。(されてなかったら直接http://webcreatorbox.mobify.meからドウゾ…)今回は下記に説明するmobifyというサイトからiPhone用サイトを作りましたが、他にも便利な方法があったので紹介してみます。 ↑私が10年以上利用している会計ソフト! 1. CSSのみで切り替える iPhone用に作成したCSSを作り、デバイスの幅によって使用するCSSを切り替えます。 <link rel

    WebサイトをiPhoneで見やすくする5つの方法
    NOBE
    NOBE 2010/09/11
  • tableを使わずdivで縦位置を指定 « (X)HTML+CSS Tips « XHTML+CSS Webサイト制作Tips « ScuderiaWeb

    tableのセルでは、vertical-alignを指定することで、縦方向の中心や下揃えで文字列や画像を配置することができますが、divタグの中では通常vertical-alignは適用されません。 画面中央に文字列を配置したい場合など、divでvertical-alignを指定する方法を紹介します。 サンプル tableタグを使用せずに、中央・下部に文字列を配置したサンプルです。 中央に配置 コード(中央に配置) (X)HTML <div class="outer"> <div class="vertical_middle"> <p class="inner">テキスト</p> </div> </div> CSS div.outer { display: table; /* ① */ height: 100px; width: 100%; /* ② */ background: #E3F

    NOBE
    NOBE 2010/07/05
  • 最近はword-breakするのにJSは使わないほうがいいみたい - Webtech Walker

    Twitter / tacamy: { word-wrap: break-word; } ... ということなのでJSを使わずにCSSだけでやれるみたいです。しかもこれだけ。 .word_wrap { word-wrap: break-word; } IE6、7、8、Firefox3.6、Safari4、Chrome、Opera10.52で確認しましたけどこれだけで全部いけます。ブラボー。 <div class="word_wrap">http://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%8D%E3%83%83%E3%83%88%E3%82%B3%E3%83%9F%E3%83%A5%E3%83%8B%E3%83%86%E3%82%A3</div> <div class="word_wrap">aaaa

    最近はword-breakするのにJSは使わないほうがいいみたい - Webtech Walker
    NOBE
    NOBE 2010/07/01
  • もう、class名やid名で悩まないんだからっ!!|CSS HappyLife

    class名やid名って付ける時悩みませんか? 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ!? 2010年6月10日追記: この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent

    もう、class名やid名で悩まないんだからっ!!|CSS HappyLife
    NOBE
    NOBE 2010/06/11
  • ハイパフォーマンスCSSの記述方法 : Weblog : SimpleIsm

    CSS すでにいろいろ出回っていますが、そういった情報は1つだけあれば良いわけではなく、それらの情報をまとめたり、精査していって、さらにより良いものになっていくのがWebの良いところだと思います。業務を行う中でメモしていたものが貯まってきたので、その理由とかを調べてみたのでまとめます。まぁ前置きはこれぐらいにして題。 CSSをシンプルに効率良く書くということは、ネットワーク転送量の低下、パース速度の向上、そしてHTMLとのマッチング効率化に繋がります。そしてそれは即ち、ページのパフォーマンスを向上させることに繋がります。 また、「効率的なスタイル指定をする」と考えながら臨むと肩に力が入ってしまいますが、「非効率なスタイル指定をしない」という視点で考えていけば、自ずと軽量で効率的なCSSを記述することができると思います。 パターンマッチング(Pattern matching)について 「非

    NOBE
    NOBE 2010/05/19
  • 覚えて良かったCSSテクニック « zaru blog

    ここ最近、覚えてよかったなーと思ったCSSテクニックをまとめてみる CSSテクニックは時代とともに変わっていくけれど、ここ1年ほどスタメンレベルで使うCSSテクニックが絞られてきたので、ここらでちょっと個人的にもまとめておこうかと。 liボックス 幅:190px マージン:15px liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 <li>にはクラスを指定せずに、左右にぴったりくっ付くように配置が可能。 <style type="text/css"> #box1{ width: 600px; } ul{ width: 615px; margin: 0 -15px 0 0; overflow: hidden; _zoom: 1; font-size:7

    NOBE
    NOBE 2010/04/26
  • http://tarimon.co.uk/entry/28

    NOBE
    NOBE 2010/04/03
  • 透過PNGの罠 - AUSGANG SOFT

    IE7で透過PNGがサポートされて、以前からもありましたが、透過PNGをIE5.5、6でも表示させるJSライブラリがいくつか出ています。 これらのライブラリは、IE独自のAlphaImageLoaderフィルターを利用して擬似的に透過PNG表示をさせています。 でも、このAlphaImageLoaderフィルターには、癖があって、それで以前にハマったことがあります。 実例 IE6(5.5)で見てください。 吹き出しの中のLingerへのリンクをクリックして移動することができますか? 原因 原因がさっぱりわからなかったので、ライブラリの中身を見て、AlphaImageLoaderで検索したところ以下の情報が。 PNG ちょっと裏技 (2) http://www.minc.ne.jp/~konda/new/png/urawaza02.html アルファイメージローダーを使用した要素(タグ)の内

    NOBE
    NOBE 2010/03/26
  • CSSスプライトで画像を円滑に表示させる

    2014年8月13日 CSS, Webサイト制作 CSSスプライトとは、複数の画像をひとつにまとめて、CSSでポジションを指定することにより表示させるCSSの技のひとつです。画像の数を減らすことにより、サイトの表示を速めることができます。以前よりYoutubeなどに使用されているので、その名前を一度は聞いたことがあるかもしれません。ここではCSSスプライトを使用したメニュー画像の作り方を紹介します。 ↑私が10年以上利用している会計ソフト! CSSスプライトを使うデメリット メリットは上記にあるとおり、サイトの高速化が期待できます。ではデメリットとは? alt属性が使えない 背景画像のリピート表示ができない 更新する時に手間がかかる(サイズを変えるとCSSも変えなければいけないため) 以上をふまえて、私はいつもメニューの背景やボタンなど、マウスオーバー時に変化する画像のみCSSスプライトを

    CSSスプライトで画像を円滑に表示させる
    NOBE
    NOBE 2010/01/25
  • worldending.jp

    This domain may be for sale!

    NOBE
    NOBE 2009/12/10
    各ブラウザハック
  • http://www.designwalker.com/2009/03/form-design-2.html

    http://www.designwalker.com/2009/03/form-design-2.html
    NOBE
    NOBE 2009/10/29
  • CSSによるLength値は必ず単位が必要です - Web標準普及プロジェクト

    CSSによるLength値は必ず単位が必要です CSSによるLength値は0の場合を除き、常に単位が必要です。Length値をとる値とはborder-widthやwidth、height等です。 CSSではLength値で0以外の場合に単位が無い場合は不正な構文となり、そのプロパティ設定は無効化されます。 Mozillaはこの仕様を忠実に守っているため、仕様通りに無視してしまいます。 しかし、拡大解釈の激しいWindows版IEではこれらの値をpx値として補完するようになっています。 そのため、Windows版IEでのみ表示確認を行うとこのミスに気づかないことが多いので注意が必要です。 なぜ単位が無い場合、px単位で解釈しないのか 単位を忘れてもWindos版のIEのようにpx単位であると拡大解釈する法が「便利じゃないか」と思われた方も多いかと思いますが、 確かに現状でそうは言えても将来

    NOBE
    NOBE 2009/10/21
  • Code Beautifier

    Code Layout Compression (code layout): Custom template Options Preserve CSS Sort Selectors (caution) Sort Properties Regroup selectors Optimise shorthands Compress colors Compress font-weight Lowercase selectors Case for properties: None Lowercase Uppercase Remove unnecessary backslashes Remove last ; Discard invalid properties Add timestamp Output as file

    NOBE
    NOBE 2009/10/20
  • フィルタ(IE5.5〜 DirectX) * スタイルシートリファレンス

    filter:progid:DXImageTransform.Microsoft.Alpha(); 透明・半透明・透明グラデーションを指定できる。 多少表示速度は遅くなるが、IE 4 で使えるフィルタもある。 ▼ () の中には以下の属性をカンマ(,)で区切って指定する。 opacity=開始透明度を 0 (透明) 〜 100 (不透明) の範囲で指定。 finishopacity=終了透明度を 0 (透明) 〜 100 (不透明) の範囲で指定。 style=透明グラデーションのスタイルを指定。0 (デフォルト 指定なし) 1 (線形) 2 (円形) 3 (長方形) startx=透明グラデーションの開始地点のx座標を指定。 starty=透明グラデーションの開始地点のy座標を指定。 finishx=透明グラデーションの終了地点のx座標を指定。 finishy=透明グラデーションの終了地

    NOBE
    NOBE 2009/10/13
  • 【インフォシーク】Infoseek : 楽天が運営するポータルサイト

    日頃より楽天のサービスをご利用いただきましてありがとうございます。 サービスをご利用いただいておりますところ大変申し訳ございませんが、現在、緊急メンテナンスを行わせていただいております。 お客様には、緊急のメンテナンスにより、ご迷惑をおかけしており、誠に申し訳ございません。 メンテナンスが終了次第、サービスを復旧いたしますので、 今しばらくお待ちいただけますよう、お願い申し上げます。

    NOBE
    NOBE 2009/10/09
  • IE-winで透過PNGを利用する方法 - Archiva

    Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い!情報の正確性は自己責任で判断してください。 サンプルは透過PNG。テキストの上に、透明度36%の矩形を重ねてある。IE6とFirefoxでは見え方が違うことが解るだろうか? 左がIEで見た場合、右がFirefoxで見た場合。バージョン6までのIEはPNGのアルファチャンネル(半透明)に対応していないので、普通に使うと透過部分が灰色っぽくなり、期待はずれな結果に終わる。IE6でも透過PNGを表示するには、次のように記述する。 #overlay { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./overlay.png", sizi

    NOBE
    NOBE 2009/09/29
  • Bos138 | Agen Juragan Bos 138 Slot Login Link Alternatif

    🎰 Game Online, 🎲 Angka Jitu, 🏆 Pertandingan Bola, 💸 Permainan Kartu Game Bos138 menawarkan berbagai jenis permainan slot yang tidak hanya menarik dari segi visual namun juga menjamin keamanan dan keadilan bagi para pemainnya. Di era digital ini, kepercayaan menjadi aspek penting dalam pemilihan situs judi online, dan Game Jackpot berupaya keras untuk memenuhi ekspektasi tersebut dengan menyedi

  • mountainbook.net

    mountainbook.net 2024 著作権. 不許複製 プライバシーポリシー

    NOBE
    NOBE 2009/08/05
  • http://web.okanos.com/css/false.shtm

    NOBE
    NOBE 2009/05/11