photoshopで画像パーツを作り、CSSを記述 その1先ずはこんな風にやりますよ【概要】

※仕切り直しという訳で、タイトルも変えました。htmlの変更箇所はbody要素直下にdiv要素pageクラスを追加して、その2「ページ本体にシャドウ」の内容はdiv要素pageクラスに定義します。

以前シリーズで「CSSの記述」というのをやったけど、今度はその最終サンプルページを元に画像パーツを配してデザインを作り上げていくシリーズをやりたいと思います。

CSSの記述と画像パーツをphotoshopで作る、のスタートページサンプル左図はスタートページ、前回シリーズ最終回ページを少しだけ文言等修正とbody直下にdiv要素を一つ追記しています。フローとしては、

  1. body要素の背景画像から、次headerというかんじに画像パーツをphotoshopで作る
  2. 画像作成のフローをいちいち解説
  3. cssでhtmlに定義
  4. サンプルのhtmlをプレビュー
  5. こんな感じで手間暇かけて、まったりと進行予定

とりあえず、スタートページ(今日の分)の閲覧とcssデータは以下より。

今日の分のサンプルページ
http://boxboa.jp/weblog/sample/css_design200901010.html
今日の分のCSS
http://boxboa.jp/weblog/sample/css/css_design20090110.css cssファイル 3KB

html、cssのソースコードは続きを読むから(Read more…)

スタートページ、htmlのソースコード
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>photoshopで画像パーツを作り、CSSを記述・サンプルページ カナ・ログ</title>
<link rel="stylesheet" href="css/css_design20090110.css" type="text/css" media="screen" />
<link rev="made" href="mailto:info@boxboa.jp" />
<link rel="index" href="http://boxboa.jp/weblog/index.php" title="索引" />
</head>


<!--ここから表示部分-->
<body>


<!--ここからページ本体部分-->
<div class="page">


  <!--ここからheader-->
  <div id="header">
    <h1>サンプルのページ、今度は画像パーツもphotoshopで作りますよ</h1>
    <p>カナ・ログ2009.1.10記事よりサンプルのページです</p>
    <ol>
      <li><a href="http://boxboa.jp/weblog/">カナ・ログ トップ</a></li>
      <li><a href="http://boxboa.jp/weblog/?p=1237">カナ・ログ2009.1.10記事 photoshopで画像パーツを作り、CSSを記述 その1 先ずはこんな風にやりますよ【概要】</a></li>
    </ol>
  </div>
  <!--headerここまで-->

  <!--ここからcontainer-->
  <div id="container">


    <!--ここからcontent左カラム-->
    <div id="content">
      <h2>記事タイトル</h2>
      <ul>
        <li>
          <dl>
            <dt>投稿者</dt>
            <dd>カナキ</dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>投稿日</dt>
            <dd>1.10-2009</dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>カテゴリー</dt>
            <dd>photoshop,css,xhtml</dd>
          </dl>
        </li>
      </ul>
      <p><img src="img/img_20090108.png" title="大枠ブロックのレイアウトと背景カラー" alt="大枠ブロックのレイアウトと背景カラー" width="200" height="144" />前回はCSSの記述のみだったので、今回はデザインパーツ(画像パーツ)をphotoshopで製作します。photoshopとcssのTipsをシリーズでお送りする予定です。(以下ダミーテキスト)</p>
      <p>記事本文、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト。</p>
      <h3>今更なんでカナキはcss、photoshopの記事を書いたかなど</h3>
      <dl class="tips">
        <dt>Tips、チュートリアル記事を書く際の注意</dt>
        <dd>
          <ol>
            <li>よくした調べをする</li>
            <li>もし突っ込みが入った際は潔く非を認める</li>
            <li>誤ったtipsは削除せず、del要素(打ち消し線)で定義し、正規コンテンツを追加訂正する</li>
            <li>だからカナキはあまりtips記事を書かないわけですが…</li>
            <li>思い切って書いた</li>
            <li>そしてシリーズ2回目</li>
            <li>言及、歓迎!(お手柔らかに)</li>
          </ol>
        </dd>
      </dl>
      <p>このサンプルhtmlは2009.1.10記事内容に添って外部cssでスタイル定義してます</p>
    </div>
    <!--content左カラムここまで-->

    <!--ここからside右カラム-->
    <div id="side">
      <h2>アーカイブ</h2>
      <dl>
        <dt>ブログ記事</dt>
        <dd>
          <ul>
            <li><a href="http://boxboa.jp/weblog/?p=1237" title="詳細ページへ移動">1.10 その1 先ずはこんな風にやりますよ【概要】</a></li>
          </ul>
        </dd>
        <dt>サンプルページ</dt>
        <dd>
          <ul>
            <li><a href="css_design20090110.html" title="詳細ページへ移動">1.10 サンプルページ</a></li>
          </ul>
        </dd>
      </dl>
    </div>
    <!--side右カラムここまで-->


  </div>
  <!--containerここまで-->

  <!--ここからfooter-->
  <div id="footer">
    <address>
    ©2006-2009 カナ・ログ.all right reserved.
    </address>
  </div>
  <!--footerここまで-->

<!--pageここまで-->
</div>


<!--表示部分ここまで-->
</body>
</html>
スタートページ、cssのソースコード
@charset "utf-8";
/* CSS Document */

*{
margin:0;
padding:0;
font-size:100%;
}

li{
list-style:none;
}

body{
background:#fff799;
font-family:Arial,sans-serif;
color:#333;
text-align:center;
}

/*レイアウト*/
.page{
width:800px;
margin:0 auto;
text-align:left;
}

#container{
width:800px;
}

#header,
#footer{
padding:20px;
}

#content{
width:570px;
padding:20px 10px 20px 20px;
}
/*IE6*/
* html #content{
width:600px;
}

#side{
width:180px;
padding:20px 10px;
}
/*IE6*/
* html #side{
width:200px;
}

#container{
overflow:hidden;
}

#content,
#side{
float:left;
}

/*カラー*/
#header{
background:#333;
}

#container{
background:#fff;
}

#footer{
background:#000;
}

#side{
background:#e4e4e4;
}

#header,
#footer,
#header a{
color:#fff;
}

/*テキストサイズ*/
h1{
font-size:160%;
margin:0 0 1em 0;
}
/*IE7*/
*:first-child+html h1{
font-size:150%;
}
/*IE6*/
* html h1{
font-size:150%;
}

h2{
font-size:140%;
margin:0 0 0.5em 0;
padding:0 0 0 0.5em;
}

#side h2{
font-size:110%;
}

h3{
font-size:110%;
margin:0 0 0.5em 20px;
}

h2{
border-left:solid 1em #333;
}

/*各エレメント*/
#header ol{
padding:1em 0 0 0;
}

#header ol li{
display:inline;
padding:0 1em 0 0;
font-size:80%;
}

#content ul{
overflow:hidden;
margin:0 0 1em 0;
border-bottom:dotted 1px #666;
color:#666;
font-size:80%;
}
/*IE6*/
* html #content ul{
height:1%;
}

#content ul li{
float:left;
margin:0 1.5em 0 0;
}

#content ul dd{
margin:-1.2em 0 0 0;
padding:0 0 0 5.5em;
}

#content p img{
float:left;
margin:0 10px 0 0;
padding:3px;
border:solid 1px #333;
}

#content p{
overflow:hidden;
margin:0 0 1em 0;
}

#content h3{
clear:both;
}

#content dl.tips{
margin:0 1em 1em 1em;
padding:1em 2em;
border:dotted 1px #999;
background:#e3e3e3;
}

#content dl.tips dt{
font-weight:bold;
}

#content dl.tips dd{
margin:1em 0 0 4em;
font-size:90%;
}

#content dl.tips dd li{
list-style:outside decimal;
}

/*sideカラム*/
#side dt{
font-size:90%;
}

#side dd{
margin:0 0 1em 0;
}

#side li{
list-style:disc outside;
margin:0 0 0.5em 1em;
font-size:80%;
}

#side li a{
color:#333;
}

#side li a:hover{
color:#cc6600;
}

/*footer*/
address{
font-style:normal;
}

コメント投稿期間が終了しました。