August 20171 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

リニューアル

JUGEMテーマ:写真


【Webデザインのこと】

本家サイトのリニューアルをやっとこさ完了しました。

ひとつ前のリニューアルをしている最中に
デザインに飽きてしまい(汗
今回は「甘い」感じのものはやめて
どちらかというと少しPOPなテイストで。

サイトの作りは最近個人的にマイブームだった1ページサイトにして
雑誌や新聞の雰囲気にチェンジ。

使っている色はたくさんありますが
色辞典を使ってまとめた色です♪

今回もHTML5とjQueryの勉強もかねて。
仕事で少し使ったのを復習しながら作業をしました。

本当はブログで少しずつ中継(?)めいたことをやろうと
したのですが、それよりも先にできてしまったので(汗
かなり乗ってきて(笑)2日間でばばーっと作ってしまいました。
といっても、IEテスターで6と7でもチェックしたり、
細かなこだわりが意外と入っております。
…誰も気が付かないような細かなところですが(汗

本当はwordpressで更新システムを入れようとしたのですが
逆に入れると大変な作りにしてしまったため
このあたりは検討しながらやっていこうかと。

そして、膨大な過去の写真をまとめてアップする作業も
まだ残っております(遠い目

昨年以上のものつくりという目標で今年は
過ごそうと思っていたので、まずはひとつクリア。

今年中に10個以上はサイトを作ろうと考えています(*^_^*)

次は本家サイトのスマフォサイト制作を…
Web制作は楽しいです♪

**********

Atelier*Spoonの
写真のワークショップのお知らせです。

※1月はお休みです。2月から再開予定です♪

こちらからどうそ♪



デザイン | ブログリニューアル

JUGEMテーマ:写真


【WEBデザイン】

バタバタっとブログのリニューアルを行いました。
少しずつ進めるつもりが、久しぶりのリニューアルで
途中から楽しくなってしまい、大枠を終了…

今回のテーマはカップケーキ(笑
最近お気に入りの素材集をちょこっと使いたくて
ちょっとした箇所に配置しています。

仕事と違って、自分の好きなように出来る事って
なんて楽しいんだろう…と久しぶりに心がワクワクとしてしまいました。

サイドバーはまだ触っていないので
もう少しさわりたいと思っています(*^_^*)
自分の本家サイトもリニューアル途中なので
また進めたい熱がぐぐーんと上がってきてしまいました。

…時間がもっとほしいです〜〜本当に!

*****

リニューアルをしている際にも感じたのが
以前はちょっとしたカスタマイズでも四苦八苦していたのが
今では自分の思い通りに出来る楽しさ。

こうたい。
ああしたい。
ってことを悩む事なく先に手が動く事というのは
数年前の自分ではありえない事でした。

私がアフロの親ばかサイトを制作した頃は
まだブログというものも存在していなくて
ビルダーで一生懸命作った記憶があります。
その頃はホームページを作る事がとにかく楽しくて楽しくて
いつかホームページを作る仕事をしたいなって
漠然と考えていました…現実はそんな甘い気持ちでって
思うものの、「好きこそものの上手なれ」。

やっぱり好きだという事が一番大切なのかもしれません。

はるちんと始めたSpoonも2人で
「いつか本が出せたらいいね」
「アトリエを持てたらいいね」
なんて夢の話をしていたのが2年前。

私の人生の持論のひとつ
「夢は努力すればいつか叶う」
って言葉も本当だと実感している毎日です。
でもそれもはるちんと「好きな事を続ける」って事をした
結果だと思っています♪

私の持論というよりも、20年前に大切な言葉を
くれた先生のおかげです。

これからも好きな事、夢を追いかける事
何よりも努力をしていく事を頑張っていきたいと思います。

**********

Atelier*Spoonの
写真のワークショップのお知らせです。

こちらからどうそ♪



**********

インプレスジャパンさんから
Atelier*Spoonの2冊目の本が発売されました。

はじめてのHappyカメラレッスン

**********

現在本家サイトリニューアル中↓

デザイン | ワイヤーフレーム

JUGEMテーマ:写真


【WEBデザイン】

パソコンの学校でworpress講習に切り替わり
かなり楽しく勉強しています。

数年前worpressを触ったときと全然違って
こんなに進化したんだとびっくりしました。

CMSではMTと同じくらい有名になったworpress。
最近ではCMSを望むお客様も多くて
いっそがっつりと勉強をしようと考えて
自分のサイトのいくつかをwp化しようと
数日サーバー構成を見ていたのですが
残念ながら今リニューアル中の本サイトでは
データーベースのバージョンが古いため
今のworpressが動かない事が判明(涙

そして第二候補だったお菓子のサイトのサーバーむNG。
ということで、紙と写真のサイトをwp化しようと思っています。

以前facebookでのお知らせをしたcriwaのサイトは
最初からworpressで組もうと思っています♪
こちらはそんなに機能を沢山使うわけではないので
photopeのサイトの構想を考えていたら楽しくて
眠れなくなりました(笑

**

そんなこんなで、デザインを考えはじめたのですが
最初にデザインを組むときにすることが
以前も記述しましたが「ワイヤーフレーム」の作成です。

DTPでいうレイアウトなのですが
私は構成を考えながらワイヤーフレームを作成するのが
一番楽しかったりします♪

後でコーディング、デザインを組んでいくことを考えながら
パーツを置いていく作業はとにかくワクワクがとまりません。
これが終わったころには頭の中にもデザインが
出来上がっている事が多いのでとても大切な作業です。

もともと手書きでラフを書いたあと
↑のように部品を置いていきます。
手書きラフもとっても楽しい作業です♪

素敵なワイヤーフレームサイト様。
■私もワイヤーフレーム大好きです♪
http://wireframes.tumblr.com/

■ワイヤーフレームと実際のサイトが見比べます。
http://www.wireframeshowcase.com/

■複雑かつ大企業用のワイヤーフレームに便利
http://webwithoutwords.com/blog/

ちなみにiPadでワイヤーフレームを作成する際
Noteshelでラフを書いた後に
iMockupsで仕上げた後にパーツの詳細なんかは
PCのFireworksというパターンが多いです。

クライアント様とのやり取りの際は
iPadをもって話をしながらさくっと
その場でワイヤーフレームを作成すると
そのあとの効率がはかどります。

**********

いつもの日常がいつも通りではなくなって
それはそれで、自分の今まで怠けていた部分が
引き締まったような気がしました。

「いつもの生活」がどれほど大切な事が
改めて分かったような気がします。

そして、自分にとって絶対だと思った存在も
自分の気持ち次第で絶対では無くなるんだという
そんな当たり前の事を感じた1ヶ月でした。

5月病にかかる余裕もないくらい
あっという間の5月でした。

**********

現在本家サイトリニューアル中↓

デザイン | あいぽんアプリ

JUGEMテーマ:写真


【WEBデザイン】

かれこれ数年間WEBの世界にいるのに、
実は個人のGoogleアカウント…もっていなかったのです(汗

これは皆にかなり驚かれるのですが
gmailアドレスも全く必要を感じなかったし
Googleマップは別にその都度調べればよかったし、
カレンダーだってきちんとアプリで管理すれば
まったく不便に感じませんでした…

つい先週igoogleって便利かな?って
何気に見てみたら…あれ?evernoteちゃんがいないかい?
私の大好きな象さんがいないかい?
そう思ったらあっという間にgoogleアカウントゲット(笑

iGoogleいいですね。
はい…今ごろですみません(汗
なにより象さんノートの検索と気軽に書き込めるガジェットが
かなりのお気に入りです!

そんな事を先日Google大好き(?)なYちゃんに言った所
まずは今までGoogleアカウントをもっていなかったことを
なじられ、笑われたのですが(遠い目
カレンダーも使えるよ〜と熱く語られました。

ほほう。っとあまり興味もなかったのですが(笑
まずは使ってみて使えないか決めてみようと
アプリをいろいろ検索していました。

Yちゃんの言うカレンダー同期をとりあえずして
ふふーんと思っていた所、
またしても愛する象さんマークの新作アプリを発見!
そしてevernoteと同期できて、googleカレンダーとも
同期ができる「Egretlist」を発見!!

しかもこの2つの同期がまた最高に便利な事に気が付いて
うひょ〜うひょ〜と思ってしまいました。

画像にすると↑上記の図のようなワークステーション(?)が
できたので、めんどくさいと一瞬思うのですが
慣れてくるととんでもなく私のツボのステーションが出来上がりました。

**********

■メモ書き

私のやりたかったこと。

1.evernoteへの簡単なTodoリストの作成の同期

2.Todoリストの中でこれだけはGoogleカレンダーに
のせたい!というのがやりたい。
※1日のTodoがとんでもなく多いため
翌日へ繰り越すものだけカレンダーと同期させたいなど…

3.Todoリスト以外のevernoteへの簡単なメモ書きは
カレンダーとは切り離したい

4.3のような事もやりたいけど、evernoteに画像のアップもしたい。

・・・・・こうあげるとかなりわがままです。

ようはTodoリストとスケジュールは別で管理しながらも
場合によって同期も選べて出来たらいいな〜なんていうとんでもない事なのです。

そんなわがままもPosteverとEgrelistで簡単解決!

特にこの二つのアプリともに同期をお勧めしているわけでも
無いと思うのですが、同じ日にダウンロードしたので
すこぶる快適な使い方を発見したという
偶然の繋がり…

【Posteverのいいところ】
・メモ帳変わりに簡単にevernote送信。
(私はあくまでも速さ&気軽さにこだわってます)
・詳細を記述するように設定すると
「タイトル」「チェックリスト(todoリスト)」が作成できる
・メモが一つにまとめっていて見やすい。

【Egretlistのいいところ】
・デザインがとってもおしゃれ。
・evernoteのノートにtodoをつけることができる。
※たとえば、タグのチェック項目を作っておいて
そのタグを覚えたらチェックしてくなど勉強機能としても使える!
・googleカレンダーに選んだtodoリストのみを同期できる。
・Posteverとの相性が抜群でPosteverで作成したtodo
リストをgoogleカレンダーに同期できるのかも選べる。
・リストに簡易的に画像をつける事ができる。
・リストにメモをつける事ができる→これでgoogleカレンダーでいう
「詳細」を記述できる。

私のわがままをすべてやってくれたこの2つに感謝です!

*****
あとはiPadとiPhoneでそれぞれのカレンダーやメモと
Googleアカウントを繋げたらGoogledocsやカレンダーとも
同期が出来て、本当に便利さを感じまくりな1日でした。

いやあ、Googleアカウントの便利を痛感しました(ぺこり。

**********

現在本家サイトリニューアル中↓

WEBデザイン | facebook

JUGEMテーマ:写真


【WEBデザイン】

ここ最近facebookで色々と格闘中です。

クリエイターとはかっこいい言い方ですが
「ものつくりの好きな人」の輪を繋げていくサイトを
制作したかったのですが、まずはfacebookでと
ただ今制作中です。

クリエイターの輪という事で「criwa(くりわ)」といいます。

物つくりをする人同士で仕事をしたり
一緒にイベントが出来たらと思っています。

まだ準備中ですが(画像をはっつけただけです(汗))
facebookをしている方で楽しい事が出来たらと。
勿論していない方でも参加表明してくれる方も多いので
やっぱりサイトをきちんと作らないとですね(遠い目

いつか一緒に冊子を作ったり、イベントが出来たら嬉しいなあ。

イラストレーターさん、フラッシュクリエイターさん
お花屋さんや、ライターさん、デザイナーさんに写真家さん。
編み物や、お菓子作りの得意なクリエイターさんまで…
参加表明をしてくれた皆さんに感謝です。
少しずつ輪が広がり、さらには強力な輪が出来て行ったら嬉しいです。

facebookで始めたのには少しだけ訳があって。
匿名ではなく実名であること。
趣味とかではなく、きちんと仕事として
繋がりたいという事がとても大きいです。
信頼関係がすでにできているクリエイターさんたちも
多いので、これからの繋がりも大切にしていきたいと思っています。

まだ準備中ですが…

→criwa

少しずつfacebookのページの作成中継なんかも
ご紹介していこうと思っています。

**********

facebookは日本はまだまだ普及はしていないとのこと。
確かに実名であることは普及しない一番の理由で
それだけ日本人は抵抗があることなのかもしれないです。

ページの作成や急な仕様変更なんかも
開発者や技術者もおいてけぼり(涙
おかげでかなり制作に苦労しました。

なかなかアプリ登録が出来ず格闘してしまいました。
一度運よく登録できたのですが、
それ以降は全く登録できず…しかもまだ放置…

そんなヘンテコな苦労もあったので
運よく登録できたcriwaはある意味運命なのかもと
ついつい思ってしまいます。

**********

現在本家サイトリニューアル中↓

デザイン | コーディング作業

JUGEMテーマ:写真


【WEBデザイン】

本家サイトの方のコーディング作業を少し進めました。
(まだ途中です)

CSSを組み込んでいくとあら不思議。
あっという間にデザインが変わっていきます。

CSSとは、HTMLを飾っていってくれるもので
欠かせないものとなっています。

CSSの存在を知らなくても、
いつの間にかお世話になっている方も多いです。

文字の色が変わっていたり、文字の大きさが変わっていたり。
背景色や背景画像の指定などもCSSで行っています。

そんなこんなで最初にお世話になるのが
「リセット」を指示するファイルです。

見出しをつけようとして、とんでもない大きな文字になったり。
上にぴったりと合わせたいのに、無駄な余白が出たり。

プラウザによって持っているクセ(?)を一度リセットしてしまう
魔法の言葉なのですが、使うコーダーさんと使わないコーダーさんに
分かれるのではないでしょうか。

私は以前は使わない派だったのですが
正直使うと、楽ちん…時間の短縮になるので
ずっと使用しています。

さらには、今回はHTML5も使用する関係上、
やっぱり欲しいと思ってリセットしました。
参考にするのはyahooのYUIですが
正直これだけでは足らない&使いにくく自分用に直しました。
サイトごとにResetをしたいものが変わっていくので
やみくもにResetするのも好きでは無かったり。

さらに色々なCSSを一気に読み込むimport.cssというのが
ありますが、最近では見直しをされて使わない方が
いいとも言われて、記事を拝見したらもっともだなあ〜と
深く納得してからは出来るだけ使わないようにしています。

【参考記事】
Screw-Axis

難しい話はさておき…
CSSで組む際にかなり便利なアイテム。
「FireBug」というFirefoxのアドオンがあります。
(chromeの拡張機能にもありますが使い勝手が微妙です)

これは、HTMの部分が何のCSSが影響されているか
一目でわかるすぐれものです!
しかもCSSの編集などが出来て、効果もすぐに見る事が
できて、WEBサイト制作者にはかなり重宝するアイテムです。

見た目がどう見てもゴキさん(笑

使えるのにどうしてもゴキさんと呼んでしまう私を
お許しください。

HTML5にした影響もあって、IE6がかなりヒートアップして
困らしてくれました(遠い目
またそれについては後日…

**********

記事内にも書きましたが
私の主要プラウザはFirefoxです。
IEも仕事柄切っても切れないものなのですが
Firefoxにすんなり移行してしまいました。

ゴキさんも含めてアドオンがかなり充実していて
マウスジェスチャー、ページキャプション
携帯やスマフォなどの疑似プラウザなど
言い出したらキリが無いほど好きなものが多くて…
Xmarksも職場、iPhone、iPadすべてで
共有でブックマーク管理を行っています。

基本的に、ディスクトップとブックマークと
ノートの管理が出来ない人は仕事もできないと
よく言われているので、この3つについては
ものすごい徹底っぷりです(汗

最近はノート=evernoteになったので
余計に管理をしまくっています。
いつでも時間のあるときに少しでも勉強ができるように
始めたevernoteですが、仕事に趣味にすごく
役立ってくれていて、なんでも頼りっきりになっています。
困ったときは、ネットで調べるよりも
evernoteで調べるほどになりつつあるので
これからも自分の辞書と思いながら作成していこうと思います。

**********

現在本家サイトリニューアル中↓

デザイン | favicon

JUGEMテーマ:写真


【WEBデザイン】

お気に入りに登録したり、アドレスなどでよく表示されている
↑こういう画像の事を「favicon(ふぁびこん)」といって
ちょっとした工夫なのですが、かなり可愛いです。

今回本家サイトには上記のアイコンではなく
ローズにアイコンを変更してしまいましたが
個人的にはこういうドット絵をぽちぽちっと作っていく作業が
かなり大好きです。

私の作り方はフォトショップでまずは
画像を16×16ピクセルサイズで作成します。

そのあと画像で書き出し(JPG、GIF)をした後、
IcoFXで.icoというファビコンの拡張子に変換します。
こちらのソフトだけでも作ることができるので
フォトショップをもっていない人もぜひ♪

設置方法はページのhead内にそのままリンクを埋め込むだけで
OKなのですが、せっかく設置した.htaccessを使用して
本家サイトの場合はすべてのページに自動で
ファビコンが設置するようにしました。

AddType image/xicon .ico
<Files favicon.ico>
  ErrorDocument 404 /icons/favicon.ico
</Files>

※.htaccessと同じ階層でおいて実働しました。

ためしに仮においているスマフォ用のページの
アドレスはで見ると特に記述をしなくても
faviconが設定されているのが確認できます。

http://photos-home.com/sp/

【参考サイト】
http://profile.allabout.co.jp/w/c-9724/

.htaccessは最初は使いにくそうだなあと思っていたのですが
色々と使えるので、ぜひぜひ♪

【.htaccessについての参考サイト】
http://www.shtml.jp/htaccess/
http://mikeneko.creator.club.ne.jp/~lab/web/htaccess/

**********

先日、前々職もとい前前々職(笑)でお世話になった
Aさんとお仕事の打ち合わせとは名ばかりの
お時間を頂き、楽しい時間を過ごしました。

私にとって職場とは「働く場所」。
しかも、かなり仕事に厳しい&シビアな方だと思います(汗
でもそれだけではなく、やっぱり人とのお付き合いがあって
成り立っているわけです。

本当にありがたいことに、とにかくそんな運が
私にはかなり強力にあるようです。

人間関係が嫌でせっかくの大切な仕事を
辞めざる得ないという方の話を聞くと
特にそう思ってしまいます。

Aさんとはこれからも仕事でもプレイベートでも
お付き合いが出来たらと願ってやみません。

お肉…美味しかった〜(笑

**********

現在本家サイトリニューアル中↓

デザイン | マークアップその3

JUGEMテーマ:写真


【WEBデザイン】

本サイトのリニューアルについて、
やっぱりHTML5で作業を進めようとマークアップのし直しをしました。

IEについてはまだHTML5が対応ではないため、
JavaScriptで埋め込みました。

<参考サイト様>
http://www.html5.jp/html5doctor/how-to-get-html5-working-in-ie-and-firefox-2.html

上記サイト内ですべてを言ってくれていますが、
今までのコーディングとほとんど変わらないものの
HTML5ではさらに意味のあるコーディングができます。

制作者がどのようにページを組んでいくのか
デザインと一言で言っても表面上ではなく
意味のあるデザインとして作業をしなくてはいけなく
なっていくのかな?と改めて感じます。

・・・いやあ、楽しい(笑

個人的にマークアップが好きだったのは
表面上のかっこよさというよりも
どのような意味合いで作っていこうと段落をおって
考えていく事に楽しさを感じていたのでHTML5の
マークアップは比較的すんなりと入っていきました。

表面上はまったく変わっていない本家サイトですが
HTML5対応に変更しました。

headの部分は今の所、
<!DOCTYPE html>
<html lang="ja"> 
<head>
<meta charset="UTF-8"> 
<!--[if lte IE 8]>
<script src="shared/js/html5.js" type="text/javascript"></script>
<![endif]-->
<meta name="Description" content="写真・WEBデザイン・愛犬への愛が詰まったお家です=Photos-Homeです。" />
<meta name="Keywords" content="写真,静岡,Webデザイン,Photos-Home,CONTAXAria,NikonD-80,ポラロイド" />
<title>Photos-Home | 写真・WEBデザイン・愛犬への愛が詰まったお家です。</title>
<link href="shared/style/reset.css" rel="stylesheet" type="text/css" />
</head>

↑ああ。すっきりと今までXHTMLで慣れている人は
思うのではないでしょうか…

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta name="Description" content="写真・WEBデザイン・愛犬への愛が詰まったお家です=Photos-Homeです。" /> <meta name="Keywords" content="写真,静岡,Webデザイン,Photos-Home,CONTAXAria,NikonD-80,ポラロイド" /> <title>Photos-Home | 写真・WEBデザイン・愛犬への愛が詰まったお家です。</title> <link href="shared/style/reset.css" rel="stylesheet" type="text/css" />
</head/>
↑こんなのがずら〜とあってもううんざりという感じでした。

ちなみにhtml5.jsがIEやフォックスさんの古いバージョンを
対応にしてくれる魔法のJavaScriptです。

<header><footer><section><article><nav>など
今まで意味のない<div>で囲んでいた要素を
意味のあるマークアップが可能になるHTML5は
今後のSEO対策なんかにも影響があるんじゃないかな?っと
なんとなく思っております。

ちなみに仕事のテストも兼ねて
.htaccessも触って、モバイル、スマフォの
ジャンプページのみも対応済みです。

.htaccessを設置するにあたり、本当に勉強になって
これからのお仕事にも色々と対応できるな〜と
かなりワクワクとしてしまいました。

**********

明日は前職のお花屋さんにお手伝いにいくはずが
夜遅くに元の相方さんからメールがあり
急遽お休みになりました。

そんなこんなでせっかくのお休みなので好きな事を
しよう!っと思ったにもかかわらず
結局好きな事はアフロのいる部屋でパソコンの
前に座ることなのか…と少しだけ虚しくなりました(笑

でもそれだけ好きな事を仕事と出来る
喜びをひしひしっと感じています。
一生続けていけたら嬉しいなあ。

**********

現在本家サイトリニューアル中↓

デザイン | カラーの事

JUGEMテーマ:写真


【デザインの事】

色々な仕事をさせてもらったこの1年。

その中で特にお客様との会話や要望で
勉強させて頂いた一つとしてカラーイメージがあります。

イメージカラーは?

と伺うと出てくる色の指定ですが、
一つに「ピンク」「ブルー」「グリーン」「イエロー」といっても
想像している色の幅はお客様ごとに本当に違います。

特に男女でとてもわかれるカラーイメージは
(クライアント様の職種にもよりますが)
面白ささえも感じてしまう程です。

↑の画像にわかりやすく色別で作ってみました。

男性の方がはっきりした色味で原色にちかい雰囲気。
しかも微妙なグラデーションを好む方が多いです。

逆に女性は何かの色に「グレー」を足したようなあいまいな
色合いが好みで、グラデーションではなく「ベタ」や
自然なテクスチャ(ファブリックやペーパー)を好む方が多いです。
分かりやすく↑では茶色をプラスしましたが
どの色も茶色と相性のいい色のような気がします。

個人的には女性の好まれる色合いの方が好きなのですが
海外サイトですごーっと目を惹く(インパクトが強い)のは
男性の好まれる色合いなのかな?と感じます。

写真にも言えることで、トイカメラや一眼デジタルカメラの
パキパキした色味を男性は好む方が多いし
女性はポラロイドやハーフカメラなどのふんわりした色味を
好む方が多いのでは?

ちょっとした色味の事ですが、
女性でもはっきりした性格の方なんかは、男性よりの色を好み
方もいたりでとても面白いです。

クライアント様と直接お話しをさせて頂いたり
要望を細かく頂きながら「この方はこういう色が好きなのでは?」と
想像してデザインラフを仕上げます。
この作業がかなり楽しいです。

ラフの前にワイヤーフレーム(レイアウト)を作るのですが
この作業の際に私の場合はキーカラーも添えて提出します。
その段階でキーカラーが違う場合、デザインにも入っていけないと
思っているのでここが一番気合いが入る場所かもしれません。

男性と女性って生まれながらの感性が違うんだなあって
仕事をしながら勉強させてもらってとてもありがたいです。

**********

現在本家サイトリニューアル中↓

デザイン | マークアップその2

JUGEMテーマ:写真


【WEBデザイン】

続きまして、メインエリアのマークアップです。

この段階でのページを見るとサイトの全容が見えてきます。
ホームページが見栄え良くするためにはここから
CSSで装飾に映っていくのですが、
実際本当に読んでもらいたいものというのは
この内容のみという事もわかるかと思います。

今回はヘッダー領域の下にくるコンテンツ部分のマークアップです。

<div id="wrapper">
<div class="content">
<img src="images/top_l_img.jpg" width="117" height="400" alt="写真が大好きで立ち上げたサイトです。「写真」の「家」という意味でつけた名前。ゆったりまったり更新していきますので、よかったら楽しんでくださいね。" />
<img src="diary/images/2011-02/18.jpg" width="650" height="400" alt="" />
</div>
<!--END content-->
<div class="content">
<div class="content_l">
<h2><img src="images/top_h_site.jpg" width="435" height="40" alt="サイトマップ" title="サイトマップ" /></h2>
<ul>
<li>■<a href="index.html">TOP</a>…トップページへ</li>
<li>■<a href="about/index.html">About</a>…サイト、管理人の紹介</li>
<li>■<a href="diary/index.html">Diary&amp;Blog</a>…日々の日記</li>
<li>■<a href="photo/index.html">Photoraph</a>…写真</li>
<li>■<a href="life_hobby/index.html">Life&Hobby</a>…趣味と生活</li>
</ul>
<img src="images/top_img_site.jpg" width="248" height="108" alt="" />
</div>
<!--END content_l-->
<div class="content_r">
<h2><img src="images/top_h_news.jpg" width="291" height="40" alt="最新情報" title="最新情報" /></h2>
<ul>
<li>2011.05.01 ホームページリニューアルしました。</li>
<li>2011.05.01 ホームページリニューアルしました。</li>
<li>2011.05.01 ホームページリニューアルしました。</li>
<li>2011.05.01 ホームページリニューアルしました。</li>
<li>2011.05.01 ホームページリニューアルしました。</li>
</ul>
</div>
<!--END content_r-->
</div>
<!--END content-->
</div>
<!--END wrapper-->

まずは「wrapper」で全体を囲みます。
その後は、メインの部分になる「content」。
さらにはcontentを左右に分ける領域「content_l、content_r」。

この段階で、すでにどのようにCSSで装飾をするのか
考えながら組み立てていきます。

名前の前にあるidclass

idはページ内に1つのみしか名前をつけられず、
classは何個でもつけられます。

初心者の頃はこの違いの意味がよくわからず
なんでもclassつければいいや〜とか
idとか適当につけちゃえ〜っと制作しておりました(汗

実はこの2つはとっても大切な要素で、最初の組み立てを考えて
つけてあげれば、後にCSSを修整する際にとても便利です。

idはページに1個しかつけられないので
CSSでidwrapperのなかにあるliタグの色を「ピンク(#F9C)」にしたいですよ。
っと言ってあげると↓

#wrapper li { color: #F9C;}

上記のサイトマップと最新情報の文字の部分が一気に「ピンク(#F9C)」に変身!
でも、下の記事で書いているグローバルナビの中のliは色が変わらず
クールに元の色を保っていられるわけです。

逆に全部のliをピンクにしたかったら


li { color: #F9C;}

こんな風にliタグにCSSをつけてあげます。

classはページによく出てくるBOXの基本はつけてあげて
idはページに一度しか出てこないBOXにつけるようにすれば
CSSで装飾するのに、部分ごと設定できるのでマークアップを
よく考えてというのも、頷いて貰えるかな〜っと思います。

続いて…

ヘッダーの部分で見出しの1(h1)をつけているので
こちらにはh2をつけます。
こちらもh1同様にtitleも記述しています。
本家サイトを見て頂けると分かるのですが、実際の見出しは英語で
記述していますが、SEOやアクセシビリティを考えてaltとtitleは日本語で書いています。
ちなみにもっとSEOを考える場合は、画像の見出しではなく
背景でデザイン要素を入れても文字はテキストベースで行います。

実際にSEOで効果のあるといわれる「サイトマップ」については
別のページで設ける事が仕事では多いのですが、今回は
趣味サイトというのもあるので、トップページにもってきました。
サイトマップへのリンクがヘッダー部分にあると、サイトのいたる所を
ロボットが行ってくれるようになるので良いと言われてはいますが
そのあたりも、微妙です(汗

そんなこんなで、ある程度のマークアップが出来たら必ず
文書のチェックとして「HTML_lint」を通して「よくできました」マークが
出るまで修正をかけます。
WEBデザイナーとして仕事をしている人もこれで最後まで
チェックをしていないという方も多いです(汗
根本的な間違いでお客様に納品は申し訳ないですし
チェッカーに通すと自分自身が勉強になるので
ぜひ、皆さんに試して頂きたいです。

**********

現在本家サイトリニューアル中↓

| 1/2PAGES | >>

■micchi
静岡在住のwebデザイナー。
他にAtelier*Spoonにて写真教室など
しております。
コーギーのアフロと幸せな
毎日を送っております。
■好きな物
・お菓子作り
・写真撮影
・STUDIO M'の食器
・MATEUSの食器

selected entries

categories

archives

recent comment

link

search this site.

others