ページを指定したリンク
-前のページに戻る（もどらないよん）-
↑<a href="abc.html">
javascriptで1ページ前に戻る
-前のページに戻る（直前に戻ります）-
↑ <a href="javascript:history.back(-1);">
さて。
検索でたまたまそのページを開いた人にもトップに来てほしいなら link 。
トップから来てサイト内のページを移動している人が使いやすいのは javascript 。
そんな気がするんですけど、皆さんどうゆう基準で使い分けてるんだろう？？
相対パスと絶対パスって、どう違うんですか？
なんで全部絶対パスにしないんですか？
と聞かれて。
相対パスは今いる7階から10階に書類をとりに行くのに階段やエレベーターで行くこと。
絶対パスは7階から一旦ビルを出て自動ドア入りなおして10階に書類取りに行くこと。
と表現したら納得してくれた。あってるよね？
phpって？
という私に同僚兼師匠のkermit さんがhttp://php.s3.to/を教えてくれた。
書いてある通りに入力すると、書いてあるようなことが出来てくるので、驚くやら楽しいやら。
でも、実際のコトはチンプンカンプン。
門前の小僧から始めるカンジです。
PHPで更新日時が自動更新できるよ！と言われたので、やってみました。
なんとか表示だけはできました。
無骨なところは師匠が詳細を教えてくれました。
http://i-ris.peewee.jp/index.php
↑ ↑ ↑
更新日時・Last updated のところです。
（デザインはこれから。でもこうゆうシンプルなのも好き♪）
やれば出来るじゃん☆PHPが楽しくなってきました。
しかしなぜに。こんなにも。
スタイルシートの解釈が違うのであろうか。
悩みに悩んでこの時間。
未だ解決しないこの思い。あぁ。つかれた。
↓自分のイメージ
↓なぜかグレーの塗りがボーダーの線からはみ出してしまう、IE 5.2.3 Macintosh
思い当たるフシがなさすぎて途方に暮れた。
a.down:link { color: #4169E1; text-decoration: under-line; }
a.down:visited { color: #4169E1; text-decoration: under-line; }
a.down:active { color: #FA8072; text-decoration: under-line; }
a.down:hover { color: #FA8072; text-decoration: under-line;position: relative; top: 1px; left:1px; }
royalblue：#4169E1 salmon：#FA8072
「だからどうした」ってことに、3時間かかっちゃいました。
いえ、スタイルシートどこに書けるかいろいろいじってたら元がおかしくなっちゃって（汗;）。
いちおう、狂いは直してやりたかったことはできました。ホッ。
本は買わないと身につかない。
という言葉を聞いた高校生のあの日から、
なるべく借りずに買うようにしているワタクシ。
（そのかわり小説は2〜3回読んでる。ケチ？）
しかしながら。
Web の参考書の類をいろいろ買っている最近を振り返ると、
身につけるために必要なのは「買うこと」ではなく、
身につけるための「時間」だ、ということにようやく気づいたりして……。
「読む」と「身につける」は違いますねー。改めて。
tipsやクックブックのソースを読んで理解したつもりでも、
実践してみるとなかなかどうして。
写真ブログですら配置するのにトライ＆エラーな日々。
いやはや。しかもだんだん年齢を感じる理解力。
う〜ん。これからは、これまで以上に理解に時間がかかるんだろうーか。
怖いなー。
でも。
小説と違って参考書の内容は、実際に自分で動かすことができるので。
そしてそれがとても楽しいので。
身に付いた時のカンドーを糧に、この先もちまちま覚えてゆくのでしょう。
昼休み読書計画はまだしばらく続きそうです♪
ヘッダーを付けたいなと思っていたんですが。
デザインは昼休みに白黒で描いていたので、それ見ながら絵をおこして色付けて
まーこの辺で3時間くらいは使ったんですけど。
それより何より今回は
「スタイルシートでヘッダーをレイアウトする」
という課題を作ってしまったのでヒーヒーフーフーです。
なんとかできたよ〜〜（>>こんなカンジ）。
と思ってブラアウザチェックしてたら……。うそでしょ〜。
safariってなに？ブラウザ？って思うくらい表示ができてない。
表示というよりリンクの表示がサッパリ。
ずっとFireFoxで見てたからなー。
オペラですらきちんと出してくれてるのに……。
うへ〜。
何がいけないかも検討つかないのでこれから寝てまた考えます。
これでこのデザインを各ページに配置っていうと……先が思いやられます。
まさかWindowsは崩れてないよね〜〜。
hack覚え書き
safari：
margin: 0px ; #
「#」を付けるとムシする。
Macintosh OS ：
/*\*/
margin-right: 10px ;
/* */
「￥」マークが入ると次ぎに「*/」が入るまで無効
いやぁ。
一時はどうなることかと思いましたが。
なんとかナビ付きのヘッダーができました。
三連休、デザイン起こしから始めてこれで終わってしまいました。
フロートでナビなんてやったこと無いのにイレギュラーな形にしたので怒りと驚きの連続。
微妙にTOPボタンの横も押せてしまうんですが、これを直すには気力がいまいち足らないので、そのうちこっそり直したいと思います。
このページができたので、後はアーカイブとか、写真ブログとかも地道にカスタマイズしていきたいと思います……。
ただ……サファリさん対策が……（文字リンクにしようか壊れたままにしようか……）。
いやはや。
safari の表示がおかしいのが気になって気になって。眠れなくて。
いろいろ自分で試した結果、float か text-indent当りがおかしいと目星をつけまして。
検索したら一発でこんなにすばらしい解答に巡り会えました。
http://rospear.info/other/archives/2005/07/hack_safari.html
これでブラウザ攻略は終わりました〜（多分ね）。
19日からずっと悩んでやっとここまでたどり着きました。
どこのどなたか存じませんが、どうもありがとうございました。
（サイト移転作業中のためかトラックバックが無効のようです）
アンケートのフォームを作っていて。
あのちいさな◎（ラジオボタン）や、□（チェックボックス）を押すのが苦手な自分としては、文字を押してチェックされるのが好ましい。
ならばそうしましょうと思ったのはいいけど、今回全部で300近い項目があったんですね〜。
見た目はこんな。↓文字を押してもチェックされる。
ソースは↓これで１セット。
<input name="_良かった" value="1," id="_Good" type="checkbox">
<label for="_Good"> 良かった</label>
入力の際、id と for はユニークで同じ名前が必要。
だからぜーんぶ違う名前を2回ずつ入れる必要があるわけで（×300個）。
で。根性とか、精神論とか、得意じゃない分野でしたが、まぁ仕事だし。
なんとか入力終わったけど、気持ち悪くなるほどの量でした。
な〜の〜に〜。
I.E も Opera も Camino も FireFox も、みんなOKだったのにぃ。
またサファリ！サファリだけはボタンそのものを押さないと入力できない……。
まったく……。
最近、オペラの方が好きなんだよね……いろいろ。
印刷も好きな大きさに出来るしさ。っさ。
キ～～！写真の枠がでない～！
. img{
margin:0px 10px 2px 15px;
border: 1px solid #4d0000 ;
}
これで出ないのはおかしいと思って
いろいろ調べた（調べてもらった）ら、
大元のスタイルでこんな記述を発見！
#wrapper img {
border:none;
}
なるほど～。
と思って何パタンか回避を考えた結果、多分これが一番スマートで
のちのち使えそうな感じなので覚書しておきます。
. img{
margin:0px 10px 2px 15px;
border: 1px solid #4d0000 !important ;
}
初めて「 !important 」って使ったカモ。
これで安心。ほかにいい方法あったら教えてね。
ページできたよ〜と能天気にOS9のデザイナさんにURL送って見に行ってビックリ。
ずれてるとか、壊れてるとか、そうゆう表現を超越したレイアウトにぶっ飛びました。
なおします。直してみせます！
さ〜、仕事が始まったぁ〜！ってことに。
結果からいうとやったことはこんな。
1. モダンブラウザに対しては今の記述でいいので
ブラウザ振り分けでMacintoshのI.E. をピンポイントに直す。
2. MacintoshのI.E. でも 5.0 と 5.2.3 は壊れ方が違うので
私の書いたCSSの解釈が違う → 記述を変えないといけない。
1. の問題はまた他力本願で解決。↓ありがとうございました。
「Mac IE 5へのCSS振り分け 」
<style type="text/css" media="screen">
@import url("mac-ie.css");
@import url('moto.css');
<!>
@import url("mac-ie50.css");
</!>
</style>
とはいえ moto.css をコピペした変形で細かい所を直しているので、
今回みたいに「期間短いし好きに作っていいよ〜」的な仕事は良いけど、
更新が定期的に入る寿命の長いページだと、ちょっとヒヤヒヤかも。
2. の解決はトライアンドエラーでいろいろ試した結果、表示が直ったので
どれが決め手か検証まで出来てないんですけど、
I.E 5.0 の崩れ方がなおったのは、たぶん、
左の写真が並んだ列を float:left;
右の文字が入った部分を float:right;
にしてあったのを ↓
左の写真が並んだ列を float:left;
右の文字が入った部分を float:none;
にしたのが良かったんだと思います。
あとは文字サイズを em やめて px にしたり。
終電前に終わったので良かったっす。
もうちょっと勉強しておきま〜す。
FireFoxの機能拡張に「ツール」というものがあるのは知っていたんですが。
まぁ、ご存知「適正なHTML」「きちんとしたCSS」が書けているかどうかの
チェック機能みたいなもんですね。
無料でチェックしてくれて、しかも「こうしなさいな」という助言までくれるんです。
いつまでも逃げていても？仕方ないので
ツールのうちの上の２つ、HTML構文の検証とCSS構文の検証をやってみました。
……えぇっと……。言わずもがなです。
気を取り直して try & error のやり取りを10回くらい。
ようやくここのトップページで100点をいただきました。
ふ〜。
こんな簡単な作りで「ようやく」です。
一般のサイトを作った日には……。
でも朗報も☆
これだけのめり込んでる甲斐あってか、CSSは3カ所くらい直したらOKでました。
やった〜♪ っていってもそんな膨大な量じゃないからな〜。
でもうれしい☆
xhtml + CSS のページってどんな？
と思って作ってみた（とても見せられない……）。
いろんなブラウザで見ながらつくって……
最後にエミュレータ起動。
FireFox 問題無し！
さてではオーラスにIE6 …… ¿¿ なんですかこれは ? ?
で、調べたら。
<?xml version="1.0" encoding="UTF-8"?>
これ↑のせいで崩れてるらしい。
と、ここ↓を読んだら書いてあった。
http://www.seo-equation.com/html/xhtml1/rule
http://www.seo-equation.com/html/xhtml1/xhtml10
スタイルシートの解釈がここまで違うって、すごいよね。
IE7が出れば解決！ってコト？いやいやそんなわけは無く。
でもブラウザ新しくなる度にハックが多くなる……。
ハックってある意味バグよね。
ふぃ〜。
今日は自分で発見したのでちょっとだけ「いけて」るwebの話。
幅580pxのテーブルの中に横線を入れるデザインのコーディングがあった。
高さ3px 幅520pxくらい（厳密じゃなくてだいたいだったので）
手法としては
1. 線を画像書き出ししてはめ込む。
<img src="../images/line.gif" alt=" " width="520" height="3">
2. 幅520のテーブルのtdにスペーサージフで高さ3pxを取る
<table width="520" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#CA993D"><img src="images/spacer.gif" alt=" " width="1" height="3"><td>
</tr>
</table>
↓こんなかんじ（イメージです）
 |
3. hrにスタイルシートで味付けしてみる
前からコレをやってみたかったので、今回、挑戦してみました。
まず、こんなかな？とアタリをつけてみた
hr{
width:88%;
color:#CA993D;
height:3px;
}
残念ですが、きれいに表示されたのはIE6だけでした。
FFはきちゃない線のみ。……ならば背景に色入れてみましょう。
hr{
width:88%;
color:#CA993D;
height:3px;
background-color:#CA993D;
}
色はついたんですが、灰色の枠線が……さすれば……。
hr{
width:88%;
color:#CA993D;
height:3px;
background-color:#CA993D;
border:none;
}
お〜！線も消えてきれいな金色（黄土色）の線になりました♪
しか〜し。
このデザインをしてくれた方のブラウザはMacintoshのIE5.0でした（涙）。
なんとこの記述でははじからはじまでキレイに線が引かれてしまうんです。
あきらめて画像にしようかと思いましたが。
ここで負けてはいけない！と思い直して頭使いました。
hr{
width:520px;
color:#CA993D;
height:3px;
background-color:#CA993D;
border:none;
margin:0 30px;
}
パーセントじゃなくてしっかりピクセル指定。
そして左右に差分の余白をmarginにピクセルで指定してみました。
ふふふ！この最終形、Mac IE 5.0 もＯＫでした！
いや、すがすがしい。
記述がうまくいくとアドレナリン全開になってるような……。
CSS中毒？
別に今更ながらのことですが、
調べてる人がいるみたいなので覚え書きです。
<meta http-equiv="refresh" content="0; url=http://i-ris.peewee.jp/blog/">
content="0; ← 数値が0なら瞬時に。
読ませる内容（ 移動します とか、移動しました とか）があれば
読めるくらいの秒数 5 とか 10 とかを適当にいれて試すべし。
そして
url= のあとに飛ばしたい先のURLを入力（相対でも絶対でもOK！）
「"」の位置を間違えなければダイジョウブ ( ^_^ )。
よくこんがらがるので覚書き
a:link
a:visited
a:hover
a:active
△このページの上に戻る
↓
.link2{ font-size:90%; width:560px; text-align:right;}
.a.link2:link { color: #0000FF;}
a.link2:visited { color: #0000FF;}
a.link2:hover { color: #FF0000;}
a.link2:active { color: #FF0000;}
win IE で画像の上に出る
「イメージツールバー（印刷や保存のボタンが出る小窓）」を オフにする。
<head>～</head> の間に記述
<meta http-equiv="imagetoolbar" content="no">
最近、コーディングの仕事がメインになってきたので、
いままでやりたくても時間の関係で出来なかったコトをちょろちょろ試していたりする。
そんな私の異様なくらい嬉々とした様子に「そんなにいいの？」
というような質問をもらったりしているので
「スタイルシートに魅せられた」サイトを載せてみます。
勝手に敬愛している益子さんのサイト「CYBER@GARDEN」
http://www.cybergarden.net/
ここの右側メニュー下の方にある〔select your style〕を上から押してみてください。
スタイルシートのすごさを体感できます。
HTMLのソースは同じなのに、こんなレイアウト変更がすぐ出来ちゃうのってステキ♪
最近本まで出ちゃった「Zen Garden」さんは言わずもがな。
http://www.csszengarden.com/tr/japanese/
鳥居の下のメニュー下部、〈次のデザインを見る〉や〈全デザインを見る〉
をクリックすれば、世界中のクリエイターさんの作品が見られちゃいます。
「Zen Garden」さんの本→CSS Zen Garden Book
同じソースでこれだけ違うデザインが可能なのかと思うと、
デザインにもより興味が湧いてきたりして。
しかも、テーブルでガチガチに組んじゃった後は、配置を直すのがおっくうでしたけど、div組みだと、わりと自由に組換えられるので気が楽になりました。
今はまだ小さいデータしか扱っていないけれど、そのうちサイト全体！とか、挑戦したいです。
仕事でとか、実験でとか、ノウハウってほどじゃないけど
ちょっとしたときに使い回せるCSSの見本ページを作ってみた。
上の葉っぱ、「top」を押して、［Lesson］から見てね☆
増えたらインデックスページも作ります。
増えたらね。
2カラムはいろいろなパターンで試す機会があったのですが、
3カラムともなると、なかなか作るチャンスがないので、
時間を取って架空のサイトを作ってみました。
初めてなので最初はこんなもん。
http://i-ris.peewee.jp/lesson/saikoro/saikoro.html
でももうちょっとがんばってこんな感じ
http://i-ris.peewee.jp/lesson/saikoro/neko_top.html
部分的におかしいのはテスト中ということで。
最終的にはフォルダ名通り、サイコロ風に（市松ともいう）したいなぁ。
Web のカーニングってどんななんですか？というご質問をいただいたので、
口で言うより見た方が早いかなと思って作ってみました。
>>レッスンページ
質問されたのは紙のデザイナーさん。
要は左揃えの時の右側のガタガタ具合が何とかならないのかってこと。
私がいうのもなんですが、ゴメンナサイ。日本語のバアイどーしよーもありません。
参考までに一番下の-justify-で英文をご覧いただくと、彼女のいいたかった意味がよく分ります。
まずは英語圏に移住？
ついていけるのか? xhtml＋css 講習。
オボエガキ-----------------------------------
エントリーの内容
のボタン、Bを押しても strong になるのはなぜ?
ただいま問題制作中
http://www.webken.jp/
読んどけ！
http://www.w3.org/TR/CSS21/
モジュール化されてない。モジュールって?
交換可能な構成部分
http://e-words.jp/w/E383A2E382B8E383A5E383BCE383AB.html
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
xml xhtml
html5
http://www.whatwg.org/specs/web-apps/current-work/
ヘッダーフッターの要素作り
名前空間やスキーマ?
XFrames
Ajax!!! のライブラリー
prototype.js
scriptacurous（スクリプトキュラス）
jQuery
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
HTML文書の文法をチェック
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
アクセシビリティーをクリアすることよりユーザーが使いやすいほうがイイ。
lunch
制作中！
＞＞情報アーキテクチャー オススメ本
Web情報アーキテクチャ 第2版（シロクマ本）
http://www.oreilly.co.jp/books/487311134X/
アンビエント（みじかな）・ファインダビリティ（見つけ方）
http://www.oreilly.co.jp/books/4873112834/
コンピュータは、むずかしすぎて使えない！
http://www.shoeisha.com/book/hp/pc/book/826x/
ペルソナ（ターゲット像）
＞＞Firefox 機能拡張
・WebDevelope
・Html Validator
・Firebug
・Color Zillaカラー ピッカー
・CssViewer
・Greasemonkey
・IE Tab
・Link Checker（deadリンクチェック）
・MeasureIT（定規）
・Pearl Cressent Page Saver（スクリーンショット）
・SEO for Firefox （ページランク）（http://gigazine.net/index.php?/news/comments/20060707_seo_for_firefox/）
clearfix（空手の型と一緒で覚えてしまおう）
http://www.kuroduction.com/doc/translation/position_is_everything/easyclearing.html
大体コンテナに使う。たまに
#global-nav h2 {
height:0;
overflow:hidden;
}
合理的にテキスト消したり、画像置換（今はあまりやらない）をしたりは常識的な範囲ならSEOスパムには基本的にならない。ケータイでも埋め込みじゃなきゃ読まないし。
width うぃす！
#assist-nav h2 {
height:0;
overflow:hidden;
/*display:none;だと音声で読み上げない*/
}
＞＞スキマ調整
position:relative;
top: -16px;
もしくは
margin-top:-16px;
マージン方式を基本に。だめならポジションで。
フォントサイズ
あとで。
アーティスト
m-flo
バリデーション
http://jigsaw.w3.org/css-validator/
デフォルト2.1なので オプションで変更
色
http://www.kanzaki.com/memo/#item2007-07-24-1
要件定義書
ターゲットブラウザの種類も定義しておく
今。
Win IE
Mac IE
Firefox
Opera
Safari
Netscape
ブラウザはインストール時を想定。フォントは無視。
Internet Explorer 7 running side by side with IE6. (standalone)
http://tredosoft.com/IE7̲standalone
ズームツール
http://www.microsoft.com/technet/sysinternals/Miscellaneous/ZoomIt.mspx
プリント用
a:link,
a:visited{
color: #000000;
}
a:link:after,
a:visited:after{
content: "(http://www.aaa/"attr(href)")";
}
http://microformats.org/
ボイスサーフィン 無料体験版
http://www.amedia.co.jp/product/vs3/kidou.htm
RSSヘッドラインリーダー
たぶん同じセミナーに出ていた人の質問かな？
全称セレクタを用いたスタイルの正規化について、
ミツエーリンクスの木達さんが解説してくださっているので覚え書きついでにリンクしておきます。
何が「正しい」わけじゃないけど、
なるべく正しく負荷なく簡潔な記述をしたいという思いはみんなおんなじだと思う。
私もブラウザクリアは必要なものだけやる方なので、
こうゆう質問やこうゆう方がいいのでは？
という議論はいっぱい聞きたい♪（←するほどの技量でもないので ＾＾；）
雑誌に載っていたので、ちょこっとそれらしいものを作ってみました。
何も考えずにまんま移しただけのサルマネです。リンクもできましてよ。
トップページには出してたんですが、こっちのブログにも入れてみました。
ブログのページはあんまりいじりたくないのでちょっとこわごわ。
/* 斜めのステッカー */
#sticker{
position:absolute;
left:0;
top:0;
z-index:100;
}
#sticker img{border:0;}
↑これは人による（＝reset してるかとか、仕方とか）と思う。
html側は body のすぐ下に divでくくった透過ジフを入れ込みました。
<div id="sticker"><a href="アドレス" target="_blank"><img src="画像"
width="150" height="150" alt="livedoor blog"></a></div>
ステッカーに意味があるんじゃなくて、ステッカーを作って使ってることに意味がある。
実験ページなのでそんなんでいいか。
はやりのバッジは作ったけど載せる場所が無かった。
そろそろトップも作り直すかぁ。Twitter なにげに面積取ってるし。
でもこのナビ付きヘッダー+ロールオーバーはCSSって、気に入ってるのよね。
追記：会社でｒｓｓから飛んだらステッカー出てなかった。
よく考えたら、アーカイヴ用のテンプレートにも入れるんだったわ。
メンドクサ。と思いつついれました。やっと完成-☆〔2007.09.06 17：17〕
ウェブコンテンツの制作にかかわっている人なら、
多分みんな使ってるであろうブラウザ、Firefox。
私もとってもお気に入り♪
ニューマシンの Gateway をカスタマイズするついでに、使っている機能拡張をメモしときます。
仕事がさらに楽しくなりますよ。
オレンジが苦手でした。
食べ物じゃなくて、色。
オレンジって色がモニタでうまく表現できなくって、
人の色を真似っこしてしのいだり、気に入らないまま制作完了してマシタ。
なのでオレンジ使いたい時はすごくプレッシャーだったわけです。
しかし。やっと今回初めて、あぁ、この色！
っていうオレンジができたので記念に。
ここにその方法があるらしい
↓
http://news.livedoor.com/article/detail/3507010/
http://www.koikikukan.com/archives/2008/02/13-000218.php
という自分のメモ
チョコはあげられないけど、ネット仲間の皆様へ
↓ ギフトカードをドウゾ ↓
http://www.kaerukun.net/080214/
ウェブの用語で「パンくずナビ」というものがある。
top >> ぬいぐるみ >> カエル
↑みたいなヤツ。
これって、グリム童話の『ヘンゼルとグレーテル』のなかで、ヘンゼルがお昼ご飯用にもらったパンを、帰り道を示す道標にするため、ちぎって道に落としてきた……というアノお話からきたコトバなのですが。
しか～し！
確かにヘンゼルは最初「小石」を道に落としておいたので、小石が月に白く照らされ道案内になり帰宅できました。
でも２回目親に連れ出された時、道しるべにした「パンくず」は、落としたそばからハラペコな鳥たちについばまれて消えてしまい……。
結果、お家に帰れず、お菓子の家＝わるーい魔女の家に誘導されてしまったじゃないですか。
ってことは？
誘導になって無いじゃん？？迷子ナビ？
もしくは、わるーい所に連れてかれちゃう？悪徳商法ナビ？
って思っているのは私だけ？
Yahoo!さんでも、カラム落ちすることあるのね……。
がんばれ担当！
と、心の中でエールを送っている、今。
FireFoxだけ。しかもCSS3からの対応ということで、
いまいち感はありますが、
紙のデザイナーさんに昔、
「webって文字の両端揃わないんですか？？」
と、聞かれて作ったサンプルに
「そろうのよ～」という朗報を追加しました♪
http://kaerukun.net/lesson/letter/letter.html
一番下の紫の部分がそうなんですが、IEしかない人には分からんと思い、
キャプチャ載せます。
ま、汎用になるのは3年後？
人に頼まれて、ウェブ制作。
今あるリンクシステムを新しい部署で使いたいのでぇ～。
みたいな。
ご希望は毎日更新のフレーム使いページ。
イントラというか、データ共有というか。
見るのにフォルダいちいち開いてられないからHTMLで……と。
ボタンを押すとステージ（？）にエクセルが現れる仕組み。
やっぱりフレームよね~。
じつはね。本当のことを打ち明けるとね。
5年ぶり、2回目のフレーム組みなのよ、おねぇさんは（爆）。
ついでだから見せちゃおうかしら。
生まれて初めて公開したHPってヤツ。
☆ATENZAとおでかけ☆
左にメニューがあって、ボタンを押すと右が切り替わる、
ってのがカッコイイわよね、と憧れて。
当時はadobeのGOLIVEってソフトがうちにあったので、
全部それにお任せ。
最初に作ったのは「ワニワニの館」ってワニのページだったんだけど、
手打ちだったのでテーブルがうまく組めなくてさ。
写真と文字がずれるのは当たり前。
でも、人のソース見るの大好きだから、見よう見まねでやってたっけ。
文字色が変えられた時のあの感動……
今度は文字大きくしちゃった♪、みたいな。
blinkとか、うれしかったなあ。
なつかしーわ。
それから5年……
フレームセットのページをCS3で作る日が来るとは！
いやはや。セットの仕組みを壊さずに保存するまで3セット失敗したわ。
ナビはトップでグループ6種？
ってことはサイドで個々の詳細表示を6セット……くらいのボリューム。
これからリンク貼って中身のセット更新できるか試さなきゃぁ～～～。
でも、手探りって大好きなんだな。私。
それにHTML5のフレームが待ち遠しいので感覚つかむのにはいいのかも？
前向きにがんばりまーす☆
ゴールデンウィーク以降、ネタはいくつかあったんだけど、なかなかページに落としこめないまま何ヶ月か経ってしまいました。
今日は雨なので海散歩も控えてお家で自分の作ったのもでもまとめようかと。
（雨の写真撮るって昨日ブログに書いたんだけどねー。なかなかおっくうだわ。寒いし）
で、コネタその1
普通のテキストを見た目のために強制改行するのって、webじゃぁあんまりやってほしくない。
個人的にも「正規表現」的にもそうだと思ってる。
しかしながら、作品名や人のお名前、会社名は折り返すと読みづらかったり、ちょっと失礼じゃない？って感じに折れ曲がってしまうことがあるのも事実。
で、そんな時はどうすっと？？と少ない脳みそで考えたのがコチラ。
個人名とか、会社名とか、折り返さないで表示したいというケースもあるよね
びっくりするほどのことでもありませんが、クライアントさんに
「うちの商品名、折り返されると困るんですがな」なんてこと言われた時にでもお使いください。
ただし、もともと収めたいハコ（divとかpとかtdとか）に入りきらずに折り返すような文字数や、30文字くらいあるような商品名だとエライことになるので、ま、ケースバイケースで。
もっといい方法があったら教えてくださいませ。
