タグ

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

  • iPhoneのa要素内にimg要素がある場合のタップハイライトの件

    結構前に、ここの名刺印刷が良かった!的な記事を書いたんですけど、結構な方に紹介者コードを利用して登録してもらったようで嬉しい限り! 今回頼んだ名刺の出来がすごく良かった 名刺印刷をどこに頼むかお悩みの方はぜひ! さて、適切なタイトルが浮かばなくて何だかよく分からない感じのタイトルですが、iPhoneやiPod TouchのMobile Safariですが、通常a要素を display: block; な感じにしてタップできる範囲を広げた場合、その部分全体がハイライト表示されるかと思います。 その辺りに関してちょこちょこと。 ↓実際の画面だとこんな感じです。 で、コレ自体は何の問題も無い訳ですけど、この画像部分をタップするとa要素の範囲じゃなくて、その画像のとこだけハイライトされます。 キャプチャが上手く撮れなかったからキャプチャは有りません>< ハイライトされるだけで別に問題は無いんですけ

    iPhoneのa要素内にimg要素がある場合のタップハイライトの件
    rona
    rona 2013/03/12
  • 【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1

    HTML5版の新規でサイトを作るのに使えそうな一式です。 今までの新規で使えそうな一式のVer3からも有る程度流用はしていますが、結構いじってます。 今までみたいに、社内のマークアップエンジニアとかそういう人がもう居ない環境なので、何処かで使われていた訳ではありませんが、まー最初の準備って地味に面倒なのでちゃちゃっと始めるには良いんじゃないでしょうか。 【HTML5】新規でサイトを作るのに使えそうな一式。Ver 1をDL(zip:12kb) HTML5版のVer 1を見る 社内のマークアップエンジニアとかって書いたら、これどうなのよ?とか話してた頃がちょっと懐かしくなった。 コーダー飲みとか、CSS Niteなんかで、マークアップエンジニアやコーダーさんと会う機会は結構有るのに、そういう具体的な?話まではしないからなぁ・・・ それはさておき、中身のご説明などを続きにて。 中身のご説明 zi

    【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1
  • CSSに関する基本的なこと4(優先順位、セレクタの組み合わせ)|CSS HappyLife

    3回続いた基的なことも今回で最終です。 4回目の内容は、以下のことについて触れております。 んなの分かってるよ!って人は、次の次のエントリーにお進み下さい。 スタイルの優先順位 セレクタの組み合わせ セレクタのグルーピング スタイルの優先順位詳細 スタイルの優先順位 スタイルのもっとも基的な優先順位は、 「後から読み込んだスタイルを優先的に適用」します。 読み込む順序は、上から読み込まれていくので、、、 p { color:red; } p { color:blue; } のように書いたとしたら、color:blueが優先され、文字は青になります。 基的な読み込み順序で最低限の部分は、コレだけです。 より詳細な優先順位については後述します。 セレクタは色んなセレクタを組み合わせて指定できます。 子孫セレクタ(空白文字区切り) 親要素に含まれるすべての子孫要素をターゲットにスタイルを適

    CSSに関する基本的なこと4(優先順位、セレクタの組み合わせ)|CSS HappyLife
    rona
    rona 2009/06/05
    「specificity」 (個別性) について2
  • 画像とかの横にあるテキストを上下中央にする。|CSS HappyLife

    あああああああ いいいいいいいいいい うううううう あああああああ いいいいいいいいいい うううううう えぇぇぇぇえ!!! HTMLソース <div class="centeringTest"> <p class="image"><img src="img/share/bg_footer.gif" alt="footer画像" width="100" height="300" /></p> <p> あああああああ<br /> いいいいいいいいいい<br /> うううううう<br /> あああああああ<br /> いいいいいいいいいい<br /> うううううう<br /> えぇぇぇぇえ!!! </p> <!-- / .centeringTest --></div> div.centeringTest p { display: table-cell; vertical-align: middl

  • yuga.js 0.4.2 - 優雅なWeb制作のためのJS|CSS HappyLife

    通常のロールオーバー 動作テスト サンプルのソース <p> <img src="./img/yuga/btn_more.gif" alt="more" class="btn" /> </p> 説明 img要素にclass="btn"が有る場合、src属性を「_on」付きのものに差し替える [New]グループ化されたロールオーバー 動作テスト テキスト。 サンプルのソース <p> <a href="./hoge.shtml" class="btngroup"> テキスト。<img src="./img/yuga/btn_more.gif" alt="more" class="btn" /> </a> </p> 説明 img要素の親要素にclass="btngroup"があり、img要素にclass="btn"が有る場合テキストにマウスカーソルを当てても画像がロールオーバーする。 現在のページ

  • それなりに使い勝手が良さそうなヘッダーのサンプル4種|CSS HappyLife

    17日から下書き状態だったエントリー、、、沢山用意する予定だったけど色んな都合で増えない予感なんで公開。 ずいぶん昔にフッターの区切りっぽいサンプルを作ったけど、ヘッダーは作ってなかったので、ヘッダーのサンプルを作ってみましたよっと。 というか、ヘッダーのサンプルって見かけたことがほっとんど有りません。(必要とされてないから? ヘッダーって作るの大変というか、厄介だったりしませんかね。 全部画像ならがっちり固定しちゃえば、文字サイズ変更されても耐えられますけど、一部テキストがあったりした場合とかに文字サイズ変更するとレイアウト崩れてしまったりっていうアレが厄介だったりするのです。 文字サイズ変更しても崩れないようにする事を、DDTT対応っていうんでしたっけ。 今回のサンプルデザインは、一部弊社デザイナーにお願いしてつくってもらいました。 感謝感激でございまする。 デザイン提供してくれた方は

    それなりに使い勝手が良さそうなヘッダーのサンプル4種|CSS HappyLife
  • XHTMLのお手本

    HappyLife Companyは「幸せ」をカタチにする製品を開発しています。 文へジャンプ 主なカテゴリー ガイドメニュー HappyLifeマシン 製品説明製品説明製品説明製品説明製品説明製品説明製品説明製品説明。 製品説明製品説明製品説明製品説明製品説明製品説明製品説明製品説明製品説明製品説明製品説明製品説明製品説明製品説明製品説明製品説明製品説明製品説明製品説明製品説明。 製品説明製品説明製品説明製品説明製品説明製品説明製品説明製品説明製品説明製品説明。 WWW WATCH 時計 製品説明製品説明製品説明製品説明製品説明製品説明製品説明製品説明。 製品説明製品説明製品説明製品説明製品説明製品説明製品説明製品説明製品説明製品説明製品説明製品説明製品説明製品説明製品説明製品説明製品説明。 真鍮製!!!! !!!サラダボウル 製品説明製品説明製品説明製品説明製品説明製品説明製品説明製

  • 新規でサイトを作るのに使えそうなの一式。(あの人のパクりじゃないんだからっ!)|CSS HappyLife

    08年6月4日追記: コレの新しいの作りました。 新規でサイトを作るのに使えそうなの一式。Ver 2 11月7日追記: contens.cssの56行と60行目の#contents部分でスペルミスしておました。 ごめんなさい... 現在は修正版になっております。 修正後のcontents.css --- SO905iがやば過ぎる件。JOGですよ!じょぐ!!!すげー待ってた。アナタを心から待っていた。 さて、一行駄文はお終い。題です。 毎回新規サイトを作成する場合は、以前組んだのからコピって来て使うケースが多くて何かと面倒だと思っていたわけです。 んで、自分仕様のが欲しいと思ったので、仕事そっちのけで作ってみました。 以前からソレっぽいのは公開したり、なんやかんやだったんですが、11月2日Verって事で。 どうせ新規サイト作成の際にちょっとずつ見直しが入っていくので、すぐに古くなってしまう

    新規でサイトを作るのに使えそうなの一式。(あの人のパクりじゃないんだからっ!)|CSS HappyLife
  • 1