サムネイルの一覧表示 - ギャラリー型 - ホームページのレイアウト
ここでは画面全体にサムネイルなどの画像を大量に表示するレイアウトについて見ていきます。個々の画像はバラバラの大きさでも構いませんが、見た目を重視するのであれば画像のサイズを統一するか、画像の大きさはバラバラであってもその画像を入れる枠を作り、枠のサイズを統一しておくといいかと思います。 全体の構成としては下記のようになります。 画像を格納するための領域を<div>要素で定義し、必要な数だけ追加していきます。 全体をヘッダー、コンテンツ領域、フッターの3つの分けるところまでは、『基本構成』を参照して下さい。下記のようになります。 body{ margin:0; padding:0; background-color:#dcdcdc; } #wrapper{ margin:0; padding:0; background-color:#ffffff; } #header{ margin:0;
Mozilla Japan - Firefox 用アドオン - 拡張機能 - 開発者向けツール
ダウンロード ステータスバーに、ページの読み込み比率、読み込まれた画像の数、ダウンロード済みバイト数、平均ダウンロード速度、読み込み時間を表示します。Opera のステータスバーに似た機能です。
firefoxを使用して htmlのcssを見る方法を教えてください。 - OKWAVE
基本的に、HTMLもCSSも、隠すほどのものではなくというか、そもそも隠すべきではないものなのですから、自由に見て勉強してください。覗き見というレベルではまったくありません。だってどちらもテキストデータで、それを読んでブラウザが解釈しているわけですから、ブラウザに読めるということ＝誰の目にも見える。 HTMLやCSS、JavaScriptのルールは自由に使えるように公開されているのに、それで書かれた物を見たり、利用したら困るという思考そのものがないのですから・・・ 以前のfirefox1.0あたりまでは、スタイルシートを読む機能もありましたが、利用者が少ないためアドオンに任せられました。下のJSView・・・ さて、その友人が使っているアドオンは、間違いなくfire bugです。あまりにも有名で、ウェブ開発には欠かせないツールになっています。ウェブ開発者で知らない人はいないと思います。 C
Another HTML-lint gateway
HTML文書の文法をチェックし、採点します htmllint.cgi ver1.21 / htmllint.pm ver3.30 文法しか採点しません。内容の良し悪しは採点されません。結果に疑問を感じたら必ず結果の解説を読んでください。満点で慢心しないでください。 このページは、基本的な設定だけの軽いゲートウェイです (軽いのはこのHTMLのことで、チェック自体はどれでも同じです)。細かなオプションを指定したいときは、こちらのゲートウェイを利用してください。 チェックしたいHTMLのURLを指定するか、HTMLを下のテキスト領域に直接記述して、[チェック] ボタンを押してください。巨大なHTMLは途中でちょん切られてしまうことがあります。 [リセット] は全ての設定内容を初期状態に戻します。 URL DATA (DATA領域指定では文字コードの一致性はチェックできません) <!DOCTY
カラーコード HTML・CSS用
Webデザイン用のプチツール 選択したデザインパターン上でブロックの色を変えことができます。選択したブロックのカラーコードも表示されます。 配色保存用アドレス機能 あなたの作った配色をブログやメールで紹介することができます。パレット右上の「保存用URL表示」をクリックするとURLが表示されますのでコピペしてご利用ください。 配色のヒント 雑誌や生活雑貨を参考にする 本文が読みにくい配色はさける。 同系統の色でまとめてみる。 同じぐらいの彩度でまとめてみる。 WEBデザインのヒント 重要なナビゲーションは、探せばすぐに見つかるように配置する 色、文字の大きさ、ブロック周りの余白を調整すると、目立つようになる ページを開いて、まずどこに目がいくのかを意識する 関連のある情報を固める 関連性の薄い情報ブロックの間には余白を入れる
JKL.Hina - テンプレート展開クラス
JKL.Hina は JavaScript 用のテンプレート展開ライブラリです。 HTML ページ内に予め用意したテンプレートと、JSON なデータを与えて テンプレート展開処理を高速に行います。 DOM を利用しているため、今のところ300行弱とソースも短いです。 ダウンロード 更新履歴 サンプル 簡単な使い方 処理仕様 Internet Explorer 6.0、 Firefox 1.0、Opera 8.0、Konquerer 3.3.2 で動作確認しています。 Safari 1.2 でも概ね動くようになりました。 ダウンロード .tar.gz 版と .lzh 版の内容は同じです。（アーカイブ形式のみ違う） jkl-hina-0.18.tar.gz TAR-GZ jkl-hina-0.18.lzh LZH 更新履歴 2005/05/16 バージョン 0.01 最初のバージョン 2005
画像に枠をつける - FC2ブログのテンプレート工房
カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？ 記事に掲載する写真等の画像に枠をつけて立体的にみせる方法を紹介します。 スタイルシートの一番下に次の記述を加えます。 【 standard の場合 】 /* 記事に掲載する画像に枠を付ける*/ .article img{ margin:0px 3px 0px 0px; padding: 3px; background: #ffffff; border-right: #999999 1px solid; border-bottom: #999999 2px solid; } img.emoji { padding: 0; margin:0; background: #ffffff; /* ここには背景と同じ色を設定 */ } 【 lightframe の場合 】 /
スタイルシートリファレンス（目的別）
font …… フォントに関する指定をまとめて行う font-style …… フォントをイタリック体・斜体にする font-variant …… フォントをスモールキャップにする font-weight …… フォントの太さを指定する font-size …… フォントのサイズを指定する font-family …… フォントの種類を指定する font-size-adjust …… フォントのサイズを調整する font-stretch …… フォントを縦長・横長にする line-height …… 行の高さを指定する text-align …… ブロックコンテナ内の行の揃え位置・均等割付を指定する text-justify …… 均等割付の形式を指定する vertical-align …… 縦方向の揃え位置を指定する text-decoration …… テキストの線・色・スタイルをまと
<BLOCKQUOTE>－HTMLタグリファレンス
<BLOCKQUOTE>～</BLOCKQUOTE>で囲まれた部分が引用・転載であることを表します。 <BLOCKQUOTE>タグは、比較的長めの文章を引用・転載する際に使用します。 改行を必要としない程度の短い文章を引用・抜粋する際には、<Q>タグを使用してください。 Internet Explorer等の一般的なブラウザでは、<BLOCKQUOTE>～</BLOCKQUOTE>で囲まれた部分は 上下に1行分のスペースが挿入され、左右もインデント（字下げ）され、上下左右にスペースが空きます。 ただし、インデントさせることを目的に<BLOCKQUOTE>タグを使用するのは誤りです。 インデントが目的の場合にはできるだけスタイルシートを使用してください。 スタイルシートでは、<div style="margin: 10px">～</div>などと記述します。 ■属性 HTMLソース 芥川龍之
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://homepage.mac.com/yuji_okamura/DotMac/CRssFeed/index.html