チェックボックスにチェックを入れるとデザインに使用したモジュールを絞れます。
最後まで投げ出さずにファイルを提出出来た事。
シンプルなデザインが好きなので、シンプルかつ寂しくなり過ぎないように、色使いと文字の読みやすさに気を使いました。IE, Firefox, Opera で同じ様に表示されるように頑張りました。
HTMLにはいっさい手を加えずやってみました。 読みやすさ重視です。
Mozilla系列は先行実装の角丸を使い、ブラウザ間で全く違った見栄えを演出しています。 全体的に黒を基調としたオーソドックスな作りです。 可変は元々得意ではないので、あえて可変レイアウトにチャレンジしました。 IE6でもfixedもどきが実装してあります。
文字サイズやウィンドウ幅の変更に対応できるよう、フレキシブルなレイアウトを目指しました。色調も、単調にならないように注意しながらまとめてみました。
美味しいソース、ごちそぉさま section dl dd dtはいいデザインが思い浮かばず勉強の意を込め、他サイトに掲載されていた方法を参考にして雰囲気に合わせました。 参考・・・http://3ping.org/2005/08/24/0948
h2とh3を横に並べるのに苦労しました。文字が回り込んでしまったり、はみ出してしまったり、試行錯誤しながら作りました。幅があきすぎてしまったので、水平線(hr)のマージンをマイナスにしてみたり、いろいろと見苦しくなってしまいました。
コメントなし
なるべくシンプルなデザインになるよう色数を抑え、h要素の違いがはっきりするようにこころがけました。
一般的なブログ風のデザインにしたつもりです。 普段は絶対に使用しないposition:absoluteをつかって無理やりレイアウトしました… IE以外では表示が崩れる可能性大です。(未確認)
なるべく目が疲れないような色遣いや、色覚異常でも重要な部分は見分けられる事に気を付けたつもりです。それ以外は、h2の色の変化に拘りました。クロスブラウザは挫折しました。
殆どのブラウザで対応していないCSS2.1のセレクタやプロパティを使用してデザインの制御をしています。現状ではFirefox2でしか表示されません。
POPで明るいイメージになるようにしました。
とにかく、かんたんなものを、と取り組みました。 なるべく白黒、なるべく枠線を少なく、です。 文字の大きさと配置は、こまかく整えました。 フォントには Tahoma を指定 (重要)。きれいなフォントなので、Windows では効果的です。 環境は、Mac 版 IE 以外の最新ブラウザなら、概ね大丈夫なようです。
ポップカードをテーマに作成しました。ポップになりすぎると文章が読みにくくなるので、何よりも情報を解りやすく伝えられるようにデザインしようとがんばってみました。
IE6で横スクロールバーが出てしまうのを押さえるやり方がわからずに苦労しました。解決はしたものの、何故コレで収まるのか本人はわかっていません。
比較的シンプルで、見やすいデザインにしてみました。(難しいのは出来ないともいう/笑) できる限り、FirefoxとIE6(win)で同じ表示になるように努力しましたが、そのために多くの時間を費やしました。 試行錯誤を繰り返した結果、(一段組みとはいえ)FirefoxとIEでの差がほぼないような形で初めて整えることができました(嬉)。
・スペーシング(ビジュアル) ・原案の再現とブラウザの調節(CSS) ・レンダリング的にはFirefox > Opera Safari > IE7 IE6 といった感じです。
ブリッツをイメージしました。 主にsafari対象です、ニッチです。 汎用性は激しく無くなりました。むずかしー。
あんまり自サイト以外でcssとちゃんと向き合う機会がなかったので、試行錯誤しながら頑張ってみました。とりあえず色目に気をつけてます。
色専用CSSを用意して色々とやってみましたが地味になり過ぎてしまいました。 見出し周りが特に難しかったです。
クロスブラウザ対応。 IE7, firefox2, Opera9, Safari2に対応させました。
目が疲れないように。
h3の扱いかな。
デザインってむづかしー
うる覚えですが、前にグレーに白文字が読みやすいとか目にやさしいとかと聞いたのでとりあえず、それをベースに文字だけですので読みやすいように心がけました。
シンプルで読みやすい表現・・・を考えてたら、まとまらなかったので普通に作成してしまいました。(ちょとフォントが小さ気味かな) WIN/IE6.0、IE7、Firefox2.0、Opera9.2で確認済みです。
・h6まである見出しの目立ち方の調整 ・出来るだけ汎用性を持たせるように ・IE(windows)での確認作業…
文字サイズの変化で崩れないように注意して作りました。 タイトルで少し遊びをw
2本目の投稿です。 H2を旗っぽく見せようとしました。旗というより、リボンかもしれません。 角丸をやっている人がいないみたいなので、一番外の枠でやってみました。
これといってがんばった点はありませんが、マークアップの制限があり、見出しなどが統一されてしまい大変むずかしかったです。 安易にキーカラーをパープル(5月は酸っぱさが欲しくなる頃合かと思って)を選択したのがアダとなり、読み易さや長時間の閲覧を考えての配色に時間がかかりすぎました。 明朝のディザをとるために試行錯誤試してみましたが、結局上から色をかぶせる形でしか方法がなかったです。
CSSの勉強がてらに参加してみました。WinのFirefoxとIE6でしか確認してません。
・最初は新聞風デザインにしようとしてみたけど、途中で挫折。 ・色弱にも優しいモノクロで見やすいつくり(単に色を使うのが面倒なだけ)。 ・handheld と tv と print のメディアタイプに対応(一応)。 ・レンダリング的にはOpera > Gecko > Safari > IE7 > IE6 といった感じです。
文字と余白の空間バランスに時間がかかりました。
読みやすいようにがんばりました
ときになし。
あまりゴテゴテに飾らないで、シンプルに。 なるべく目が疲れない配色にしたつもりです。
テキスト用のデザインということで、長時間文章を追っていても飽きたり目が痛くなったりしないよう気を配ったつもりです。あとcssのタイトル。
基本的にIEを完全無視してしまいました…。 只、CSS2.1だけで、特に頑張らなくても、これくらい出来ますよ~、ということをMSさんにしっかり理解して欲しいです。。。
読みやすさを重視してシンプルにしました。 バグの関係上、IE6およびそれ以前のバージョンにおいて一部のデザインを変えています。
Firefoxでしかちゃんと見られないと思います・・・。今回の参加を期にちゃんとCSSを勉強し直そうと思います。
ところどころに黄金比(1.618)を使ってみました。 Hn要素の上マージンと下マージンの比、未訪問リンクの色の彩度と訪問済みリンクの色の彩度の比などです。
IE6とIE7、Firefoxなんかで、表示が割と違ったりします。わざとというか、力量不足というか。そういう、なんか、です。
ボーダーに頼りきりですみません。
大会名長過ぎます>< 省略させていただきました。
実用的でない変態チックな h1 要素のスタイル
両サイドの市松模様の再現をがんばりました。 表示確認はMacのsafariとfirefoxでしかしていませんが…。
「読みやすい・分かりやすい」デザインをテーマに作成しました。 煩雑にならないように、極力横のボーダーをなくし、空間を大胆に使い、配色を工夫しました。 div要素がいっぱいあったので、破線ボーダーを使って、デザインに遊び心を加えてみました。 一応、div,id,classがなくても問題のないように考慮して作成しています。 ブラウザによって見え方が若干異なるので、見比べていただけると嬉しいです。
当然ですが、画像を使わない事。 画像のありがたさが身にしみました。
[Next]
Last-Modified :2019/01/22
Hosted by JSNレンタルサーバー