タグ

sampleとcssに関するsuusukeのブックマーク (7)

  • 地味に使えるCSS小技のメモ&サンプル集

    cssの小技的なテクニックが便利なので好きなん ですが、cssそのものが嫌いで覚えられないので カンペ的な記事を作ることにしました。便利な小技 は沢山あるんですが、特に自分が良く使いそうな Tipsをメモします。既に出回っている情報ばかりで 特に目新しい手法はありませんので何も期待でき ないです。 というわけで特にテーマも一貫性も無くて、ただ便利ってだけです。推奨されない方法もあるかもしれませんが、僕は細かいこと気にしませんのでそんな感じです。 内容も既出なのでお詳しい方にはお役に立てないですが、僕の個人的なメモなので適当に流して頂けると幸いです。 floatで並べたリストのセンタリング Sample01 コード.centered { position: relative; overflow: hidden; } .centered ul { position: relative; lef

    地味に使えるCSS小技のメモ&サンプル集
  • 新規でサイトを作るのに使えそうなの一式。Ver 3

    随分前に、Ver2の見直しをして3になってたんですけど、公開してなかったので今更ながら公開です。 中身は2を使ってみて、社内のマークアップエンジニアからフィードバックもらったり、自分でも違和感が有った部分を調整してます。 それなりの期間使ってみて、問題をあんまり感じていないので、完成度としては大分良くなったかなぁって思います。 新規でサイトを作るのに使えそうな一式。Ver 3をDL(zip:40kb) Ver 3を見る Ver.3の中身ご説明 主な変更点を。 style.cssのwidthなどのプロパティをまとめていたのをVer1と同じに。 default.cssに書かれていた、p要素のmargin-bottomの指定をstyle.cssに移動。 default.cssのfont-familyの指定を若干変更。 index.htmlGoogleカスタムサーチ用に使えるソースを記入。 Ja

    新規でサイトを作るのに使えそうなの一式。Ver 3
  • [使えるCSSテクニックVol.2] CSS を使った見栄えの良いページャー | バシャログ。

    第 3 回目は「見栄えの良いページャー」です。 シンプルなコーディングで見栄えの良いページャーを実現します。 XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li class="prev"><a href="hoge">&laquo; PREV</a></li> <li><a href="hoge">1</a></li> <li><em>2</em></li> <li><a href="hoge">3</a></li> <li><a href="hoge">4</a></li> <li><a href="hoge">5</a></li> <li class="next"><a href="hoge">NEXT &raquo;</a></li> </ul> サンプル1: とてもシンプルなページャー とてもシンプルなページャーのサンプルです。 «

    [使えるCSSテクニックVol.2] CSS を使った見栄えの良いページャー | バシャログ。
  • 段落(pタグ)とアンカー(aタグ)さえあればどこにでも配置できるさ

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

  • CSSデザインカタログ | table

    テキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキスト。

  • CSSデザインカタログ | block | 見出し部分を画像にした角丸の枠

    h3,pとulによるリストを含む テキストテキストテキストテキストテキストテキストテキストテキストテキスト 項目1 項目2 項目3 項目4 ソース XHTML <div class="div042-hpl"> <h3><img src="img/hd-div042-hpl.png" alt="見出し部分を画像にした角丸の枠 : div042-hpl" /></h3> <p>h3,pとulによるリストを含む</p> <p>テキストテキスト......</p> <ul> <li>項目1</li> <li>項目2</li> <li>項目3</li> <li>項目4</li> </ul> </div> CSS div.div042-hpl { margin: 1em 0; width: 570px; background: url(../block/img/bg-roundcorner.png)

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

    結構見かける、見出しなどの横に配置されているボタン。 ウチのサイトでも、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以外のスタイルを適用させると

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