[B! CSS][css] nobu_kamoのブックマーク

横に水平線のあるテキスト

図1：横に水平線のあるテキストの例おもに見出しなどで見かける、テキストの左右 (またはそのどちらか) に水平線を配置したスタイル。これを CSS で実現する方法について考えてみました。 Demo: 横に水平線のあるテキスト重ねて隠すパターンまず最初は、1 本の水平線を幅いっぱいに配置した上で、テキストに重なる部分を隠す、という方法です。 <h2><span>Hello</span></h2> マークアップはこのように二重の要素が必要です。外側の h2 要素の擬似要素で水平線を作り、内側の span 要素に背景色を指定してテキスト部分を隠します。 h2 { position: relative; text-align: center; } h2:before { border-top: 1px solid; content: ""; position: absolute; top: 5

nobu_kamo 2014/01/09

CSS

リンク

Bootstrap3超速レビュー！刷新されたグリッドシステムを理解しよう！

Bootstrap3超速レビュー！刷新されたグリッドシステムを理解しよう！白石俊平（HTML5 Experts.jp編集長）人気のCSSフレームワーク「Bootstrap」のバージョン3が正式にリリースされました。この記事では早速Bootstrap3をレビューし、特にグリッドシステムを掘り下げて解説してみます。フラットデザイン採用、フルレスポンシブ！ Bootstrap2からの変更点のリストは、公式のリリース文を参照してください。特に大きな変更点は以下のとおりです。フラットデザインの採用現在流行のフラットデザインを採用しました。ただこれは「流行りに乗った」のではなく、テーマの一つとして提供されているという位置付けのようです。例えば以下は、Bootstrap3のボタングループです。レスポンシブWebデザインの全面採用以前までのBootstrapは、レスポンシブWebデザイン

nobu_kamo 2013/08/21

リンク

より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集

2017年2月22日 CSS 以前「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」という記事で紹介したSass／SCSS。皆さん使ってますか？今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそうなものを中心に紹介するので、自分の使いやすいオリジナル mixin を作ってみてくださいね！ ↑私が10年以上利用している会計ソフト！目次 Sassの基礎知識 @mixin の基本的な使い方リンクカラーを一括設定ベンダープレフィックス透明度絶対位置の指定 rem を使ったフォントサイズ指定レティナディスプレイ対応画像 Compassについて軽く。 Sas

nobu_kamo 2013/07/02

リンク

[CSS]アニメーションも気持ちいい！フォーカスがはずれてもキープされるパネルを表示するスタイルシート

ボタンをタップ・クリックすると、素敵なアニメーションでソーシャルメディアのボタンを配置したパネルが表示され、フォーカスがはずれてもそのままパネルがキープされるスタイルシートのデモを紹介します。デモページ HTML HTMLはシンプルで、リストで各ソーシャルメディアのボタン、チェックボックスでパネルの開閉をコントロールします。 <div id="content"> <input type="checkbox" class="checkbox" id="share" checked> <label for="share" class="label entypo-export"></label> <div class="social"> <ul> <li class="entypo-twitter"></li> <li class="entypo-facebook"></li> <li cla

nobu_kamo 2013/05/24

CSS

リンク

[CSS]画像にちょっと素敵なエフェクトを与えるスタイルシートのまとめ

デモページ [ad#ad-2] HTML img要素とメッセージのp要素をdiv要素に内包します。 <div class="polaroid"> <p>Sarah, Dec '02</p> <img src="http://lorempixum.com/200/200/people/1" /> </div> デモで使用しているメッセージの手描き風のフォントは「Kaushan」です。フォントを利用する場合はhead内に下記を記述します。 <link href='http://fonts.google apis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'> CSS ポラロイド風のスタイルを適用するために、3つのセレクタを使用します。 .polaroid { position: relative; width: 2

nobu_kamo 2012/04/03

CSS
css3

リンク

【CSS】実はこんなに便利！cssのセレクタ指定方法をちょっとだけ掘り起こしてみた | バシャログ。

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

nobu_kamo 2012/03/07

CSS
css

リンク

納期間近でIEで崩れてる！そんな時にも慌てないCSS開発のワークフロー

まだまだIE7、そしてIE6のユーザーをターゲットに考えているウェブサイトは多くあると思います。そんなIEユーザーをターゲットに含めたウェブサイトを制作する上で、より効率的にCSSの開発が行えるワークフローを紹介します。 Cross-Browser CSS Development Workflow [ad#ad-2] 下記は各ポイントを意訳したものです。 1. リセットかノーマライズか 2. 基本的なレイアウトはIEで 3. 最後の確認もIEで 4. 最後の手段：IEのみスタイル 5. 問題に取り組み続ける 6. おわりに 1. リセットかノーマライズか IE, Firefox, Chrome, Safari, Operaなどのブラウザには各要素ごとのデフォルトのスタイルが用意されており、制作する際にはこれらの相違を見出し、各要素を整える必要があります。 CSSリセットとは CSSリセッ

nobu_kamo 2012/02/02

CSS

リンク

サービス終了のお知らせ - NAVER まとめ

サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

nobu_kamo 2012/01/27

css3
CSS

リンク

俺の CSS リセット: 2011 冬

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

nobu_kamo 2011/12/26

css

リンク

【CSS】iPadだけにCSSを適用する方法:</gecko>：げことじ。：日常からWEBまで：

結論から言うとjavascriptでUserAgentを参照して振り分けるしかない。 linkやcss内の@mediaでどうにかなるもんだと思ってましたが。 <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" /> どうやら↑では”iPadオンリー”は無理です。結局UserAgentを見るしかない。 var iPad = /iPad/.test(navigator.userAgent); if(iPad){ //iPadだけに適用させたい記述 } 長くなるので無理な理由、検証、iPadだけにcssを適用させるjsは以下に。目次最初に調べたエントリー linkタグのmedia属性で判別する方法 landscapeモード

nobu_kamo 2011/12/13

リンク

CSSのみでテキストにグラデーションやリフレクトをかけるテクニック（ちょっと更新） - くらげだらけ

前回はiOS5のMobile Safariから使えるようになったHTML5・CSSについて前編と後編に分けてご紹介しましたが、そのなかで説明していない小さなテクニックについて少し紹介したいと思います。今回はCSSでテキストにグラデーションをかけるテクニックについてです。前回のWeb App Demoではフッタータブに特殊なWebFontを使ってアイコンを表示させるようにしていましたが、タブがActiveのときに色が変わってエフェクトがかかるようになっています。このエフェクト効果はCSSでテキストにグラデーションをかけるテクニックをつかってやっています。通常、CSSでテキストカラー（colorプロパティ）にグラデーションを指定することはできませんが「:after」擬似クラスや「mask-image」プロパティを組み合わせて使うことでグラデーションのような表現をすることができます。具体

nobu_kamo 2011/11/14

CSS
css3

リンク

電話占いで使われる占術をご紹介 | 当たる電話占いおすすめランキング～口コミで評判の当たる電話占いサイト紹介～

小さいころから占いに興味があって、色々と勉強しているうちにどんどん好きになり、皆さんにも占いの良さを知ってほしくて記事を書いています。知り合いに占い師や霊能力者、お寺の住職がたくさんいるので、その方たちにインタビューして記事を書いています。

nobu_kamo 2011/11/10

リンク

HTML5+CSS3の導入時に役立つ7つの設定

こんにちは、鴨田です。個人的に仕事の大半はスマートフォン関連なので、最近のマークアップはほとんど全てHTML5+CSS3で行っています。とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。ですので、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。１．HTML5の初期テンプレート案 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML5 初期テンプレート</title>  <link rel="stylesheet" media="screen" href="reset.css" />  <meta nam

nobu_kamo 2011/10/21

CSS
css3

リンク

保存版！CSS3セレクタの説明書

CSSセレクタについての基礎知識このブログで何回も説明していますが、念のために説明します。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。セレクタ表の説明には属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。あと親子関係や兄弟関係などもあまり聞きなれないかもしれません。下の階層にある要素との関係が親子関係で、同じ階層にある要素同士の関係が兄弟関係です。あと、CSS3と聞いて「どうせIE8以下はダメだし使えない」と思う方もいるかもしれませんが、セレクタに関しては簡単に対応できます。 IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」をご参考に。それ

nobu_kamo 2011/10/13

リンク

スタイルシート［CSS］/CSSの基本/ID名とクラス名 - TAG index

見た目に関する情報を名前として使用すると、スタイルを変更した場合などに矛盾が生じてしまうことがあります。 left、right left や right などの位置を表す名前は、後で左右を入れ替えた場合などに矛盾が生じてしまいます。 red、blue ... red や blue などの色を表す名前は、後で色を変更した場合などに矛盾が生じてしまいます。 w300px、size12 ... サイズを表すような名前は、後でサイズを変更した場合などに矛盾が生じてしまいます。見た目の情報ではなく、内容に関する情報を名前として使用するようにしましょう。

nobu_kamo 2011/09/15

CSS

リンク

地味に使えるCSS小技のメモ&サンプル集 - かちびと.net

cssの小技的なテクニックが便利なので好きなんですが、cssそのものが嫌いで覚えられないのでカンペ的な記事を作ることにしました。便利な小技は沢山あるんですが、特に自分が良く使いそうな Tipsをメモします。既に出回っている情報ばかりで特に目新しい手法はありませんので何も期待できないです。というわけで特にテーマも一貫性も無くて、ただ便利ってだけです。推奨されない方法もあるかもしれませんが、僕は細かいこと気にしませんのでそんな感じです。内容も既出なのでお詳しい方にはお役に立てないですが、僕の個人的なメモなので適当に流して頂けると幸いです。 floatで並べたリストのセンタリング Sample01 コード .centered { position: relative; overflow: hidden; } .centered ul { position: relative; le

nobu_kamo 2011/08/30

CSS

リンク

CSS3対応、スタイルシートの記述で気をつけるべき19のポイント

The CSS Lint Rules [ad#ad-2] 以下は、スタイルシートをオンラインでチェックできるツール「CSS Lint」で使用しているルールを意訳したものです。スタイルシートの記述で気をつけたい19のポイントスタイルシートの記述ミスはしないこれは一番大切なことです。 1文字でもタイプミスをしないようにしましょう。隣接クラスは避ける「.foo.bar」のような隣接クラスはIE6などでサポートしてないので、使用には注意してください。空のルールを残しておかない空のルールとはプロパティを指定していないものです。 .foo {} これは単にファイルの容量を肥大化させるだけなので、削除します。 display使用時のプロパティに注意スタイルシートではプロパティのグループを一緒に定義することができますが、displayを使用する際には下記のものがそれぞれ無視されます。 di

nobu_kamo 2011/08/23

リンク

150 Amazing Examples of CSS Animation & Effects

We have put together a smart collection of cool CSS effects to help you learn the nitty-gritty details so that you can use it to create more beautiful web sites. Enjoy! Unlimited Downloads: 500,000+ Fonts, Stock Photos, Themes & Design Assets DOWNLOAD NOW 1. Swatch Book Tutorial with CSS3 & jQuery [Demo] 2. 3D Thumbnail Hover Effects [Demo] 3. Stunning Menu Tutorial in CSS3 [Demo] 4. Collection of

nobu_kamo 2011/07/25

リンク

HTML5、CSS3に関する情報まとめ。リファレンス情報、辞典サイト、CSSジェネレーター、Validatorなど知識～活用まで｜https://wp.yat-net.com/name

2011年 07月 11日 HTML5、CSS3に関する情報まとめ。リファレンス情報、辞典サイト、CSSジェネレーター、Validatorなど知識～活用までカテゴリ： CSS3 HTML HTMLとCSS タグ：CodingCSS3ジェネレーター作成支援ツール現状HTML5とCSS3を利用したサイトの構築は自分の仕事上では出てきそうにないのですが、そうは言っても何も情報を収集しないわけにも行かないのでブックマークは当然しています。しかし、ただ単に貯めてるだけだといざという時活用出来ないので、一度ブログに書き留めておこうと思います。 html5 現状深く調べておらずリファレンスやタグ辞典的なものを収集しています。最近友人のクロ（@CROO1379）が色々情報を収集してサイトを構築しており、リファレンス的な意味ではかなり拾えそうな感じになっています。