[B! Webデザイン][CSS] kootaroのブックマーク

[CSS]Webページのこれからのレイアウトテクニック！FlexboxとCSS Gridは一緒に使用してこそ価値がある

Webページのレイアウト、一昔前まではfloat、最近のプロジェクトではFlexboxが主流だと思います。CSS Gridはどうでしょうか？ CSS Gridは主要なすべてのブラウザにサポートされ、採用を検討している、また既に導入している人も少なくないでしょう。注意しておきたいのが、CSS GridがあればFlexboxはいらないという考え方です。これからのレイアウトは、FlexboxとCSS Gridを一緒に使用することで、それらの性能を効果的に利用できます。 Flexbox and Grids, your layout’s best friends by Eva Ferreira 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 FlexboxとCSS Gridは一緒に使用することでパワーを発揮する神話は崩された Fri

kootaro 2017/11/16

リンク

知っておいてよかった！Web制作時に効率上げる「便利」なCSSテクニック - コムテブログ

TL;DR 少し前にサイト制作でさりげなく使われている CSS テクニックをまとめましたが、今回はそれを補足する形で、これから増えそうなもの、使っていきたいものを今後忘れないようにメモしておきます。 Photoshop ののように、乗算・オーバーレイなど背景色と背景画像を混ぜあわせたり、写真に色々な効果を付与することができるbackground-blend-modeプロパティ。シンプルな例では、以下のように背景写真と背景色を合成することが可能です。 .blended { background-image: url(face.jpg); background-color: red; background-blend-mode: multiply; } 効果一覧：multiply／screen／overlay／darken／lighten／color-dodge／color-burn／hard

kootaro 2014/07/14

リンク

width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。（CSS おれおれ Advent Calendar 2012 – 05日目） | Ginpen.com

CSS おれおれ Advent Calendar 2012 – 05日目横幅いっぱいに広げようとしてwidth:100%を指定したら横スクロールバーが出ちゃった、という経験ありませんか？　その原因と仕組み、回避策についてお話しします。わりとFAQな感じ。これは是非覚えておいてもらいたいです。というか知っておいてください。はみ出した例 position:absoluteないしposition:fixedを使った際にこうなっちゃう事が多いと思います。上部から出てきたメッセージ欄、横にはみ出てますね。でも指定はちゃんとwidth:100%です。「幅いっぱい」を指定しているのに、どうしてはみ出てしまったんでしょうか。「幅」が意味するところ実はCSSの仕様が定めるところの「幅」というのが、我々が視覚的に認知している「幅」と異なっているのが原因です。 CSSではこんなものを定めています。

kootaro 2012/12/06

リンク

cssの情報・まとめ - かちびと.net

cssの情報まとめです。ローカル環境にストックしていた情報を開放してみますのでシェアして頂ければ幸いです。内容は結構偏っていると思いますので参考程度になさってください。全てのcss情報が有るわけではありません。主観でストックしていたリンク集です。ツールとかメニュー関連とかハックとかいろいろ188の情報です。ツールオンラインのcssツール。 CSS Validation Service / W3C検証サービス日本語版 RoundedCornr / 角丸のHTML・CSSコードを生成してくれる CSS Type Set / ファミリー、色、単語間、行間等をプレビューで確認 CSS Text Wrapper / 様々な形のテキストの回りこみを簡単に実現できる CSS Builder / オンラインでスタイルを生成可能 Spiffy Box / cssによる角丸を簡単に生成 The

kootaro 2010/01/21

リンク

duree dpe

Par la rédaction Rédigé le 2021-05-25 Les diagnostics de performance énergétique dpe doit être affiché pendant toute sa durée de validité de 10 ans l'affichage doit être visible par le locataire. Dans le diagnostic je pense que tout est résumé une super équipe sur laquelle nous pouvons compter à tout moment de surcroit très sympathique. De la performance énergétique dpe log ement tous les cas à par

kootaro 2010/01/19

リンク

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.

kootaro 2009/09/15

リンク

[CSS]半透明のパネルを使ったドロップダウン型ナビゲーションのスタイルシート

スクリプト無しで、tableで配置したコンテンツをドロップダウン型のナビゲーションのパネルに表示するスタイルシートをCSSplayから紹介します。 Professional - drop down table menu demo パネルの透過処理は、IE6にも対応しています。対応ブラウザは、IE6, IE7, IE8, Firefox, Opera, Safari(PC) and Google Chromeとのことです。 IE8での動作は、IE7のエミュレーションモードではありません。

kootaro 2009/05/11

リンク

stu nicholls | CSS PLaY | cross browser multi page photo gallery

CSS DEMOS › Cross Browser Multi-Page Photograph Gallery Date : Pre 2006 For all modern browsers This demo is too wide for your mobile screen. Please view on a tablet or PC. Information Based on the look of Suckerfish HoverLightbox, this one uses my multi-page layout system but includes images instead of text. Unlike the Suckerfish HoverLightbox this version does not use javascript but is pure CSS

kootaro 2009/04/10

リンク

[使える CSS テクニック] CSSだけで実現するPhotoアルバム | バシャログ。

集中連載「使える CSS テクニック」も第 9 回になりました。今回は CSS だけで画像ギャラリーを作ります。画像の挙動は、（IE6 でも同様の表示ができるように）a タグの擬似クラスだけで設定しています。サンプル XHTML <div id="album"> <ul> <li><a id="photo01" href="#slide"><img src="css_album/img/photo01.jpg" />日本大通り駅</a></li> <li><a id="photo02" href="#slide"><img src="css_album/img/photo02.jpg" />指路教会</a></li> <li><a id="photo03" href="#slide"><i