[B! CSS3] nekoanaのブックマーク

nekoana id:nekoana

CSS3に関するnekoanaのブックマーク (6)

[CSS]擬似クラス４つ「:first-child」「:last-child」「:first-of-type」「:last-of-type」
ここ最近は、残暑も鳴りを潜めて気持ちのよい秋風を感じますね。少ししたら暑さがぶり返すんでしょうけれど… 私は秋が一番好きな季節なので、わくわくしています。スタッフ「ほ」です。さて、前回、前々回と擬似クラスをご紹介していますが、忘れちゃわないうちに、さらに畳み掛けていきます。今回は、使い方が似ていることもあり、４つの擬似クラスを一気にご紹介していきます。 :first-child :last-child :first-of-type :last-of-type ひとつずつ見ていきましょう :first-child 擬似クラス :first-child擬似クラスは、一番最初の子要素が指定した要素だった場合に装飾を適用します。文字にするとわかりづらいですねぇ…ひとつ例をあげましょう【HTML】 <ul> <li>オレンジ</li> <li>バナナ</li> <li>ぶどう</li> <
nekoana 2021/03/15
filst-child 擬似クラスの使い方

CSS3
リンク
http://usingcss3.com/ultimate-image-hover-effects-using-css3/
nekoana 2016/05/18
CSS3

サイト作成
リンク
メンテナブルCSS | 株式会社サイバーエージェント
1. 序論 CSSは記述ルールが簡素であり、少しの学習コストですぐに記述ができる手軽なツールです。しかし、大規模なアプリケーションで複数人で開発するケース等では、見栄えだけしか考えずに身勝手にコーディングしてしまうと、非常にメンテナンスコストがかかる負の遺産が作られてしまいます。そのためCSSの品質を保つために様々なプロジェクトで、CSSの定義ルールが決められています。本稿では一般的なCSSの定義ルールと、そのルールがなぜ作られたのかを合せて報告致します。また、CSSのルールを適用するにあたって、手動・目視でルールの適用をチェックするのは非常にコストが高い作業です。これらルールの適用を補助するツール群を、合せて報告致します。
nekoana 2015/01/22
css

css3
リンク
[続編] 効率的になった！最近のサイトで使われていたCSS小技集 - コムテブログ
TL;DR 前回（あのサイトでさりげなく使われていた CSS 小技集）の続きとなります。今回はマウス操作によりインタラクティブな動きを出したり、簡単にボックスを等間隔・等幅にしたりと CSS のみで実現できる方法を書いておきます。インタラクティブ１．マウスオーバーで自動スクロールさせる最近、マウスオーバーで縦長のページを部分的に見せる WordPress テーマが少しづつ出てきました。こちらは簡易的ながらマウスオーバーにて縦長の画像を見せるコードです。長めの画像を用意してはみ出した部分はoverflow: hidden;で隠しながらtransitionで遅延させ擬似的にスクロールしているように見せます。 html <div class="box-fixed"> <div class="field-wrap"> <div class="field-detail"></div> </di
nekoana 2015/01/22
CSS3
リンク
印刷用のCSS3　Media Queries（メディアクエリ）@media print の使用サンプル
CSS3の@mediaの指定を使うと、印刷用CSSもお手軽に設定することができます。ヘッダ要素を非表示、コンテンツのwidth幅をMAXにするなど、数行加えておくだけでもユーザビリティは相当変わります。スタイルシートの末尾にこんな漢字で追加します。CSSの優先順位のルールの影響は受けますので、全部に!important付けておけば間違いないです。印刷用メディアクエリの例 @media print { /* All your print styles go here */ #header, #footer, #sidebar { display: none !important; } #contents {width:100% !important; } } @media printをサポートしているブラウザ media queryはCSS3のテクニックなので、モダンブラウザでないと対
nekoana 2015/01/05
css3
リンク
保存版！CSS3セレクタの説明書
CSSセレクタについての基礎知識このブログで何回も説明していますが、念のために説明します。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。セレクタ表の説明には属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。あと親子関係や兄弟関係などもあまり聞きなれないかもしれません。下の階層にある要素との関係が親子関係で、同じ階層にある要素同士の関係が兄弟関係です。あと、CSS3と聞いて「どうせIE8以下はダメだし使えない」と思う方もいるかもしれませんが、セレクタに関しては簡単に対応できます。 IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」をご参考に。それ
nekoana 2013/09/24
css

css3

サイト作成
リンク
1