タグ

webデザインとCSSに関するsudanのブックマーク (7)

  • 見出しデザインの参考にしたい CSSで作るhタグのサンプル集 | 日刊ウェブログ式

    ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し(hタグ)のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。 ※追記6/24 HTMLのマークアップをpからh3に置き換えました。 見出し(Headline)のサンプル集 色やボーダーサイズ等の装飾部分は お好みで編集してください。 見出しサンプル01 .selector01{ border-left:7px solid #e3297d; padding:.6em .8em } 見出しサンプル02 .selector02{ border-left:7px solid #ccc; border-bottom:1px solid #ccc; padding:.6em .8em } 見出しサンプル03 .selector03{ bor

  • RedLine Magazine : CSS セレクタ総復習 (2010年5月版)

    CSS セレクタ総復習 (2010年5月版) CSS3のプロパティにも興味津々なのですが、その前にまずセレクタを全部まとめて総復習しておこうかな、と。来1ページに書くべきではない内容量なので読み込み遅いと思います。ごめんなさい。 Selectors Level 3 http://www.w3.org/TR/css3-selectors/ 選択子 http://zng.info/specs/css3-selectors.html (日語訳) ※下記内容で、サンプルページを用意したセレクタもあるんですが、当然、各セレクタに対応しているブラウザとそうでないブラウザがあります。対応していないブラウザでサンプルページを見ても再現できません。 目次 * (汎用選択子) E (型選択子) E[foo] (属性選択子) E[foo="bar"] (属性選択子) E[foo~="bar"] (属性選択子

    sudan
    sudan 2010/06/02
    使い方、サンプルまであって便利そう。量が多くてちゃんと見れてないが。
  • http://www.designwalker.com/2010/05/css3.html

    http://www.designwalker.com/2010/05/css3.html
  • 少しのコードで実装可能な20のCSS小技集

    2019年5月17日 CSS CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください! ↑私が10年以上利用している会計ソフト! コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね! 少しのコードで実装可能なCSS小技集 シリーズ 【第2弾】少しのコードで実装可能な20のCSS小技集 【第3弾】少しのコードで実装可能な15のCSS小技集 まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。 See the Pen Center Div by Mana (@manabox

    少しのコードで実装可能な20のCSS小技集
  • MdN Design|総合情報サイト

    的なWeb制作技術はあっても、「整理されていない」、「やぼったい」、「平凡でつまらない」、「メリハリがない」などといった難題に直面してしまったことはないだろうか。そこで特集は、Webデザインでつまずきやすい部分を、CSSで解決する実践的なアイデアを紹介する。また、ひと目でわかる「問題の危険度」も掲載。ここで紹介する多彩なテクニックを身につけて、Web表現の幅を広げよう!

    MdN Design|総合情報サイト
  • cssの情報・まとめ - かちびと.net

    cssの情報まとめです。ローカル 環境にストックしていた情報を 開放してみますのでシェアして 頂ければ幸いです。内容は 結構偏っていると思いますので 参考程度になさってください。 全てのcss情報が有るわけではありません。主観でストックしていたリンク集です。ツールとかメニュー関連とかハックとかいろいろ188の情報です。 ツール オンラインのcssツール。 CSS Validation Service / W3C検証サービス日語版 RoundedCornr / 角丸のHTMLCSSコードを生成してくれる CSS Type Set / ファミリー、色、単語間、行間等をプレビューで確認 CSS Text Wrapper / 様々な形のテキストの回りこみを簡単に実現できる CSS Builder / オンラインでスタイルを生成可能 Spiffy Box / cssによる角丸を簡単に生成 The

    cssの情報・まとめ - かちびと.net
  • IE 6で泣かないための、9つのCSSハック (1/3) - @IT

    有限会社タグパンダ 喜安 亮介 2009/10/8 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック&フィルタTipsをお届けします(編集部) 最も多く使われているのに……、いや、だからこそ 多くのWebデザイナの悩みの1つは、レイアウトの表示ずれ問題だと思います。これは、各Webブラウザが採用しているレンダリングエンジンの違いから起因している場合が多いです。その中でも、最もWebデザイナ泣かせのWebブラウザなのは、マイクロソフトが開発しているIE(Internet Explore)のバージョン6です。 IE 6は、発売開始当初のWindows XPにデフォルトでインストールされていたWebブラウザということもあり、世の中の多くのユーザー

  • 1