チェックボックスにチェックを入れるとデザインに使用したモジュールを絞れます。
最後まで投げ出さずにファイルを提出出来た事。
シンプルなデザインが好きなので、シンプルかつ寂しくなり過ぎないように、色使いと文字の読みやすさに気を使いました。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がなくても問題のないように考慮して作成しています。 ブラウザによって見え方が若干異なるので、見比べていただけると嬉しいです。
当然ですが、画像を使わない事。 画像のありがたさが身にしみました。
最近話題の、文字のサイズに応じてページ幅を変化させるエラスティック・レイアウトを採用してみました。 FireFox2、およびIE7で表示確認。
構造と重要度が視覚的に把握できることや、コントラスト比や行幅といった可読性に特に留意しました。 IE 6 での表示や、elasticlayout の堅牢性に若干 課題が残っていますが、しばらくまとまった時間が取れるか微妙なので、ひとまず提出しておきます。
つ、次こそはまともなものを作るぞ。
ポジションプロパティとボーダーで作った陰影。 目に優しい地味な配色とシンプルな見出しなど、見やすさを重視。 あと、 出来る事ならタイトルは英字にしてほしかった。
・初めてのエラスティック・レイアウトにしてみました。 ・デザインは本職ではないのでコーディングしながら考えました。 ・CSS2.1対応ブラウザでの見た目が本来の姿です。 ・IEでもそれなりの見た目にするにプチ妥協しました。。
シバリがあるならとことん思いっきり、ということで border も封印してみました。
ダークでポップな感じに仕上げたかったのですが粗が目立ちますね>w< codeタグを無駄に頑張りました^^
画像を使わないというのが根本的に難しかったです。 基本的にFirefoxでの表示確認、次にI.E6で行っており、I.E7は未検証です。 I.EについてはそのCSS対応仕様上、妥協設定となります。 気を使ったのは見出し要素の見やすさと、うるさくない程度のメリハリづけです。 CSSの構造については割といい加減なので汚いかも。
なるべく汎用的なスタイルを目指して頑張りました。 blockquoteとinsとdelに力を入れました。 h3からh6は少し力をぬいてしまいました。
表を使わない表組み。配色はhttp://d.hatena.ne.jp/tanemori/から頂きました。IE6非対応、IE7では一部枠線が出ません。
特別な技法は使はず、シンプルで見やすいスタイルを目指しました。もとはISO-HTMLを想定して作ったスタイルですが、セレクタのみdivに合はせました。下位の見出しはあまり使ったことがないので新たに定義しましたが、どうやって見出しレベルに差を付けようかと悩みました。せっかくなのでhandheldなメディアにも対応してゐます。
テキストを主体としたデザイン、というコンセプトを熟考し、とにかく文章を「読ませる」ことを考え、デザイン要素をいかに削れるか、というのをコンセプトとしました。 一行の文字数や見出しとのスペースなどに気をつかったつもりです。また、CSSの技術としていわゆる高度な(複雑な)ものを使用していないところもポイントです。
陰影とH4のツートンカラーと「最後に」の三角を画像を使わず表現したところをがんばりました。 でも、のんびりしていたら既に陰影のアイデアの作品が発表されてしまっていて、あわてて提出する次第です。
W3C的なCSS2仕様書に記述されているものに従って組み立てています。Mozilla系で閲覧したときのみ制作者の意図がほぼ反映される作りです。Operaではolのリストが不完全、IEではリストに関しての(インデントを含めた)描画が酷くなります。
今までは2~3行訂正するだけでこれだけまとまったものは初めて作りました。同じ宣言をしたりしてるところがあったり修正箇所の多いCSSとは思いますが(汗;
やたら長いh1タイトルの扱いに悩みに悩んだ。
文月夕氏の労作『読みやすさアンケート 1005件の結果を集計』……ではなく(滝汗)、有効投票総数837件時点の平均値を算出し、結果として出てきた「眩しくない淡灰色の背景色」を生かしたデザインを、と、考えたものです。 expressionは『HarukiyaArchives』を参考にさせていただきました。(IEで閲覧窓サイズを小さくするときは、[更新](f5)を)HTMLを変更しない、という規定のため、じゃっかん無茶をしています(line-height:400%;とか……)
余り「カッコイイ」とは思えない代物ですが、涼しげで快適なスタイルを目指しました。 見出しの区別や、論理要素の区別も、水準以上…に出来たと思います。 元の「Summer Style」が駄目だったので、結構苦労しました。
h1,h2要素を角丸にしようとしてみました。 結局それらしい物にはなったけど、如何見ても角丸になっていません。
囲いdivが3つもあったので卑怯な利用のしかたをしてみました。
睡魔という悪魔と激しい戦闘
2 カラムっぽい雰囲気を出してみようと
h1 のスタイルが見どころですが、うまく行っていません。(ぉ
ノートの書き込みと付箋紙をイメージして作りました.できるだけシンプルに,また要素の再利用を考えて書いたつもりです. モダンブラウザでしか機能しないものもいくつかありますが,基本的なデザインはどのブラウザでも変わらないようにしました. htmlを変更できないこともあってサイト全体をCSSでデザインする時にはやはり最初の設計が肝心だというのがよくわかって勉強になりました.
Last-Modified :2019/01/22
Hosted by JSNレンタルサーバー