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-
はじめに Googleのレイアウトが刷新され、左側にサイドバーが表示されるようになりました。このサイドバーをマウスオーバで開閉してくれるユーザスタイルシートを導入しようとしたのですが、Firefoxでユーザスタイルシートを利用するにはどうしたら良いか知らなかったので、調べてみました。 Google のサイドバーをマウスオーバーで開閉する - Griever プロファイルフォルダを直接操作する まずは、アドオンを利用せず、プロファイルの格納されているプロファイルフォルダにユーザスタイルシートを直接配置するやり方です。 1.Firefoxのプロファイルフォルダを開きます。プロファイルフォルダはプラットフォームによって違うので、以下を参照してください。 プロファイルフォルダの場所（Firefox / Thunderbird） - えむもじら 2.chromeフォルダ配下にuserContent.
問題 文字や画像をダブルクリックされると、選択状態になってしまう。 文字やリンクや画像に、onclickで何らかの処理をするスクリプトを作っているのだが、カチカチクリックされたときやドラッグされたとき選択状態になると、どうにもかっこ悪い。 ダブルクリックしたときやマウスを使って選択しようとしたときに、選択状態にならないようにできる？ 答え CSS3では以下のように書ける。 user-select: none; ただ、だいぶ普及した角丸をするborder-radiusのようには広く実装されていないようなので、現状では各ブラウザの独自実装にも合わせておく必要がありそう。 以下のように、各実装にあわせた記述をしておく。 user-select: none; /* CSS3 */ -moz-user-select: none; /* Firefox */ -webkit-user-select:
Googleの表示速度の速さの秘密に、コネクションを極力減らすということがある。それが複数の画像を一つにまとめてしまい、CSSのポジションをずらすことで表示するという手法だ。これを使うと画像のダウンロードは一回で済むのでコネクションが少なくて済む。 実際、検索結果のGoogleロゴを見ると、複数の画像が混ざった結果なのに気づくはずだ。これをやるのは非常に面倒に感じるだろう。だが、小さなアイコンなどはこういう手法をとればサイトの負荷軽減、高速化につながる。それを手軽に実現できるのがこのソフトウェアだ。 今回紹介するオープンソース・ソフトウェアはCSS Sprite Generator、CSSによる画像分割補助ソフトウェアだ。 CSS Sprite Generatorは複数の画像をZipで固めてアップロードすると、その画像を連結し、さらに表示するためのCSSを生成してくれる。これを使えばまさに
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初心者向けチュートリアル初めてのウェブサイト: コンテンツのスタイル設定CSS スタイル設定の基本CSS とは何かCSS 入門課題: 経歴ページのスタイル設定基本的な CSS セレクター属性セレクター擬似クラスと擬似要素結合子ボックスモデル競合の処理CSS の値と単位CSS におけるアイテムのサイズ設定背景と境界線コンテンツのオーバーフロー画像、メディア、フォーム要素表のスタイル設定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です。 前回のように、上中下3カラムの 真ん中のボックスの高さ幅が自在に伸び縮みしつつ、 つねにフッター部分がブラウザ画面の最下部にある、 フレームセットを使ったかのようなレイアウトを、CSSで目指しますが、 前回の欠点である、 真ん中のボックス（横幅100％）に、 固定幅（横幅例えば600px）のボックスを入れ子にした場合、 センタリングができなかったことを克服したバージョンです。 ▽画像ですが、画面分割のサンプルをつけてみました。 （分割がわかりやすいように、色づけしています） ▽CSSベースのHTML レイアウトの垂直方向の真ん中部分が伸縮自在な、 フレームライクな上中下3カラム （中ボックスは、センタリング可能） ------------------------------------------------
チェルシーが 10 連勝でクリスマスのトップの座を獲得 ラニエリはシティ戦で 2 つ星を称賛 勝つのに 7 年かかったにもかかわらず」 ミスティーノが獲得
日本が大型連休に入る少し前の4月23日、W3CはHTML5の新しいドラフトを公開しました。いつも最新のWeb標準化動向を伝えてくれるWeb標準ブログのエントリ「Last Callに向け進むHTML5 | Web標準Blog | ミツエーリンクス」によると、今回のドラフトから仕様書に大きく手が加わり、Webサイトを作る人向け（制作者に関係する要件）と、Webブラウザを作る人向け（実装要件についての要件）ごとに見やすくなるようなスタイルシートが用意されたとのこと。 これまでも何度かこのブログでは、HTML5やJavaScript 2.0などのWeb標準の動向を書いてきましたが、今回は分かりやすいようにその動きをまとめてみました。 HTMLはHTML4でいったん進化が終了し、それ以後はXHTMLで進化していくことになっていました。しかし実際にはXHTMLは期待されたほど普及せず、XHTMLによっ
当サイトで使用しているスタイルシート(CSS)をご紹介 回り込んで画像、テキストなどを表示させる（float） このサイトでもお馴染みの回りこみタグを紹介します。 彼の名前は「float」です。とってもお気に入りのお友達です。 回り込みと言われてもよくわからないと思いますので、実例を先ず紹介します。 左の画像は、この文字の左側に回りこみされてるやろ？これを回りこみと言いますねん。テーブルを使っても同じように表示させる事もできるけど、何かと役立つスタイルなんで覚えといてな～！ <p><img border="0"src="画像URL" hspace="2" width="幅"height="高さ" style="float:left;">テキスト</p> 上記のように指定してますねん。どうでっか、簡単でおますやろ？ 無理やり大阪弁で説明してましたが、普通に戻します（笑） このスタイルを連発す
あとで絶対活用してみたいと思いましたので一応書いておきます。 『誰でも使っていいよ！』との事なので興味のある方に。 CSSハックをしない、JavaScriptを使わないというもの。 参考：CSSハックってなんぞえ？ 詳細は以下に。 テンプレート色々 基本はダウンロードファイルは見つからなかったので各ページでソースを表示して参考にする感じ。 英語がわかる人は作者サイトから見た方が早いかも。 作者サイトは以下から。 Art and design by Matthew James Taylor 3カラム中央メインタイプ ピクセル割りem割りパーセント割り 3カラム左メインタイプ ピクセル割りem割りパーセント割り 2カラム右メインタイプ ピクセル割りem割りパーセント割り 2カラム右メインタイプ ピクセル割りem割りパーセント割り 2カラム均等割り パーセント割り このほか1カラムのタイプや、マ
webサイトを作成するときに、どうしてもサイト全体の色を決められないという人の為のエントリ。 本当は少し濃いオレンジ系が食べ物屋に向いているとか、薄いグレーが高級感や落ち着きを出すようなページだとか、清潔感のあるイメージを作る為には黒を背景にしては駄目とかというお話を先にしたほうが良いかもしれないのですが、そんなのにとらわれてもしょうがない気もするので、気にせずいきましょう。 サイトカラーをツールに任せる kuler 直感的に色を決めたい人向け。 よさそうな配色パターンが決まったら以下をクリック。 これで直感的にサイトカラーを決めれるはずです。たぶん。 もっともっと直感で決めたいという人は以下 Color Theory 『難しい事を考えるのは嫌なんだ。もっとこう、ばっと、ズババっとくるのないのか』という人にはこのサイトがお勧め。 マウスポインタを好きなカラーの上に乗せるだけの、とても簡単な
ホームページ作りの よくある質問集・用語集です。 † ホームページ作りでお困りの方のための、よくある質問集・用語集です。 このサイトのFAQ*1を 一通り読んでみてください。左上の検索ボックスで、ありそうなワードで検索してみてください。 意外と簡単に問題が解決するかもしれません。 ↑ 各地の質問掲示板で答えている方へ † 質問に答える時は、このサイトでFAQがないか調べてみましょう。 該当するFAQがあったら、リンクして説明の足しにしてください。 ↑
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く