Ads by Google
--.--.--.-- Posted in スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
コーディング
Sun.28.06.2009 Posted in CSS
2 comments 0 trackbacks
久方ぶりに休みを使ってコーディングをカタカタ...。
ヤバイ、本の知識だけじゃ駄目です。やっぱり実際の経験がものを言います...。

CSSに関してなんですが、divのidとclassがごっちゃであります。
どのレベルからがclassになって、どのレベルからがidになるのかというセオリーをいまいち理解できていないようです。
うん。いままで適当なコーディングを行ってきた罰ですな、これは。

一応、グデグデのXHTMLとCSSを置いてみたり...。
あまり商用なんかに使えるデザインのCSSじゃぁありません。


reset_design.css
@charset "UTF-8"
/* ==========================
    Author and Copyright
	    Author: l0v0lxxx
		Created: 2009-06-27
========================== */

* {
	margin: 0;
	padding: 0;
	line-height: 1.6;
	color: #000;
	font-style: normal;
	font-weight: normal;
	font-size: 100%;
}
base_design.css
@charset "UTF-8"
/* ==========================
    Author and Copyright
	    Author: l0v0lxxx
		Created: 2009-06-27
========================== */

body{
}
  #container{
    position:absolute;
    left: 50%;
    top: 50%;
    margin-left: -400px;
    margin-top: -300px;
    width:800px;
    height:600px;
  }
main_desing.css
@charset "UTF-8"
/* =============================
    Author and Copyright
	    Author: l0v0lxxx
		Created: 2009-06-27
============================= */

@import url("reset_design.css");
@import url("base_design.css");

* {
  color: #333;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
}

body {

}

h1 {
  
}

h2 {
  
}

p {
  margin: 0 0 0.5em 0.5em;
  line-height: 1.5;
  text-align: left;
}

a:link { color: #3399cc; }
a:visited { color: #339933; }
a:hover { color: #339933; }
a:active { color: #3399cc; }

strong {
  color: #fc0082;
  font-weight: bold;
}

div#contents {
  margin: 10px 0 0 0;
}

div#leftContents {
  float: left;
  width: 500px;
}

div#rightContents {
  float: right;
  width: 280px;
  margin: 0 0 0 20px;
}

.flame {
  width:500px;
  height:240px;
  overflow:auto;
}
index.html



  
    
    
    
    
    EgoismDESIGN
    
  
  
    

ロゴ

歴史

サンプル

サンプル

サンプル

サンプル

サンプル

サンプル

サンプル

サンプル

サンプル

サンプル

サンプル

サンプル

概要

サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

サンプルテキスト

サンプルテキストサンプルテキスト



XHTMLファイルのCSS読み込み部分以前のtitleやらメタ情報が全て表示されないという、「これ何故現象」が発生...。
あれ?htmlタグもbodyタグも無いぞな...。
<!--FC2 Management--> ってなんぞな...。
ん〜...。

Theme: WEBデザイン « コンピュータ

Tag: CSS XHTML コーディング

Web検定勉強中
Tue.23.06.2009 Posted in デザイン
2 comments 0 trackbacks
WebデザインのWeb検定の勉強中であります。
一応問題集の正答率は80%を超えて、「お、いけるんじゃね?」なんて思ってたら模擬試験で轟沈。
やはり資格試験は油断すると落ちそうです。油断しなくても落ちそうです。

そんなわけで、他に読みたい本がありますが今は我慢の時であります。
このモチベーションがいつまで続くやら...?頑張らないと...。

Theme: WEBデザイン « コンピュータ

Tag: Design 資格

勉強会を探せ
Thu.18.06.2009 Posted in 勉強会
2 comments 0 trackbacks
IT 勉強会カレンダー

Webデザイン系の勉強会を探しています。
何か良いのがあれば参加してみたいです。

何だか、勤務地が変わって電車移動の時間が1時間以上出来てから勉強ブーム、読書ブームが巻き起こっています。

Theme: WEBデザイン « コンピュータ

Tag: Design 勉強会

Webデザイン問題集―Web検定、Webデザイナー対応
Wed.17.06.2009 Posted in CSS
0 comments 0 trackbacks
Web検定公式問題集〈2〉Webデザイン問題集―Web検定、Webデザイナー対応Web検定公式問題集〈2〉Webデザイン問題集―Web検定、Webデザイナー対応
(2009/06)
不明

商品詳細を見る

1900円でした。
教科書本に比べれば安くてよかった...。

とりあえず、もっと勉強したら受験してみます。

Theme: WEBデザイン « コンピュータ

Tag: Design

HighslideJSを効果的使用しているブログ
Sun.14.06.2009 Posted in JavaScript
4 comments 0 trackbacks
Sixism
ホント、尊敬にして感嘆であり言葉が出ません。
HighslideJSがhtmlが読み込むことは知っており、実際にWebサイトで全てをポップアップ表示する作りのもの(その当時はLightViewを使用)も作成したことはありますが、ブログに上手く組み込んで記事全体をポップアップ表示するとは...。

このブログでもやってみる事は出来るかな...?
眠いからまた今度にしよう。
と言うわけで、FC2テンプレートを作った事もない私の計画。
改造する箇所はHTMLは不明箇所がありますが、それほど比重は重くないかと予想しています。
問題はポップアップで表示される記事詳細画面のレイアウトの修正の割合が大きいです。
メニューバー等のTop画面に存在する情報を、わざわざポップアップで表示されたページに書き込んではシームレスに記事詳細画面を表示する意味がないからです。
なので、CSSは難儀しそう。

適当に現在の考察。
・aabodyタグ内が記事本文
・<%topentry_title>が記事のタイトル名
・<%topentry_link>が記事詳細へのURL

つまり、aabodyとコメント、トラックバック欄をHighslideJSで表示するようにして、<%topentry_link>を含むaタグにHighslideJSを呼び出すclassを指定すればポップアップ表示するだけなら可能かもしれません。

ただし問題がないわけでもありません。
パッと見た感じコメント欄を含めた記事詳細画面がどのようにして生成されているのかがHTMLを見ただけではちょっと...。
同じ一枚のHTMLファイルなのに、Top画面にはコメント欄とトラックバック欄が表示されないのに記事詳細画面だとコメント欄とトラックバック欄があるというのが良く分からんです。

HighslideJSには同じHTML内に書かれた内容をポップアップで表示させる方法もあるので、その方法を使えば一応Sixismっぽい動きはさせれそうですが、完全に模倣させる方法は今のところ思いつきませんです。
それに、コメント欄、トラックバック欄の表示非表示の条件分岐の方法も今のところ謎です。


また時間のあるときにでも試してみますか。
実際にやってみないと分からない事もあるかもしれませんし...。

Theme: WEBデザイン « コンピュータ

Tag: テンプレート カスタマイズ CSS JavaScript HighslideJS 考察

NEXT PAGE »

topBack to TOP