タグ

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

  • とっても使えるoverflowプロパティ。その使い方色々。

    光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ~と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ! これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し!!(わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに

    とっても使えるoverflowプロパティ。その使い方色々。
    nybb
    nybb 2009/11/02
  • 新規でサイトを作るのに使えそうなの一式。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
  • デザインを見てて「?」が浮かぶこと。

    最近思う、デザインに関する「なんで?」を書きたいと思うので、デザイナーな方とか、答えられそうな人は答えてくれると嬉しいんす。 この「なんで?」の想定しているサイトは、コーポレートサイトとか、学校のようなサイトとかの、ヘッダー、ナビ、メイン、サイドバー、フッターがある様な感じです。 フラッシュばりばりな感じのキャンペーンサイトとかは無しで考えてます。 ちゃんと伝えている事もあれば、明確な理由付けが出来ないために言えなかった事もあったりします。 トップページとトップ以外のページの関係性 ココで言いたいのは、全部「トップだけ違う」っていう部分だと思うです。 グローバルナビゲーションの位置が変わる 横ナビが縦ナビに変わるのは極端にしろ、トップではメイン画像(フラッシュ)が来て、その下にグローバルナビ。トップ以外のページは、上部にグローバルナビっていうパターン。 よく聞くのは、「トップだけ他のページ

    デザインを見てて「?」が浮かぶこと。
  • よくある質問っぽいののjQueryを使ったサンプル|CSS HappyLife

    2007年12月6日追記 IE6で選択中のタブの上が切れていたのを修正しました。 具体的にはcss/style.cssの35行目にfloat: left;を追加しております。 いろんなサイトで見かける「よくある質問」。 一番多いパターンは、リストで質問があって、アンカーで回答に飛ばす方法だと思うです。 特別ソレがいけてないとかは思わないんですが、飛んだ後に「戻るボタン」で戻らない人とかは、毎回ページトップ押したり、スクロールして戻ったりと案外手間だったりするわけです。 それならそういった手間が掛かるかも知れないことを少しでも省けないかしら?って事で、jQueryを使ってタブ型で折りたたまれたよくある質問っぽいサンプルを作ってみました。 (単純にボクがこのスタイルが一番見やすくて好きってだけだったり) サンプルページ サンプルダウンロード(Zip:20KB) メインのCSSファイル (サンプ

    よくある質問っぽいののjQueryを使ったサンプル|CSS HappyLife
    nybb
    nybb 2007/12/04
    FAQとかに使用。“飛んだ後に「戻るボタン」で戻らない人とかは、毎回ページトップ押したり、スクロールして戻ったりと案外手間だったりするわけです”確かにその通りだわ
  • 新規でサイトを作るのに使えそうなの一式。(あの人のパクりじゃないんだからっ!)|CSS HappyLife

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

    新規でサイトを作るのに使えそうなの一式。(あの人のパクりじゃないんだからっ!)|CSS HappyLife
  • フロートボックスが並んだ時の右端のがカラム落ちしない方法みたいなのとIEのコメントバグ

    タイトルが長い… サイトやブログの価値を調べる10の指標とツール|前向きストラテジー 10番目のでこのブログを調べると泣きたくなるくらい安いけど、ボクは頑張ろうと思った今日この頃、皆様暑さにバテていないでしょうか?ボクはしっかりバテてダレてます。あんまり仕事してま…(加藤さまに給与減らされるので自重しました) さて、そんな訳で題ですが、下記みたいなレイアウトの時のお話です。 一番書きたかったフロートボッ(略)みたいなの サンプルとダウンロード サンプルページ ダウンロード 今回の題は「ほげほげ」って書いてあるところのボックスに関してだけ書くつもりが遊んでいるウチに気になった事があったのでそちらも書こうと思っております。 何はともあれ、この「ほげほげボックス」ですが、main areaは10pxのpaddingが指定されてて、その中にこんな感じでぴったりなボックスがぽこぽこ並ぶときって、

    フロートボックスが並んだ時の右端のがカラム落ちしない方法みたいなのとIEのコメントバグ
    nybb
    nybb 2007/08/10
  • 1