スタイルシート - Wikipedia
スタイルシート (英語: style sheet) とは、構造化文書などにおける表示形式を制御するしくみ。見栄えと構造を分離するという目的で提唱された。HTML、XML、SGMLといったマークアップ文書や、officeソフトにおいて広く使用されている。 Web上で広く使われているHTML文書にスタイルシートを適用する場合には、一般的にCascading Style Sheets（CSS）が利用される。CSSが圧倒的に普及しているので、単にスタイルシートといえばCSSを指すことがある。 スタイルシート言語[編集] スタイルシート言語（英語: style sheet language）とは、構造化文書の見た目を記述するコンピュータ言語。構造化文書とは、節や段落が明確に定義・分類された文書である。内容が明確に分類されているので、その文書を表示するプログラムは任意の表示スタイルを設定できる。広く使
最低2秒、目指すは1秒以内。ウェブサイトを高速化するためのTIPS at #SMX Advanced Seattle 2012
[対象: 上級] ページの表示速度が、Googleのランキングを決める指標として日本を含むインターナショナルで導入されていることがSMX Advanced Seattle 2012で判明しました。 そこで今日は、ウェブページの高速化を取り扱ったセッションをレポートします。 スピーカーは、ECサイトのREIでSEOに携わるJonathon Colman（ジョナサン・コールマン）氏です。 ウェブサイトのパフォーマンス最適化 サイトを高速化する理由 コンバージョン率の最適化 カスタマーエクスペリエンスとカスタマー満足度の向上 直帰率を下げる。 競争率が非常に激しいキーワードでオーガニックからのトラフィックを増やす。 全体的な競争力を高める。 運用費を節約する。 数字で見るページスピード Googleではページスピードが検索の1%に影響している。 ユーザーがページ表示に待てるのは2秒まで。 3秒以
Vicunaのblockquoteは"title"と"cite"のCSS表示に対応してた | Hinemosu
またタイトルで大体の内容を言い切ってしまったんだけれども。このブログで使用しているWordPress対応テーマ「wp.Vicuna」のCSSを眺めてたら、引用に使うHTMLタグ「blockquote」の属性セレクタとして"title"と"cite"が用意されていることに気がついた。 具体的にどういう事かというと、まず下記のようなHTMLを書く。 <blockquote title="Hinemosu" cite="https://www.hide10.com/"> ここに引用文をダラダラと書く </blockquote> すると実際の表示はこんな感じになる。カッコえー。 ここに引用文をダラダラと書く CSS2を使って表示させているので、対応したブラウザで見に来ないとダメだよ。CSS2に対応していないIE6以前のブラウザだと、引用文しか表示されないと思う。参考までにVicunaのblockq
水平方向に値として[auto]を使用した場合 - CSS Dencitie
'width'、'margin-left'、'margin-right'(簡略化プロパティ'margin'でも指定可)、'left'、'right'。この5つのプロパティには[auto]を使う事が出来ます。ここでは、どの状況でどのプロパティを[auto]にすると、どのように処理されるのかを説明します。 初期値 left margin-left width margin-right right 非置換インライン要素の場合 'width'は効果を持ちません。'left'、'right'、'margin-left'、'margin-right'の値が[auto]なら、その値は"0"として扱われます。 置換インライン要素、置換フロート要素の場合 'left'、'right'、'margin-left'、'margin-right'の値が[auto]なら、その値は"0"として扱われます。'width
CSS基礎知識 - CSS Dencitie
Powered by Google Home[H] Front[F] Stepup[S] Reference[R] Column[C] Front 基礎 参照方法 CSSの基本構造 "カスケード"について 各プロパティの表の読み方 @規則, セレクタ, 単位 プロパティ 関連記事 About Front リファレンス CSS基礎知識 CSS基礎知識 基本用語 CSSの参照方法 link要素 style要素 style属性 @import規則 XML用 CSSの基本構造 "カスケード"について 各プロパティの表の読み方 page top 最終更新日：2004年02月28日 Copyright © 2002-2004 ばあど All Rights Reserved. Home Front Stepup Reference Column
font-size－スタイルシートリファレンス
数値で指定 数値にpxやemやexなどの単位をつけて指定します。pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。また、emとはフォントの高さを1とする単位で、exとは小文字の｢x｣の高さを1とする単位です。数値には負の値は指定できません。 ％で指定 ％値で指定します。 キーワードで指定 xx-small、x-small、small、medium、large、x-large、xx-largeの7段階があり、mediumが標準サイズです。1段階上がると1.2倍のサイズになります。また、smaller、largerを指定すると大きさが1段階上下します。 スタイルシート部分は外部ファイル（sample.css）に記述。 span.sample1 {font-size: 12px; } span.sample2 {font-s
はてなブログ | 無料ブログを作成しよう
わたし的棚ぼた一万円選書 急に千葉さんに手渡された封筒、開けてみたら1万円札が1枚。何ごとかと思えば、同期の出張を代わったお礼をもらったらしい。 「葵はワンオペで育児してくれたから」と半分わけてくれました。 泡銭の1万円 これはもう、わたし的1万円選書をしろという思し召しなのでは……
スタイルシート［CSS］/テキスト・フォント/イタリック体にする - TAG index
参考 次のように指定すると、イタリック体で表示される文字（em要素 等）を標準のスタイルにすることができます。 em { font-style: normal; } 使用例 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>文書のタイトル</title> <style type="text/css"> p.example1 { font-style: italic; } p.example2 { font-style: oblique; } </style> </head> <body> <p>標準のスタイル</p> <p class="example1">italic を指定した文字</p>
padding－スタイルシートリファレンス
スタイルシート部分は外部ファイル（sample.css）に記述。 p.sample1 {background-color: #f8dce0; padding: 10px;} p.sample2 {background-color: #f8dce0; margin: 30px; padding: 10px;} p.sample3 {background-color: #f8dce0; padding: 10px 20px;} p.sample4 {background-color: #f8dce0; padding: 10px 20px 30px;} p.sample5 {background-color: #f8dce0; padding: 10px 20px 30px 40px;} HTMLソース <html> <head> <link rel="stylesheet" href="sa
vertical-align－スタイルシートリファレンス
vertical-alignプロパティは、行のなかでのテキストや画像などの縦方向の揃え位置を指定する際に使用します。 vertical-alignプロパティを適用できるのは、インライン要素とテーブルセルです。ブロックレベル要素には適用できません。 ■値 baseline 適用した要素のベースラインを親要素のベースラインに揃える（初期値） top 上端揃え middle 中央揃え bottom 下端揃え text-top テキストの上端揃え（テーブルセルへの指定は無効） text-bottom テキストの下端揃え（テーブルセルへの指定は無効） super 上付き文字（テーブルセルへの指定は無効） sub 下付き文字（テーブルセルへの指定は無効） パーセント（%） その要素のline-heightプロパティの値に対する割合を%で指定（ベースラインが揃った状態を0として、正の値なら上、負の値なら
エレメントで<input type="text">のみスタイルを変える
フォームのエレメントは<input>タグで指定します。しかし、<input>タグで指定できるエレメントは数多くあります。その中で特定の種類のエレメントのみにスタイルを適用するにはinput[type="エレメントの種類"]とします。あとは通常のスタイルを設定します。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=shift_jis"><title>Sample</title> <style type="text/css"><!-- input { color: red; } input[type="text"] { color: orange; } --></style> </head> <b
CSS で作るスマートフォン向け片手操作メニュー サンプル | WWW WATCH
記事に戻る CSS で作るスマートフォン向け片手操作メニュー サンプル ドコモのスマートフォン 「P-07C」 の 「タッチスピードセレクター」 からヒントを得た、片手で操作しやすいショートカットメニューを HTML、CSS と 簡単な JavaScript の組み合わせで作ってみたサンプルです。左下のメニューアイコンをクリック （タップ） してみてください。実際の動作を確認できます。 詳しくは記事 「CSS で作るスマートフォン向け片手操作メニュー」 をご覧ください。 動作環境 現在最新版の Firefox、Safari、Chrome では動くと思います。あと手持ちの iOS 5 （iPhone 4S） Safari では動作確認しました。他のスマートフォンとか知らない （CSS の position:fixed に対応してないヤツだと動かない）。IE？何それ美味しいの？ その他 メニュ
CSS で作るスマートフォン向け片手操作メニュー
ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。 久々にこの手のネタ書いた気がしますけども… ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。多分言葉で言っても伝わりにくいと思いますので実際のサンプルをまずは見てみてください。 CSS で作るスマートフォン向け片手操作メニュー サンプル 現在最新版の Firefox
もうFlashは要らない!?スマホ用CSS3アニメを作ろう (1/3)
HTML5/CSS3を使ったアニメーションを作成できるオーサリングツール「Sencha Animator」。本連載ではこれまでSencha Animatorに用意された基本図形や文字だけを使ってアニメーションを作成しましたが、実際には既存の写真やイラストなどの画像を組み合わせることが多いでしょう。そこで、今回は画像を使ってスライドアニメーションを作成します。また、画像がクリックされたら特定のページへ移動する方法も解説します。学習事項をまとめると以下のようになります。 画像の読み込みと配置 グループ化 フェードイン／フェードアウトの処理 クリック時の処理 テンプレートの追加 最初に、画像を1枚だけ読み込んだ状態でフェードイン／アウトする処理の設定方法を解説し、その後、複数の画像を読み込ませる方法、クリック時にページを移動させる処理について説明します。 画像の読み込みと配置 Sencha An
[CSS]画像に美しい角丸とボックスシャドウを適用する方法
img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。 これを解消するCSSのTrickを紹介します。 CSS3 Rounded Image With jQuery デモページ FirefoxとWebkitブラウザ（Safari）のそれぞれにCSS3の角丸とボックスシャドウを適用すると、上記のように美しく表示されません。 それを下記のように美しく適用されるようにします。 角丸とボックスシャドウをこういう風にしたい 左：角丸と外側にシャドウ、右：角丸と内側にシャドウ CSS3で素直にスタイリング Firefoxでは角丸が適用されず、Safariではボックスシャドウが適用されません。
【css】floatを指定するとはみ出します
ブロック要素をfioatで横並びにした際に、画像とテキストが全体を囲っている要素（親要素）からはみ出すことが多々あります。 その度に高さを指定して回避しているのですが、こちらはその他に回避の方法というのはあるのでしょうか？ それとも、自分の記述がおかしいのでしょうか？ 例えば下記の例です。 こちらは左に画像、右にタイトルとコメントが入ります。 <div class="aaa"> <div class="left"><img src="photo.jpg" width="180" height="120"></div> <div class="right"> <h3 class="title">タイトルです</h3> <div class="comment">コメントです</div> </div> </div> //////////////////////////////////// .aa
私が新Twitterに指定してるユーザースタイルシート - 聴く耳を持たない(片方しか)
Twitterのデザインが大きくリニューアルされ、ランダムで徐々にユーザーに公開されています。 Download the free Twitter app | Twitter http://blog.twitter.jp/2010/09/twitter.html Twitter.comの新しいユーザインタフェースを早速紹介（スクリーンショット多数） | TechCrunch Japan 新Twitterの右カラムはミニプラットフォームだ―参加各社の思惑を探ってみた | TechCrunch Japan 新しいTwitterでは機能が増え、 例えばツイートの中に（Twitpicのような）対応した画像投稿サービスのURLが含まれていれば クリックで 右カラムに表示するなんて機能もあります。 他にも、 このマークがあればリプライの発言元がどのツイートか見れる、など色々と便利になっていますね。 …
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.stylish-style.com/csstec/base/link.html
Element Hiding Helper for Adblock Plus :: Add-ons for Firefox
Element Hiding Helper for Adblock Plus :: Add-ons for Firefox