タグ

CSSに関するryownetのブックマーク (130)

  • RedLine Magazine : 半透明ボックスに関するメモ

    半透明ボックスに関するメモ ※2008年2月8日、IE6でinputボタンが押せない件について追記しました。 半透明ボックスに関してのメモ。 デザイナからの要望はこんな感じ。「よくあるタイプのコンテンツ部分の背景に単色ベタの土台を置くようなデザインじゃなくて、今回は背景画像を活かしたデザインにしたい、テキストやら写真やらの中身を入れるボックスだけ半透明にして見せたい背景画像をうっすら表示させたい。」 今回やっかいだなと思ったのが、コンテンツ部分が全面そういう風に背景の上で半透明になっているのではない点。タイトル画像が入る部分やそれぞれのセクションの余白部分は半透明ではなく、素の背景が見えるというもの。文章にするとややこしい・・・つまりこんな感じ↓。(背景とか色合いとか変だけどあくまでサンプルだから気にしないでください・・・。) 半透明のボックスって中身も半透明になるんだよね CSSだけでボ

    ryownet
    ryownet 2009/07/24
  • 自分的HTMLテンプレートの組み方 | Takazudo Clipping*

    自分的HTMLテンプレートの組み方と例です。 まぁ、やるたびにちょこちょこ変えてるんですけど、2009年7月版ってことでざっくり説明。 空テンプレ モジュール一覧 サンプル ダウンロード用 エリアとモジュール 繰り返し使用される要素の塊をモジュールと呼び、エリアの中にこれを並べてページを作成するのを基とする。 モジュールの開始要素には、「mod_moduleName」のようにclass(もしくはid)をつける。 モジュールやエリアのclass/idを起点に全てのスタイルを指定する。p、h1~h6、blockquote、table等、要素自体に直にスタイルを指定してはいけない。(グローバル変数を使っているような状態になってしまうため、以降考慮するのが面倒。リセット程度に済ます。) モジュールにスタイルを指定する際には、mod_moduleNameを起点としてスタイルを指定し、カプセル化を

  • Outlook 2007の大変化,「さらばHTML,ようこそCSS」

    Microsoftが2007年末にリリースする予定の「Outlook 2007」がサポートするHTML要素とCSS(Cascading Style Sheets)要素に関する詳細が明らかになった。Outlook 2007では,CSSのサポートが大幅に強化される。ニュース・レターなどをHTML形式で送信している組織は,Outlook 2007における仕様変更に注目すべきだろう。 Microsoftは,Outlook 2007でHTMLCSSのレンダリング機能の仕様が大きく変更されるのに合わせて,「Visual Studio 2005」や「Office SharePoint Designer 2007」,「Expression Web Designer 2007」,「Macromedia Dreamweaver MX 2004」,「Dreamweaver 8」といったツールで作成した文書が

    Outlook 2007の大変化,「さらばHTML,ようこそCSS」
    ryownet
    ryownet 2009/07/10
    なんということでしょう
  • ソースが公開されているcss小技11エントリーまとめ

    cssを使った小技テクニックの エントリーが様々なブログで 公開されていますが、必要な時に 探すのが面倒なのでまとめます。 ソースコードを公開している記事に 絞ってまとめています。 CSSで実装する、ちょっと凝ったパンくずリスト cssでパンくずをデザインする方法とサンプル CSSで実装するちょっと凝ったパンくずリスト CSS(スタイルシート)でbodyに設定しておくと便利な5つのポイント ユーザービリティ(見易さ)を考慮したbodyに設定する。CSS HappyLifeさんも 記事を参考に別コードを公開。 CSS(スタイルシート)でbodyに設定しておくと便利な5つのポイント CSSだけでフレームを作るテクニック frameタグを使用しないで擬似フレームを作成。IE6対応。 CSSだけでフレームを作るテクニック テキストに影を付け印象的にする JSとcssでテキストに影を付けるテクニック

    ソースが公開されているcss小技11エントリーまとめ
  • IE6でよく遭遇するCSSのバグとその解決方法 | コリス

    Dave Woodsのエントリー「IE6 -CSSのバグとその解決方法」から、IE6でよく遭遇する3つのCSSのバグとその解決方法の意訳です。 IE6 - CSS Bugs and Fixes Explained IE6で、マージンが2倍になってしまうバグ IE6で、hasLayoutプロパティによって起こるバグ IE6で、小さい高さを指定した場合に起こるバグ IE6で、マージンが2倍になってしまうバグ IE6で、フロートした要素のマージンが2倍になってしまうバグと解決方法の紹介です。 下記のコードで、IE6はマージンが20pxになります。 sample:バグ #navigation{ float: left; width: 200px; margin-left: 10px; } #content{ float: right; width: 500px; margin-right: 10p

    IE6でよく遭遇するCSSのバグとその解決方法 | コリス
    ryownet
    ryownet 2009/07/01
    IE6のバグ対策。助かりました
  • 掲示板/スタイルシート質問板[過去ログ]/一覧/IE6.0で3カラム・リキッドの左カラムの位置がズレる - TAG index Webサイト

    ryownet
    ryownet 2009/06/29
    3カラムにネガティブマージンを使うと、IE6で左がずれる。原因はcontainerが90%だから。bodyを90%にしてcontainerを100、左のネガティブマージンも-100にすると解決。
  • フッタを常に下部に配置 - lucky bag

    コンテンツの内容が少なくても、常に下部にフッタを配置させるための方法。ちなみに Safari とマック IE では動作しないっぽい。 footerサンプル 実際にサンプルを見てみれば分かりますが、ウィンドウを下方に広げても、フッタは常に下部に張り付いたままな筈です。また、ウィンドウを上部に縮めていってもコンテンツ部分の所でピタッと止まり、それ以上は移動しません。 html と body への指定 サンプルのソースを大雑把に分けると下記のような構造になっています。 <div id="container"> <div id="contents"> <div id="header">ヘッダ</div> 内容 </div> <div id="footer">フッタ</div> </div> まず、html と body の高さを 100% と指定しておきます。 container への指定 次に、

    ryownet
    ryownet 2009/06/25
    フッタを下部に固定配置。height100%を使う
  • 古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた - latest log

    uuCSSBoost.js は uuAltCSS.js に名前が変更になりましたが、一部の説明が記事を書いた当時の古い名前のままになっています。最新版では、uuCSSBoost.revalidate() は廃止され uuAltCSS() を呼び出すように変更になっています。 コードの解説を追記しました。 「最新の規格を実装したブラウザが登場しても、IE6 のせいで諦めるしかないのか」 「CSS3セレクタを古いブラウザでも使いたい!」 といった現場の声にお応えして、ほぼ全てのブラウザで CSS3 セレクタを利用したページデザインが可能になるJavaScript ライブラリを作ってみました。 特徴 軽いよ いろんなブラウザで動くよ(Firefox2+, Opera9.2x+, Safari3+, IE6+, Google Chrome1+) 95%〜98%ぐらいのシェアをカバーできるんじゃない

    古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた - latest log
    ryownet
    ryownet 2009/06/25
    JSでCSSを設定することで、あらゆるブラウザでCSS3を使える
  • 闺蜜们的放荡交换txt_大炕上的人肉体乱_苍井空50分钟无码_年轻人免费观看视频_破女视频免费观看

    欢迎观看站影片,永久免费提供闺蜜们的放荡交换txt,大炕上的人肉体乱,苍井空50分钟无码,年轻人免费观看视频,破女视频免费观看,色迷睡美人真人床震高潮全部视频免费,未满18周岁,请自觉离开!

    ryownet
    ryownet 2009/06/01
    CSSガイドラインがしっかりしてる。
  • http://i.yimg.jp/images/topics/wiki/ytopics_sprite_icons.png

    ryownet
    ryownet 2009/05/29
    Yahooニュースで使ってるCSSスプライト用PNG。軽量化してるっぽいけど、縦3000px。Googleはアイコン同士が隣り合ってるスプライトなので面白い対比か。空白って画像容量に影響ないのかね。気にするほどじゃないけど。
  • 「Yahoo!ニュース」の表示速度が3~5倍に、そのからくりは……:記事の芽

    夏休みスペシャル 2024 iPhoneで3Dモデルを手軽に作成、無料の純正アプリ「Reality Composer」を試す 2024.08.09

    「Yahoo!ニュース」の表示速度が3~5倍に、そのからくりは……:記事の芽
    ryownet
    ryownet 2009/05/29
    サイト最適化の良記事。いままではインフラ改善方向にいきがちだったけど、コンテンツの組み方で改善した、という好例!!クリエイターの腕の見せ所。CSSスプライト、圧縮、チャンク抜き
  • Win IE6で印刷(プリントアウト)をA4に納めるCSS|アイビーネットblog

    OKWaveなどの質問サイトや質問掲示板を見ていると「WebサイトをWin IE6でそのままプリントアウトしたいけど、収まらず右側が切れてしまう。どうしたらいい?!」という質問をされている方をよく見ます。 色々な解決方法があると思いますが、私がオススメするのは下記の方法です。 * html { zoom: 80%; } プリントアウトCSS解説 やっていることは非常に単純です。 「* html」でハックして、IE6以前(IE5からIE6)に対してのみ適応させる。 「zoom」で、全体の拡大率を変更する(例では80%に)。 よく使われる横幅760pxをA4に納めたいのであれば、80%前後にすれば収まります。 条件コメントを利用してCSSを綺麗に 「zoom」は、IE特有のプロパティですのでvalidatorでエラーが出ます。それが嫌でしたら条件コメント「<!--[if IE 6]>」を使って

    ryownet
    ryownet 2009/05/13
    *html{zoom:80%}を書くと760px幅がいい感じに収まる
  • a要素が2行になった場合に背景下にテキストが来ないように。

    目新しいネタは全く見つからないとか色々を言い訳に、月1書けばいい方になってる今日この頃・・・うぅ。 そういえば、web creatorsの5月号(たぶん)に参考にしているサイトでウチのサイトの名前があったとかどーとか聞いたんですがマジっすか!?読んでないーorz あと、7月号(Vol.91)にちょろっと記事書いてるので良ければ買ってくだしあ。 タイトルがa要素になってますが、インライン要素でもいいです。 背景下にとかも書いてますが、リストとかでマーカーの変わりにbackgroundをa要素に指定した時なんかの場合です。 タイトルって難しいですねorz さて、時間もあまりないので題に。 サンプルページを見る 以前に書いた、ユーザーの動き。にもあるように、リストのマーカー部分をクリックして、クリック出来ない的な人が居たりするってのもありますが、li要素にbackgroundの指定をしてpad

    a要素が2行になった場合に背景下にテキストが来ないように。
    ryownet
    ryownet 2009/05/04
    display: inline-block; 知らんかったねー
  • これは驚きの、CSSだけで作れる吹き出しボックス:phpspot開発日誌

    Fun With CSS Shapes - Nettuts これは驚き!CSSだけで作れる吹き出しボックス。 次のような吹き出しが、画像を一切使わずにCSSだけで実現できてしまうようです。 HTMLコードをちょっと分かりやすいようにダイエットしてみたものが以下。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> blockquote {

    ryownet
    ryownet 2009/04/07
    噴出しのボックスのborder-topとrightを40px,30pxにしてleftを0にするとborderの端が鋭角だから三角形ができる
  • [CSS]上級者向け、スタイルシートのテクニック集

    スタイルシートで実装する実用的なものからちょっと変わったものまで、25のテクニックをDesizn Techから紹介します。 25 Advanced CSS Techniques 1. CSS Gradient Text and Background テキストや背景をグラデーション表示。

    ryownet
    ryownet 2009/03/27
    こういうのってブクマしちゃうけど、「いつか使う」って思ってたら結局使わないよね。どういう場面で必要になるんだろうか?不透明度とかは普通のことになったけど、、
  • jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ

    JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを5つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){

    ryownet
    ryownet 2008/12/11
    再ブクマ。クラス名だけを指定すると遅い。
  • [CSS]スタイルシートをIEだけに適用する大胆で簡単な条件式の使い方 | コリス

    Paul Hammondから、スタイルシートをIEだけに適用する大胆で簡単な条件式の使い方を紹介します。 Conditional classnames まず、HTMLのbodyは条件式を使用して、IE用に「.ie」をクラスに指定したbodyと通常用のbodyの2つを記述します。 <!––[if IE ]> <body class="ie"> <![endif]––> <!––[if !IE]>––> <body> <!––<![endif]––>

    [CSS]スタイルシートをIEだけに適用する大胆で簡単な条件式の使い方 | コリス
    ryownet
    ryownet 2008/10/17
    IEだけにクラスをつけてCSSをスマートに。っていうか裏技じゃないか
  • ウェブリブログ:サービスは終了しました。

    「ウェブリブログ」は 2023年1月31日 をもちましてサービス提供を終了いたしました。 2004年3月のサービス開始より19年近くもの間、沢山の皆さまにご愛用いただきましたことを心よりお礼申し上げます。今後とも、BIGLOBEをご愛顧賜りますよう、よろしくお願い申し上げます。 ※引っ越し先ブログへのリダイレクトサービスは2024年1月31日で終了いたしました。 BIGLOBEのサービス一覧

    ウェブリブログ:サービスは終了しました。
    ryownet
    ryownet 2008/07/16
    PCサイトをCSSだけでiPhone対応
  • 第13回 Webページで読みやすいテキストとは:ITpro

    今回のポイント 1行あたりの文字数の目安 1段落の文字数の目安 段落に含む文字数 行間調整の考え方 字間調整を使ったロゴ風味見出し 日語というのはもともと縦書き文化です。文字も筆で縦書きしていくときに書きやすいように作られています。現在PC画面上で見るフォントは,活字印刷物のフォントとは違い,横書きで読みやすいようにもともとの字体から若干形を変えられています。それでも起源である縦書きの形を完全に壊すことができないので,やはり横書きでは読みづらいようになっています。 日人が苦痛を感じることなく読める横書き1行あたりの字数は20字+α程度だと言われています。意識して雑誌などを見るとたいていが!)25文字から28文字程度です。用紙,つまりのサイズがA4を超えるような大判になると,1ページを左右2段組に分けて25~28字程度に調整されています。 一方,縦書きの場合には識別許容量はグンと増加し

    第13回 Webページで読みやすいテキストとは:ITpro
  • 知っておくといいかもしれないCSS、8つの小技 | IDEA*IDEA

    ドットインストール代表のライフハックブログ

    ryownet
    ryownet 2008/03/12
    当たり前のこと。忘れやすいのでメモメモ