タグ

CSSに関するhibi-saisaiのブックマーク (38)

  • リストタグで横並びメニュー

    リストタグで作るメニューサンプル(外部スタイルシート使用) リストを横に並べるには? 各リスト項目<li>に対して float:left を適用し、各項目を左に回り込ませ横並びにします。 css/htmlソース ID "menu" の部分は任意の名前です。自分の好きな名前にしても、このままでもOKです。 初心者の方 →スタイルシートIDの名前とhtmlソースIDの名前を一致させて下さい。 横幅・フォントのサイズは、ご自分のサイトに合わせて変えて下さい。フォントサイズについてはこちらに詳細があります。

  • 403 Forbidden

    \閉鎖予定のサイトも売れるかも?/ アクセスがないサイトもコンテンツ価値で売れる場合も… ドメインの有効期限を更新してサイト売却にトライしてみましょう

  • WordPressのテーマをカスタマイズ5(blockquoteのカスタマイズ) « klampa.

  • [CSS]クロスブラウザ対応、CSSグラデーションを使ったボタンの実用的な実装方法

    IE6, 7, 8を含めたクロスブラウザに対応した、画像を使用せずにCSSでグラデーションを適用したボタンを実装する実用的なチュートリアルを紹介します。 Cross-browser CSS gradient buttons デモページ [ad#ad-2] ボタンにはborder-radius, box-shadow, text-shadowなどCSS3がふんだんに使用されていますが、グラデーションはIEでも適用されます。 ホバー時のキャプチャ 実装のポイント スケラービリティ 文字のサイズを変更するとボタンのサイズもそれに合わせて拡大・縮小 アジャスタビリティ padding, font-sizeを変更することでサイズ調整可能 フレキシビリティ あらゆるHTML要素に適用可能 コンパチビリティ 主要ブラウザに優雅なグラデーションを提供 ユーザビリティ ノーマル時、ホバー時、アクティブ時を用

  • ppBlog official

    こんばんは、martinです。久しぶりの更新です。寒い日が続きなかなか暖かくなりませんが、春はすぐそこだと思います。今は横浜に住んでいますが、余震はここ1-2日はちょっと落ち着いてきた感じがします(油断は出来ませんが)。原発問題がはやく解決されること、そして被災地の一日でも早い復興をお祈りしつつ。 さてマイナーアップデートです。フォーラムの方で、記事の更新にやたらと時間がかかるというご報告があり、調べてみると、カテゴリー数が多いとその傾向が顕著になることが判明しました。記事投稿時の処理でカテゴリー毎の記事数を更新するというのがあるのですが、その処理がボトルネックになっていました。これを解決するために、category_id.ini.phpという定義ファイルを新たにownerディレクトリに作成するようにして、そこからカテゴリー別の記事情報を取得するようにしました。 utils_admin.p

  • スマートフォン向けサイトの作り方エントリのまとめ:phpspot開発日誌

    スマートフォン向けサイトの作り方エントリのまとめ。 スマートフォン元年といわれる2011年ですが、注目を集めているせいか、サイト作成法についてのエントリも盛り上がりをみせていますね。 個人的にもしっかり覚えておきたかったのでまとめてみました。 基的には解像度が大きく異なるので、それにあったインタフェースに変えましょうね、という点と、HTML5/CSS3が使えるので駆使して楽にUIデザインしましょうという点、ユーザインタフェースがマウスではなくタッチである、という3点以外は、普通のサイト作りと変わりませんが、クセやバグがあったり、テクニックもあるので、しっかり押さえておきたいですね。 基 スマートフォン向けサイトの作り方|ユージック サイトの幅、高さ viewportによるズーム指定の方法 便利なJSライブラリ ユーザエージェント シュミレーター 等の有用情報 Androidサイトは横幅

  • リストマークの画像のずれを修正する

    サイドバーメニュー等の先頭のマーク(マーカー)表示に画像を使われている方は少なくないと思いますが、img タグをテンプレートに直接記述するのは、ウェブスタンダードでいうところの「構造とデザインの分離」という面よりあまりお勧めできません。またリストの量が増えると img タグの指定も増えることになり(テンプレートでは数ヶ所の指定で済みますが)、ページサイズにも影響します。 ということで、マーク表示にはCSS・リスト形式(li)の画像指定で表示すること好ましいですし、リスト先頭のマークに画像を使われている方も大勢いらっしゃると思いますが、list-style-image プロパティで li { list-style-image: url(hogehoge.gif); } と画像を指定した場合、下のようにマークが微妙にずれて表示されてしまうのが悩ましいところです(サンプル1)。 サンプル1 これ

    リストマークの画像のずれを修正する
  • キャプション付き画像を左右の端に寄せたい [ホームページ作成] All About

    ページ上に画像を表示させたいとき、ただ画像を表示させるだけではなく、キャプション(表題・説明)を加えて表示させたい場合がありますね。 キャプションを加えるには、画像の直後に改行して、そこに文字を書けば良いだけです。 しかし、「キャプションを付けた画像」全体を、右図のようにページの左右に寄せたい場合、どうすればよいでしょうか? HTMLを駆使していた時代では、枠線を消した「表」の中に画像とキャプションを入れ、表全体を左右に寄せる方法がよく使われていました。 この方法では、無駄にソースの記述量が多くなってしまい、ソースの視認性も悪くなりますし、ページサイズも増えてしまいます。 こんなときは、スマートにスタイルシートで解決しましょう。 スタイルシートで画像『だけ』を左右の端に寄せるには スタイルシートを使って、画像だけを(ページの)左右の端に寄せる方法は、とても簡単です。 画像を表示するためのi

    キャプション付き画像を左右の端に寄せたい [ホームページ作成] All About
  • スタイルシートに書いても反映されません | Movable Type4 | MTまとめサイト

    hibi-saisai
    hibi-saisai 2011/01/08
    最後の方法でやっと動いた!(涙)
  • 画像の回り込みをしたい - ホームページテンプレートのdecoweb

    画像を配置してその後テキストを書くと、画像の脇にテキストを書きたいのに、画像の横には文章は一行しか表示されません。 ※当サイトでの方法は多数あるやり方の中の一つとお考え下さい。 HTML例 <img src="images/picture1.jpg" alt="イメージ画像">このように画像の脇にテキストが回り込まず、画像の下にテキストが配置されてしまいます。 このようにimgの後にテキストを書くと画像の横に一行しか表示されません。 align属性で簡単に作成することもできますが、align属性が廃止予定の非推奨属性のため、できるだけCSSで作成するようにしましょう。 <img src="images/picture1.jpg" alt="イメージ画像" align="left">このように画像の脇にテキストが回り込まず、画像の下にテキストが配置されてしまいます。 CSSで設定、管理できる

  • 画像の回り込みを行う

    つまり、テキストがきれいに回り込んでくれずに画像の右下の方から開始されえしまうというものです。 これを強引にテーブルなんかでデザインしている人もいるでしょうけど、 画像が出るたびに毎回テーブルを使うのは多大な労力が必要ですし、 メンテナンスも大変ですよね。 とはいえ、img要素にもalign属性がありますからそれを使えば便利ですが、 HTML4.01や今後のXHTMLではalign属性は廃止方向へ向かっています。 そこでスタイルシートで画像の回り込みをやってみましょう。 スタイルシートで設定すれば、管理もラクです。試しに以下の写真を使ってみる事にしましょう。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style

  • 今日覚えたHTML:リストを2列に - たけみたの脱社会学日記

    スタイルシートで次のように定義。「two-column」としているところは、任意の文字列でOK。 .two-column{ float : left; width : 100%; } .two-column li{ float : left; width : 50%; }そのうえで、2列にしたいリストのところで次のように指定。 <ul class="two-column"> <li>りんご</li> <li>みかん</li> <li>さくらんぼ</li> </ul>IEで見たらリスト頭の中黒が消えるという現象発生も、Firefoxだと無問題。 追記(2010年8月18日) Chromeで見てもリストのマークは消えますね。 これの応用として、 .two-column li{ float : left; width : 25%; }とすれば4列に、33%なら3列に、20%なら5列になりますよ。

    今日覚えたHTML:リストを2列に - たけみたの脱社会学日記
  • CSS でヘッダーに画像を表示する for Movable Type 4

    以前エントリーした「CSSでタイトルバナーに画像を表示する」の Movable Type 4 版です。 デフォルトテンプレート・配布テンプレートともにMovable Type 3.x からマークアップが変更されたため、エントリーでヘッダに画像を設定する方法を簡単に紹介します。 この内容は Movable Type 以外のブログでも利用可能です。 エントリーの中で用いている背景画像は Link Style 様より利用させて頂きました。ありがとうございました。 1.基 デフォルトテンプレートのヘッダー部分の(X)HTMLマークアップと、画像を表示するためのCSSの基的な設定は次の通りです。 1.1 ヘッダーの (X)HTML マークアップ デフォルトテンプレートのヘッダーの (X)HTML マークアップは、div 要素と h1/h2 要素、a 要素でブログのタイトルを表示しています。h1

    CSS でヘッダーに画像を表示する for Movable Type 4
  • 华体会注册 - 华体会注册 - 华体会开户 - 华体会体育app下载

    404 - 找不(bu)到(dao)文(wen)件(jian)或(huo)目(mu)录(lu)。 您(nin)要(yao)查(cha)找的(de)资(zi)源(yuan)可(ke)能(neng)已被(bei)删除(chu),已更(geng)改(gai)名(ming)称(cheng)或(huo)者(zhe)暂(zan)时(shi)不(bu)可(ke)用(yong)。 华体会开户 hth华体会官网 华体会体育app官方下载 hth华体会网页登录入口 华体会注册 hth华体会官网 华体会体育app下载 华体会开户 华体会体育app下载 华体会注册网页登录入口 华体会登录 hth华体会官网 华体会体育 华体会平台下载 华体会注册 华体会注册 华体会注册 华体会平台下载 华体会体育 华体会注册 华体会app注册 华体会平台下载 华体会体育app下载 华体会注册 华体会体育app官方下载 华体会体育a

  • HTMLの外部ファイル化

  • Uka-p.com is for sale | HugeDomains

    Make 24 monthly payments Pay 0% interest Start using the domain today. See details

    Uka-p.com is for sale | HugeDomains
  • อันดับ1 เว็บแทงบอล UFABET เว็บตรงที่ดีที่สุด

    UFABET เข้าสู่ระบบเว็บตรงไม่ผ่านเอเย่นต์ ให้บริการคาสิโนออนไลน์แบบครบวงจร มาพร้อม ทางเข้าUFABET เปิดให้บริการตลอด 24 ชั่วโมง ท่านสามารถเข้าเล่นได้เอง ทางเข้า คาสิโนออนไลน์ นี้มีระบบการใช้งานที่สะดวกสบาย ซึ่งมี เกมคาสิโนออนไลน์ มากมายให้เลือกเล่น อย่างเช่น บาคาร่าออนไลน์ เกมยิงปลา ไฮโลไทย และการพนันกีฬาออนไลน์อีกมากมาย ที่เล่นง่าย ได้เงินจริง ให้บริการผ่านเว็บพนันที่ใหญ่ที่สุดในเอเชีย สำหรับการเข้า

    อันดับ1 เว็บแทงบอล UFABET เว็บตรงที่ดีที่สุด
  • css-lecture.com - css lecture リソースおよび情報

    This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

  • [Cording] Divなどで囲ったボックス内すべてをリンク先として指定したい!

  • Blog設定: KALEIDO-SCOPE

    いろいろなサイトさまで「写真をポラ風にする」という記事があって、いいなぁ。と思ってきましたので今回挑戦です。 いろいろ試してみたのですがseesaaではうまく出来ませんでした。 枠線は微妙にでるのですが写真枠が出なかったりとか。 という事で今回参考にさせて頂いた(というよりそのままのコピーです)のは Easygoingさまの「写真に枠をつける」の記事です。 設定方法、CSSに下記内容を追加します。 /*写真風*/ .photo { background: White; padding: 6px; border-width: 1px; border-style: solid; border-color: Silver Gray Gray Silver; float: left; } /*ポラロイド風*/ .pora1 { background-color: White; border-col