Cheers-Web.com / Home / photo / Link / Auction / About

CSSでウェブサイトを作る

どうも巷では「テーブルレイアウトはクサい」らしい。

そもそもhtmlをかじっていけばCSSにも興味を持つようにプログラミングされているようだが、私は全くそんな気にならなかったし、だからこそ何がどうなってどういうことができるのかイマイチ全然さっぱり分からない。
そこで、一刻も早くクサくて将来も見えないIT土方を脱出すべくXHTMLとCSSを学びつつしかも履歴を残していこうと思い、このようなコンテンツを立ち上げてみました。 お暇な時にご覧頂ければ幸いでございます。

環境

アプリケーション:Dreamweaver 8
パソコン:Windows 98に2000を入れたもの
メモリ:256MB + 128MB
CPU:ペンティアム3
ブラウザ:Firefox1.5とIE6.0のみで確認。
2006/6/8
ピエールカルダンのページを作成。
横に3つ並べるコツのページを参考に3カラム変形というか縦1横3のテーブルを並べたようなものを作成。とりあえず3列にする際には左右フローティング順不同→中央マージンらしい。どうにもidとclassとspanの使い方が理解できない。idに#を付けるということは分かった。

疑問に思った事は、じゃあ4列5列になったらどうするんだ?ということ。
mixiのcssコミュでタイミング良く質問と回答が出ていた
どうやらulとliを使えばいいらしいが、そもそもどう読めばいいのか分からない。
2006/6/4
かなり久しぶりに多大な自由時間を授かったので随所にCSS適用・変更・訂正・改良を加える。
クリア=ボスという単語を覚えたことによって遂に念願のフッター設置を遂げる。
次にぐちゃぐちゃだったファッション関連のページをなんとかまとめてみました。
といっても結局何も全くまとまらず、考えても考えてぬいた結論は「ブランド物は難しい」。
2006/6/2
改正消防法に沿った消火器具紹介のページを作成するも、テーブルレイアウトしかできず途中で断念。
2006/5/30
世界のCSSをパクってやろうと躍起になっている中、こんなCSSを発見。
私もテンプレ埋め込みで<meta name="author" conten="~~^" >を入れたりした頃もありましたが、CSS埋め込みの方がスマート?
やっぱ、ある程度ウエブを極めるとガチガチのテーブルレイアウトに戻るもんなんやろか。yahoo/楽天然り。
2006/5/29
ブックオフに行って100円コーナーでCSSの参考書を探したのですが見つかりません。
雑誌コーナーで「今日からできるXML」とかなんとかいうのを見つけてパラパラと読み、
「XMLを使うとこんなことができます!」というところをじっくりじっくり読んだがXMLで何ができるのか全く分からないので凹む。
2006/5/28
Auctionのページで実験的にテーブルレイアウトを払拭してフロートに挑戦。
「おおっ」とか「うわっ、すげえ」とか「CSSすげぇなぁ」とボヤきながら出来上がるも、IEでフッター表示がおかしい。
いや、FFでもおかしい。先日組み上げた入れ子を落とすか、手探りで調べるか。悔しすぎる。
2層テンプレで作成していることもあり余計にワケが分からない。聞ける人もいない。放置するしかない!OK!終了だ!
2006/5/27
テンプレートデザインを変更してみました。
最上部の「シンプルを超えたシンプルな」メニューをヘッダー、著作権表記をフッターとしてみました。
幅100%でどこまでも伸びるのが邪魔なようでまぁいいかということで適当に終わらせました。
ただこの場合だと、ページの内容があまりないページの時にフッターが大分上の方に表示され、
なんとなく気に入らないので検索してみるとフッターを画面の下に表示というページを発見。
まず「div#container」ってなんだよ!入れ子って何?div id~~って何??span使ってないやん!と初心者感情剥き出しで四苦八苦。
なんしかテーブルレイアウトとやることは似ているような気がしてその調子でイジっていくとなんとなく完成。
でも、Dreamweaverの編集画面ではフッターがヘッダーの上に表示されているのが非常に気になる。
恐らく超基本的な文法を間違えているに違いない。
2006/5/26
松竹女優シリーズ 夏目雅子 / CSS / 元ネタ
気になっていた「絶対的配置」?正式な名称は分からないがそういうものを使用してみた。
解像度が高くなれば中心がガラガラになるし低くなればカブり放題ということで、現在の私のポテンシャルではこれが精一杯。
2006/05/23
インテグラフィット / CSS / 元ネタ
1つのボックスの中で1文だけ右寄せ(或いは左寄せ)ができないのが気になる。
どうしようもないので右と下のボーダーを非表示にして対応してみる。
デザインセンスの無さを再確認したページです。
2006/05/22
マグブロックマグネット / CSS / 元ネタ
涙の処女作。改行する度にspanを区切らないといけないの?という疑問が出る。
テキストアラインでセンタリングをかけても出来たり出来なかったりで最後の値段表示はdivで無理矢理センタリング。
月額125円からの「さくらのレンタルサーバ