タグ

TipsとWebデザインに関するim32degcのブックマーク (8)

  • IE6でmin-widthを実装する方法のまとめ - Webtech Walker

    先日書いたmin-widthとmin-heightに関する記事の補足です。以下のようなコメントをいただいたのでIE6でmin-widthを実装する方法をまとめました。 たしかに、この方法に若干違和感感じあります。 例えばどういう実装方法があるのでしょうか? あまり使う機会がないもので。 javascriptのライブラリを使う ライブラリを使う場合は下記などがあります。お手軽です。 min-width,max-width,min-height,max-heightをIEで使えるようにするjavascript[to-R] expressionで実装する expressionを使って、CSS内でjavascriptを使う方法だとかなりシンプルに書けます。 [CSS]IEで、min-widthやmax-widthを実現する方法 | コリス #foo { min-width: 600px; widt

    IE6でmin-widthを実装する方法のまとめ - Webtech Walker
  • font-familyはこのCSSを使って頂けるととってもありがたいんですよね【css】

    ウェブサイトのフォントに迷っているならもうこれを指定すればいいと思うよ。 たとえばwordpressのテーマってほとんどが外国の作者さんですよね。 日語のフォント指定なんてしてくれてませんし! DreamWeaverとかがデフォで指定してくるfont-familyもいまいちだし。 じゃあ最近流行のwebフォントはどうか? 英数字ならファイルサイズが小さく種類もいっぱいあるのに対し、日フォントはファイルサイズが大きいのに加え、種類も少ないです。 (FontPlusさんを使うとたくさん使えてサイズ小さくて済みます、使用料を個人で払えるならば…ね。) 英数字だけwebフォントできっちり指定しても日語との整合性がとれるかというとぼくにはちょっと無理です(ヾノ・∀・`)ムリムリ というわけで、ぼく好みのスタイルを載せるので見た人はこれを使いましょう! (ちなみにブラウザに拡張を入れて気にくわ

    font-familyはこのCSSを使って頂けるととってもありがたいんですよね【css】
  • [CSS]画像を使わずに、スタイルシートでぎざぎざの線をかくテクニック

    画像を使わずに、ノコギリの歯のようなぎざぎざの線をスタイルシートでかくテクニックを紹介します。 下記は、p要素一つだけです。 実装は、こんな感じです。 HTML HTMLはpでもdivでも適当に。 <p>塩レモン</p> CSS ぎざぎざの線はlinear-gradientでかきます。 ぎざぎざのサイズは、4pxを4箇所、それを倍にした8pxを2箇所、変更してください。 p{ padding:1em; background: linear-gradient(-135deg, #4885ff 4px, transparent 0) 0 4px, linear-gradient(135deg, #4885ff 4px, #fff 0) 0 4px; background-color: #4885ff; background-position: left bottom !important; b

  • CSSによる段組(マルチカラム)レイアウト講座

    サービス終了のお知らせ いつもYahoo! JAPANのサービスをご利用いただき誠にありがとうございます。 お客様がアクセスされたサービスは日までにサービスを終了いたしました。 今後ともYahoo! JAPANのサービスをご愛顧くださいますよう、よろしくお願いいたします。

  • [CSS]hr要素をおしゃれにスタイリングする8つのテクニック

    デモページ CSS3を使った8つのテクニック デモページの8つの実装方法を個別に見てみましょう。 HTML HTMLは全デモ共通で、hr要素にclass名を付与するだけのシンプルな実装です。 <hr class="style-one"> [ad#ad-2] CSS スタイルシートは各デモのキャプチャとともにご紹介。 繊細なグラデーションを使ったデザインです。 hr.style-one { border: 0; height: 1px; background: #333; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -ms-linear-gr

  • 虹色ミツバチ

    freo、スタイルシート、OFFICE(excel・word)などについての備忘録です。 全ての環境で成功するとは限りません。 力不足のため、ご質問いただいてもお答えできる場合とできない場合があります。 テンプレート、プラグインの配布も行っています。 全ての環境で動作すると保障できるものではありません。 DL、使用は自己責任でお願いいたします。 →お問い合わせ頂く前に 記事検索フォーム キーワード検索 タグ検索 エントリー ニュースプラグイン ページ バナー付きリンクプラグイン オプション ページ一括表示プラグイン アルバムプラグイン スケジュールプラグイン 同人誌 smarty AND関数(1) Addメソッド(1) Application.DisplayAlertsプロパティ(1) AutoFilterメソッド(1) B5(1) B6(2) Bitbucket(1) Bootstrap

    虹色ミツバチ
  • CSS3を使ってできる画像まわりのエフェクトやスタイリング18

    CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。 たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました 目次 1. シャドウ 2. めくれた風 3. トイカメラ風トンネル効果 4. カラー調整 5. 回転 6. 角丸 7. 楕円のフレーム 8. 円のフレーム 9. 三角形フレーム 10. 重なった風 11. ぼかし 12. フェード(シャドウ編) 13. フェード(グラデーション編) 14. 反射 15. リボン 16. 差し込んだ風 17. フレームだけを傾ける 18. 半透明フレーム まとめ ※ 実際の表示はこちらから確認できます。 ※ この記事で掲載しているCSSは、シンプルにするためにベンダープリフィックスを付けていません

    CSS3を使ってできる画像まわりのエフェクトやスタイリング18
  • 擬似要素を使った見出しデザイン

    このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。 今回のサンプルは別サーバにアップしていますのでご覧ください。 それでは今回8つのサンプルを紹介していきます。 1. 吹き出しのような見出し1 吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付

    擬似要素を使った見出しデザイン
  • 1