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

※仕切り直しということで、再スタートしました。再スタート記事は→photoshopで画像パーツを作り、CSSを記述 その1先ずはこんな風にやりますよ【概要】←こちらに移動してください。

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

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

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

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

今日の分のサンプルページ
http://boxboa.jp/weblog/sample/css_design20090108.html
今日の分のCSS
http://boxboa.jp/weblog/sample/css/css_design20090108.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>CSSの記述と画像パーツをphotoshopで作る・サンプルページ カナ・ログ</title>
<link rel="stylesheet" href="css/css_design20090108.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 id="header">
  <h1>サンプルのページ、今度は画像パーツもphotoshopで作りますよ</h1>
  <p>カナ・ログ2009.1.8記事よりサンプルのページです</p>
  <ol>
    <li><a href="http://boxboa.jp/weblog/">カナ・ログ トップ</a></li>
    <li><a href="http://boxboa.jp/weblog/?p=1151">カナ・ログ2009.1.8記事 CSSの記述と画像パーツをphotoshopで作る その1 先ずはこんな風にやりますよ【概要】</a></li>
  </ol>
</div>
<div id="container">
  <div id="content">
    <h2>記事タイトル</h2>
    <ul>
      <li>
        <dl>
          <dt>投稿者</dt>
          <dd>カナキ</dd>
        </dl>
      </li>
      <li>
        <dl>
          <dt>投稿日</dt>
          <dd>1.8-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.8記事内容に添って外部cssでスタイル定義してます</p>
  </div>
  <div id="side">
    <h2>アーカイブ</h2>
    <dl>
      <dt>ブログ記事</dt>
      <dd>
        <ul>
          <li><a href="http://boxboa.jp/weblog/?p=1151" title="詳細ページへ移動">1.8 CSSの記述と画像パーツをphotoshopで作る その1 先ずはこんな風にやりますよ【概要】</a></li>
        </ul>
      </dd>
      <dt>サンプルページ</dt>
      <dd>
        <ul>
          <li><a href="css_design20090108.html" title="詳細ページへ移動">1.8 サンプルページ</a></li>
        </ul>
      </dd>
    </dl>
  </div>
</div>
<div id="footer">
  <address>
  ©2006-2009 カナ・ログ.all right reserved.
  </address>
</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;
}

/*レイアウト*/
#header,
#container,
#footer{
margin:0 auto;
text-align:left;
}

#header,
#footer{
width:760px;
padding:20px;
}
/*IE6*/
* html #header,
* html #footer{
width:800px;
}

#container{
width:800px;
}

#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;
}

コメント / トラックバックはありません

  1. より:

    おばんです(^-^)

    携帯から見てるので、内容はよくわかりませんが、「フォトショ」と出てたので食いつき(笑)

    フォトショ難しいです(汗)
    年賀状で、今回少しいじらせてもらったんですが、チンプンカンプン(滝汗)
    イチイチSブチョに助けを求める始末…。
    忙しい時期だったんで、ヤバかったッス。
    イラレも使えないし。

    少し勉強しなきゃ!ですね(;^_^A

  2. カナキ より:

    みっちゃん、毎度。
    フォトショに着手しましたか。
    以前、ヨ―コちゃんからヘルプの電話もらいましたよ(使い方の)。
    不明点はカナキ・コールセンターまでお問い合わせください。