タグ

CSS-Tipsに関するkemjのブックマーク (82)

  • 見出しの横などにボタンを配置

    結構見かける、見出しなどの横に配置されているボタン。 ウチのサイトでも、NEW ENTRYの横にRSSボタンをつけてます。 他に、続きを読むやMoreなんかが見出しの横にボタンやテキストとして配置されているケースが多いと思います。 このデザインを実現する際に、floatかpositionのどちらでも可能ですが、この場合はpositionの方が楽な上に柔軟に対応できる(と思う)のでオススメ。 ということで、ウチのサイトを例に作成方法を。 HTMLはこんな感じになってます。 <div id="main"> <h2>New Entry</h2> <p id="btnRss"><a href="/index.xml">RSS 2.0</a></p> ・ ・ ・ <!-- / main END --></div> CSSを切っている状態だと→こんな感じ。 position以外のスタイルを適用させると

    見出しの横などにボタンを配置
  • 新規でサイトを作る際に僕がいつも使ってるCSSのセットを公開するよ::::::STOPN' LISTEN::::::to the silence:::::::

    esprit

    新規でサイトを作る際に僕がいつも使ってるCSSのセットを公開するよ::::::STOPN' LISTEN::::::to the silence:::::::
  • http://stopnlisten.no.land.to/2006/07/post_3.html

  • 【IE7対応clearfix】さらに続報、コピペでつかえる主要ブラウザをclearするコード、[多分最終版]::::::STOPN' LISTEN::::::to the silence:::::::

    免責事項:サイトに含まれる情報は、一般的な情報提供のみを目的としています。情報はスペシャルベストによって提供され、当社は情報を最新かつ正確に保つよう努力しますが、いかなる目的においても、ウェブサイトまたはウェブサイトに含まれる情報、製品、サービス、関連グラフィックスに関する完全性、正確性、信頼性、適合性、利用可能性について、明示または黙示を問わずいかなる表明または保証も行いません。従って、これらの情報に依拠することは、あくまでもお客様ご自身の責任において行われるものとします。 当社は、当ウェブサイトのご利用に起因するいかなる損害についても責任を負いません。 ウェブサイトから、スペシャルベストの管理下にない他のウェブサイトへリンクすることができます。当社は、それらのサイトの性質、内容および利用可能性を管理することはできません。リンクは必ずしも推奨するものではありませんし、リンク先で述べら

  • 段落(pタグ)とアンカー(aタグ)さえあればどこにでも配置できるさ

    免責事項:サイトに含まれる情報は、一般的な情報提供のみを目的としています。情報はスペシャルベストによって提供され、当社は情報を最新かつ正確に保つよう努力しますが、いかなる目的においても、ウェブサイトまたはウェブサイトに含まれる情報、製品、サービス、関連グラフィックスに関する完全性、正確性、信頼性、適合性、利用可能性について、明示または黙示を問わずいかなる表明または保証も行いません。従って、これらの情報に依拠することは、あくまでもお客様ご自身の責任において行われるものとします。 当社は、当ウェブサイトのご利用に起因するいかなる損害についても責任を負いません。 ウェブサイトから、スペシャルベストの管理下にない他のウェブサイトへリンクすることができます。当社は、それらのサイトの性質、内容および利用可能性を管理することはできません。リンクは必ずしも推奨するものではありませんし、リンク先で述べら

  • CSSでの画像置換 | Blog hamashun.com

    CSSを利用してテキストを隠し、代わりに画像を配置するテクニックを一般に画像置換と呼びます。 このサイトのナビゲーション部分もそれを利用しています。 でも、このテクニックには、注意するべき点がいくつかあります。 それはSEOスパムの問題であったり、画像を表示しない設定をしている環境での問題であったりするのですけど、今回は見た目の問題を取り上げてみたいと思います。 具体的にどういった問題なのかと言うと、いろいろなサイトを、特にFirefoxで見ていると、ナビゲーションをクリックした瞬間に、謎の点線が横(多くの場合左方向です)に延びているのに気づいた事はないでしょうか? これは決して見栄えが良いとは言えません。 この問題は、CSSとXHtmlに数行追加するだけで解決する事ができます。 ではまず、問題を解決していないサンプルを見てください。 点線が大きく左右に延びているのが分かると思います。 こ

  • 【特集】CSS実装徹底検証! そこが知りたいInternet Explorer 7 (23) 08-01 ブロック要素化による問題 | クリエイティブ | マイコミジャーナル

    リストコンテンツをブロック要素化すると余白が挿入される問題[未修正] IEでは、リスト内のインライン要素をブロック要素化すると、リストの各項目の下に余白が挿入されるという問題が発生する。 サンプルソース8-1-0では、リストのコンテンツとしてリンクを記述している。リンク部分には背景色などのデザインを指定しているが、<a>で構成されるのはインライン要素であるため、そのままでは文字の部分だけがリンクとして機能する。この段階では、リストの各項目の下に余白はなく、すべての項目がくっついて表示される。 図8-1-0a:IE6での表示 図8-1-0b:IE7 beta2での表示 図8-1-0c:Firefoxでの表示 サンプルソース8-1-0 a    {background-color:cyan; padding: 5px; color: black; text-decoration:none

  • bodyに設定しておくと便利な3つのポイントとおまけ|CSS HappyLife

    CSS(スタイルシート)でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記を読んで、ボクなりな最初に指定して置くと良いポイントを上げたくなったので書いちゃいます。 むしろこのサイトの方向性的に有った方が便利だよなーと。 書くきっかけを頂き、感謝いたします。 ちなみに、最初に指定しておくポイントってそれぞれだと思うので、一つの参考として読んでいただければ幸いです。 最初にbodyに指定しておくと便利だと思う3つを。 body { background:#FFF url(../img/share/bg.gif) no-repeat left top; font-family:Verdana, "MS Pゴシック", sans-serif; font-size:80%; } じゃあ、詳細について色々書

    bodyに設定しておくと便利な3つのポイントとおまけ|CSS HappyLife
  • Firefoxのスクロールバーの有無でセンタリング位置がズレる件を解消

    中央配置のデザインで、ページ移動の際にコンテンツの量によってスクロールバーが出たり出なかったりするFirefoxさん。 あのズレ、気になる人っていますよね? すぐ分かるように簡単なサンプルを用意しました。 http://css-happylife.com/template/11/ あ、当たり前だけど、Firefoxで見て下さいね。 コレを解消する為に以下のスタイルを適用させればズレがなくなります。 html { overflow-y:scroll; } 簡単っすね。 で、コレOperaじゃ解決出来ないのが難点。 overflow:scrollでズレないようには出来るけど、下が出ちゃうのはいけてない。 height:100%とかでもバーが出っぱなしにはなるけど、びみょーに出てはいけないバーまで出てしまう。 んーこの辺まで解決したかった... Track Back [1] スクロールバーを表示

    Firefoxのスクロールバーの有無でセンタリング位置がズレる件を解消
  • パンくずリスト(Topic Path)を作成する際に使えそうなサンプル8種|CSS HappyLife

    普通のエントリー久々な気がする今日この頃。 今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。 サンプルの前に #main .entryBody #topicPath_01 とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為にやってるんで、コピったりする場合はいらない感じです。 #main .entryBody #topicPath_01 { margin:10px 0; } #main .entryBody #topicPath_01 li { display:inline; line-height:110%; list-style-type:none; } #main .entryBody #topicPath_01 li a { padding-right:10

    パンくずリスト(Topic Path)を作成する際に使えそうなサンプル8種|CSS HappyLife
  • 【CSS】ロールオーバーリンク6 〜CSSテクニック〜

  • CSSレイアウトが崩れている時に試す10の処方箋::::::STOPN' LISTEN::::::to the silence:::::::

    お探しのページは「すでに削除されている」、「アクセスしたアドレスが異なっている」などの理由で見つかりませんでした。以下でキーワードやカテゴリーから記事を探すことができます。

    CSSレイアウトが崩れている時に試す10の処方箋::::::STOPN' LISTEN::::::to the silence:::::::
  • スペシャルベスト

    免責事項:サイトに含まれる情報は、一般的な情報提供のみを目的としています。情報はスペシャルベストによって提供され、当社は情報を最新かつ正確に保つよう努力しますが、いかなる目的においても、ウェブサイトまたはウェブサイトに含まれる情報、製品、サービス、関連グラフィックスに関する完全性、正確性、信頼性、適合性、利用可能性について、明示または黙示を問わずいかなる表明または保証も行いません。従って、これらの情報に依拠することは、あくまでもお客様ご自身の責任において行われるものとします。 当社は、当ウェブサイトのご利用に起因するいかなる損害についても責任を負いません。 ウェブサイトから、スペシャルベストの管理下にない他のウェブサイトへリンクすることができます。当社は、それらのサイトの性質、内容および利用可能性を管理することはできません。リンクは必ずしも推奨するものではありませんし、リンク先で述べら

  • MSDN ホームページ

    このブラウザーはサポートされなくなりました。 Microsoft Edge にアップグレードすると、最新の機能、セキュリティ更新プログラム、およびテクニカル サポートを利用できます。

    MSDN ホームページ
  • http://youmos.com/news/css_star_rating_system

  • lxpages.com

    This domain may be for sale!

  • Lucky bag::blog: プロパティから CSS 仕様書へのリンク

     property -> CSS2 Specification This is a link from each property name to the part concerned of CSS2 Specification. ( en | ja )

  • スタイルシートをめぐる冒険: inline-blockの奇妙な世界

    inline-blockとは、displayプロパティの値のひとつで、表示形式を「インラインに流し込むことのできるブロック要素」にするためのもの。まともに対応しているのが、OperaとSafari、それになぜかMac版IEくらいというマイナーな存在だが、なかなか興味深い振る舞いをする値なので、いろいろと検証してみた。 まず、「インラインに流し込むことのできるブロック要素」とはどういうものなのかを見てみるために、.inlineblockというクラスを作り、div要素に指定してみた。また、「インラインに流し込むことのできるブロック要素」とは、言い換えれば、「幅と高さを指定できるインライン要素」ということだから、span要素にも指定した。 インラインブロックの検証 その1 【スタイルシート】 .inlineblock { display: inline-block; width: 100px;

  • first-childっぽい効果をネガティブマージンで実現 | Takazudo Clipping*

    first-childっぽい効果を、first-childや、余分なclass付加なしで実現しようという話です。すごい地味Tipsですが・・・。 例えばこんなものを作りたいとします。 リストの間に線が入っているというデザイン。コレを組むときにどうするか。こんな感じでul / li で組むとして、borderを上か下につけようとか思っていた場合、最初か最後についてしまう、余分なボーダーをなんとかせねばならぬ。 <ul> <li>hoge hoge hoge hoge</li> <li>hoge hoge hoge hoge</li> <li>hoge hoge hoge hoge</li> </ul> まず、考えられるのは、liの上にborderをつけ、li:first-childで、最初のリストだけborder-top:none;などを指定して、何とかする方法。しかし、IE6はfirst-

  • 台州食品机械服务中心

    来源:技术 时间:2022-03-01 10:29 台州品机械服务中心qcug8,运城废弃资源综合利用服务中心,萍乡废弃资源综合利用经销部,六盘水家具制造经销部,南通家具制造总公司   中国体育彩票超级大乐透 第17139期开奖公告 开奖日期:2017年11月27日 期全国销售金额:208,076,169元 期使用第1套摇奖球 前区 后区 期出球顺序: 06 25 19 32 02 12 09 期开奖号码: 02 06 19 25 32 09 12 期中奖情况 期一等奖出自:湖南(基1注 追加1注)、重庆(基1注)。 4,210,596,967.28元奖金滚入下期奖池。 期兑奖截止日为2018年1月26日,逾期作弃奖处理。 开奖信息查询网站:http://www.lottery.gov.cn