上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

久方ぶりに休みを使ってコーディングをカタカタ...。
ヤバイ、本の知識だけじゃ駄目です。やっぱり実際の経験がものを言います...。

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

  
    
    
    
    
    
    
  
  
    

	  

        

		

	      

		  

	        
サンプル
		    
サンプル
		    
サンプル
		    
サンプル
		    
サンプル
		    
サンプル
		    
サンプル
		    
サンプル
		    
サンプル
		   
サンプル
			
サンプル
			
サンプル
		  
		
	  
	  

	    

	      

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

	      

	      
お問い合わせ
		
	  
    
  

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

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

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

IT 勉強会カレンダー

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

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

Web検定公式問題集〈2〉Webデザイン問題集―Web検定、Webデザイナー対応 (2009/06) 不明 商品詳細を見る

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

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

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っぽい動きはさせれそうですが、完全に模倣させる方法は今のところ思いつきませんです。
それに、コメント欄、トラックバック欄の表示非表示の条件分岐の方法も今のところ謎です。


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