チェックボックスにチェックを入れるとデザインに使用したモジュールを絞れます。
最近話題の、文字のサイズに応じてページ幅を変化させるエラスティック・レイアウトを採用してみました。 FireFox2、およびIE7で表示確認。
構造と重要度が視覚的に把握できることや、コントラスト比や行幅といった可読性に特に留意しました。 IE 6 での表示や、elasticlayout の堅牢性に若干 課題が残っていますが、しばらくまとまった時間が取れるか微妙なので、ひとまず提出しておきます。
つ、次こそはまともなものを作るぞ。
ポジションプロパティとボーダーで作った陰影。 目に優しい地味な配色とシンプルな見出しなど、見やすさを重視。 あと、 出来る事ならタイトルは英字にしてほしかった。
・初めてのエラスティック・レイアウトにしてみました。 ・デザインは本職ではないのでコーディングしながら考えました。 ・CSS2.1対応ブラウザでの見た目が本来の姿です。 ・IEでもそれなりの見た目にするにプチ妥協しました。。
シバリがあるならとことん思いっきり、ということで border も封印してみました。
ダークでポップな感じに仕上げたかったのですが粗が目立ちますね＞ｗ＜ 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ではリストに関しての（インデントを含めた）描画が酷くなります。
今までは２～３行訂正するだけでこれだけまとまったものは初めて作りました。同じ宣言をしたりしてるところがあったり修正箇所の多い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レンタルサーバー
