[B! 参考-CSS] futomoのブックマーク

futomo id:futomo

参考-CSSに関するfutomoのブックマーク (95)

CSS初心者でも簡単！画像をホバーするとコンテンツをさまざまなアニメーションで表示するスタイルシート -imagehover.css
外部CSS一つとclassを加えるだけで簡単に実装できる、画像をホバーするとコンテンツをさまざまなアニメーションで表示するスタイルシートを紹介します。アニメーションは40種類以上、他のCSSやJSは不要でわずか19KBの超軽量CSSです。
futomo 2017/07/12
参考-CSS
リンク
[CSS]高さが可変のボックスに二重のボーダーを適用するテクニックのまとめ
デモページ：ボックスの高さを拡張以下は、これらの5つの実装方法と解説を意訳したものです。 Method 1: borderとoutline Method 2: 疑似要素 Method 3: box-shadow Method 4: div要素の追加 Method 5: border-image [ad#ad-2] Method 1: borderとoutline borderプロパティとoutlineプロパティを併用します。この方法はoutlineプロパティをサポートするブラウザだけうまくいきます、つまりIE6/7以外です。 .one { border: solid 6px #fff; outline: solid 6px #888; } この方法が機能するのは、outlineがボックスの外に配置されるためです。outlineを使用する際の問題点は、周りのエレメントに影響を与えないとい
futomo 2015/02/25
参考-CSS
リンク
HTML/CSSで簡単な吹き出しの作り方 - Qiita
社内向けに書いたドキュメントが好評だったので公開しちゃいます。基本編1 本体と三角形を分けて実装します <div class="balloon"> こんにちはこんにちは！ <div class="triangle"></div> </div> .balloon { position: relative; width: 200px; height: 30px; background-color: #ccc; text-align: center; } .balloon .triangle { position: absolute; bottom: -10px; left: 50%; margin-left: -10px; width: 0; height: 0; border-top: 10px solid #ccc; border-left: 10px solid transparent
futomo 2015/02/18
参考-コーディング

参考-CSS
リンク
ideahacker.net - ideahacker リソースおよび情報
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.
futomo 2014/08/21
参考-CSS

参考-コーディング
リンク
CSS3対応のCSSセレクタ一覧 - CSSデザインノート
404 Not Found お探しのファイルは見つからないようです。お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
futomo 2013/04/03
参考-CSS

参考-コーディング
リンク
[CSS]リンク先や拡張子ごとにリンクのアイコンを変更するスタイルシート | コリス
「a href」を使用したリンク箇所のアイコンを、リンク先やmailtoやPDF・画像などそれぞれごとにアイコンを変更するスタイルシートのサンプル紹介です。外部リンクでアイコンを変更する場合 a[href^="http://"]{ background:transparent url(../images/external.png) center rightright no-repeat; display:inline-block; padding-right:15px; } 判別する箇所のサンプル -mailto a[href^="mailto:"] 判別する箇所のサンプル -PDF a[href$='.pdf'] 判別する箇所のサンプル -圧縮ファイル a[href$='.zip'], a[href$='.rar'], a[href$='.gzip'] 判別する箇所のサンプル -画像
futomo 2013/03/29
参考-コーディング

参考-CSS
リンク
CSS(スタイルシート)の基本、小技、テクニック総まとめ
CSSの基本や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集｜Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。ということで順番に説明していきます。 1. 全般的なこと 1-1. CSSリセットブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。方法は色々ありますが、個人的には一番
futomo 2013/03/25
参考-CSS
リンク
[CSS]テキスト選択時のハイライトのカラーを変更するスタイルシート
テキストの選択した箇所のハイライトカラーを変更するCSS3の小ネタを紹介します。というわけで、この記事だけp要素のハイライトカラーを変更しました。 CSS3 Text Selection Trick [ad#ad-2] テキスト選択時のハイライトのカラーを変更するスタイルシート備考：WordPressの記事ごとに異なるCSS, JSを使用する方法テキスト選択時のハイライトのカラーを変更するスタイルシート選択したテキストのスタイルを変更するには、「::selection」を使用します。
futomo 2013/03/07
参考-コーディング

参考-CSS
リンク
簡単に実装できる、ボタン画像のマウスオーバーイベント 10+ - NxWorld
画像のオンオフ切り替えといったようなマウスオーバーイベントで、簡単に実装できるものをいくつか紹介します。 CSS3やjQueryを使ってちょっと変わった動きを取り入れるサイトも見かけることも多くなりましたが、今回は普段も使用頻度が高いと思う定番のものに絞りました。サンプルで使用する画像とDEMOについて各マウスオーバーの動きを実装するにあたって上のような3タイプのボタン画像を用いており、各ボタンはそれぞれ以下のようになっています。 type A 単体のボタン画像 type B オンとオフを1枚の画像にした、スプライト型 type C オンとオフをそれぞれ別の画像にし、オフ時のものは_off、オン時のものは_onを拡張子前に入れています。また、サンプルも用意したので実際の動きはこちらで確認して下さい。 CSS：マウスオーバー時に透過させる CSSのopacity（IEはfilter）の
futomo 2013/02/12
参考-コーディング

参考-jQuery

参考-CSS
リンク
CSSリセット手法
3streamer.net 2023 著作権. 不許複製プライバシーポリシー
futomo 2012/11/07
参考-CSS

参考-コーディング
リンク
cmmntr.com
This domain may be for sale!
futomo 2012/09/19
参考-CSS
リンク
ご存知、ないのですか？CSSの優先順位
Cssのセレクタ要素に点数つけて優先順位きめるお話。specificityの。 256個の.classを並べると#idを上書きの件について調べてみました。 http://tech.uni-q.net/design/2012/08/17/class/Read less
futomo 2012/08/09
参考-CSS
リンク
可能性を広げる10のスタイルシート | コリス
ウェブサイトを制作する際、特にCSSの新しいテクニックにはデザインの可能性を広げるのに役立つものがたくさんあります。すべてのウェブ制作者が知っておくべき10のスタイルシートを紹介します。 @media screen and (max-width: 960px) { } 「@media」は単に印刷用ページのためだけではありません。最近のウェブサイトで多く見かけるレスポンシブデザインや可変レイアウトでもよく利用されます。「min-width」などのプロパティを使ってMedia Queryを作る際は、ビューポートのサイズを設定して利用してください。 HTML <meta name="viewport" content="width=device-width, initial-scale=1.0"> スマートフォンでは表示するページの大きさをビューポートの幅に（主に）縮小してフィットさせるため
futomo 2012/07/26
参考-コーディング

参考-CSS
リンク
https://kojika17.com/cntimg/default-css/default-css.svg
futomo 2012/07/19
参考-CSS

参考-コーディング
リンク
CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説 -About normalize.css
Normalize.cssって何？ CSSリセットとは違うの？どうやって使うの？といった疑問を解決するNormalize.cssの制作者自らの解説を紹介します。 About normalize.css [ad#ad-2] 下記は各ポイントを意訳したものです。 Normalize.cssとは Normalize.cssの特徴ノーマライズ vs リセット Normalize.cssの使い方終わりに Normalize.cssとは Normalize.cssとは、クロスブラウザにHTMLのエレメントのデフォルトのスタイルを提供する小さなCSSファイルです。HTML5にも対応しており、従来のCSSリセットに代わるものです。 normalize.cssの関連サイト Normalize.cssの本サイト Normalize.cssのソース Normalize.cssのドキュメント Normal
futomo 2012/05/16
参考-コーディング

参考-CSS
リンク
[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック
テキストで実装した見出しなどを画像に置換するテクニックで「-9999px」が有名ですが、そのパフォーマンスを改善するテクニックを紹介します。 Replacing the -9999px hack (new image replacement) [ad#ad-2] 画像置換：-9999px 改善したテクニック画像置換：-9999px -9999pxを使った画像置換のテクニックは、下記のようになります。 HTMLは見出し要素で実装します。 HTML <h3 id="sample06">見出しのテキスト</h3> 「text-indent:-9999px;」でテキストを見えない位置にし、見出しとなる画像を背景画像として表示します。 #sample06{ width:300px; height:50px; background:url('bg-01.gif') no-repeat 0 -250p
futomo 2012/04/18
参考-コーディング

参考-CSS
リンク
【CSS】実はこんなに便利！cssのセレクタ指定方法をちょっとだけ掘り起こしてみた | バシャログ。
モニターを見つめる目に優しいメガネがZoffからも出る！しかも度付きOK、フレームも選べる！気になってます。hakoishiです。さて、今回は実は便利なcssのセレクタ指定方法をちょっとだけ掘り起こしてご紹介。直下にある要素だけ、とかセレクタ名が部分一致したら、はたまたリンク先パスによって、とか実はかなり便利です！特定の要素の直下の要素だけに一括でマージンを設定特定の文言を含むセレクタ、及びその位置で対象を絞り込み指定リンク先のパス次第でスタイルを切り分ける特定の要素・セレクタを例外とする特定の要素の直下の要素だけに一括でマージンを設定 #container>* { margin: 0 10px; } IE7以上対応。親>子で、直下要素のみを対象指定。上記例ではid="container"の直下の要素すべてにマージンが設定されます。ユニバーサルセレクタには正直不安を感じ
futomo 2012/03/08
IE6対応してる限りは無理か…

参考-CSS

参考-コーディング
リンク
CSSや画像の命名規則について - kojika17
コーディングで時間のかかる要素の1つとして、id,class名や画像名などの命名規則が挙げられます。特に中規模、大規模のサイトで、適当な名前を付けると名前が被る確率が上がり、その結果、画像の上書きや不要なプロパティがかかってしまうなど、よくない結果になることも考えられます。一つの例として、私の命名規則について紹介してます。参考程度に読んで頂けると幸いです。カテゴリに分類して、つなげる。ページのどの位置に属すか分類し、つなげる方法を取っています。基本的に、CSSや画像名は同じにします。同名にすることで、名前を考える手間も省け、変更箇所の特定がしやすくなります。例： CSS #top-side-nav 画像 top-side-nav-home.png top-side-nav-company.png 上記のように命名することで、デザインを見なくても、どのような箇所に使われている
futomo 2012/02/10
参考-コーディング

参考-CSS
リンク
俺の CSS リセット: 2011 冬
年末だからというわけでもないのですが、いつものサイト作りに使う CSS リセットについて見直してみました。今までもちょっとずつ手を入れてはいたのですが、今回はかなり大きく修正しています。というのも、Nicolas Gallagher と Jonathan Neal の両氏による normalize.css を知り、大きく影響を受けたからです。 Normalize.css は「新手の CSS リセット」ではありません。CSS を「リセット」するのではなく「ノーマライズ」する、という新しい考え方です。CSS リセットとノーマライズはどちらも、ブラウザ間で CSS の実装に差異があることを前提にそれらを吸収しようとする、という同じ目的を持っています。ただ、リセットはすべてをまっさらな「さら地」にしようとするのに対し、ノーマライズは使える部分は残しつつ手を入れる必要のある部分だけを整える、という違
futomo 2011/12/26
参考-コーディング

参考-CSS
リンク
地味に使えるCSS小技のメモ&サンプル集 - かちびと.net
cssの小技的なテクニックが便利なので好きなんですが、cssそのものが嫌いで覚えられないのでカンペ的な記事を作ることにしました。便利な小技は沢山あるんですが、特に自分が良く使いそうな Tipsをメモします。既に出回っている情報ばかりで特に目新しい手法はありませんので何も期待できないです。というわけで特にテーマも一貫性も無くて、ただ便利ってだけです。推奨されない方法もあるかもしれませんが、僕は細かいこと気にしませんのでそんな感じです。内容も既出なのでお詳しい方にはお役に立てないですが、僕の個人的なメモなので適当に流して頂けると幸いです。 floatで並べたリストのセンタリング Sample01 コード .centered { position: relative; overflow: hidden; } .centered ul { position: relative; le
futomo 2011/09/01
フォーマットに応じてリンクスタイルを分けるってやつ便利だなぁこういう書き方あるのか。classでやらなくてもいいのか　IE6はだめっぽいけど氏ね

参考-コーディング

参考-CSS
リンク
1 2 3 4 5 次のページ