Dreamweaver Town Meeting

今日はDreamweaverに特化したセミナーに参加中！

レベル高くてついていくの大変(´っω・o)
テンプレート機能とか使いこなせない自信がある←ぉぃ

でも、早く帰ってDWで試したいお話ばかり。
わふわふ(=´ω｀=)


そしてMacBookPro欲しい！！
カッコイイなー。

テンプレート作成 続き

さて、作成していたテンプレートのコーディング完了したのでブラウザで検証です。
CSS3とハックを使用しない状態でバリデートをかけ、OKが出たのでCSS3を再度追加して完了です。

以下、確認したブラウザとか(´・ω・｀)

【確認ブラウザ】
* Internet Explorer 8、7、6
* Firefox 3.6.3、3.0.1
* Safari 4.0.5
* Google Chrome 4.1.249.
* Opera 10.53

相変わらずMacintoshは持っていないので、未確認。
（もちろんLinuxとかも未確認）

あとは携帯電話・PDA・ゲーム機向けのウェブブラウザも未確認(・ω・｀)
携帯用にはCSS書いてないので別に大丈夫。
iPhone大丈夫かなー(*-ω-*)
safari（win）の開発ツールでちょっと確認したけどよくわからずちょっと不安です。

でもまぁカラム落ちなどのレイアウトの大幅な崩れは無いものの、ブラウザごとにちょっとしたズレがあるので修正をどうするか。
あとはどうしても角丸にしたくて丸くしたけど本来は四角くデザインしてたハズなのでそれがうっとおしいと思われるかどうか・・・とか。

不安なのは真っ白背景って目に痛い？とか。
カレンダーがサイドメニューの一番最初にあるのはアクセシブル的にどうなの？とか。
コーディング時にサイドの背景にうっすらとグレーを敷いてみたけど、実際イラナイ？とか。。。

取り合えず、しばらく様子見ながら使ってみようと思います。

何か不具合＆こうしたほうが良いのでは？というのがありましたら教えてくださいませー。

ちなみに今回のブログテンプレートのテーマは
「うさぎ・白」です　（←まんまｗ

テンプレート作成中

現在、「うらひな　ブログ。」用のテンプレート作成中です(´・ω・｀)

今回は白ベース。
今までの黒ベースから、爽やか路線に変更です（←ぇ

今までどおりの情報量を維持するために3カラムレイアウトですが、左右に振り分けると記事が読みづらいことが不満でした。
なので今回はやりたかった右に集めるタイプにしています☆
記事本体が左で、サイドバー（というかメニュー類？）は右に2つ。

これで記事本体はウィンドウの横スクロール無しでも表示される率が高くなる！（予定）

フッター（ブログの最下部、Copyrightの部分）も、グローバルフッターを掘り起こして（gooテンプレートではデフォルトでオフになってたので）1600pxのウィンドウ幅まで対応する画像を設置☆
それ以上のウィンドウサイズで見られた時のこと考えて、一応どうにかしないとなとは思ってますが・・・。
さてどうしよう。

それから、CSS3も少しだけ入れる予定。
いや、角丸背景とかホント少しだけですが。。。

そんなことより「このページのトップへ」っていうリンクを作りたい！
でもHTML編集になるのでそれはちょっとなぁ。。。（ぉぃ怒
gooさん、デフォルトで最下部に出るように組み込んでくれないかな(´・ω・｀)


さてさて。
デザインとコーディングは済んでいるので、今はブラウザ検証中です。
（ちょっとだけ変えてみたので、作業途中と気づいた人いるかも？ｗ）
検証が終わったらアップ予定！
わーい楽しみ(=´ω｀=)

cssniteLP9

今日はセミナーです(=´ω｀=)

諸事情により１時間遅れて参加することになり、
すっかりしょぼーんです(´っω・o)


でも途中からだったけど見られて良かった！！
でも今のセッション出来たら最初から見たいーっ！

すごい楽しみにしてたのに…
あたしの馬鹿。


休憩を挟んで、１９時半くらいまで続きます。
お菓子とデジカメ持参（笑）

いただいたFirefoxの紙袋がめちゃ可愛い☆
紙袋

サクラエディタで改行を削除

サクラエディタで改行を置換し削除する方法

※ヒナの作業環境はwindows（XP SP3）です。

1. ファイルを用意します。
   改行マークは水色の矢印です。
   
   今回は7つ改行があるファイルです。



2. 「ファイル」メニューから「名前をつけて新規保存」を選択。
   



3. 新規保存の際に改行コードを選択できるので、「CR＋LF」を選択し、保存。
   



4. 「検索」メニューから「置換」を選択。
   （ショートカットキーの「 Ctrl＋R 」が便利です）
   置換前（N）の欄に「\r\n」と入力
   ※置換後（P）の欄は空欄でOK
   
   「正規表現」にチェックを入れ、検索すると...
   
   ↓
   改行コードが黄色くマークされているのが確認できます。
   この黄色くマークされた部分が置換対象になります。
   
   



5. 置換を実行して完成。
   「全て置換」を実行したので、全ての改行箇所が置換され、一行になりました。
   
   画像では数行あるように見えますが、画面左側に行数が1と出ているので大丈夫です。（置換前は7行）

ブログなどでTEXTエディターを使用していると、ENTERキーで勝手に改行になるのはすごく便利だと感じるのですが、コードを書いて持ってきた場合、意図しない箇所で勝手にbr改行扱いになってしまうのが非常に困ります。
数行なら一つ一つ消すこともできますが、面倒くさい多いと大変だしミスも出てしまう。

今回は、仕事で取引先からCMSツールとして用意していただいたエディターが、
Enterキーで改行する・・・という仕様になっておりまして(・ω・｀)
ヒナが自分で作成したソースコードをペリっと貼り付けたらえらい改行の嵐！！ガーΣ(゜ω゜||)ン

涙が出そうになりました(´；ω；`)うっ


最初ちゃんと\r\nと指定して置換しようとしたけど0件と出てうまくいかず、
調べたところ原因は、
「ファイルを新規保存して改行コードを指定する」
という作業が抜けていたせいのようです。

ちなみに、その時のソースでは改行箇所は147個でした。
一個一個消してたら泣きそうです、間違いなく。

コードを書く時は見やすいコードにするために、改行したりインデントを付けたりするので、アップ用に改行を削除したファイルを用意する時に置換はとても便利。
もちろん、元の見やすいコードは別で保存しておきます。
（後から修正する時に見やすいコードのほうが自分が楽ですから）

正規表現は苦手だけど、やっぱりとても大事。
\r\n　←メモメモ

+　+　+　+　+　+　+　+　+　+　+　+

と、記事を書いていて数値参照型の特殊文字変換サイト様を発見！！
　リンク → 特殊文字変換（数値参照型）
これは便利(´；ω；`)うっ

普通に￥という記号を半角で入力すると、ブラウザでちゃんと表示できないのですよ。（消えちゃったりとか）
それをちゃんと表示できるように、特殊文字はコードで書いたほうが良いのですが。。。
覚えてないし、結構タイヘン。

今までは一つ一つ調べていましたが、こちらのサイトだとフォームに入力すると変換してくれるプログラムになっているのですごく便利です！
リンク → サイト名「あんぽんたん」様。
スバラスィ(´っω・o)

+　+　+　+　+　+　+　+　+　+　+　+
でもまぁ記事をいったんアップしてから再編集すると、
もうその特殊文字コードはどっかにいっちゃうんですけどね、
gooのエディター(・ω・｀)

改行の検索memo（まとめ）

サクラエディタで改行(CRLF)を検索する場合 \r\n

改行(CR,LF,CRLFのすべて)を検索する場合 [\r\n]+

改行(CR,LF,CRLF,LFCR)と最終行の行末を検索する場合$

参考サイト様 → 正規表現 - SakuraEditorWiki

エクセルの謎

エクセルのテキストボックスへ記述したテキストが、環境によって表示されない件。

原因は不明。
調べたけどOffice製品はまったくの守備範囲外でたどり着けない(´；ω；`)
（いや、普通にadobeも使いこなせてなんていませんが、えぇ残念です）

エクセルのバージョンが違うから？
セキュリティ？
それともVBA組んだから？
そもそもオブジェクトの量が多すぎ？

のぉぉぉぉぉっ！！(´；ω；`)困

未だに原因不明。
確認＆提出用の資料だから困る。

作成したエクセルファイルは打合せ時に使用したのですが、
ヒナは表示されているものだと思ってハナシを進めるも先方とハナシがかみ合わず。
どうやら一部、表示が完全ではなく数行しか表示されていない・・・とか。
そこに大事なことが書いてあるというのに！！
そりゃあハナシがかみ合わない訳です(・ω・｀)

直らないのであれば、テキストボックスではなくセルに記述しなおすけど・・・
そうなると全ページ修正発生で30ページ強。
それは工数がかかりそうだから時間が勿体無いなぁ。

エクセルはパワーポイントじゃないんだから、ちゃんとデータとして生きるようにセルに書けって？
データのほかに、オブジェクトに矢印引っ張ったりして分かりやすく説明したかったの。
パワポみたいに使っててすいません(・ω・｀)

表示されないのはバクか仕様か、自分の環境に問題があったのか。
システムフォントの関係だとか何だとかで崩れるとはあったけど不明。

しかもテキストボックス内のテキストは検索も置換も出来ないようで、
がんばって作成したファイルは「見た目は良いけどデータとしては残念な結果」のファイルに・・・orz
↑これはVBA組めば解決するようなのですが、
ヒナがやりたいのはそんな高度な使い方じゃなくて普通にフツーに・・・（汗）

うーん。
"適材適所"ですかね。
やっぱりパワーポイントとエクセル両方必要だな。

っていうかもうすぐ2010ですか？(´・ω・｀)うちは2003です。

ブログトップの説明書きを削除

最近、ブログのトップに「about：うらひな ブログ。」という、
このブログについての挨拶文（説明文のようなもの）を追加していましたが・・・

（その日記 → ブログトップに説明書きを追加＠2009-11-21）

ブログの説明文を設置した理由は、自分が初めて訪れたブログで
『どんな人がどんな感じで書いているのか』
そんな"説明文"のようなものがあると嬉しいなー、と常々思っていたからです。

特に、カテゴライズの説明書きがあると作者さんの趣味とかジャンルとか分かって良いのではないか？と(・ω・｀)

「うらひなブログ。」は、なんか来るなり怪しいし（←
カテゴリーも、何をどう仕分けしているのか微妙？と思って。
（実際本人にも微妙）

自分的には、ブログをアピールといいますか、
ブログのお友達が増えたら嬉しいな大作戦！！
といいますか... |ω・`）コソーリ


「やっぱうちのブログは怪しくてコメント書きずらいかな」
とか、
「気軽にコメントお願いしますって書いてみようかな」
とか、
色々"お知らせ"というものをしたくて追加してみたのですが...


結果、なんだか納得がいかず落ち着かず外すことにしました(´・ω・｀)ノ


本当は、「プロフィール」項目があるのでそこにブログの説明文なども追加出来れば良いかなと思ったのですが。
gooブログのプロフィール欄は全角100文字迄・タグ不可という制限があるため追加できませんでした。
残念(・ω・｀)

そもそも、
『"サブタイトル"（h2タグ）が、ちゃんとブログの説明文になっていれば良いのでは？descriptionにも反映されてるワケだし』
というごもっともな意見は敢えて（ｒｙ



アクセシビリティや情報量やデザインを色々考えた結果、
メインエリアに表示した説明書きは削除してサイドバーに似た様なものを設置することにしました。
（大体この色彩指定しといてアクセシビリティのこと言えない件orz）

説明書きについては、ブログのデザイン変更してからまた考えようと思います。

ブログトップに説明書きを追加

初めて訪れたブログで、どんな人がどんなことを書いているのか気になって(・ω・｀)

"About"とかあれば良いのですが。
gooブログではプロフィールがそんなに充実していないので、サイドバーに表示するプロフィール欄にめっちゃ書き込むか。
皆さんどう対処していらっしゃるのでしょうか・・・

時々、ブログトップに「このブログについて」的なものを設置している方もいらっしゃって、
うちのブログにも"取り説"的なものを導入してみようかなと。
「about：うらひな ブログ。」を記事トップに表示されるように設定してみました。
（PC版のみ閲覧可）

つ・・・常に出てるのね(*-ω-*)
うざ(ry

個別ページでは表示されないのでまぁ良いか。
でも過去記事表示してもトップは譲らないよ！的な振る舞いがちょっと・・・
仕方ないか。

まぁなんというかカテゴリの説明とかを付けたかったのですが(・ω・｀)
それぞれのカテにリンク張ってるわけじゃないし、それならブログヘッダーにテキストで書いて背景画像にしちゃうか・・・

それにはテキスト量多過ぎorz

どうしよう。
やっぱ消そうか...
うにゅう(´・ω・｀)

雑誌

webのお勉強用に購入する雑誌(｀・ω・)p
自分用メモ

今までは本屋さんで購入していましたが。。。
うっかり買い忘れてしまったり。

次からamazonで買ってみようかしら(・ω・｀)

「Web creators」

Web creators (ウェブクリエイターズ) 2009年 11月号 [雑誌] インプレスコミュニケーションズ このアイテムの詳細を見る

ブラウザにてデザイン確認

さて．．．。

ブログテンプレートのデザイン変更です(｀・ω・´)
　前記事→ブログテンプレート　テーマ「星空」（2009-10-10）

残るはブラウザチェック～。
ヒナ自宅はMicrosoft Windows（XP）しかないので、その環境にて出来る限りのチェックをいたします。

様々な種類のインターネットブラウザ（このページを観ているソフト）があり、それぞれ独自のレンダリングシステムがあって・・・なんて細かいハナシはさておき（←ぇ）

ヒナの確認するブラウザは以下、5種類7ver.
【確認ブラウザ】

• Internet Explorer 6、7、8
• Firefox 3.5.3
• Safari 4.0.3
• Google Chrome 3.0.195.25
• Opera 9.52　←　バージョンアップしてましたorz　10へアップグレード＆確認済み

Macintoshは持っていないので、未確認。
（もちろんLinuxとかも未確認）

あとは携帯電話・PDA・ゲーム機向けのウェブブラウザですが・・・
それらも未確認(・ω・｀)テヌキ？

果たしてこんなことで良いのか・・・


だって持っていないんだもん(´っω・o)iPhone欲しい～

なのですみません。
普通にPCか、携帯なら普通のヤツ（imodeとか（フルブラウザじゃないほう））で見てください(・ω・｀)


ちなみにヒナのメインブラウザは相変わらずのFirefoxです。

それから、IEはもう6とか使うのやめて、出来たら最新版の8にしちゃってください(・ω・｀)
って言うとSEさんに嫌がられる～（笑）
一応、まだIE6のユーザーも多いので6,7,8どれでも観られるような作りにしています。
でも6より前のはごめんなさいです。



＋おまけ＋
以前は市場シェア9割を占めていたと言われるInternet Explorerですが、現在はだいぶ他のブラウザが伸びてきたとか？
というワケでお勉強用メモ。

wikiより- 2009年8月の市場シェア

1. Internet Explorer - 66.97%
2. Mozilla Firefox - 22.98%
3. Safari - 4.07%
4. Google Chrome - 2.84%
5. Opera - 2.04%
6. Netscape - 0.49%
7. Other - 0.58%

引用元ページ：wikiウェブブラウザの一覧

ネスケはチェックしてないなぁ。