5000兆円欲しい！.css
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
Firefoxでユーザスタイルシート(ユーザCSS)を利用する方法 - 小さい頃はエラ呼吸
はじめに Googleのレイアウトが刷新され、左側にサイドバーが表示されるようになりました。このサイドバーをマウスオーバで開閉してくれるユーザスタイルシートを導入しようとしたのですが、Firefoxでユーザスタイルシートを利用するにはどうしたら良いか知らなかったので、調べてみました。 Google のサイドバーをマウスオーバーで開閉する - Griever プロファイルフォルダを直接操作する まずは、アドオンを利用せず、プロファイルの格納されているプロファイルフォルダにユーザスタイルシートを直接配置するやり方です。 1.Firefoxのプロファイルフォルダを開きます。プロファイルフォルダはプラットフォームによって違うので、以下を参照してください。 プロファイルフォルダの場所（Firefox / Thunderbird） - えむもじら 2.chromeフォルダ配下にuserContent.
画面上の文字や画像を選択できないようにする at softelメモ
問題 文字や画像をダブルクリックされると、選択状態になってしまう。 文字やリンクや画像に、onclickで何らかの処理をするスクリプトを作っているのだが、カチカチクリックされたときやドラッグされたとき選択状態になると、どうにもかっこ悪い。 ダブルクリックしたときやマウスを使って選択しようとしたときに、選択状態にならないようにできる？ 答え CSS3では以下のように書ける。 user-select: none; ただ、だいぶ普及した角丸をするborder-radiusのようには広く実装されていないようなので、現状では各ブラウザの独自実装にも合わせておく必要がありそう。 以下のように、各実装にあわせた記述をしておく。 user-select: none; /* CSS3 */ -moz-user-select: none; /* Firefox */ -webkit-user-select:
MOONGIFT: » 必見！CSSを使って複数の画像を一つに「CSS Sprite Generator」:オープンソースを毎日紹介
Googleの表示速度の速さの秘密に、コネクションを極力減らすということがある。それが複数の画像を一つにまとめてしまい、CSSのポジションをずらすことで表示するという手法だ。これを使うと画像のダウンロードは一回で済むのでコネクションが少なくて済む。 実際、検索結果のGoogleロゴを見ると、複数の画像が混ざった結果なのに気づくはずだ。これをやるのは非常に面倒に感じるだろう。だが、小さなアイコンなどはこういう手法をとればサイトの負荷軽減、高速化につながる。それを手軽に実現できるのがこのソフトウェアだ。 今回紹介するオープンソース・ソフトウェアはCSS Sprite Generator、CSSによる画像分割補助ソフトウェアだ。 CSS Sprite Generatorは複数の画像をZipで固めてアップロードすると、その画像を連結し、さらに表示するためのCSSを生成してくれる。これを使えばまさに
CSSによるWeb訪問履歴の漏洩に具体的対策、楽天ad4Uなど無効化へ
Mozillaは、CSSを利用することで利用者の訪問履歴が漏洩する可能性のあるWebブラウザの機能を改善することを明らかにしました。これは、楽天ad4Uのような、CSSやJavaScriptを用いて利用者の履歴を取得しているインターネット広告への対策として考えられたものです。 利便性のための機能から訪問履歴が漏洩 Webブラウザ上のリンクは、訪問したことのあるリンク先に対して色や文字の大きさなどのスタイルを変更することができます。これは、Webブラウザの画面上でどのリンクが訪問済みなのかを知らせるための、ユーザーの利便性を想定して作られた機能です。 しかし一部のインターネット広告では、これを利用して広告の中に大量のリンクを埋め込み、そのリンクの中から訪問済みのスタイルになっているリンクを自動的に探しだすことでユーザーの訪問履歴を取得。履歴情報をいわゆる行動ターゲティング広告の手段としている
スタイルシートでおしゃれな横メニュー
CSSを使ったおしゃれな横メニューを紹介しているサイトを見つけたので紹介します。サンプルも提供されているので設置も簡単かと思います。 このような横メニューがたくさん紹介されています。一応ソースも載せておきます。まずはbody部分です。表示しているページにはclass="current"を入れておきましょう。 <div class="blue"> <div id="slatenav"> <ul> <li><a href="/" title="レッツFC2ブログ" class="current">Home</a></li> <li><a href="http://weboook.blog22.fc2.com/blog-entry-56.html" title="ごあいさつ">ごあいさつ</a></li> <li><a href="http://weboook.blog22.fc2.com/ar
段組みレイアウトの使用 - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
CSS で簡単に上下中央揃えを実現する
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
CSSでリキッドレイアウトを実現する。その4
今回は CSSベースで、テーブルライクな 究極のマルチカラムに挑むパート4です。 前回のように、上中下3カラムの 真ん中のボックスの高さ幅が自在に伸び縮みしつつ、 つねにフッター部分がブラウザ画面の最下部にある、 フレームセットを使ったかのようなレイアウトを、CSSで目指しますが、 前回の欠点である、 真ん中のボックス（横幅100％）に、 固定幅（横幅例えば600px）のボックスを入れ子にした場合、 センタリングができなかったことを克服したバージョンです。 ▽画像ですが、画面分割のサンプルをつけてみました。 （分割がわかりやすいように、色づけしています） ▽CSSベースのHTML レイアウトの垂直方向の真ん中部分が伸縮自在な、 フレームライクな上中下3カラム （中ボックスは、センタリング可能） ------------------------------------------------
CSS「display: table」と「display: table-cell」で出来ること | アイビーネットblog
2008年4月24日 14:11 (X)HTMLCSS IE8は「display: table-cell」に対応 「display: table-cell」とは、テーブルの構造を表現することができるCSSプロパティです。先日公開されたベータ版(IE8 Beta1)で確認しましたが、IE8からは「display: table-cell」に対応しているようです。 そこで、今回はこの「display: table-cell」を使うことで、どんなことが出来るのかを見ていきたいと思います。 「float」と「display: table-cell」でのカラムレイアウトを比較 左右のカラムが固定で、中央のカラムが可変というような3カラムのレイアウトを表現したい場合、CSSでは通常「float」を使います。カラムレイアウトは「display: table-cell」でも表現できますので、この2つの方法を
いま起きているWeb標準の進化、HTML5、CSS3、JavaScript 2.0
日本が大型連休に入る少し前の4月23日、W3CはHTML5の新しいドラフトを公開しました。いつも最新のWeb標準化動向を伝えてくれるWeb標準ブログのエントリ「Last Callに向け進むHTML5 | Web標準Blog | ミツエーリンクス」によると、今回のドラフトから仕様書に大きく手が加わり、Webサイトを作る人向け（制作者に関係する要件）と、Webブラウザを作る人向け（実装要件についての要件）ごとに見やすくなるようなスタイルシートが用意されたとのこと。 これまでも何度かこのブログでは、HTML5やJavaScript 2.0などのWeb標準の動向を書いてきましたが、今回は分かりやすいようにその動きをまとめてみました。 HTMLはHTML4でいったん進化が終了し、それ以後はXHTMLで進化していくことになっていました。しかし実際にはXHTMLは期待されたほど普及せず、XHTMLによっ
【CSS（スタイルシート）】回り込んで画像、テキストなどを表示させる
当サイトで使用しているスタイルシート(CSS)をご紹介 回り込んで画像、テキストなどを表示させる（float） このサイトでもお馴染みの回りこみタグを紹介します。 彼の名前は「float」です。とってもお気に入りのお友達です。 回り込みと言われてもよくわからないと思いますので、実例を先ず紹介します。 左の画像は、この文字の左側に回りこみされてるやろ？これを回りこみと言いますねん。テーブルを使っても同じように表示させる事もできるけど、何かと役立つスタイルなんで覚えといてな～！ <p><img border="0"src="画像URL" hspace="2" width="幅"height="高さ" style="float:left;">テキスト</p> 上記のように指定してますねん。どうでっか、簡単でおますやろ？ 無理やり大阪弁で説明してましたが、普通に戻します（笑） このスタイルを連発す
FrontPage - ホームページ笹椪FAQ
ホームページ作りの よくある質問集・用語集です。 † ホームページ作りでお困りの方のための、よくある質問集・用語集です。 このサイトのFAQ*1を 一通り読んでみてください。左上の検索ボックスで、ありそうなワードで検索してみてください。 意外と簡単に問題が解決するかもしれません。 ↑ 各地の質問掲示板で答えている方へ † 質問に答える時は、このサイトでFAQがないか調べてみましょう。 該当するFAQがあったら、リンクして説明の足しにしてください。 ↑
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
使われていないCSS設定があるか教えてくれる『Unused CSS』 | 100SHIKI
画像を効果的に見せるCSSサンプル集:phpspot開発日誌
[CSS]半透明のパネルを使ったドロップダウン型ナビゲーションのスタイルシート
CSSハックしない、JavaScript使わないCSSの教科書みたいなテンプレ*ホームページを作る人のネタ帳
webサイト作成時にサイトカラーを決められない人の為のwebサービスいくつか*ホームページを作る人のネタ帳
Personnel
http://berry.littledear.org/ka-soru2.htm