前回CSSでの3カラムレイアウトについてコードを記述した。しかしBoxA、BoxB、BoxC全てが左にフロートしている組み方はあまりない。BoxA、BoxBをDivで囲んだものと、BoxCで2段組にするという「2段組」を基本にしたやり方がよく使われる。今回そのやり方でソースを記述してみた。

SITE TITLE

    

      

        

          
MENU
          
MENU
          
MENU
          
MENU
          
MENU
          
MENU
        
      
    
    

      

        
SUB TITLE
	      
text text text text text text text text text text text
           text text text text text text text text
	      
text text text text text text text text text text text
           text text text text text text text text te
        
    
  




    

           

              
MENU
              
MENU
              
MENU
              
MENU
              
MENU
              
MENU
           
    






FOOTER

@charset "shift_jis"; 
/* ----------------------- 
common.css 
共通 
------------------------ */

/*初期設定*/
body,h1,h2,h3,p,div,ul,ol,li,dl,dd,dt,
table,form,blockquote,pre,address{
  margin : 0;
  padding : 0;
}

/*個別整形*/
h1,h2,p{
    margin-bottom:0px;
	margin-top:0px;
}

/*全体*/
#wrapper{
	width:800px;
	border: 1px solid #000000;
	margin-right: auto;
	margin-left: auto;
}

/*ヘッダー*/
#header{
	background-color:#FF0066;
	margin: 0px;
	padding: 0px;
}

/*フッダー*/
#footer{background-color:#FF33FF;}

/*box_aとbox_bを囲むdiv*/
#box_ab{
	float:left;
	margin: 0px;
	padding: 0px;
}

/*左メニュー*/
#box_a {
	float:left;
	width:150px;
	background-color:#FF99FF;
	height: 300px;
}

/*センターコンテンツ*/
#box_b {
	background-color:#FFCCFF;
	float: left;
	width: 500px;
	height: 300px;
}

/*右メニュー*/
#box_c {
	float:right;
	width:150px;
	background-color:#CC99FF;
	height: 300px;
}

/*textエリア整形*/
#navi{padding:1em 1em; 20em; 1em;}
#box_abc {
	float: left;
}

|  この記事に拍手   |   ウェブデザイン技能検定2級対策問題集購入はこちらへ   |

今回は最も頻繁に使用されるであろうCSSでの3カラムレイアウトについて。CSSでの3カラムの組み方はいろいろある。左から順にBoxA,BoxB,BoxCと横並びにする場合

今回書いたコードは4であるが、このやり方はあまり見かけない。簡単な組み方だけに、全体を囲んでいる#mainの幅は#sidemenuの幅+#contentsの幅+#affiriateの幅が同じでないとレイアウトが崩れる。

  

    ヘッダエリア
  
  
  
  

    

      メニューエリア
    
	
    
 
      コンテンツエリア
    
	
    

      広告用エリア
	
    
    
  
  
  

    フッタエリア
  
  

@charset "shift_jis";
/* -----------------------
common.css
共通
------------------------ */

body,h1,h2,h3,p,div,ul,ol,li,dl,dd,dt,
table,form,blockquote,pre,address{
  margin : 0;
  padding : 0;
}

body{
  width : 100%;
}

/* ヘッダー */ 
#header{
  width : 760px;
  height : 50px;
  margin : auto;        /* 標準モードなので、これでセンタリング */
}

/* メニューと本文と広告部分をひとくくりするためのID */
#main{
  width : 760px;        
  margin : auto;
}

#sidemenu{
  width : 150px;
  float : left;
}

#contents{
  width : 460px;
  float : left;
}

#affiriate{
  width : 150px;
  float : left;         /* 指定しないとFirefox,Operaで落ちる */
}

/* フッター */
#footer{
  width : 760px;
  clear : both;
  margin : auto;
}

|  にほんブログ村 ＩＴ系資格 へ1票  |  ウェブデザイン技能検定2級対策問題集購入はこちらへ  |

ストリーミング。ちなみに使用するプロトコルはUDP・TCP・HTTPである。ネット回線のインフラの整備が進んで動画もストレスを感じることなく見れるようになった。またYouTube立ち上がって動画が流行りだした。昔どこかのブログで「いつかTVとネットの境界線がなくなるであろう」という記事を見たことがあるが、みなさんはどうお考えであろうか？

XHTMLを使用するときのメディアタイプはapplication/xhtml+xmlである。

CGM系のサイトを利用してサイトのアクセス向上をはかることを一般的にSMO(Social Media Optimization) / ソーシャルメディア最適化と呼ぶ。

以下の情報を使用してPHPでDBに接続するコードを書け。

mysql関数のmysql_connectを使用する。引数はサーバ、ユーザ、パスワード、新規リンク、クライアントフラグをとるが、新規リンク以降は省略可能。ポート番号はデフォルトで3306なのでこちらも省略可能。模範解答としては...

$connection = mysql_connect( 'localhost' , ' db_user ' , ' db_password ' ) ;

以下は現在の日付や時刻等の情報を表示させるJavaScriptのコードである。[  ]の中を答えよ。

Dateオブジェクトは、日付や時間などを扱うためのメソッドである。これを使用することで、時間の計算や日付の換算等を簡単に行うことができる。

CSSで定められる線種のスタイルでは点線（dotted）、破線（dashed）という線種がある。しかし、IEでは線の太さを1ピクセル（px）で表示した場合、点線が破線で表示されてしまう。模範解答としては...

a{ text-decoration: none: border-bottom : 1px dashed #00C }　

次のコードの誤りを正せ。

ユーザから入力された値にタグなどが入っている可能性もあり(クロスサイトスクリプト)、無害化(サニタイジング)する必要がある。有効な関数としてhtmlspecialchars()がある。

問題文は少し変えたが、実際に2級の試験でこのような問題が出題された。CGIはPerlが主流だが実はC言語でも構築できる。他にはRubyなど...C言語だとコンパイルが必要になるがPerlはコンパイルは必要ない。ちなみにCGIスクリプトは、実行ファイルなので、パーミッションを「755」に設定しなければ実行はできない。