リンク先をページの特定の位置に指定する方法

カンタンなことだろうーけど、意外とツマづくhtml。
キチンと調べて解決しませう。


★リンク先を、特定の場所に指定したいとき

情報量が多く、縦長のページにリンク先を指定すると
ユーザビリティーもよく、ユーザーが知りたい情報を得ることが出来ます。

「色覚障害の見え方」というコンテンツのリンク先を
あるページのなかのコンテンツにリンクさせたい。

アンカーを指定する。
＜a href="000.html#miekata"＞
000.htmlの後に#miekataと記述。



青い破線「色覚障害の見え方」に、指定するタグを挿入。
＜a id="miekata"＞

※最近まではname="miekata"と
指定するやりかたが一般的だったが
XHTML 1.1以降ではa要素のname属性は廃止されるため、
XHTMLのサイトではid属性を使用する。
また、数字だけのid名（例：id="001"）は使用できない。
参照URL：ハイパーリンク

やっとトップページ完成！

依頼されていた、とあるガラス屋さんのサイト。


やっと完成しました～～！！！　*:・(￣∀￣)・:





いや。トップページだけネ。





これでも3回作り直したんだよね～

どんだけヘタレだよ。。。



初回は粗いながらも中面フォーマットができたけど

bodyの背景の出し方が、どう頭を巡らしてもできなくて……

ガッコの先生にアドバイスをもらうことにした。



いちおーお客さんありきのサイトで、自分のじゃないから

「ここが上手くできないならデザイン変えちゃおっ」とゆーワケにもいかず。

本来の実務になったらそんなこと言ってられないし

やっぱり無理してでも、始めのデザインを忠実にhtml化したかったのだ。




2回目。


絶対配置で作り直そうとトライっ

しかし、イマイチ原理を理解できてないもんだから

当然うまくいかない。。。


しょーがないので、今回も慣れ親しんだfloatでレイアウト★





すると、初回のサイトよりもIEのバグがほとんどなく

2箇所スターハックを使用するのみにとどまった！！



すっご～～～～い　嬉しいっ！！！



やれば出来るもんだ。



でも先生いわく、もともとルールに則って構築していけば

ハックは一切必要ないという。。。



まだまだ要レベルアップ。


絶対＆相対配置もマスターしないとだし。




とにかく、トップページができればシメたもの（*＾▽＾*）ノ☆

ガツガツ作っていくぜぃッ

CSS備忘録

★font-sizeを指定したらline-hightもセットで指定すること
ブラウザごとユーザーの設定ごとにテキスト表示の解釈が違う。
IEでは行間を調整してくれないがfirefoxでは適当にやってくれる。
そのため、heightの見栄えに違いが出てしまう。



★できるだけハックは使用しない
基本に忠実に作っていればハック無しでもキチンと表示できる。
どうしてもダメなところはハックする。
ハックに頼り過ぎない。



★できるだけpaddingは使用しない。
　marginで処理できるものはmarginで。
marginが利かない場合、サイズによってmarginが取れずズレてしまうので
1pxずつ調整してみると、うまくいくことがある。



★IEなどブラウザ別表示の許容範囲とは？
配置がずれてなくて、画像等が隙間やずれが生じないこと。



★基本のターゲットブラウザ、エンジン
　IE6　IE7　Firefox1.5以上　Safari1.3以上
　IE　→　IEエンジン
　netscape・firefox　→　Gekkoエンジン
　Safari　→　Webkit



★faviconはサイトのルート上に置く
imagesフォルダーに入れるのではなくてindex.htmlと同じ階層にfavicon.icoを置く。
ローカルでチェックしてもfirefox以外のブラウザでは
ネット上から見ないとfaviconが表示できない。
IEはサーバーの一番上のフォルダにfavicon.icoがあれば勝手に読んでくれる。



★アンカータグの指定はlink visited hover activeの順番を守る
　この順番で設定しないと動作が正常にならない。



★XML宣言について
XHTMLで作るならXML宣言文は必須。
IE6の互換モードはターゲットブラウザから外す。（XML宣言しているから）
互換モードを入れてしまうとCSSはまったく変わってしまう。
互換モードや古いブラウザで作るならHTML4.01や最悪HTML3.2で作ること。
XHTMLでサイトを作る場合、基本的に古いブラウザや互換モードは外した場合の話になる。



★floatはtableの焼き直し。
　floatはtableレイアウトと大差ない。
　SEO対策を施すなら、絶対配置＆相対配置＆floatを組み合わせる。



★CSSの概念とは
　HTML　→　データ
　CSS　→　レイアウト
　という分離によって、データは重要なものを好きな位置に記述でき、CSSで見やすく配置すること



★テキストタイプのブラウザ
　SEOを意識するならテキストタイプのブラウザがあると便利。
　テキストタイプのブラウザ Lynx
googleなど主要なサーチエンジンのロボットはテキストタイプのブラウザの見え方と同じ情報の見方をしている。

position:absolute;

はあ。

絶対配置わからんすぎ。。。。

さにゃのサイトは絶対配置向きとゆー
先生のアドバイスに従い、ちょっと配置の仕方を変えてみた。


今までfloatでしかサイト組んでなかったさにゃさん。

floatと絶対＆相対配置は混在させちゃダメと言われていたのに
逆のことを言われて大ショックを受けたのです。。。Σ(￣□￣;)ガ～ンッ

人によってCSSの解釈とかやり方違うのはわかるけど
全く違う効果を言われてしまうと
何を信じたらよいのか、ほんとに迷ってしまう～

きっとみんな、いろんなやり方を自分で試して
答えは自分で決めているんだと思う。
誰のやり方が正解とかないんだろうな。。。


「floatではtableレイアウトとなんら変わらんから
SEO重視するなら絶対＆相対配置でやること！」と教わり
いま作り直し中なんだけどぉ

やってるうちにレイヤーみたいに要素が重なっちゃうから
もーワケがわからない。。。(@_@;) む～ん。

なんとなくでやってみたけど、
やっぱりうまくいかない。。。（そりゃそーだ）

教科書とググる先生片手に復習しなおし
CSSレイアウト出直しですだっ


まずここが理解できればイイwebデザイナーになれますとのこと。

何が何でも尚更モノにしなけりゃ。

きっとAJAXとかPHPとか覚えるよりも基本的で重要なコトなんだわ

面目ございません。

また新聞配達の音を聞いてしまった。

こんな時間までプロのwebデザイナーにつき合わせてしまった！

そしてこれから仕事とな。。。

なんつーことを。


くだらん質問に根気よく付き合っていただき

本当にありがとうございます！！！





かれこれ3時間近くチャットしながら

サイトの問題や質問あれやあこれやトーク。



おかげさまでかなりクリアできた！！

神よっ！！（まず直してから言わんかい）



とりあえず絶対配置とfloatで組みなおすことが必須！

そして授業で習ったことがすべてにおいて正しいとは言い切れないこと。
（授業中、先生言ってたわ。たしかに。）


すんごい収穫だった！！



さあ寝よう！

っだぁああああ～～～！

マジですか。。。。


今朝、とあるところから一本の留守電が。


「雇用・能力開発機構センターですが」

先週末に届いた職業訓練不合格通知の送付元。



「繰上合格の件で先週金曜日にもお電話しましたが、

いらっしゃらないようなので、今回はもう結構です」


ガチャ



何を悔いても言い訳にしかならんけど。



ウチのFAXは旧式で、ナンバーディスプレイないしリダイヤルないし。

最近の電話はやたら売り込みセールス多いし。

電話回線の問題もあって、ネットやるときは回線ふさがっちゃうし。



そんな事情が重なり、家電に出ることがほとんどなく

留守電で用件を確認して折り返すとゆーことが日常であった。




今回はそれが災いして、

完全に受講できたハズの職訓を取り逃がすとゆー

不運にみまわれたのだった。。。




留守電聞いて折り返し電話したけど、

時すでに遅し。。。

次のラッキーな人に回ってしまった　(;_;)



「逃した魚は大きい」

まさに、このコトワザの心境。。。




不合格通知もらったとき以上のショック！

しばらく立ち直れない～(T▽T)あうあう。。




しかし、こうなったのを何かのせいにしたくない。




ので、これから新型FAXをヤマダで買ってこようと思います。

そしてプロバイダーも新しいのにしようと思います。

ついでに気分転換に映画でも観てきます。



NO MORE 職訓の悲劇

どげんかせんといかん

もぉどーにもならんてことで
仕事のじゃまにならなければいーなと思いつつ
昨日、ガッコの先生にヘルプメールを送信。

いまコーディング中のwebサイトで様々なトラブルが発生(((（ ;ﾟДﾟ)))
（自分の技術が伴ってないだけとも言うが）

背景の処理がうまくいけば8割フォーマットが完成するんだけど。
こんなデザインにした自分をうらんでしまうよ。。。



永遠のテーマ（？）、ブラウザの致命的な問題が
どーしても私の行く手を阻む…（ー"ー；）
チクショー。

何度思ってもしかたないことだけど、
ブラウザの表示を共通してくれ～。

でも世の中のwebデザイナーがみんな越えてることなんだと思うと
なんとか自力で乗り越えたかったヨ（≧д≦）

そんなわけで
どーにもならん部分は後回しにして
サクサク他の作業を進めましょう。

ひとりごと

最近のweb制作で3、4時までやることが続いて
すっかり夜型人間になってしまった。。（≧д≦）
なんてことっ

もともとは朝型人間なのにな～。

4時頃に電気消して寝付こうと思っても
すでに薄明るくて、鳥のさえずりやら朝刊配達するバイク音やらで
ようやく意識が落ちるのが5時頃なんだよね

さすがに最近は頭が重い…。
今夜は早く寝よう。。。

と思っていたのに
結局mixi見たり、こうしてブログ書いてるし(~_~;)

ヒサブリCSS

先述したweb制作、ようやっとデザイン作業が終わり
昨日からhtml化に入った。

クリオ以来のコーディング。。。
やっぱりマメに触ってないと忘れる忘れる。

無料サーバーにアップするため、プログラムは使用制限があって
簡易的なものにしかなんないけど、今回は商用サイト（ガラス屋さん）。
基本はXHTML+CSSで組んで
JSとかflashとか、試験的に取り込んでみるつもり★☆★

現在はliがブラウザ別にうまく表示しなくて手こずってる……(@_@;)
firefox（モダンブラウザ）のほうが正解とは言うけど、
場合によってはIEのいいかげんな表示に救われる時があるのよね。。。
はて、どーしたものか。ちょっと頭冷やそかな～。

コリスさんとか様々なCSSマニュアル的サイトを見てちょっとずつ進む。

そんな中、いい情報を発見！

外部スタイルシートをlinkするかimportするかでパフォーマンスが違うらしい。
IEではimportで外部CSSを指定すると悪影響を与えるので使用しないとか。
いろんなサイトでCSSの指定の仕方があるなーとは思っていたけど
実際さにゃが使ってたのは、HTMLファイルにimport.cssをリンクして複数CSSを読み込むやり方。IE的にはNGですよ～とゆー方を使ってたのだ。。。ショック！

いくらガッコで教えてたからって、そのやり方がすべてではナイんだなと実感。
どんどん新しい情報と技術が出てくる業界なんだから
過去の方法に固執してたら取り残されちゃう。

※追記（2009.6.20.）
　教科書を読み返していたらimport.cssで外部cssを読み込むことでIE4.0のCSSを切ることができるのでした。よって今回もimportした。

とにかく、なんかするたびにコードをドジって
「あ～～～っもうっ！」となってしまう。。。

が、苦労の末にCSSがうまく反映すると単純なもんで嬉しい（＾＾＊
えへへ


こんな低レベルで転職できるんだろか。。。

DTP Booster vol.2

初参加のDTP Booster！
よく見てるブロガーがここで講演することを知ったことからこのイベントに参加★

今回はイラレに特化した講演とゆーことで、ぜひとも聞いてみたい！
デジハリ仲間とアップルストア銀座へ(´･ω･`)



①javascriptを使ってIllustratorを遊んでみよう
三村克己さん
InDesignでスクリプトを入れてみたことがあったので、なんとなく言わんとしていることは理解できた。
なによりwebでactionscript、javascript、phpをカジったからね～。

スクリプトをうまく使ってワンクリックでも作業を減らしましょうとゆーコンセプトのもと、講義が続きました。
イラレのスクリプトはwebと書き方は同じだけどちょっと違うみたい。
さすがに30分で細かい記述の仕方まで説明はできないので
一括画像配置だとか段落ごとに文章を切るとか、
知っとくと便利なことをざっくり紹介していた。


②Illustratorで光の表現
川端亜衣さん

この方のブログ、かなり参考にしていますっ！！
フリー素材はすべてダウンロードしたし！
イラレラボ

オーバーレイ、スクリーンなどアピアランスを多用して
イラレでも光の表現ができることを実演。

あたしはあんまり一個のオブジェクトに何重ものアピアランスは追加しない。
だって分かんなくなるんだもん…(*с*)


はああ。すばらしい～！
講演後、「ブログ見てます！素材は全部落としてますっ」と握手してもろた！



③DTPにおけるオンラインストレージの活用
MacServerの説明


④Illustratorでの文字組版
鷹野雅弘さん

InDesignでやればいいのに、、、と思っていたけど
イラレで作るポスターとかでも文字組は必要必須！
その際に知っとくとベンリなノウハウを披露されましたっ

とにかくアピアランスをうまく使いましょうってことと
文字レイヤーにグラフィックスタイルの設定をして楽しようとゆーことでした。



最後に、イベント参加者にプレゼントがあるてことで
ジャンケンしてうちらは負けまくり、次々とプレゼントが決まっていく。。。

そして最後のプレゼント。
司会者：「今週、誕生日の人っ」
さにゃ：「ハイっっっっっ！！！」

この日はくしくも30歳のバースデーだったのだ！
ナイスっ

こうしていただいた誕生日プレゼントは
今月号の「Mac People」でした。

普段はwindowsを使ってるから「もらってもな。。。」と思いつつ
帰りの電車のなかで読む。

ああ。Macほし～。（単純）

広重と北斎の東海道五十三次と浮世絵名品展

三十路記念日となる日、美術館に行ってきたε=┏( ・_・)┛

うらわ美術館

浦和駅、もっと田舎くさいと思ってたけど意外と発展してた。
西口出てヨーカドーの前の小さい商店街？がちまちましてて
かわいい店が集結してて、時間があるときにもっかい来たいと思った(^ ^*

浦和センチュリーシティ3Ｆにある小さな美術館。
展示期間が終了間際だからか、けっこう人がいた。

一階にあるパン屋さんの前にディスプレイされていたお菓子の家を激写っ
かわゆすっ


マカロン、意外とデカい！




「広重と北斎の東海道五十三次と浮世絵名品展」

東海道にある53の宿場を指し、江戸の日本橋をスタート地点にして京都の三条大橋をゴールとした。

【日本橋】


これ全部版画！？？と疑って思わずガン見。
するぐらいきれいに発色してたし、筆で描いたみたいに繊細な線。

浮世絵には大きく分けて以下の制作工程があるそう。

①下絵師（デザイナー）…歌川広重らがデザイン
②彫師…デザイナーの下絵から色ごとに版分けして版木に彫刻
③刷師…版ごとに刷る

どれも熟練した職人技で、それぞれがイ仕事をして初めて1枚刷りあがるのです。。。
ひとむかし前の印刷業界みたいだな～と思った。



★お気に入り
どれも素晴らしく、たくさんお気に入りが見つかったけど
あえての以下↓↓↓↓



雨の表現が秀逸です。
重い空の色、激しい雨。
遠近感を出すため、雨を2度刷りしているらしい。なるほどっ



モノトーンの中に着彩された人物に目がいく。
この地域では実際にこれだけ積雪しないとゆーことで
これは広重の創作といわている。

行ったことがないけど、きっとこんなところなんだろーな～
とかイメージしながら描いたんでしょうね★


東海道五十三次シリーズは江戸時代、売れに売れまくって
初版から30年刷り続けロングセラーとなった。

だからたくさん複製されて世に出回ってる浮世絵なんだけど、
さすがに30年刷れば鮮明に印刷されないってことで
初版が一番きれいに刷れているとゆー。

30年売れ続けたって、スゴイ！！


浮世絵は、かつてゴッホやモネなどの印象派に影響を与え、
そのゴッホが棟方志功など日本の近代芸術にめぐりめぐって影響を与えたわけで。
すべては影響しあって繋がってるんだよね。。。
おもしろいっ★



もっともっと日本の芸術＆美術を知りたいなあ！



にしても県立近代美術館といい、うらわ美術館といい、
埼玉にもイイ美術館がたくさんあることに感動。
マメに足を運んで、イイものを身近にしていこっ

google earthがスゴイことに。。。

mixiと重複するネタだけど、google earthが主要都市だけ3D化になっている！！

こりゃ楽しいっ
さっそくイロイロ世界旅行に旅立ってみた(σ≧▽)σ


まずは国内旅行。定番の京都へ。

★おいでやす～。京都駅どす～。



★自由の女神サマ




★まるで折り紙のようなスフィンクス




★凱旋門




★ピサの斜塔




★映画「天使と悪魔」の舞台、サン・ピエトロ大聖堂にて



↑↑このアングル、すんごい苦労したんだ～(@_@;)
やりすぎで酔いかけている。。。

google earthはほどほどに～

最近買ったデザインの種雑誌。

今日は久しぶりのエステ★☆
先週のフリマでさんざん紫外線を浴びたので
これでリセット！できたらいいけど～。（一日じゃね…）

3日前に買った2冊の雑誌、まだぜんぜん読んでない！
いつもだったらそっこーで開封してたのに。
やっぱ休みボケかしら。
あかんわ～。


★GO OUT vol.7



中間課題で作ったwebサイトの美容院の店長が
極真カラテの指導員をやってて、独立できそうなので
オリジナルTシャツが欲しいとおっしゃいました。

そこでタマタマわたしにオファーがかかったわけですが、
Tシャツのデザインって、興味はあったけどやったことナイ。。。
簡単そーだけど、センス良くするにはイロイロ見ないとな～。

個人的な趣味ですが、さにゃはメンズTシャツのデザインがワリと好き。
なので、この雑誌を手にとってみたのでした。
てか、アウトドア雑誌なんだけどね～。
カラテ、かんけーない。。。



★Mdn 2009年7月号　イラスト描画テクニックのすべて



イラレやフォトショップを使ってイラストを描くプロのテクニックがあますとこなく掲載されている。
どちらかとゆーとイラレ（ベジェ曲線）で描いていくのが好きなワタクシ。
今回の特集はイラレテクが多く紹介されていたので、迷わずお買い上げ☆

イラレって、レイアウトソフトとゆーよりアートなツールになりつつあります。
バージョンあがるたび動作が重いし。
レイアウトするなら今はInDesignのが作りやすい。

これを読んで、ポートフォリオの表紙とか名刺に生かそうと思います～



しかし、同時進行仕事が多くて、制作時間の配分を考えないと
キャパオーバーになってしまうな。。。

職業訓練受講のための入校説明会レポ

タイトルでもあるように、昨日は職訓入校説明会であった。
説明会とゆうよりも、試験と面接なんだけど。

地図がおおざっぱすぎて、バス停下車してから迷ってしまい
ご近所の方に尋ねまくってどうにか雇用開発機構センターへ。。。

ものっすご～い人だった！！
あんまりラフ過ぎても。且つキメ過ぎても。。と思って
スーツ用のスカートと黒のカーディガンで赴くが
9割見事にスーツ！！やっば～！

そのなかでもまったくのラフな格好の人もいたから
そんな人は「やっべ～！みんなスーツじゃん！」と思ったことでしょう。

さながら集団面接のような雰囲気…。

まずは簡単な説明を受けて、10分間の学力テスト。
中学1・2年の問題とはいえ、10分間で60問解かないといけないのだ。
1問あたり6秒の計算。意外とキツイ！

ちょっとヒネリの利いた問題だったり、単純な計算問題なんだろーけど
算数は苦手なさにゃ。こんなに解けないもんなんだ。。

あ～！！時間ない！！
裏の漢字問題から取り組む。

1時間の昼食をはさみ、個人面接。

受講希望してるのは約50人。うち39人目の面接。
2時間以上待って、やっと呼ばれた。。
ほんとに疲れた～～っ

定員20人のところに100人（別の日にも開催したため）がおそらく殺到したはず。
やっぱり倍率5倍かな～。

復習の意味も込めて、ぜひとも受講したいけど
あんまりしゃべれなかったから、落ちるかも。。。

6/19中、全員に合否結果が送付されるそうです。
はあ～。どきどき。。。
受かりますように。。