hr要素のデザインサンプル 12 - NxWorld
hr要素は罫線を表示させるもので、話題を変えるときの目印となる区切り線などとして用いられます。 どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なんですが、やろうと思えばCSSだけでも結構いろいろとできるので、備忘録兼ねてhr要素をスタイリングしたものをまとめてみました。 ここで紹介しているものは、ブラウザによっては（特にCSS3を用いているもの）ちゃんと表示されません。 また、多用する人も多いと思う破線や点線もブラウザによっては多少見栄えが違ったりするので、使用する際はあらかじめ注意が必要になります。 はじめに ここで紹介しているものは、すべてHTMLは<hr />のみです。 また、それぞれのhr要素にはデフォルトスタイルとしてあらかじめ下記のようなスタイルを指定してあります。
ウェブデザインにおいてすべきこと、すべきでないことをまとめた『Web Do’s and Don’ts』 | 100SHIKI
ウェブデザインにおいてのベストプラクティスと、逆に一般的にやるべきでないことを簡潔にまとめたのがWeb Do’s and Don’tsだ。 わかりやすいようにDo’s and Don’tsが左右に並べられているので、ウェブ系の人はざっと眺めてみるといいだろう。 もちろんデザインに絶対はないので「そりゃ、逆じゃね？」という主張もあるが、多くの人の主張を眺めるのは勉強になるものだ。 なお、それぞれの項目には参考リンクがつけられているので「む、どういうこと？」というときは原文をあたるといいだろう。 ここらへんを仕事にしている人はたまに覗いてみるといいですね。
[CSS]テキストにグラデーション効果をつけるスタイルシート
Web Designer Wallにエントリーされている、テキストにグラデーション効果をつけるスタイルシートの紹介です。 CSS Gradient Text Effect 仕組みは、見出し要素(h1)に空のspanを記述し、グラデーションの背景画像を表示しています。 デモページでは、下記のようなさまざまなグラデーションをつけたテキストがあります。 CSS Gradient Text Effectのデモページ 利点としては、下記のような点が挙げられています。 テキストなので、ブラウザからのサイズの拡大・縮小が可能。 背景画像を変更することで、グラデーションを変更することが可能。 見出し画像をいちいち作成する必要がない。 数が多い場合、作成時間・帯域の節約になる。
viptop @Wiki - トップページ
全面的にページ統合・修正を行いました。 リンク切れ報告、追加して欲しい情報、ここはこうして欲しいなどの要望あれば こちらの雑談しようぜまでどうぞ。 ほとんどのページの編集制限を解除しました。 あまり連続で編集すると編集過多規制にひっかかるので、 編集される方はプレビューを活用するなどして一度に行うようにしてください。
[CSS]高さの異なるカラムを揃えるスタイルシート | コリス
Columnas 100% altas Columnas 100% altasのエントリーでは、下記のデモのように高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介しています。 sample:高さがばらばらのdiv sample:高さが揃ったdiv スタイルシートは、各divに対して「padding-bottom」と「margin-bottom」に同じ数値をプラス値とマイナス値で指定を行い高さを揃え、それらのdiv要素を包んだdivで「overflow:hidden;」を指定します。 詳しくは、最小限にしたサンプルを作成したので参照ください。 高さの異なるカラムを揃えるスタイルシートのサンプル 下記の「32768px」って、何か特別な意味があるのでしょうか。
POLAR BEAR BLOG: パワポは使うな！
「データを使うな！」と言われた上に「パワポも使うな！」と言われたらどうすりゃいいんだ？という感じですが。以前「邪悪なパワーポイント」というエントリを書きましたが、同じくパワポの有害性を指摘した研究結果があったのでちょっとご紹介を。パワポを見せてしまうと、逆に聴衆の理解を妨げる恐れがあるとのこと： ■ Research points the finger at PowerPoint (smh.com.au) information aesthetics で紹介されていた記事。かいつまんで説明すると、以下の通りとなります： ニューサウスウェールズ大学の研究によると、人間の脳は口頭もしくは文章のどちらか一方「のみ」で情報を与えられた方が、より多くの処理が行える。口頭＋文章を同時に与えられると、脳の処理能力をオーバーしてしまう。 従って音読は効率が悪い。黙って読む方が長い文章を理解・記憶できる。
ブロックレベル要素をセンタリングする方法 - Web標準普及プロジェクト
ブロックレベル要素をセンタリングする方法 一昔まえはcenter要素やdiv要素にalign属性を付けてセンタリングするという手法が当たり前でした。 しかし、最近では見た目はHTMLではなく、CSSで指定するべきである、と言われだし、 現にcenter要素はHTML4.01 Strictや、最新のXHTMLでは使用できません(HTML4.01的には非推奨)。 そこでCSSによる正しいセンタリングの仕方をここで解説します。 正しいセンタリング方法 テーブルやdiv要素のようなブロックレベル要素をセンタリングするにはtext-alignは使いません。 text-alignプロパティはインライン要素の位置揃えを指定するためのものだからです。 Bugzilla-jpにも報告された多くのサイトでは"text-align:center;"を使ってセンタリングしようとしていましたが、 これによってブロッ
CSSを使い、１枚の画像だけでカラフルなグラデーション背景を作る例:phpspot開発日誌
A List Apart: Articles: Super-Easy Blendy Backgrounds CSSを使い、１枚の画像だけでカラフルなグラデーション背景を作る例。 次のような透過PNGがあったとして、更にこの下に色を付けると・・・。 大体どうなるか分かると思いますが次のようなグラデーション背景が出来ます。 そんなCSSのテクニックが紹介されてます。 example one (FireFoxのみ) example two (FireFoxのみ) example three (FireFoxのみ) example four (FireFoxのみ) Example five (FireFoxのみ) Example six (IEも動きます) Example seven (IEも動きます) アイデア次第でこういった技もできてしまいますね。 通常なら画像をPhotoShopなんかで
クロスブラウザを制する シリーズのサンプル目次 - ［JavaScript］All About
1-1 クロスブラウザとは 「クロスブラウザを制する」は、 JavaScriptのクロスブラウザテクニックを紹介していくシリーズだ。 テクニックの解説に入る前にクロスブラウザスクリプトの概略と現況を眺めてみたい。 クロスブラウザを実現するための汎用関数と実例サンプル。コピー&ペーストでとりあえず動かしてみよう。大半のサンプルが Win n4 n6 moz e4 e5 e6, Mac n4 n6 moz e4.5 e5 , Linux n4 n6 moz の環境で動きます。 showLAYER() 表示属性set(表示) 出す hideLAYER() 表示属性set(非表示) 消す 出す/消す moveLAYER() レイヤ−移動 クリックで移動 マウスを追って移動 moveByLAYER() レイヤ−移動(対現在地) 現在位置を起点として移動する
hxxk.jp - CSS を書く前に読んでもらいたいこと
記事データ 投稿者 望月真琴 投稿日時 2006-04-09T19:40+09:00 タグ CSS IRC Team-One オフ会 仕様 実践 Web Standards Design 春に会いましょう 概要 CSS の初心者なあなたもエキスパートなあなたも、とりあえずここは押さえとけ、という記事を紹介。 リプライ 7 件のリプライがあります。 CSS を書く前にブラウザ毎のクセをリセット CSS を書くことに慣れている人はよくご存知でしょうけど、 IE や Firefox や Opera や Safari などの UA はデフォルトスタイルシートと呼ばれるスタイルシートを持っており、それを適用せねば、あるいはそうであるかのように動作せねばならないと仕様で定められています。 User agent: Conforming user agents must apply a default s
トップページだけでもなんとかしたいのよ
ホームページデザインに悩んだら試してみましょ。スカスカで薄っぺらいトップページだけでも、かっこよくする情報が、ここにあります。
あなたのサイト、検索エンジンには見えていないかもしれない | 秋元@サイボウズラボ・プログラマー・ブログ
japan.internet.com 併載コラム 人間が目で見たときと、検索エンジンが調べに来たときではサイトの見えかたが違うことはご存知だろうか。 現在のソフトウェア技術では、画像から意味を読み取ることは簡単ではない。よって、画像に埋め込まれた文章や、Flash など動く画像からジャンプするページのリンクは理解できない。Javascript などを使った「動くメニュー」などの要素も、検索エンジン的にはリンクとしてつながっていないことがほとんどだ。 —– まず、実際に検索エンジンから見えるあなたのサイトの実態はどんなものなのか。HTML のソースを見たり特別なツールを使わずに、簡単に確認する手順をご紹介しよう。 1. 検索エンジン Google で、調べたいページの URL を http:// から入力する。存在する URL で Google が認識しているものであれば(*1)、「Goog
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
人を描くのって楽しいね