Webデザインをやり直そうと思った

«Prev || 1 | 2 | 3 | 4 | 5 | 6 || Next»

参考になったデザイン

参考になりそうなデザインを見つけたのでメモ

・図1
画像：画面キャプチャ
ワンブロックどかっと表示したけど、前々から線で四角く縁取る方法が不思議で仕方なかった
DTタグとか使ってるのかと思ったら・・・けっこう違った

・ソース

<div><div><div style="width:100%;">
<div style="width:292px;float:right;"><span>PR</span>
<div id="fyi"><h2>Special</h2>
<p><a href=""><img src="">あああああ<br>あああああ</a><br clear="all"></p>
<p><a href=""><img src="">あああああ<br>「あああああ</a><br clear="all"></p>
<p><a href=""><img src="">あああああ<br>あああああ</a><br clear="all"></p>
</div>
</div>
</div></div></div>

↑
こんだけのdivを使ってるのだ
でも、ソース的には見やすい・・・なるほどね
divの閉じタグもこうやって表示すれば、どの分を閉じているのかがわかってナイス

・図2

これは最上部のメインナビゲーション
かなりの項目があるのだか、とても見やすい
訪問ページも色を変えてわかるようになっているのがすごい・・きっと画像なんだろうな
単純にCSSで背景色を変えてもこうソフトにはいかない
JavaScriptだろうか？？（ソース未確認）

・図3

この区切りもナイス
グラデーションを有効に使ってるなぁ〜
項目の「関連リンク」もテキストなのだ
細い線で各項目の区切りをつけて、タイトル部分の線を太くしてメリハリをつける
あえて文字の大きさは変えない・・・これで「あ、ここはタイトルだ」と見分けがつくのがすごい
真似できそうな感じ(^^)
三角形の見出しも高さを揃えてあって「これはリスト項目だ」って一目瞭然でイイ

う〜む、いろいろ勉強になるのだ

2009年12月02日：デザイン：：zizodo

参考になるデザインとCSSを見つけたのでメモしときます

水草・熱帯魚・昆虫用品の通販専門店　チャーム

イメージ

タグ

<ul class="ce_special_list">
<li><A href="http://AAA/AAA.html"><img src="http://AAA/AAA.jpg"></a>
不動の人気を誇る熱帯魚の代表格。水中できらめく色とりどりのグッピーに酔いしれてみませんか？
</li>
</ul>

CSS

.ce_special_list
.ce_special_list li

これもクラスとタグで範囲を設定しています
なるほどな〜、いい勉強です
liでfloatをかけて文字を右側に回り込むように設定してありました(^^)

2009年11月11日：デザイン：：zizodo

dlタグのデザイン

参考になるデザインとCSSを見つけたのでメモしときます

水草・熱帯魚・昆虫用品の通販専門店　チャーム

イメージ
画像：デザイン

タグ

<dl class="newitem_list">
<dt>
<A href="http://AAA/AAA/">
[11.6] 
bbbbbbbb
</dt>
<dd>
<img src="http://AAA/AAA"></a>
bbbbbbbbbbbbbbbb
 
</dd>
（中略）
</dl>

CSS

.newitem_list dt
.newitem_list dd
の2種類を使い分けてます
最初にdlで背景色を設定すると、こうやって枠線のように使えるんですね

classの後にタグって設定できるんだ！と驚きました（不勉強なだけですが・・）

2009年11月11日：デザイン：：zizodo

細かく段組みする場合は

divでくくったものの、そこが2段になる場合のソースがわかりませんでした
ulやdlでくくるんだろうな〜・・と漠然とは想像つくものの「じゃあどうやって2段目を横に回り込ませるんだ？」となると「floatかけると全部横にいっちゃうしぃ」と？？？の応酬

ここに答えがありました

参考サイト：日本のものづくりをITで支援する｜アヴァシス株式会社

ソース

画面表示

dlの中にulを組み入れるとは思ってもいませんでした
これならタグの意味合いも生かせますもんね

2009年11月10日：デザイン：：zizodo

一列で項目別の設定を

「これ、どうなってるの？」って思わせる興味深いデザインを見つけました

参考サイト：日本のものづくりをITで支援する｜アヴァシス株式会社

ソースを見て「なるほど！」と納得
こんな風に、ulとliとpとspanとclassを使うんですね

ソース

画面表示

そぉかぁ！liはインラインだからspanを使ってこうやって設定するんだ！
これでCSSで間隔をあければいいんだもん

2009年11月10日：デザイン：：zizodo

zizodo.infoリニュ

業務用サイトのリニュがぐんぐん遠ざかっておりますが・・・まだまだ（笑）

このたび、zizodo.infoをリニュしました！

画像：タグで再現

CSSは自作
画像は無料サイト利用
cgiもフリー使用
サーバは自前

・・・こんな感じです
実際に勉強を始めてから要した時間は数ヶ月！
一からの勉強だったのでおおまかに理解するのにも時間がかかりすぎました

でも、勉強した分は無駄にしません！
これを基盤に業務用サイトのリニュにとりかかります(^o^)

ちなみにコレはDreamweaverでタグ組みしたものです
けっこうPhotoshopで作ったの（下）と似てるでしょ？

2009年11月09日：デザイン：：zizodo

トップページだけでもやっとこさ

まだたたき台だけど自分の「いんふぉ」サイトのリニュデザインができあがった
写真は無料サイトからいただいてきた（加工自由）
こうしてデザインにしてみると「詰めが甘い」部分がたくさんある
余白を考える時にも、適当に「5px、10px」と5単位でやってしまうので（計算しているとわからなくなってしまうんだもん）、見た目が単調っぽくなる
これは実際にCSSで調整しないと・・・普通の人ってどうやってるんだろう？？

今回、参考にさせてもらったサイト（感謝の意をこめて掲載）

ゆんフリー写真素材集
（写真がキレイ）
無料デザインテンプレートCoolWebWindow
（デザインがとても参考になるし、商用利用可だし）

ちなみにこれはPhitoshopでのデザイン画面です

2009年10月28日：デザイン：：zizodo

携帯のCSS

「携帯もCSSに対応しているんだ！」・・と数日前にしったばかりなんですが「じゃあ、どこまで対応しているんだろう？機種に寄って違うんだろうか？」って事で悩んでネット検索

とても良いサイトが見つかった！（抜粋）
サイト名：携帯でCSSを用いる場合

携帯端末におけるCSSの反映は、そのブラウザやバージョンによって異なっています。

auでのCSS

HTML/XHTML共にCSSに対応している。

link要素による外部CSS、style要素、style属性、全てが有効。

セレクタはclass/id指定が有効。

"text/html"を推奨しているが、"application/xhtml+xml"も比較的新しい機種では対応している。ただし、文字コードは"shift_jis"が安全です。

i-modeでのCSS

CSSを反映させたい場合はXHTMLで文書を作成する。

link要素による外部CSSは無効、style要素には、【a:link、a:focus、a:visited】、を指定できるが、これ以外は無効。基本的にstyle属性で記述。

class|id指定は無効。

MIMEタイプは"application/xhtml+xml"、"text/html"では反映されない。

対応機種はFOMAのみ。(ユーザーエージェントにDoCoMo/2.0が含まれ、D2101V、P2101V、SH2101V、T2101V、N2001、N2002、P2002を除く機種)

iモードブラウザ2.0に関しては、この限りではありません。

SoftBankでのCSS

基本的に、SoftBank3G機種では、HTML/XHTML文書、どちらも対応している。

link要素による外部CSS、style要素、style属性、全てが有効。

セレクタによるclass/id指定が有効。

"text/html"を推奨しているが、"application/xhtml+xml"も比較的新しい機種では対応している。

旧VodafoneとSoftBankでは若干CSSに関する解釈が異なっており、J-PHONEではJ-PHONE/5.0/からXHTML文書でCSSを用いることができる。