mixiのデザイン変更から学ぶ、ウェブサイトの最小横幅を800px以下にすべき理由 2006-02-09 mixiのレイアウトが大幅に変更された。右側にサイドバーが出現して、全体の横幅が大きく広がったのだ。全体の横幅は900pxほどだ。このため、私の環境ではブラウザの横スクロールバーが現れるようになってしまった。以下がその様子だ。 これはユーザビリティ的にかなりよくない状況だ。横スクロールは可能な限り避けなければならない。なぜなら多くのユーザーは横スクロールすること自体に不慣れだから。 しかし、画面を見てお気づきの方もいると思うが私はWindowsのタスクバーを縦に配置している。このレイアウトはマイノリティな類であろう。このレイアウトのためにブラウザの横幅が縮まっているので「それは例外だ。みんなブラウザの幅は900px以上にしてるよ」という声が聞こえてきそうだ。しかしこれには反論の余地があ
フッター部分のメニューなどを区切る際のサンプルを適当に。 p要素でやるとこんなヤツです。 Home|アバウト|イラスト|BBS サンプルに使うhtmlは、ul要素を使った下記をベースに使用してます。(サンプルに寄ってid名とか変わりますが) <ul id="sampleFooter"> <li><a href="/">Home</a></li> <li><a href="/">About</a></li> <li><a href="/">Gallery</a></li> <li><a href="/">Blog</a></li> </ul> んでは、いってみますか。 一番書きたかった内容は最後に書いてます。 普通に縦線を書いた感じ 実際の表示です。 Home| About| Gallery| Blog 普通にhtmlに|を記述しているのでソースは当然下記のように。 <ul id="samp
» Introducing Tablecloth テーブルクロスを導入する。 この記事がWEB関連のなかで話題になっていました。 はて・・テーブルクロス・・・。 何のことやらさっぱりだったんですが、使ってみるとなかなか素敵な動きをしてくれましたので記事に。 あなたのhtmlに2行のコードを加えたら・・・ By simply adding 2 lines of code to your html page you will have styled and active tables that your visitors will love あなたのhtmlにたった2行のコードを加えるだけで、あなたのサイトのテーブルは、あなたのサイトの訪問者に愛される。 なんとも素敵な響きだなと思った人はデモを見てみましょう。 » デモはこちら テーブルによって大量のデータを出力するときには便利な機能ですね。
斜線やストライプの背景画像を Photoshop とかで作ると、色を変えたくなった時にそのたび作り直しってのが面倒。便利で使ってる人も多いかもしれない secondlife さんの Background Image Maker でもそれは同じかな。んで、Photoshop とかで作る場合に、線に色を付けて作るんではなくて、色を付けたい部分を透過にして作っておいて CSS で background-color を指定するやり方にすれば、色を変えたくなった時はCSS で背景色を変更するだけで良いじゃんって、Super Stripes を見て目からうろこ状態。早速インスパイヤしてみた! 使ってみたい GIF 画像をダウンロードして、CSS で背景画像に。あとは、背景色で好みの色を指定するだけ。ちなみに、サンプルでは背景色を #fa0 と指定している。 斜線 oblique-line_1px.gi
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
はい! こんにちは!!!!! 今日は、偶然ブラクラ発見しちゃったから、それをお伝えしますね! これだよ! <style>*{position:relative}</style><table><input></table> → サンプル (IEだとブラウザが終了しちゃうよ! 注意してね!) IE6とかIE6のコンポーネントブラウザだと確実に落ちちゃうみたいだね! IE7は確認してないけど! tableとかtrの直下に、inputとかselectがあって、 そのあたりにcssの全称セレクタでposition:relativeがあたっているとダメなかんじかな! ちなみにinputにstyleで直接relativeあてても落ちなかったよ! なにこれ! よくわかんないけど面白いね…! FirefoxとかOpera大好きっ子は、 これをたくさんバラまいてIEのシェアをどんどん下げちゃえばいいと思うよ!
このブログの本文の横幅は、かなり狭い。それはなぜか。 結論から言えば、「ブラウザで見るときの実際の横幅」と「印刷可能な横幅」の二つの要素が大きな要因となっている。画面そのものはかなり広くても、実際に見るサイズ、そして印刷したときにはみ出ないサイズというのは案外小さい。 このことを実際の統計数値を交えて書いてみたいと思う。 ■画面の広さ 以前の旧デザインでは、横幅を指定せず、可変幅で表示していた。たとえばここなどを見てもらえばわかるが、ブラウザを小さくすればそれに応じてサイズが縮まる。したがって、どんな幅のブラウザでも(狭すぎると困るが)はみ出ることはないし、また、印刷するときにもきちんと印刷される。画面上で見るときの「横スクロール」というのは想像以上に鬱陶しい。 だから、可変幅というのは、ある意味、無難な正解といえる。 ■一行の長さは40字前後にしたい しかし、画面そのものがかなり大きくな
次期Windows OS「Vista」に標準搭載される「Internet Explorer 7(IE7)」(日本語版)のベータ2が連休明けの9日公開された、という表向きの話はデジタルARENAのニュース「マイクロソフトがInternet Explorer 7 ベータ2を公開」を読んでいただくこととして、こちらはWeb業界には気になる、Web表示の互換性の問題に踏み込んでみよう。 まず、単純な話、IE7って使いものになるのか。なる。最初はメニューが見えないので戸惑うけど、Altキーを押せば出てくる。RSSリーダーの機能だってFirefoxとどっこいどっこい程度には付いている(笑)。マクロソフトの看板アプリケーションに抜かりがあるはずはない。 ところが、IE7で表示したとき、レイアウトが崩れてしまうサイトがいくつかあった。例えば、このコラムを書いている12日現在、「はてなダイアリー日記」はIE
みなさんお元気ですか?僕は少しだけ元気ではありません。じんわりとした夏の暑さを感じながらブログを書いています。 実は、数ヶ月前にスマートニュースという会社を退職しました。 しばらく無職 しばらくは就職せずに無職でいようかなと思っています。 すぐに再就職した方がいいんだろうな〜。とは思うのですが少し疲れたかも。 いい時代になったものだ 最近は AI の進化も素晴らしく、昔ソフトウェアで出来なかったことがどんどんできるようになってるなって感じます。 Rust とか、ちょうど欲しかった感じのプログラミング言語もあるし、 ChatGPT は完璧ではないけど何か新しいことを始めるときに素晴らしい洞察を与えてくれる。 時代は確実に良くなってる。そんな時代に「自分は働いていないくていいのか」と少し不安になるけれど、自由気ままにコードを書く、そんな時間が今あってのもいいのかなって思ってます。 オフトピック
いまさら聞けない“Web標準”、そしてXHTML+CSS:いまさら聞けないリッチクライアント技術(4)(1/3 ページ) 前回の「いまさら聞けない、“Ajax”とは何なのか?」の説明の中で、Ajaxの定義の1つとして「XHTMLとCSSを使った標準規格のプレゼンテーション」というのがありました。前回の記事では、この部分をしっかり解説できなかったので、今回はこれについて解説をしましょう。 といっても、Ajaxの補足説明が今回の目的ではありません。HTML/XHTMLとCSSを使った「Web標準」について紹介します。 「Web標準」という単語はよく耳にしますが、具体的にどんなものか? HTML/XHTMLとCSSとどのような関係があるのか? さらに、HTML/XHTMLやCSSって何? といった点について見てみましょう。 「Web標準? Webを標準化することかな?」 AjaxやXML、Jav
ページの見かけを決めるCSSについていろいろなデザインが今までありとあらゆる場所で検討されてきましたが、今度はそのCSSを時間帯によって切り替えるという方法です。朝なら朝っぽいCSSで、夜なら夜っぽいCSSを使うというようにして、いろいろと応用が利きそう。 詳細は以下の通り。 Katgal.com: New and Improved このアイディアをさらに延長したアイディアが以下にあります。 nicholasjon.com :: Time Sensitive {1/14/2007} 上記サイトでは以下のような感じで時間だけでなく、天気によっても変わっていけばおもしろいというように提案しています。 はれ くもり 夜
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 多くの人が待ちに待ち望んだライブラリ。やはりすごい人はすごいものを作るんですね。 このライブラリを読み込むことによりIE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれます。 ただし完全にIE7と同じような形にするのではなく、より近い形ということです。 現在公開されているバージョンはversion 2.0 (beta)ということで、まだ実務で使うのは難しいかもしれませんが、MITライセンスで公開されておりますので正式にリリースされればweb制作の現場を変えてしまうライブラリです。 設置方法 Google コードのie7-jsより直接読み込むことが可能です。 以下の要素をhead要素内などに記述します。 <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.c
Load testing is an important part of overall web performance. The load testing process is widely used. The testing system involves placing demand on a particular software system and measuring the response. Load testing is a useful tool because it can give you an idea on how a system responds under normal operating conditions. In addition, load testing can also give an accurate measure on how a sys
前回はクロスサイト・スクリプティングのぜい弱性を突く攻撃の対策としてのHTMLエンコードの有効性を述べた。ただ,HTMLエンコードだけではクロスサイト・スクリプティング攻撃を完全に防御することはできない。そこで今回は,HTMLエンコードで対処できないタイプのクロスサイト・スクリプティング攻撃の手口と,その対策について解説する。 HTMLエンコードで対処できない攻撃には,次のようなものがある。 タグ文字の入力を許容している場合(Webメール,ブログなど) CSS(カスケーディング・スタイルシート)の入力を許容している場合(ブログなど) 文字コードを明示していないケースでUTF-7文字コードによるクロスサイト・スクリプティング <SCRIPT>の内容を動的に生成している場合 AタグなどのURLを動的に生成している場合注) 以下では,HTMLタグやCSSの入力を許容している場合と,文字コードを明
平素より「PHPプロ!」をご愛顧いただき、誠にありがとうございます。 2006年より運営してまいりました「PHPプロ!」ですが、サービスの利用状況を鑑みまして、2018年9月25日(火曜日)をもちましてサービスを終了させていただくことになりました。 サービス終了に伴いまして、2018年8月28日(火曜日)を持ちまして、新規会員登録ならびにQ&A掲示板への新たな質問、回答の投稿を停止させていただきます。 なお、ご登録いただいた皆様の個人情報につきましては、サービス終了後、弊社が責任をもって消去いたします。 これまで多くの皆様にご利用をいただきまして、誠にありがとうございました。 サービス終了に伴い、皆様にはご不便をおかけいたしますこと、心よりお詫び申し上げます。 本件に関するお問い合わせはこちらよりお願いいたします。
Web Developer 日本語版サポート移管のお知らせ これまで当サイトにて、日本語版のダウンロード配布およびサポートを行ってきた『Web Developer』ですが、2008年3月より開発担当エンジニアの個人サイトへ全てを移管させていただくことになりました。新しいサイトのURLは、以下の通りです。 ミナトラボ:Web Developer 日本語版 『Web Developer』は、開発者である米国のChris Pederick氏に協力しながら、これからも上記サイトにて日本語版へのローカライズおよびユーザーサポートを継続していきます。今後とも『Web Developer 日本語版』をよろしくお願いいたします。
Summary テキストフィールドにCSSを入力するか,CSSが置いてあるURLを指定して,"Process CSS" をクリック. 使用前 (196byte) #example { color: rgb(0,0,0); background-color: #ffffff; font-weight: bold; margin-top: 5px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; padding: 10px 5px 10px 5px; } 使用後 (Compression: Low) #example { color:#000; background-color:#fff; font-weight:700; margin:5px; padding:10px 5px; } 入力 196 byte 出力 99 byt
Cascading Style Sheets Explained If you’re new to Cascading Style Sheets, or CSS, then this short guide is for you. After a brief introduction to CSS and some of its benefits, we’ll move on to CSS frameworks to help you decide if you should use one and if so, which one would be best for your needs. What is CSS? CSS is a computer programming language used for describing the visual presentation of a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く