タグ

ブックマーク / css-happylife.com (3)

  • 【Retinaディスプレイ対応】Smart Phone テンプレート for MT おまけも付いてくるよ。

    【Retinaディスプレイ対応】Smart Phone テンプレート for MT おまけも付いてくるよ。 2010年9月28日12:20頃追記 一部パスの書き方などが間違ってました。すみません。 現在修正版がアップされているのでDLされた方は再度お願いします。 2008年7月11日にiPhone 3Gが発売されて以降、新しい形のWebブラウジングを楽しまれている方も多いことでしょう。 ボクはそんな世の中を横目で眺めながら過ごし、つい先日まではiPhoneやiPod Touchはほぼ触ったことが無い状態でした。 そんなボクも、お仕事iPhoneやスマートフォンに対応したサイトをコーディングする必要があり、iPod Touchを借りたのを切っ掛けに、今後もお仕事で使うだろうという名目で、新しい iPod Touch を購入してしまいました! で、手に入れたからには仕事以外でも何か作りたいっ

    【Retinaディスプレイ対応】Smart Phone テンプレート for MT おまけも付いてくるよ。
    halohalolin
    halohalolin 2010/09/27
    Retinaディスプレイ対応と言ってるくらいなので、iPhone 4辺りが一番キレイに見れるかと思います。PCの場合はWebKit系ブラウザで見てやってください。ウィンドウサイズ変更すれば、480pxから320px用に変わります。
  • グローバルナビゲーションのロールオーバーをJavaScriptを使わず、CSSのみで実現する | CSS HappyLife

    http://css-happylife.com/template/07/style.css 該当部分のCSS /* -+-+-+-+-+-+-+-+-+-+-+-+- Global Navi Style */ #g_navi { height:64px; background:url(img/g_navi_bg.gif) no-repeat; margin:0 0 0 8px; } #g_navi ul { padding:6px 0 0 6px; } #g_navi li { display:inline; list-style-type:none; } #g_navi li a { height:53px; display:block; float:left; text-indent:-9877em; text-decoration:none; overflow:hidden; }

    halohalolin
    halohalolin 2009/08/18
    CSSを利用したjavascriptを使用しないヘッダメニューのロールオーバー作成例
  • a要素が2行になった場合に背景下にテキストが来ないように。

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

    a要素が2行になった場合に背景下にテキストが来ないように。
    halohalolin
    halohalolin 2009/05/02
    display: inline-block を使うのがコツ
  • 1