Media Queriesは、読み込まれるCSSや、CSSの記述のインラインに条件を加えること出来るようになる仕様です。 今までもCSS2のMedia typesを使い、screenやprintなど大まかなメディア用スタイルを設定することはできました。ですが、それでけでは昨今のスマートフォン、タブレット端末事情にはとても対応できません。JavaScriptで対応する方法もありますがシンプルではありません。そこで、CSS3だけで振り分けが可能になるのがMedia Queriesという仕様です。 Media Queries Media Queriesはユーザーの端末、スクリーンサイズをもとに適したスタイルシートを適用することができます。Media Queriesを利用することで、PC用スタイルシート、タブレット用スタイルシート、スマートフォン用スタイルシートと個別にスタイルを指定することができ
一昔前はPhotoshopを使用しないと作成できなかったデザインをCSS3で実装するシリーズのナビゲーション編から、すぐに利用できるボックスシャドウと角丸のスタイルシートを紹介します。 CSS3 vs. Photoshop: Rounded Corners and Box Shadows [ad#ad-2] 下記は、その中からボックスシャドウと角丸に関するスタイルシートをピックアップしたものです。 ボックスシャドウ -box-shadow 角丸 -border-radius 対応ブラウザ ボックスシャドウ -box-shadow HTMLはsection要素を使用していますが、これはdiv要素などでもそのまま利用できます。
すごくどうでもいい内容なんですが、ちょっとやってみたかったので素人ながら作ってみます。ある要素、例えばa要素なんかにマウスオーバーした時にちょっとだけ拡大して強調させたいなどといった時に使えるかもしれません。分かりづらそうなのでサンプルも作ってみました。おかしい部分やもっとこうした方がいいみたいなことがあれば是非教えていただけるとうれしいです。 (※ CSS3だけでもできましたので追加しておきます。) [ads_center] CSSのtransitionを使って背景色もアニメーションで変わるようにしています。要素の拡大はjQueryのanimateを使ってpaddingの値を変えています。で、普通にpaddingの値だけ変えると左上が固定されて右下方向だけアニメーションして拡大していくので、拡大する分positionでマイナスの値も指定します。ちょっと分かりずらいので図にするとこんな感じ
<html> <head> <title>Example neo1<title> <style type='style/css'> /* Example neo1 By : Indam; http://www.indaam.com */ /* 1 */ .neo1{ width: 0; height: 0; float: left; border-style: solid; border-color: transparent #555; border-width: 32px 0 0 32px } /* End 1 */ </style> </head> <body> <span class='neo1'> </span> </body> </html> <html> <head> <title>Example neo2<title> <style type='style/css'> /*
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn thos
してTumblrのタグ表記にあててみたので備忘録。 (※追記:ブログ改装前の記事なので細かい点はなぁなぁでどうぞ) 特にTumblrや他CMSのタグなどに限定して使わなくてもいい感じなCSS3テクニックです。 参考にしたのは<Pure CSS3 Post Tags> 各記事右下とか、↑の画像みたいな感じに表示されます。 ここでは配布サイトさんのサンプルより細く小さめに改造。 公式デモページ:http://cssglobe.com/lab/css3_tags/01.html続きから自分のテーマで使用したHTMLとCSSコードです。 1.まずTumblrにおけるHTML部分。リスト表記にします。なかなかシンプル {block:HasTags} <ul class="tags"> {block:Tags} <li><a href="{TagURL}">#{Tag}</a></li> {/bloc
ボックスの幅が制限されていて、且つ'white-space'に[nowrap]や[pre]が指定されていて、テキストが横方向にはみ出し、且つ'overflow'に[visible]以外の値が指定されている場合、長過ぎるテキストは右にはみ出します。 このプロパティは、そのはみ出したテキストに対して、可視部分の最後に省略符号(「...」の事)を入れるかどうかを指定します。置換要素には無効です。 キーワード解説 ellipsis はみ出した行の可視部分の最後に、省略符号「...」を付け足します。 clip 普通にテキストを切り取り、省略符号はつけません。 以下にひとつ例を挙げておきます。'text-overflow'と'overflow'を換えてみて、大体の感じを掴んでください。 <div style=" width:120px;height:50px;border:1px solid blue
どうも、はやちです_(:3」∠)_ スマホに使うとよりサイトが見やすくなるjQueryをまとめてみました。 アコーディオン アコーディオンみたく開閉式のメニューが実装できるjsです。 記事の多いコンテンツをまとめるのに便利ですね。 ■動きをみる HTML <dl class="acordion"> <dt class="trigger">アコーディオンメニュー<span class="open-close">open</span></dt> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキスト テキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキ
CSSを「なんとなく」知っていて,「なんとなく」使っている, というケースがある。 そういう場合,思わぬところでレイアウトが崩れ, 要素の正確なポジショニングができず, 「なんとなく」ずっと悩み続けることになる。 その原因は,CSSの中級のノウハウが足りない,という点にある。 一発で正確なレイアウトができるようになろう。 そうなれば,CSS中級者だ。 以下は,CSS中級者になるためのノウハウ。 (1) 要素の分類 (1−1) インライン要素とブロック要素 (1−2) 置換インライン要素と非置換インライン要素 (2) 正確なポジショニング (2−1) positionのrelative/absoluteの使い方 (2−2) DOCTYPEスイッチによるボックスモデルの解釈方法の違い (2−3) 要素内の高さ位置と,要素の高さ (2−4) floatの崩れない使い方 (3) 正確なテーブルレイ
CSS、スタイルシート。初心者のころには CSS のスタイルがうまくいかなくて、半日や丸一日悩んだこともいっぱいありました。最近では、やっとひと通り覚えて、思うようにできるようになったかなーという感じです。今回は初心者だったころ、ちょっと悩んだことなどをいくつかまとめてみました。 Webサイトの見た目をデザインしていくのに欠かせない CSS。度々これってどうやるんだろうとか、どうしてこうなっちゃうの?というものに遭遇します。また、今までは IE6 をターゲットに含めてましたけど、そろそろ IE7 からをターゲットにすればいいのかなーと思うこともあって、過去のスタイルシートの書き方の習慣を変えようかなとも思っています。 スタイルシートを書いていて、今まで遭遇した不具合やその回避方法、また今まではこうしてたけど、これからは変わるかもしれないなーといものをまとめてみました。もうそんなことしてない
CSSファイルには複数のCSSの定義を書き込みますが、それらには全て効果が適用される優先順位があり、 優先順位によって、先に定義された記述を上書きすることが出来ます。 レイアウトを行う上で必ず必要になってくるので、きちんと身に付けてください。 ■記述順による優先順位と上書き CSSの記述では、先に記述したものから、HTMLファイルにその効果が反映されます。 h1 { color : #CCC } h2 { color : #DDD } h3 { color : #EEE } 上記の例では、h1,h2,h3の順にHTMLにフォントカラーの指定が適用されていきます。 h1 { color : #CCC } h1 { color : #DDD } h1 { color : #EEE } 次の例は全てh1に対してフォントカラーを指定していますが、この場合、まずh1にフ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く