CSSだけで三角形を作ろう！その2：吹き出しやリボンをデザインする | 株式会社グランフェアズ
Posted by NAGAYA on Sep 21st, 2017 こんにちは、めぐたんです。 前回は「CSSだけで三角形を作ろう！その1：borderプロパティの仕組みをマスター」と題して、なぜborderプロパティだけで三角形が作れるのか？どのような設定でどんな三角形ができるのか？を詳しく掘り下げてみました。 では、こうして作った三角形はWeb制作においてどんなときに活躍するのでしょうか？ よく見る利用例を挙げていきたいと思います。 はじめに：三角形を配置するポイント ご紹介するサンプルのラインナップは大きく分けて下記の3つです。 吹き出し ステップ表示 リボン風の装飾 上図のように、要素にくっつけて別の形を表現するという使い方が主だと思います。 この場合三角形自体にはコンテンツとして意味合いを持たないので、:beforeや:afterといった擬似要素として配置します。 また、位置調
Web制作者はおさらいしたい！CSSの勉強になる実用的な基本テクニックまとめ | コムテブログ
TL;DR 実務で意外と使う基本的なものやトリッキーな小技。少ない記述で済む CSS テクニックなどをまとめました。今回は Web 制作に関わるなら、必ずおさえておきたいものや今後使っていきたいテクニック中心です。 画像 １．画像の下にできる隙間をなくす 画像の下に色などを配置すると、わずかに隙間が出来ることがあります。そんな時は親ブロックにline-height: 0;で OK。他には画像に直接vertical-align: bottom;かdisplay:block;を使えます。 css 画像の下にできる隙間をなくす方法 ２．画像の下にテキストが回り込まないようにする 回り込み解除は親要素か以下の例だとテキストにoverflow: hidden;かoverflow: auto;を指定します。IE 対策で zoom 属性 zoom:1;も同時に設定します。 css ３．float を使わ
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
[CSS]適切ではないマークアップを注意してくれるスタイルシート -holmes.css
ページ内のマークアップで誤っている箇所、無効な箇所、アクセシブルでない箇所をハイライトで明示してくれるスタイルシートを紹介します。 デモページ レッドのハイライト エラー イエローのハイライト 警告 グレーのハイライト 好ましくない holmes.cssの使い方 holmes.cssの使い方は、2通りあります。 スタイルシートファイルをページに適用 ブックマークレットを使用（要JavaScript） スタイルシートファイルをページに適用 「holmes.min.css」を外部スタイルシートとして適用し、bodyにclass「holmes-debug」を加えます。 HTML <link rel="stylesheet" href="../" media="screen,projection,print,handheld" type="text/css" /> <body class="hol
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
CSSだけでJavaScriptのような動きを実装するサンプル30 – creamu
96332132, iStockphoto/ Thinkstock CSSでかっこいいUIを実装したい。 そんなときにおすすめなのが、『30 Pure CSS Alternatives to Javascript』。CSSだけでJavaScriptのような動きを実装するサンプル集です。 なかなかいい感じのものが揃っています。 Valid Non-Javascript Lightbox JavaScriptを使わずに、libhtbox系の動きを実装。反応が速くていい感じです Create a Content Slider Using Pure CSS さくさくと切り替わるコンテンツスライダー Pure CSS speech bubbles CSSで作る吹き出し型のデザイン Accordion Using Only CSS CSSを使ったアコーディングメニュー CSS-Only Tabbed
フッタをブラウザ下部に固定配置するCSSテクニック – creamu
フッタをブラウザ下部に固定配置したい。 そんなときにおすすめなのが、『cleanstickyfooter』。フッタをブラウザ下部に固定配置するCSSテクニックです。 IE6とそれ以前のブラウザ用に、ハックは1つしか使っていないとのこと。min-heightの部分のハックのようですね。 ほかには同様のテクニックに以下のものがありますが、前者はwidth:100%のフッタには対応していないようです。 CSS Sticky Footer ブラウザの下部にフッターを固定表示する『CSS Sticky Footer』 対応ブラウザは以下の通り。 ・Firefox (2, 3, 3.5) ・Internet Explorer (6, 7, 8) ・Safari ・Opera ・Google Crome ぜひ使ってみてはいかがでしょうか？ cleanstickyfooter 今日もいい天気ですね〜。タス
定義リスト(dt,dd)を横並びにして 一対ごとに下線を付ける
たまにdtとddを横に並べたいときがあります。 色々方法はあると思いますが、dtとddそれぞれ一個ずつの組に対して毎回下線を付けたいときはどうするか考えてみました。 よく見かけるのは一個ずつdlを閉じてしまうやりかた。 <dl> <dt>定義語</dt> <dd>説明文説明文説明文説明文説明文</dd> </dl> <dl> <dt>定義語</dt> <dd>説明文説明文説明文説明文説明文</dd> </dl> <dl> <dt>定義語</dt> <dd>説明文説明文説明文説明文説明文</dd> </dl> 意味的にスマートではありませんね。 やっぱり一個のdlでひとまとめにしてみたいです。 <dl> <dt>定義語</dt> <dd>説明文説明文説明文説明文説明文</dd> <dt>定義語</dt> <dd>説明文説明文説明文説明文説明文</dd> <dt>定義語</dt> <dd>説明
IE共通の9つのCSSバグをそれぞれ解決する方法:phpspot開発日誌
IE共通の9つのCSSバグをそれぞれ解決する方法がNettutsにて紹介されています。 どれも、なんでだろうと頭を悩ましそうな問題なので解決法を知っておくと簡単に対処できそうです。 1. センタリングが効かない問題 margin: auto を指定した場合の期待する結果 IEの場合以下のようになりますが↑にするための解決法が書かれています 2. 横に並べたいリストが階段状になってしまう IEの場合以下のようになってしまいますがこの解決法も記載されています 3. ダブルマージンフロートバグ マージンの指定が期待通りに出ている例 ↓ IEの場合、margin: 30px 0 0 30px; で定義した値が正しく適用されない例も解決法があります 4. heightの高さ指定が効かないバグ height:2px を指定した場合の想定する表示 IEはなぜか2pxにならないのでこれも解決法が示されて
IE6、IE7、IE8におけるCSSの違いまとめ | エンタープライズ | マイコミジャーナル
IE? - IE6, IE7 and IE8 Net Applicationsの報告によれば、2009年9月におけるブラウザシェアはIEが65.71%で過半数のシェアを確保している。バージョンごとにみるとIE6 24.42%、IE7 19.39%、IE8 16.84%となっており、IE6、IE7、IE8のシェアが拮抗しつつあることがわかる。これまでのシェア変動から推測すると、今後数ヶ月の間は3つのバージョンのIEが似たようなシェアを持った期間が続くことになる。IEが第一シェアだといっても、結果的に3つのバージョンに対応する必要がある。 この状況は、特にCSSのサポートという面で厄介な状況を生み出している。IE8はCSS 2.1への高い準拠を実現しているが、IE7はそうではない。IE6はサポートしている要素やプロパティがさらに少ない。またIE7やIE6は対象の要素やプロパティをサポートしてい
dtをfloatする場合の注意点 | d-spica
dtをfloatする場合の注意点 2008-05-12 0 0 XHTML/CSS CSS, dl, float dl の定義リストで，dt を float させることがよくあります。このとき注意したい点をまとめておきます。 新着情報のようなところで，更新日を dt で，更新内容を dd でマークアップした場合を想定してみましょう。 まず，XHTMLでのマークアップは次のような感じです。 <dl class="recent"> <dt>2008-05-12</dt> <dd>ページ5を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-10</dt> <dd>ページ4を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-07</dt> <dd>ページ3を更新しました。テキストテキストテキスト...。</dd> <dt>2008-05-06</
cssのテクニックなどを学びたい時に見ておきたい12サイト
cssが苦手で嫌いなので 好きになろうと思い、勉強に なりそうなサイトを国内外で 選んで絞ってみました。 同じ思いをしている方とシェア したいと思ったので記事にします。 リファレンスサイトは今回は割愛しました。勉強するなら抑えて当たり前ですしね。国内外合わせて11サイトとおまけが1サイトあります。まずは国内サイトから。 CSS HappyLife 個人的に国内でcssといえばCSS HappyLifeさん思い出します。基本から応用まで幅広く情報を配信。 CSS HappyLife CSS-EBLOG ほぼcss中心に情報を配信してくれています。こちらもかなり勉強になるサイト。サイト自体も見やすいですし、cssで困った時には必ず訪れたいサイトです。 CSS-EBLOG CSS Lecture cssで出来るテクニックを公開してくれています。デモページを用意してくれるのが凄く嬉しい。親切で分か
hail2u.net - Weblog - floatで並べたリストのセンタリング
ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる
【CSS】ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。
こんばんは、ishidaです。 CSS2.1 で定義されている displayプロパティの値、inline-blockの使いどころを探してみたところ、ページ送りにかなり使えそうです。 まずは以下のサンプルをご覧下さい。Yahoo 検索結果のページ送りデザインをまねています。 ページ送りのサンプル 1 2 3 4 5 6 7 8 9 10 次へ> XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li><strong>1</strong></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">
Flashムービーのサイズをブラウザ幅に応じて自動調整できるJSライブラリ「FitFlash」:phpspot開発日誌
FitFlash - Smart Flash Resize Script FitFlash is a smart script that resizes your flash automatically if your browser window size is smaller or greater than your flash minimum desired size keeping it accessible independent of screen resolution. Flashムービーのサイズをブラウザ幅に応じて自動調整できるJSライブラリ「FitFlash」。 通常、Flashムービー(SWF)はブラウザに貼り付けた状態だと固定サイズとなっています。 このムービーサイズをJavaScriptで動的にうまく調節できるライブラリがFitFlashです。 FitFlashは次
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
%26utm_content%3DGoogle%2520Reader)
css-lecture.com
ドロップダウンメニュー
ashikunep.org
[CSS]ドロップリストとフライアウトを効果的に組み合わせたナビゲーション
マウスオーバーをデザインする | DesignWalker
