使うアプリ（2個+1）

MAMP / apacheとMySQLにPHPを簡単インストール

MAMP: Mac, Apache, MySQL, PHP

hoster / hostsの設定が楽チンになるアプリ

RedWinder::MacApp::Hoster

エディター / CotEditor使った

CotEditor プロジェクト日本語トップページ – SourceForge.JP

手順（うろ覚えだけど）

1）MAMPの変更

MAMP PROは使わないからアンインストールした
アプリケーション フォルダのMAMP PROの中にあるUninstaller.appで
全部チェックした。

MAMPのポートを:8888から:80に変更した

2）httpd.confの書き換え

httpd.confをCotEditorで開けるように、cmd+iから変更

httpd.confの場所は

/Applications/MAMP/conf/apache/httpd.conf

次の行を検索して

#AddType text/html .shtml
#AddOutputFilter INCLUDES .shtml

#（コメントアウト）を削除して .htmlを追加

AddType text/html .shtml .html
AddOutputFilter INCLUDES .shtml .html

次に、

Options Indexes FollowSymLinks

で検索して

<Directory />
    Options Indexes FollowSymLinks
    AllowOverride None
</Directory>

に”ExecCGI Includes”（CGIとSSIの使用を許可）を追加

こんな感じになる。

<Directory />
    Options Indexes FollowSymLinks ExecCGI Includes
    AllowOverride None
</Directory>

3）httpd-vhosts.confの編集

/Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

winのxamppだとNameVirtualHost *:80がコメントアウトされてたけど
MAMPはされてなかった。

一番下に追加
DocumentRootにフォルダの場所
ServerNameに任意のアドレス

<VirtualHost *:80>
  DocumentRoot "/Users/［ユーザー名］/_webroot/example"
  ServerName _example.localhost
  <Directory "/Users/［ユーザー名］/_webroot/example">
    order deny,allow
    allow from all
  </Directory>
</VirtualHost>

4）hosterを起動

ホスト名に「_example.localhost」
IPに「127.0.0.1」を追加

こんなの追加されたらおk

127.0.0.1 _example.localhost

以上MAMPを再起動して動作チェック

バーチャルホストを増やす時は
3）と4）をそれぞれ編集。

以上で漏れはないかな？

うちはWP Social Bookmarking Light « WordPress Pluginsを使っているので
[設定 - wp social bookmarking light]
の
facebookタブを開いて
Locale:en_US を
Locale:ja_JP に変更して保存。

プラグインを使っていない場合も
en_USをja_JPに変更するだけ。
というメモ。

is_page('スラッグ')

if文をこんな感じに書いてるけど
「｝」の為に?phpって書くの面倒くさい。
シンプルにできないものかな。

<?php
if(is_page('スラッグ')){
?>
スラッグだった時の処理
<?php
}
?>

条件分岐タグ – WordPress Codex 日本語版

WordPressをカスタマイズするなら絶対覚えておきたい条件分岐やカスタム投稿タイプなどいろいろ

関数：WordPress私的マニュアル

分岐は大体is_なんちゃらなのかしら。

こっちは出力する場合
ページスラッグを出力する方法 | Lovelog+*

日々、エロとのっちと格言名言lifehackやオサレ風写真とたまにwebの事をリブログするばかりの
生粋のリブロガーなので（オリジナルポスト5%くらい）
tumblr以外は特に稼働していないのだけれど

リブロガーたるもの自分の言葉で何かを語る事は、はばかれる為
悶々としたものはtwitterに流します。
悶々としてないものも流します。

そうすっとtwitterからはmixiとgreeに飛んでいくので無責任な生存確認になってるようなならないような。

うちの中心はtumblr

リブログしてるだけでお金が貰えたらなーなんてことを考えるくらい
気分転換にポチポチしてます

それを支えるのはFirefoxと
tombloo

そして今は
tomblooにgoogle+に投稿出来るパッチをインストールして
（参考:Firefox用アドオン「Tombloo」にGoogle+への投稿を追加する方法｜いちの日記（チラシの裏））
polygonplanet/tombloo – GitHub

以下のページを参考に
（参考:これはすごい！Google＋でエクステンションを使わずにFacebook・Twitter・Evernoteへ同時投稿する裏技 | Chrome Life）
dlvr.itにgoogle+のfeedを登録して
twitterとfacebookに飛ばした

ゴミをまき散らしてるだけな気がするけど
もうちょっと続けてみる。

[追記]
思うようにコントロール出来なかったから
dlvr.itを使うのやめた
こえーこえー

当たり前だけどこんな風に出来無いわけですよね

$("this ul").addClass("hogehoge");

childrenを使うといいみたい。

$(this).children("ul")

親にはparent

$(this).parent()

参考 / まよねこ inside » Blog Archive » 【jQuery】thisの親や子要素の指定方法[リライト版]

宿題
ひろし+すみれのliからから友蔵+こたけのliを指定するにはどうしたらいいんだろうか。

<h1>さくら家</h1>
<ul>
<li><span class="name">友蔵+こたけ</span>
<ul>
<li><span class="name">ひろし+すみれ</span>
<ul>
<li class="name">さきこ</li>
<li class="name">まるこ</li>
</ul>
</li>
</ul>
</li>
</ul>

を追加するとふきだしを消せるみたい。

そのまま

大きな地図で見る

iframeに&iwloc=Bを追加

大きな地図で見る

以前は、ふきだしを消してソースをコピペしたら非表示になってたのにねぇ。

firebugを見上がら、なんだっけなーこれって思ってたけど
reset.cssのimgの指定がこうなってた

img{border:0;}

なのでvertical-align:bottom;を追加してみたら隙間が消えた。

img{border:0;vertical-align:bottom;}

昔、vertical-align:bottom;を指定してたと思うのだけれど、
なんで今入ってないんだろう
何か理由があって削除したのかな？

思い出せない

[編集] – [コンテンツに応じて拡大・縮小]Ctrl+Alt+Shift+C
スマートオブジェクトには使えない

上で使ったアルファチャンネルは
クイック選択ツールで選択範囲を作って
[設定範囲] – [設定範囲を保存]から作成

参考adobe help

Adobe Photoshop CS5 * コンテンツに応じた拡大・縮小

何がいいのかイマイチ判らないまま仕事で使う事になったので
とりあえず動作確認用にローカルにインストールしてみようとしたら
Warning: session_start()ってエラーがでて
上手くインストール出来なかったよっていうメモ。

環境

windows7 64bit
xampp1.7.3
concrete5.4.1.1.1 日本語 最新安定板

インストールの準備

以下のリンクを参考にphpMyAdminからconcrete5用の空DBを作成
バーチャルホストも用意しておく
うちは_c.localhostにした。

inputlog – Concrete5をxamppにインストール
インストール準備 :: concrete5日本語公式サイト

インストール

_c.localhostにアクセスすると下のようなエラーが表示されて先に勧めなかった。

Warning: session_start() [function.session-start]: open(\xampp\tmp\sess_jpft2igj399p07rk0ecstj7tn5, O_RDWR) failed: No such file or directory (2) in D:\_webroot\c5\htdocs\concrete\startup\session.php on line 18

エラーの原因

どうも、php.iniのsession.save_pathがおかしいみたい。

C:\xampp\php\php.ini

を開いて、1496行目あたりの

session.save_path = "\xampp\tmp"

を
こんな感じに修正

session.save_path="C:/xampp/tmp"

xamppのコントロールパネルからapacheを再起動して
_c.localhostにアクセスしてみるとエラーが消えた。

変な達成感があるけど、実際まだ始まってすらいない。

MySQLのサーバーアドレスは
デフォルトだとlocalhostで
その下はMySQLにログインする時のidとpass
データベース名はインストールの準備で作ったヤツ

ダウンロード

旧バージョン(1.7.2)をインストールしたかったので
こっちから拾ってきた
XAMPP – Browse /XAMPP Windows at SourceForge.net

最新版はこっちにも。apache friends – xampp for windows

インストール

全部デフォルトでポチポチしてって完了。
(※インストール先をc:にすると勝手にxamppフォルダが出来て、c:\xamppにインストールされた。

設定

localhostにアクセスして
左側のメニューの
セキュリティ – セキュリティから

そのような問題をすべて修正するには、単純に次のツールを使ってください。
=> http://localhost/security/xamppsecurity.php <=

をクリックして
パスワードを設定。

パスワード指定時にチェックをいれとかないと
mysqlrootpasswd.txt や
xamppdirpasswd.txt が生成されないみたい。

.htaccessをC:\xampp\htdocs か C:\xampp\htdocs\xamppあたりに置くらしいけど

Order deny,allow
Deny from All
Allow from localhost 127.0.0.1

や

order deny,allow
deny from all
allow from localhost
allow from 127.0.0.1

みたいなの。
大文字と小文字に違いはあるのかな？

localhostが開かなくなった、なんか間違ってたんだろうか。

あとSSIとバーチャルホスト(バーチャルドメイン？)の設定した。
xamppでinclude(SSI)を使えるようにする
ルートパスとDreamweaverとバーチャルホスト(バーチャルドメイン？)

httpd-vhosts.conf
19行目あたりの
#NameVirtualHost *:80のコメントアウトを解除して
すぐ下に

DocumentRoot "C:/xampp/htdocs"
ServerName localhost

を追加した。

(※なぜかlocalhostじゃないやつがlocalhostで開いてしまったので

php.ini

C:\xampp\php\php.ini
を開いて、mbstringで検索

1771行あたりから始まるmbstringの
;mbstring.language = Japanese
みたいなやつの先頭の「;(セミコロン)」を削除した

Welcart Home ショッピングカート for WordPress | ECサイト構築プラグイン
Welcart ライブデモ

そのうち使うかもしれない。

本体無料、テンプレや拡張プラグインは有料みたい。

xampp1.7.3のapacheが起動しなくなった
原因は単純にhttpd-vhosts.confの記述ミスだったんですけど

問題を特定する為にした事のメモ

1)コントロールパネル
起動しなかった

2)apache_start.batで強制起動
apache_start.batで強制起動させられるそうな

C:\xampp\apache_start.bat

でも
“apache” is not started.と言われた

3)エラーログをみてみる

C:\xampp\apache\logs\error.log

57行目が閉じてないって書いてあった

httpd.exe: Syntax error on line 484 of C:/xampp/apache/conf/httpd.conf: Syntax error on line 57 of C:/xampp/apache/conf/extra/httpd-vhosts.conf: C:/xampp/apache/conf/extra/httpd-vhosts.conf:57: <VirtualHost> was not closed.

解決。

緑色のJoin Now it’s FREEをクリックして
メールアドレスとパスワードを登録し
urlを入力したらSpeed upをクリックして少しまつと完了

こんな感じのcssが

こうゆう風になりました。

わたくしごっちゃになっておりました。

こんな感じの記述です。

<!--#include file="nav.html" -->

<!--#include virtual="nav.html" -->

fileはそのファイルからのパスで
virtualはdocument rootからのパスみたい

大きなサイトで、ヘッダーやメニューやフッターを
共通のパーツとして書きだすと修正の時なにかと便利な感じがしました。

あと、javascriptがクライアントサイドで書きだすメニューなんかと違って、
SSIは文字通りサーバーサイドで処理されるので、検索で不利になるような事はないそうですぜ。

そんでもって、ローカルで作業する時
xamppの初期状態だとSSIを使うには.shtmlにしなくちゃいけなかったと思うのだけれど
それだと困るので.htmlでもSSI使えるようにするだす。

やり方

1)
httpd.confの418行あたりを
(xamppを何も変更せずにインストール場合は、多分以下の位置)

C:\xampp\apache\conf\httpd.conf

2)
こんな感じに変更して

AddType text/html .shtml .html
AddOutputFilter INCLUDES .shtml .html

3)
Apacheを再起動、でおkなハズ。

追記)
.htaccessならこんな感じ

AddType text/x-server-parsed-html .shtml .html
Options Includes

その他、バーチャルホストの設定などは以前の投稿を参考に

ルートパスとDreamweaverとバーチャルホスト(バーチャルドメイン？)

親(index.html

<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>乱雑モックアップ｜親ページ</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />

</head>
<body>
<ul>
 <li><a href="after.html?http://www.google.com">googleを開く</a></li>
 <li><a href="after.html?http://www.yahoo.com">yahooを開く</a></li>
</ul>
</body>
</html>

子iframeがあるhtml(after.html

<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>乱雑モックアップ｜子ページ</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript">
window.onload=function(){
var innerUrl=location.search.substring(1);
document.getElementById("innerFrame").src=innerUrl;
}

</script>
</head>

<body>
<iframe id="innerFrame" src="" frameborder="0" width="640" height="480"></iframe>
</body>
</html>

これで、親ページのリンクの?以下の名前
(after.html?http://yahoo.co.jpならhttp://yahoo.co.jp)のファイルを
子のiframeで開けるのだが
これ、大丈夫なんでしょうか？

?javascript:alert('alert');

でalertがでるけど、alertを任意に使えるって事は何か別の事がされるんだろうか？
パスワードなんかを扱わないページは気にしなくていいのだろうか。
という感じで使えるものかわからんので教えてない。

font-size、
pxで指定するとIEで拡大縮小できなくなる、font-size。

ブラウザやOSやフォントによって大きさも変わるしって事で
bodyに85%くらいを指定するくらいでおしまい、って感じに
結構ぞんざいに扱っていました。

そんな人間なのに、最近意味もなく
「YUI CSS Resetを使ってるし、YUI CSS Fontsも使ってみようかな」と思い立ち
YUI3.3をダウンロードしたはいいけど忙しくて放置してところに
素敵なタイミングで以下の良エントリーがっ。

YUI 3のCSS Fontsを使っている場合のフォントサイズ対応表をCSSのコメントに書いておくと便利ですよね :: 5509
※cssコメントの対応表あり

みんな、pxに対応する%を覚えて使ってんのかなぁ、すげぇなぁ。。。と思ってたけど、コメントいれちゃった方が優しいっすよね。
さっそくパクろう。

YUI 3: CSS Fontsのダウンロードや対応表

YUI 3: CSS Fonts
解凍後以下のフォルダの中にあるよ

YUI Library\yui\build\cssfonts

fonts-context.cssってなんだろ

追記
使い方間違ってたっ！！

任意のfont-sizeをYUI CSS Fontsを読み込んだあとの
bodyに指定してたので次のような事になってた。

font-familyを変更したらサイズが合わない？

body{
 font-family:"メイリオ", Meiryo;
 font-size:93%;
}

としたら12pxにならなかった。

確認用の画象(20110424.png)をつくって、

確認用のソースを用意して

<style type="text/css">
body{
 font-family:"メイリオ", Meiryo;
 font-size:93%;
}
.test{
 padding:20px;
 position:relative;
}
.text{
 position:absolute;
 top:88px;
 left:30px;
 color:#f33;
}
</style>
</head>

<body>
<div class="test">
 <p>メイリオで12px</p>
 <p><img src="20110424.png" width="145" height="115" alt="" /> </p>
</div>
<div class="test">
 <p class="text">メイリオで12px</p>
 <p><img src="20110424.png" width="145" height="115" alt="" /> </p>
</div></body>

textを重ねてチェックしてみたら、15pxになってるぽい。
表示結果

検索すると理由が書いてありました
YUIのfonts.css[to-R]
bodyにfont-sizeを指定するとyuifontsの指定が上書きされちゃうのね
そりゃそうだ。

上記cssを以下のように変更してチェック

<style type="text/css">
body{
 font-family:"メイリオ", Meiryo;
}
.test{
 font-size:93%;/*←ここに移動*/
 padding:20px;
 position:relative;
}
.text{
 position:absolute;
 top:29px;
 left:31px;
 color:#f33;
}
</style>
</head>

<body>
<div class="test">
 <p>メイリオで12px</p>
 <p><img src="20110424.png" width="145" height="115" alt="" /> </p>
</div>
<div class="test">
 <p class="text">メイリオで12px</p>
 <p><img src="20110424.png" width="145" height="115" alt="" /> </p>
</div></body>

表示結果

最初にリンク貼った徳田さんとこのサンプルソースもそうゆう風に書いてあるのにね。

でもってその値にantialiased;を指定すると
他のブラウザと同じような細さになるようなならないような。

確認用スクリーンショット

確認用ページ

※safariで見ないと意味ないよ。
-webkit-font-smoothingでsafariの文字の太さを他のブラウザと合わせる。

プロパティと値

-webkit-font-smoothing: none;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;

noneを指定したら、それ以降が激しく文字化けしたので
確認用ページから外した。

参考にしたサイト /

Maxvoltar – -webkit-font-smoothing

こんな感じで

どうも原因はtumblrのダッシュボードが日本語化されて

XPath に title 属性を使っていて、それが日本語になったため

らしいです。

こちらで修正パッチが配布されてました。
Tumblr日本語ダッシュボード用Tomblooパッチ | 圧縮電子精神音楽浮遊構造体

はーこれはたすかる

うちの環境では直接右クリックからインストール出来ず
ダウンロードして
C:\Users\[ユーザー名]\AppData\Roaming\Mozilla\Firefox\Profiles\[プロファイル名]\tombloo\script
にぶっこんで
メニューの 「ツール」→「Tombloo」→「Tomblooのリロード」でインストールしました。

それでは素敵なtumblr lifeを。

理由がわからないんだけど
Firefox(3.6.15のみ確認)でmmargin-bottomがmargin-topになるのです。

<h1>h1-text</h1>
<div id="primary">
 <div id="secondary">
  <ul>
   <li>list</li>
   <li>list</li>
   <li>list</li>
  </ul>
 </div>
</div>
<p>text</p>

/*すでにresetしてあるとして*/
body {
 padding:20px;
}
h1 {
 background:MistyRose;
}
#primary {
 background:olive;
}
#secondary {
 background:lavender;
 margin-bottom:20px;
}
li {
 float:left;
 background:darkorange;
 margin-right:10px;
}
p {
 background:dimgray;
}
/* clearfix
------------------------- */
ul {
/zoom : 1;
}
ul:after {
 content : '';
 display : block;
 clear : both;
 height:0;
}
</style>

スクリーンショット

chrome

こうなって欲しい

IE8

こうなって欲しい

Firefox

なのにこうなる

原因と解決法を考える

結論から先に書くと、上記の構成の場合
ulにdisplay:inline-block;を追加して意図した表示に出来た。

ul{
display:inline-block;
}

あれ、display:tableでも平気か？

Firefox

display追加するとこうなった。

けど理由が全くわからない。

どんな状況で発生するのか試してみると
liにposition:absolute;でも同じ現象が起きたので
浮動体に問題がありそうな感じ

多分Firefoxが間違ってるんだろうけど
firefoxの仕様が正しいのか他のブラウザーの仕様が正しいのか知りたい

ここら辺を理解できたら解決するのだろうか。。。？
Visual formatting model
Box model / 8.3.1 Collapsing margins

ulにborderを付けてもmargin-topみたいな隙間は消える

border使えない時はこれじゃダメだ。

これ、imgにvertical-align:bottom;や
vertical-align:top;を指定してある場合、
operaでpositionの基準点がうまくいってないような感じの
とんでもない表示になってて(v10.50以前は確認してないけど)

例 / positionの基準点がうまくいってない感じの表示

今気づいたけど
aタグの中にrollover2.jsのロールオーバー対象になるimgだけが入っていると
おかしくなる。

aタグの中にimgの他に、テキストが入っているとおかしくならない。

蛇足 / imgにvertical-align:bottomしたい(してる)理由

ご存知vertical-alignの初期値はbaselineなので
アルファベットのg,j,p,q,yの下に飛び出る部分(ディセンダって名称らしい_*1)の余白が確保され、テキストと並べた時にimgの下に隙間ができちゃう

この隙間を埋めるには、vertical-align:text-bottomを指定するのが定石みたいなんだけど
operaだとテキストの位置がズレてたので(10.50以降？)、
いつしかbottomで指定するようになって
しばらくしてbottomを指定するようになった理由を失念してました。

今確認してみたらbottomも表示が変だった＞＜；；；なんだこれ。

とりあえず
vertical-align:text-bottomを指定しとけば
operaでクリック出来なくなるくらい表示が崩れる事はないのかな？

ここから先は失敗を含む試行錯誤メモ

operaだけvertical-align:bottomやtopをそれ以外の値で上書きできないか？

vertical-align:bottomが基本だと疑ってなかったので
問題のあるoperaだけディセンダが消える別の指定にすればいいかな？と思った

しかしoperaだけにcssを適用出来るハックってのが無いんですよね
(検索して出てくるのはopera11では対策されているのか、効き目がなかった)

で逆に考えて
「opera以外にハックで指定して、通常の指定がoperaだけに適用される」ようにすれば
operaだけvertical-align:text-bottomなんかを指定できるんじゃないか？と思ったけど
面倒なので却下。

cssua.js / CssUserAgent (cssua.js)で分岐させる

最近はてなで見かけたブラウザを判別してhtmlタグにclassを付けてくれるjs
これを使えば簡単にoperaだけにcssを指定できた。

.ua-opera img{
 vertical-align:text-bottom;
}
img{
 vertical-align:top;
}

参考 / もうCSSハックは必要なし!? ブラウザ毎にCSSを切り替える「cssuseragent」 | Web活メモ帳

cssua.jsの使い方はcssua.jsを読み込むだけ
cssua.jsを読み込んだページを
operaの”要素を調べる”やfirebugでソースをみると
htmlタグにclassがたくさんついてるのが確認できる。

いやでもjs使わないでどうにかならないかな？

この時点でまだopera以外もtext-bottomでいいのでは？と想像も出来てない。

aにdisplay:blockしたらvertical-align:bottom;でも問題なく表示できた。
でも全部のaにそんな指定したら困っちゃうし
rollover2.jsの範囲のaだけdisplay:blockするってのは
画像の名前だけで勝手にrolloverを指定出来るせっかくの超便利機能を制限することになるので避けたい。

display:inline-block;ならどうだろう？

block要素になればいいみたいだから指定してみたらいい感じだった。
が、いままで問題なかったsafariで
aタグテキストの上部に隙間ができてしまった。

むむむ。

そんで、じゃあそもそもvertical-alignをtext-bottomやtopにすると
どんな問題が発生するんだろう？と
検証してみてら色々こんがらがってきて
結局text-bottomで特に問題なさそうという最初に書いた結論に落ち着きそうな感じ。

*1 逆にb,d,f,h,k,lなどエックスハイト(小文字のxなどの高さ)の上ミーンライン？より飛び出した分はアセンダって名称らしい。

みた感じaタグのmargin-bottomが拡張されている風だけど
marginを0にしても消えない。

どうもこれは、hasLayoutがtrueじゃないから起こるみたいで
普段はaタグにwidthを指定してるから発生してなかった。
(widthに値が入ってればhasLayoutがtrueになる)

今回は_zoom:1を追加して対処。

他にhasLayoutをtrueにするには
hasLayout Property (A, ABBR, ACRONYM, …)

CSS property	Value
display	inline-block
height	any value
float	left or right
position	absolute
width	any value
-ms-writing-mode	tb-rl
zoom	any value

サイトのデザインを始める前の情報をまとめるのが、本当に鬼門。
そもそも実生活でモノや情報を管理するのが苦手な人間なので、センスはアテにならない。
よってテクニックで補いたい(しかし困ったことにテクニックで補おうとしても相当ハードルが高い)。

(準備) > 設計 > 構築

情報を分類

膨大なデータ群から、必要な情報を簡単に取り出せるように。

階層、継承、属性、価値
ツリーとヒエラルキーの違いってなんだ？
混ぜて使えるのか？使った方がいいのか

例えば、本を
文庫 / 実用書 / コミック
みたいなカテゴリーで棚に分類しておいても
新刊だけを別に集めたら
同じものが分散しちゃうけどそうゆうものなのかしら。
どのグループにも属する場合の分け方はどうするんだろう。

分類の基準

以下のページにいいことが書いてあった。

LATCH – ５つの情報の整理棚 – モジログ

LATCH – ５つの情報の整理棚

1. Location （位置）
2. Alphabet （アルファベット）
3. Time （時間）
4. Category （分野）
5. Hierarchy （階層）

情報を分類する方法はこの５つしかない、とワーマンは言っている。

その他資料メモ

IAなんか怖くない～中小規模案件で考える情報アーキテクチャの第一歩～
WCAN 2010 Summer Session-1: IA

雑感

絶対的に完璧な法則が存在するんだろうなって漠然と思っていたけど
そんなのがあればユーザーテストなんて必要ないわけで
そんな都合の良いものは無いですよね。

例えば

IE6だと左右のmarginが40pxになってしまう以下の記述

#test{
margin:20px;
float:left;
}

これをie6 css fixerで変換させると
(select your master stylesheetのpaste your complete master stylesheetを選択してgive me my ie6 fixesをクリック)

/* add display:inline to floated elements */
#test {display:inline;}

なんてcssを吐き出してくれる。

これを保存してコンディショナルコメントでie6だけ読み込むようにすれば対策完了。

でもって、最初からdisplay:inline;が付けてる場合は、新たにdisplay:inline;を吐き出さないのかな？と試してみたけどdisplay:inline;を吐き出してた。

というか、

#test{
float:left;
}

を変換すると

/* add display:inline to floated elements */
#test {display:inline;}

を吐き出してた。
むむむ？

ちょっと調べてみたところ、それぞれの特徴は大体こんな感じ？

無料で公開されてるインデックス型全文検索

他にもあるけど

• サイト内全文検索エンジン – Unicode版msearch
• 全文検索システム Namazu

参考:全文検索 – Wikipedia

サイトのフォルダを一発で開く。

ローカルファイルのところを[右クリック - エクスプローラー]

クロークを使って、putやgetしないファイルを設定する

DreamweaverのFTPて便利。
ちょっと触るだけのサイトのファイルを、面倒臭がって適当にゲットしたら余計なファイルまで関連ファイルとしてダウンロード開始しちゃっていつまでもサーバーと通信中ですが終わらない事がある。

ファイルの所を右クリックするか、サイト定義のクロークで
putやgetから除外するファイルを決められる。
クロークを使用可能と次で終わるファイルをクロークにチェックを入れて、拡張子を追加。

.fla .psd

拡張子 半角ブランク 拡張子で追加してくみたい。

クロークに設定された拡張子は見た目が変わる。

imgフォルダにぶっこまれた大量のpdfを誤ってダウンロードしなくて済むハズ。

最近更新したファイル

ローカルファイルの右クリックして [選択 - 最近修正されたファイル]

日付指定でファイルを選択出来る。

テキストをタグで囲む

テキストを選択してCtrl+Tで囲める
zen-codingのCtrl+Hの劣化版みたいな機能だけど、zen-codingが入ってない場合は便利。

あれ、gifが動かない。

何か思いついたら随時追加。

dtとddを横並びさせた時、IE6でddが3pxズレる時はzoom:1;を付けるとズレなくなりました。

<dl>
<dt>乱雑</dt>
<dd>モックアップ</dd>
</dl>

dt {
 width:3em;
 float:left;
}
dd {
 margin-left:3em;
 _zoom:1;
}

zoomの前の_はIE6用のハック
/にするとIE7以下に効く。

別ドメインのhtmlに手を加えずに出来たら、確実に嬉ションしちゃうけど難しいみたいすなぁ。

構成

www.foo.com/home.html, which iframes
 └＞ www.bar.net/framed.html, which iframes
            └＞ www.foo.com/helper.html

記述例

www.foo.com/home.html

<script>
  // Resize iframe to full height
  function resizeIframe(height)
  {
    // "+60" is a general rule of thumb to allow for differences in
    // IE & and FF height reporting, can be adjusted as required..
    document.getElementById('frame_name_here').height = parseInt(height)+60;
  }
</script>
<iframe id='frame_name_here' src='http://www.bar.net/framed.html'></iframe> 

www.bar.net/framed.html

<body onload="iframeResizePipe()">
<iframe id="helpframe" src='' height='0' width='0' frameborder='0'></iframe>
<script type="text/javascript">
  function iframeResizePipe()
  {
     // What's the page height?
     var height = document.body.scrollHeight;
     // Going to 'pipe' the data to the parent through the helpframe..
     var pipe = document.getElementById('helpframe');
     // Cachebuster a precaution here to stop browser caching interfering
     pipe.src = 'http://www.foo.com/helper.html?height='+height+'&cacheb='+Math.random();
  }
</script> 

www.foo.com/helper.html

<html>
<!--
This page is on the same domain as the parent, so can
communicate with it to order the iframe window resizing
to fit the content
-->
  <body onload="parentIframeResize()">
    <script>
      // Tell the parent iframe what height the iframe needs to be
      function parentIframeResize()
      {
         var height = getParam('height');
         // This works as our parent's parent is on our domain..
         parent.parent.resizeIframe(height);
      }
      // Helper function, parse param from request string
      function getParam( name )
      {
        name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var regexS = "[\\?&]"+name+"=([^&#]*)";
        var regex = new RegExp( regexS );
        var results = regex.exec( window.location.href );
        if( results == null )
          return "";
        else
          return results[1];
      }
    </script>
  </body>
</html> 

追記

結局iframe先のページに書き込むの事に代わりがないのなら
window.postMessage() を使って、クロスドメインの iframe の高さを設定する検証 – 写経日記の方がシンプルで素敵だ。

でもwindow.postMessage()というのを使っているので
以下のように(見よう見まねで)window.attachEventを追加してもIE7以下は広がらなかったです。

構成

www.foo.com/parent.html
 └＞ www.bar.net/iframe.html

parent.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
if (window.addEventListener) { //for W3C DOM
    window.addEventListener("message", receiveSize, false);
} else if (window.attachEvent) { //for IE
window.attachEvent("onmessage",receiveSize);
}
    function receiveSize(e) {
        if (e.origin === "http://www.bar.net/") // for security: set this to the domain of the iframe - use e.uri if you need more specificity
            document.getElementById("bar").style.height = e.data + "px";
    }
</script>
</head>
<body>
<iframe id="bar" src="http://www.bar.net/iframe.html" scrolling="no" > </iframe>
</body>
</html>

www.bar.net/iframe.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<script type="text/javascript">
if (window.addEventListener) { //for W3C DOM
    window.addEventListener("load", postSize, false);
}else if (window.attachEvent) { //for IE
window.attachEvent("onload",postSize);
}
    function postSize(e){
        var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
        if (typeof target != "undefined" && document.body.scrollHeight)
            target.postMessage(document.getElementById("foo").scrollHeight, "*");
    }

</script>
</head>
<body>
<div id="foo" style="height: 1500px; background:red;"></div>
</body>
</html>

baseタグっちゅーのがあって、head内に記述すると
その指定以降の要素に適用される。

<base href="http://sakurachiro/" />

みたいに書いておくと下の図のように

http://sakurachiro/を基準とした相対パスになるそうな。

(hrefに絶対パスと相対パスの両方指定出来るような解説をしてるサイトがあったけど絶対パスしか使えないハズ)

ちなみに記述した後の要素に適用されるので

<!-- A -->
<link rel="stylesheet" type="text/css" href="layout.css" />
<base href="http://sakurachiro/" />
<!-- B -->
<link rel="stylesheet" type="text/css" href="layout.css" />

（あれ、リンク貼ってないのにリンクになってる？）

こうゆう順番で書くと
A は普通の相対パス
B はbaseで指定した位置からの相対パスになります(した)。

自分で使う分にはメリットが思いつかないんだけど
baseタグを外部jsで吐き出すようにしておくと
リンク先のフォルダを簡単に変更出来たりする？

base target

target属性を追加するとそれ以降のリンクが指定した挙動で開くよ。

<base href="http://sakurachiro/" target="_blank" />

_blankとかすげぇウザいですけど。

フレームを使ったサイトをいじくる時
target=”_top”を指定する手間が省けていいかも。
しかしこれ
ローカルで確認する時はどうするんだろう？
ローカルサーバー必要？

次みたいな書き方をした時に(至って普通の記述ですが)、場合によって背景画像が消える事があって気づいた。

div {
 background:#fef url(img/bg.gif) no-repeat right bottom fixed;
}

確認してみる

この背景画像を指定してチェック

例えばoverflow:hidden;のdivに

background-attachment: scroll;

期待通りの表示位置。

background-attachment: fixex;

divの外に出た、右も下もブラウザ(html)のサイズ基準になってる。

bodyに

background-attachment: scroll;

期待した表示と違う。
background-colorはブラウザサイズいっぱいで、background-imageは内容量に合わせて高さが変わる？

以前(YUI 3: CSS Resetを使うと、bodyの背景が画面全体に広がらない現象にいまさら気づいた。)で、htmlにbackground-colorが指定されているとbodyの背景がbodyの内容までしか着色されない事があったけど
htmlにbackgroundが指定されていない時は、背景色に限り拡張されてるの？
面倒くさいから背景画像の方も表示領域を拡張してくださいよ><;

background-attachment: fixex;

ブラウザの左上(html)を基準にright bottomになりまんた。

色々指定して試してみたつもりだけど、最近うっかりや、早とちりや、勘違いが多いのでまだ何か勘違いしてそうで怖いなぁ。

しかし、(個人的に)普段使わない指定の挙動というのは、こんなにも理解したつもりでいるのかと気づいて随分凹む。

デュアルブラシ、ブラシのマスクみたいでオモロイです。
けどそうそう毎回いじったりしなさそうなのでメモ。

その前に、カスタムしたブラシを保存する方法を覚えておく

新規ブラシを作成のアイコンをクリックして、名前をつけて保存。

新しいブラシを登録するのは[編集] – [ブラシを定義]の方

ブラシ先端のシェイプの設定
ソフト円ブラシ175pxをベースにした

シェイプの設定
ジッターを上げた、予想がつかない

散布の設定
離れないような感じに

デュアルブラシの設定
チョークを175pxで、ソフト円ブラシにマスクが掛かったみたいじゃない？

カラーの設定
揺らいで欲しかったから、気持ちやんわり。

ウェットエッジ、滑らかさにチェック。

もう少し着色してみる、テクスチャは後から付けたほうがいいのかな？

ファイル:Olympic flag.svg – Wikipedia

このシンボルマークのように線が絡むリングというか円というか輪を描く方法を考えてみたけど、どうも効率が悪い方法しか思いつかなかった。
慣れてる人にはどうって事ないんだろうなぁ。

以下その効率の悪い描き方

塗りなし線ありの適当な円を描く

線を塗にする

オブジェクト – パス – パスのアウトラインを実行

塗りになった

もう一回線を引く

このまま線を追加すると、なぜか線の位置を変更出来なかったので
一回複合パスを解除して

[パスファインダ - 中マド]で再度複合パス

線の位置を選べるようになった(何が違うんだろう？

もう一度オブジェクト – パス – パスのアウトラインを実行して線を塗りに変更する。

あとは並べて分解して着色

適当に配置

[パスファインダ - 分割]でバラバラにして

着色

まだまだ着色、ここらへんの効率が悪い、どうにかならないかな。

完成

複合パスを分解して複合パスに戻すと、線の位置を選択できるようになるとか謎だけどイラレ面白いなー

ブラウザ幅をコンテンツ分の固定幅より縮めてスクロールバーが表示させ右にスクロールさせると背景が切れるという問題を見つけました。とほほ。

(*ちなみにこんなソース)

<body>
<div id="content">
<div class="inner">コンテンツ</div>
</div>
</body>

#content{background:#f33;}
.inner{width:780px;margin:0 auto;}

先に解決法を書くけど

コンテンツ部分のwidth(固定幅)と同じサイズのmin-widthをbodyに指定すればいいみたい

文章じゃどんな現象か分かりづらいので画像で解説

ページ全体

表示を縮めて意図的に横スクロールバーを発生させた状態

右側にスクロールさせると問題発生、背景が切れてる。

以下でも確認出来ます。
DEMO:コンテンツ量が少ないページでも、フッターをブラウザ下部に表示させるテスト。

解決案

最初に書いたけどこんな感じ

body { min-width:780px; }
#content { background:#f33; }
.inner {
  width:780px;
  margin:0 auto;
}

今回は中身をセンタリングさせる話なのでdivを入れ子にしてるけど、入れ子じゃなくても再現できる。

<body>
<div id="content">
<div class="inner">コンテンツ</div>
</div>
</body>

対策済み / ページ全体

横スクロールさせてみた結果

対策後のソースは以下のページで確認出来るッス
DEMO:コンテンツブロック毎に異なる背景をブラウザ幅いっぱいまで表示させ、内包物はセンタリングするテスト。

気づいたこと思ったこと

最初min-widthを、bodyの他に背景を指定した要素全部(#top,#header,#contents,#footer)に指定してたけど、よくよく考えたら通常はbodyだけで大丈夫ぽい。
ただし折り返しせず要素を突き破るようなテキストがある時は困ったことになる。

あとIE6はmin-widthが効かないけどそもそも背景が切れないという「ええ！あんなに大きな地震だったのに目が覚めなかったのかい？」みたいな感じで頼もしいのか頼れないのかIEらしい。

これじゃあ、いざって時に危ないので自分なりに調べて練習してみる事にする。
(*1 WordPress Database Backupは、データベースを定期的に自動バックアップして、そのデータを指定したメールアドレスへ送信出来るプラグイン)

以下、自分なりの解釈なので、表現や手順に間違いがあるかもしれないですけどメモ。

バックアップ

バックアップが必要なのは、データベース(MySQLから)とファイル(FTPから)の2種類。

まずファイルのバックアップ、
WordPressをアップしてあるディレクトリの中身をFTPで全ゲットしておく。
テーマやプラグインやcss、jsは
ローカルに保存されているので大丈夫だろうけど、
アップロードした画像(wp-content/uploadsにあるやつ)は
名前が変わっているのもあるので。

データベースのバックアップ
前述のWordPress Database Backupを使ってバックアップするとなぜか中身が2KBのsqlしか吐き出してもらえなかったので
phpMyAdminを使ってバックアップをとることにする。

参考:データベースのバックアップ – WordPress Codex 日本語版

phpMyAdminにアクセスして
WordPressのデータベースを選択、この場合はchiro2
エクスポートをクリック。

こんな画面になる

左側 / 吐き出すテーブルと形式を選択
wp-config.php内のtable_prefixで決めた接頭辞を持つのがWordPressのテーブル。
wp-config.php

あとでwp_optionsが問題になるけど含めて吐き出す。

右側オプションとデータ

さくらインターネットだとDROP TABLE / VIEW / PROCEDURE / FUNCTION / EVENT を追加のチェックが外れてるのでチェック。

下側 / そのままで実行

データベースのバックアップ完了

インストールと復元

今回はローカルのxamppにインストールしたWordPressに復元してみる。
移管する時やドメインを変更する時と同じようなイメージ。

バックアップしたファイル類を適当なフォルダに保存して
前回覚えたてのバーチャルホストを設定
参考:サイトルート相対パスとDreamweaverとバーチャルドメイン(バーチャルホスト？)

_wpって名前にしたとして次へ。

ちなみにWordPress.com Statsを使っている場合
1つのAPIキーで別々のサイトに設置した事になってしまうとマズいので
stats.phpは削除したほうがいいかも。
それかphpMyAdminから削除するとか
(statsや自分のAPIキーで検索するとそれらしいのが出てくる)

localhostのphpMyAdminにアクセスして
バックアップしたデータベースと同名のデータベースを作成する。
(xamppやphpMyAdminのパスワードを忘れた場合の確認方法:http://localhost の “xampp user” に対するユーザ名とパスワードを入力してください)

ドメインが変わる場合はwp_optionsをクリック

変更ナシならここは飛ばして次のwp-config.phpを編集。

wp_optionsをクリックしたら
option_nameがsiteurlとhomenの行を探す(siteurlは一番上でhomeは2ページ目にあった)。
それか検索タブからblogのアドレスを検索。

エクスポートしたサイトのアドレスが入っているので
インポートするサイトのアドレス(http://_wp/)に変更する。
siteurlを変更しないままログインすると
エクスポートしたWordPressの管理画面に飛んじゃう。

上で変更したのは 管理画面の[設定] – [一般設定]の以下の部分

• WordPress のアドレス (URL)
• サイトのアドレス (URL)

homeの方は、後からでも変更出来る。

wp-config.phpを新しい環境に合わせて編集
/ WordPressのルートディレクトリにある、コメントがあるから大丈夫。

/** WordPress のデータベース名 */
define('WP_CACHE', true); //Added by WP-Cache Manager
define('DB_NAME', 'chiro2');

/** MySQL のユーザー名 */
define('DB_USER', 'example');

/** MySQL のパスワード */
define('DB_PASSWORD', 'example');

/** MySQL のホスト名 (ほとんどの場合変更する必要はありません。) */
define('DB_HOST', 'localhost');

/** データベーステーブルのキャラクターセット (ほとんどの場合変更する必要はありません。) */
define('DB_CHARSET', 'utf8');

_wp/wp-adminにアクセスしてログイン
ちゃんと復元できてるか確認

大丈夫かな？

そもそもルートパス(サイトルート相対パス？)ってなんぞ？

ルートパス

サイトルートのルートディレクトリからみた相対パス
/から始まる。

絶対パス

外部サイトへリンク貼るときなんかのパス
httpから始まる

相対パス

ファイルから見た対象ファイルへのパス
よく使う

ルートパスで書かれたサイトをローカルでプレビューするには

Dreamweaverだと

[編集] - [環境設定] - [ブラウザでプレビュー] - [オプション]一時ファイルを使ってプレビューにチェック

しておけば相対リンクがドキュメントでもプレビュー出来る(プレビューは)。

編集する設定はadobeのサイトAdobe Dreamweaver CS4 * 新規リンクの相対パスの設定
を参照 / ヘルプの引用

メリット(だと思うところ)
これだとローカルにサーバーを立てる必要もない。

デメリット(だと思うところ)
IETesterでIE6の表示を確認する時たいへんなのと
編集修正するたびブラウザの更新で確認できない。

XAMPPだと

バーチャルホストを使うのが現実的みたい。

編集するファイルは2つ
1つめ
C:\xampp\apache\conf\extra\httpd-vhosts.conf
(うちのPCでの設定ファイルの場所)

1-1）

NameVirtualHost *:801のコメントアウト（##）を削除して有効化する。

1-2）
例 / dドライブのsiterootフォルダをドキュメントルートにして

http://sitenameでアクセス出来るようにするには。

1<VirtualHost *:80>
  DocumentRoot "D:/siteroot"
  ServerName sitename
  <Directory "D:/siteroot">
    order deny,allow
    allow from all
  </Directory>
</VirtualHost>

(ちょっと修正した)
Access forbidden!Error 403になっちゃうならDirectoryの指定は必要
<Directory>は<VirtualHost>の中でも外でも問題なにのだろうか？
DocumentRootのパスに2バイト文字が混ざってると上手くいかない感じ。

Directoryの中に記述できるモノもようわからん。
ここらへん？
http://httpd.apache.org/docs/2.2/ja/mod/core.html#directory
http://httpd.apache.org/docs/2.2/ja/mod/core.html#options
http://httpd.apache.org/docs/2.2/ja/mod/core.html#allowoverride

2つめ
C:\WINDOWS\system32\drivers\etc\hosts
例 / さっきのServerNameに記述した名前(sitename)を追加

127.0.0.1       localhost sitename

とか

127.0.0.1       localhost
127.0.0.1       sitename

みたいな感じで

Apacheを再起動してhttp://sitenameにアクセスしてみる。
いままでこれ知らなかったから
phpのテストをしたい場合
xamppのhtdocs以下にフォルダ作ってて
不便だと思ってたけど、他のサイトと同じように管理出来るのかしら。
ん～2バイト文字のフォルダ名が付いてるとエラーがでるのぅ。
もうちょい試してみよう。

参考にしたサイト

相対ルートパスのサイトをローカルで見る方法（バーチャルホスト設定） World of granshe.
Windows版 XAMPPでバーチャルホストを設定すると、403エラーになる。：Keep The Faith ～ウェブディレクターの日常。まぁ、何でもほどほどに。ほどほどに。～
core – Apache HTTP サーバ
Apache conf 設定メモ

ファイルが読めない！ .htaccess
<Directory> ディテクティブ内の設定で、該当のディレクトリが
Order allow,deny
Allow from all
となっているか。また、AllowOverride の設定がどうなっているか確認しましょう。

Dreamweaverでのサイトルート相対パス設定
Adobe Dreamweaver CS4 * 新規リンクの相対パスの設定

初期設定では、Dreamweaver はドキュメント相対パスを使用して、サイトの他のページへのリンクを作成します。 サイトルート相対パスを使用するには、サーバー上のドキュメントルートと同じ機能を持つローカルルートフォルダを選択して、Dreamweaver でローカルフォルダを定義します。 Dreamweaver はこのフォルダを使って、ファイルへのサイトルート相対パスを決定します。
[サイト]-[サイトの管理] を選択します。
[サイトの管理] ダイアログボックスで、リストにあるサイトをダブルクリックします。
[サイト定義] ダイアログボックスで詳細設定が表示されていない場合は、[詳細設定] タブをクリックします。

[サイト定義] ダイアログボックスの [詳細設定] タブに [ローカル情報] カテゴリのオプションが表示されます。
[ドキュメント] または [サイトルート] オプションを選択して、新しいリンクの相対パスを設定します。

この設定を変更しても、[OK] をクリックした後に既存のリンクのパスは変換されません。 この設定は、Dreamweaver で作成した新規リンクにだけ適用されます。
注意： テストサーバーを指定するか、[編集]-[環境設定]-[ブラウザでプレビュー] で [一時ファイルを使用してプレビュー] オプションを選択していない限り、ローカルブラウザでドキュメントをプレビューしても、サイトのルート相対パスを使ってリンクされたコンテンツは表示されません。 これは、サーバーと違って、ブラウザではサイトのルートを認識できないためです。 サイトルート相対パスでリンクされているコンテンツをすぐにプレビューする場合は、リモートサーバーにファイルを置き、[ファイル]-[ブラウザでプレビュー] を選択します。
サイトルート相対パスの場合、[HTTP アドレス] ボックスに Web サイトの URL を入力します。

Dreamweaver はこのアドレスを使用して、サイトルート相対リンクが、サイトルートが異なることがあるリモートサーバー上で動作するかどうかを確認します。 たとえば、ハードディスクの C:¥Sales¥images¥ フォルダ (Sales はローカルルートフォルダ) にあるイメージファイルにリンクし、完了したサイトの URL が http://www.mysite.com/SalesApp/ (SalesApp はリモートルートフォルダ) である場合は、[HTTP] ボックスに URL を入力すると、リモートサーバー上でリンクされたファイルへのパスが /SalesApp/images/ となります。
注意： 以前のリリースの Dreamweaver では、正しいリモートルートフォルダを追加できず、これにより実行時にページで障害が発生していました。
「OK」をクリックします。

新しいパス設定は現在のサイトのみに適用されます。

つまり、コンテンツの中身が足りない時はフッターをブラウザ(ウィンドウ)下部に固定したい。

DEMO / コンテンツ量が少ないページでも、フッターをブラウザ下部に表示させるテスト。

試してみたhtml構造

div#wrap>div#top+div#header+div#contents+div#footer

指定したcss

html, body { height:100%; }
#wrap { position:relative; min-height:100%; background:#f33;/*確認用*/}
#contents { padding:1em 0 3em;/*コンテンツとフッターの位置調整*/ }
#footer { position:absolute; bottom:0; left:0; width:100%; height:3em; line-height:3em; }

全体を包むdiv#wrapの最低限確保する高さを100%にして
#footerをbottom:0に絶対配置。

これで問題ないかな？
なにか見落としてる気がしてならない。

出来たら#wrapのheightを100%にしたいんだけど
そうするとスクロールした時に#footerが移動しちゃう。

あと各ブロック毎に横幅いっぱいの背景を指定するのに

div#wrap>div.inner

みたいにした。
ソース見づらい。

いつのまにか擬似否定クラス E:not(s) にも対応してた(0.9.7bから？)

使い方メモ

ie-css3.jsと変わらない(おそらく)

上記サイトからelectivizr.jsとお好きなjsライブラリをダウンロードしてくる
NWMatcher – CSS3 Selector and MatcherにあるNWMatcher 1.2.2.jsを使うと全開でいけるみたい。

ヘッダ部分の例

<script type="text/javascript" src="js/nwmatcher.js"></script>
<!--[if lte IE 8]>
<script type="text/javascript" src="js/selectivizr.js"></script>
<![endif]--> 

気をつける事
やっぱり、ローカルじゃ機能しない。
head無いに書いたcssやインラインのcssの指定は効かない。

そこらへんは前回試した0.9.5bと同じですた。
ie-css3.js ( :nth-childなどのCSS3擬似クラスをIEでも使えるようにするjs ) で失敗した事。 | 乱雑モックアップ

例えば、aタグをdisplay:block;すると、クリック出来る範囲が広がるのでリンクが押しやすくなってちょっと優しかったり
背景をうまいこと操ってテキストなのにリッチなメニューを作れたりするのでご存知かと思いますが

ある要素内のテキストにaをdisplay:blockしてpaddingで広げる仕様のリンクが入ったり入らなかったりする下のようなhtmlとcssがあった場合,

<dl>
  <dt>dt / リンクなし</dt>
  <dd><a href="#">dd / リンクあり</a></dd>
  <dt><a href="#">dt / リンクあり</a></dt>
  <dd><a href="#">dd / リンクあり</a></dd>
</dl>

リンクのないdtにもpaddingをつけてレイアウトを揃えようとして、対策を何もしないと

dt {
  padding:10px;
  background:#09c;
}
dt a {
  display:block;
  padding:10px;
  background:#ace;
}
dd a {
  display:block;
  padding:10px;
  background:#f7f7f7;
}

dtのpaddingとdt aのpaddingでdt aのレイアウトが揃わない。

理想としてはこうしたいのが心情。

簡単にどうにかする方法がないかなとちょっと考えてみた。

ネガティブマージンを追加すると

まず、一番最初に思いついたのがネガティブマージン。
dt aにmargin:-10px;みたいなのを追加してみると

dt {
  padding:10px;
  background:#09c;
}
dt a {
  display:block;
  padding:10px;
  margin:-10px; /* ←追加 */
  background:#ace;
}
dd a {
  display:block;
  padding:10px;
  background:#f7f7f7;
}

いきなり出来た(blogのcssを上手くリセットできてないのでmarginがちょっとおかしいけど)。

と思ったけど、IE6-7でみたら下記のように全然ダメだった。ちくしょう。

(デタラメに)IE対策してみた

どうせhasLayoutでどうにかなんでしょ？とか適当なノリでzoom:1;を追加したり。

dt a {
margin:-10px;
/position:relative;/*IE6-7*/
/margin-top:-13px;/*IE6-7 なんかmargin-topに3pxの隙間が出てたから3px多めにした */
}
dd a {
/zoom:1;/*IE6-7 これがないとdt a以下のdd aのdisplay:blockが範囲はあるのに反応しなかった */
}

結果

検証ページ-1

上記「IE対策してみた」に不具合があったみたいなので追加+もう一回

よく判らない3pxの隙間を、hack使って無理やり余分なmargin分無かったことにするのっていくら何でも無いよなぁと思っていたら、@ethertankさんからこんなツイートが。
(ソースの不恰好という話とは別な問題で)タブ移動時に表示が崩れる事があるそうな、そんでもってこうゆう風にしたらよくなりますよとわざわざサンプルまで作ってくれました＞＜感謝。
ネガティブマージンによる領域拡張

さっそく参考にさせてもらうと

dt,dd,
dt a,dd a {
/position: relative;
/zoom: 1;
}

親にも指定するのがキモなのかな？余分なmargin指定がなくなってますね。
あとhoverに着色してあるからクリック出来る範囲が広がっているのを分かりやすく確認出来ますわ、うちもこうしておけば良かったのに気がきかなかったなぁ、パクろう。

overflow:hidden

でもってちょっと上で書いたけど前回の無理やりな記述は無いなぁと思っていたので自分なりに別の方法試してみました。

そもそもなんでposition:relative;にしたんだろう？
前々回のネガティブマージンでハミ出した要素がIE6で切れたら。で使ってみたのが頭の隅にあったからかな？
とりあえずこれから離れてみよう。

そうすると次はoverflow:hidden;とかdisplay:inline-block;とかかな、なんとなく。
overflow:hidden;はclearfixの変わりに使えたりするし。

余分なmarginを指定しないように、こんな感じで描いてみた。
検証ページ-2

今度は大丈夫そうだけどどうだろう。

dt {
  padding:10px;
}
dt,dd {
  /zoom:1; /*IE6-7用*/
  /overflow:hidden; /*IE6-7用*/
}
dt a,dd a {
  display:block;
  padding:10px;
}
dt a {
  margin:-10px;
}

ちなみにhasLayoutはzoomでtrueになるみたいだけど
position: relative;でfalseになるそうな。

hasLayoutメモ | CSS | understandard.net

hasLayoutの値をtrueにする指定

プロパティ	値
display	inline-block
float	left もしくは right
height	any value
position	absolute
width	any value
writing-mode	tb-rl
zoom	any value

hasLayoutの値をfalseにする指定

プロパティ	値
display	block もしくは inline
float	none
height	auto
position	static もしくは relative
width	auto
writing-mode	lr-tb
zoom	normal

position:relative;

を一緒に指定してみるのが良いみたい。

IE6での表示
真ん中が見切れている状態で、一番下がposition:relative;を追加して問題を回避した表示。

しかし2010年の今になって初めて出会うなんてなぁ。

ちなみにIE6以外だと同じソースでこんな感じ。

なんで今までこの現象が起きなかったんだろう？と首をかしげつつ
再現出来る最小限のソースを作ろうと問題部分を抜粋していじるけどなかなか再現させられない。。。
結局、ネガティブマージンがある要素とその親要素両方にwidthを指定したらハミ出した部分が消えた。
最小限のソースにしなくちゃと思う気持ちがもつ脆弱性をついた攻撃！！

<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>乱雑モックアップ｜ネガティブマージンを指定した要素がIE6消えたら一緒にposition:relativeを指定してみようテスト。</title>
<meta http-equiv="Content-Style-Type" content="text/css" />

<style type="text/css">
/* レイアウト */
*{
padding:0;
margin:0;
}
#contents {
  padding:30px;
  margin:30px;
  width:480px;
  background:#d7d7d7;
}
.topics {
  width:480px;
  background:#f3f3f3;
}
dl {
  padding-bottom:1em;
}
dt {
  width:460px;
  background:#09C;
  color:#fff;
  padding:5px 10px;
}
dd {
  margin-top:5px;
}
ul {
  padding-left:1.5em;
}
li {
  list-style:disc;
}

/* 問題のネガティブマージン */
.negative_margin dt {
  margin-left:-15px;
}
/* 回避策らしいrelative */
.fix dt {
  position:relative;
}

</style>
</head>
<body>
<div id="contents">
  <div class="topics">
    <dl>
      <dt>お知らせですよー / ネガティブマージンなし</dt>
      <dd>
        <ul>
          <li>2010年 - お知らせはありませんよー</li>
          <li>2009年 - お知らせはありませんよー</li>
          <li>2008年 - お知らせはありませんよー</li>
        </ul>
      </dd>
    </dl>
    <dl class="negative_margin">
      <dt>お知らせですよー / ネガティブマージンあり</dt>
      <dd>
        <ul>
          <li>2010年 - お知らせはありませんよー</li>
          <li>2009年 - お知らせはありませんよー</li>
          <li>2008年 - お知らせはありませんよー</li>
        </ul>
      </dd>
    </dl>
    <dl class="negative_margin fix">
      <dt>お知らせですよー / ネガティブマージン position:relative;あり</dt>
      <dd>
        <ul>
          <li>2010年 - お知らせはありませんよー</li>
          <li>2009年 - お知らせはありませんよー</li>
          <li>2008年 - お知らせはありませんよー</li>
        </ul>
      </dd>
    </dl>
  </div>
  <!-- / #contents -->
</div>
</body>
</html>

試してる間にposition:relative;使っても見切れるのを回避できないネガティブマージンにも出会ったけど、そうなったらおとなしく親要素のpaddingやmarginでレイアウトした方がいいと思った。

前置き(おもひで)

なんでもかんでもcssでやりたがる時代の終わり頃に、text-indentに負の値を指定してテキストを画面外に飛ばし背景画像のみを表示させる画像置換(Image Replacement)が流行りました
(FirefoxのアドオンWeb Developerでcssを外したりして、文字だけのシンプル(質素)な表示になるコーディングに喜びを感じてた人も居たはず)。

その方法のメリットはうろ覚えだけどjavascriptを使わずにロールオーバーを作れて、音声ブラウザにも読み上げられて、”画像にalt”より”生のテキスト”の方がSEOに有利なんじゃないかとかそんな感じでしたっけ？

デメリットは、印刷設定で”背景を印刷しない”になっている(印刷用cssも用意されてない)場合に置換した部分が印刷されなかったり、画像無効css有効なブラウザブラウザだと画面外に飛ばしたテキストも背景も表示されないなど、これで不具合でるのって特殊な環境だからたいしたデメリットでもないよね？仕方ないよね？みたいな扱いだったような。

その後SEO界隈のtext-indentに負の値てスパムになるんじゃない？みたいな話題が絡んで、altをちゃんと入れておけばわざわざ画像置換しなくてもいいらしいですぜとか、jQuery便利！javascriptを自分でoffにしてる人の事なんてしったこっちゃないよ(最低限の情報が表示されれば問題ない)的な風潮になってcssで画像置換する機会が減ったり減らなかったりの毎日で、今の主流はどんな感じなんでしょうか。

とりあえずtext-indentさせずに画像置換するメモ

appleのサイトで使ってる感じのheight:0;overflow:hidden;paddingでやるやつ。

<p id="irsample1">乱雑モックアップ</p>

#irsample1{
width:480px;/*画像の横幅;*/
height:0;
padding-top:100px;/*画像の高さ;*/
overflow:hidden;
background:url(画像url) no-repeat;
}

背景画像で置換した表示結果

乱雑モックアップ

上記使用font / セプテンバー-教漢（無料お試し版）

(関係ないけどURLはURIの一部だから今までのURLはURIと書くのが正しいような事を聞いた気がするけどbackground:urlなんですよね、これはなぜだろう、うちの勘違いなだけでしょうか？)

hoverとactiveを指定してロールオーバーさせる

<p id="irsample2"><a href="#">乱雑モックアップ</a></p>

#irsample2{
width:480px;/*画像の横幅*/
height:100px;/*画像の高さ*/
}
#irsample2 a{
width:100%;/*ボタンの横幅*/
height:0;
padding-top:100px;/*ボタンの高さ*/
overflow:hidden;
display:block;
background:url(画像url) no-repeat 0 0;
}
#irsample2 a:hover{
background-position:0 -200px;/*bottomは IE6-7で範囲外のフォントのbottomからになるのでズレる*/}
#irsample2 a:active{
background-position:0 -100px;
}

“hoverとactiveを指定してロールオーバーさせる”の表示結果

乱雑モックアップ

横並びメニューにしてみる / display:inline

<ul id="irsample3">
  <li class="ranzatsu"><a href="#">乱雑</a></li>
  <li class="mock"><a href="#">モック</a></li>
  <li class="up"><a href="#">アップ</a></li>
</ul>

#irsample3{
width:480px;/*画像の横幅*/
height:60px;/*画像の高さ*/
padding:0;
margin:0;
}

#irsample3 li{
display:inline;/*ie6-7*/
}
#irsample3 a{
float:left;
width:160px;/*ボタンの横幅*/
height:0;
padding-top:60px;/*ボタンの高さ*/
overflow:hidden;
display:block;
background:url(画像url) no-repeat;
}

#irsample3 .ranzatsu a{
background-position:0 0;
}
#irsample3 .mock a{
background-position:-160px 0;
}
#irsample3 .up a{
background-position:-320px 0;
}

#irsample3 .ranzatsu a:hover{
background-position:0 -60px;
}
#irsample3 .mock a:hover{
background-position:-160px -60px;
}
#irsample3 .up a:hover{
background-position:-320px -60px;
}

“横並びメニューにしてみる / display:inline”の表示結果

• 乱雑
• モック
• アップ

横並びメニューにしてみる / float:left

/*clearfix追加*/
#irsample4{
/zoom:1
}
#irsample4:after{
content:'';
display:block;
clear:both;
height:0;
}

#irsample4 li{
/*display:inline; 削除してfloatに変更*/
float:left;
}
#irsample4 a{
/*float:left; 必要ないので削除*/
width:160px;
height:0;
padding-top:60px;
overflow:hidden;
display:block;
background:url(http://blog.sakurachiro.com/wp-content/uploads/2010/09/20100901-1.png) no-repeat;

}

“横並びメニューにしてみる / float:left”の表示結果

• 乱雑
• モック
• アップ

<li>を横並びさせる場合、display:inline+floatとfloat+clearfixはどっちが定番なんだろう？

追加

縦並びメニューにしてみる

• 乱雑
• モック
• アップ

htmlは同じで横並びメニューのcssから以下の部分を削除するだけでいいはず。

#irsample5 li{
display:inline;
}
#irsample5 a{
float:left;
}

全部書くとこんな感じ

#irsample5{
width:160px;
height:180px;
}

#irsample5 a{
width:160px;
height:0;
padding-top:60px;
overflow:hidden;
display:block;
background:url(http://blog.sakurachiro.com/wp-content/uploads/2010/09/20100901-1.png) no-repeat;

}
#irsample5 .ranzatsu a{
background-position:0 0;
}
#irsample5 .mock a{
background-position:-160px 0;
}
#irsample5 .up a{
background-position:-320px 0;
}

#irsample5 .ranzatsu a:hover{
background-position:0 -60px;
}
#irsample5 .mock a:hover{
background-position:-160px -60px;
}
#irsample5 .up a:hover{
background-position:-320px -60px;
}

#irsample5 .ranzatsu a:active{
background-position:0 -120px;
}
#irsample5 .mock a:active{
background-position:-160px -120px;
}
#irsample5 .up a:active{
background-position:-320px -120px;
}

animations

animationプロパティの特徴とか感じた事とか

• ループ出来る。
• keyframesを使って細かい設定が出来る。
• hoverで動かすとマウスが外れた時すぐに初期状態に戻るのが格好悪い。
• なのでループでずっと動かしているか、javascriptと絡めたりした方がいいのかな？と思ったり

animation使用例

webkit系のブラウザのみ動作します。

ほら、マウスが外れた瞬間ガチっと初期位置にもどるのが格好悪いでしょう？

html

  <div class="ani1 example">
    <ul>
      <li class="ease">ease</li>
      <li class="linear">linear</li>
      <li class="ease-in">ease-in</li>
      <li class="ease-out">ease-out</li>
      <li class="ease-in-out">ease-in-out</li>
    </ul>
  </div>

css

/*キーフレームはアニメーションの設計図みたいなものだと思ってます*/
@-webkit-keyframes 'ani1' {
0% {
-webkit-transform: translate(0, 0);
}
25% {
-webkit-transform: translate(75%, 100%);
}
50% {
-webkit-transform: translate(50%, 50%);
}
75% {
-webkit-transform: translate(25%, 100%);
}
100% {
-webkit-transform: translate(100%, 0%);
}
}

.ani1:hover li {
  -webkit-animation-name: 'ani1'; /*キーフレームを指定*/
  -webkit-animation-duration: 1s; /*処理にかかる時間、単位はs、これは1秒*/
  -webkit-animation-direction:alternate; /*偶数回時に逆再生させる*/
  -webkit-animation-iteration-count: infinite; /*ループ回数の指定、これは無限*/
}

/*animationのイージング*/
.ani1 li.ease {
  -webkit-animation-timing-function: ease;/*イージングの種類*/
}
.ani1 li.linear {
  -webkit-animation-timing-function: linear;/*イージングの種類*/
}
.ani1 li.ease-in {
  -webkit-animation-timing-function: ease-in;/*イージングの種類*/
}
.ani1 li.ease-out {
  -webkit-animationn-timing-function: ease-out;/*イージングの種類*/
}
.ani1 li.ease-in-out {
  -webkit-animation-timing-function: ease-in-out;/*イージングの種類*/
}

animation-timing-functionはkeyframesの中でも指定できたり色んなところに記述できる？

ショートハンドを使ってみる

CSS Animations Module Level 3を参照すると以下の記述でショートハンドになるそうな。

[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*

読み方(w3cが解説に使う記号の意味)がイマイチわかってないけど、.ani1:hover liの指定をショートハンドで書き直すとこんな感じ？
[]内の値が順番関係なしで重複しなければok？
でもそしたらdurationとdelayの区別はどうやってつけてるんだ？先に登場するほうがdurationなのかな。

.ani1:hover li {
-webkit-animation:'ani1' 1s infinite alternate;
}

動作確認

transitions

transitionプロパティの特徴とか感じた事とか

• ループさせられない。
• 変更前と変更後の2つをいったり来たりするので手軽に動きのあるロールオーバーメニューが作れる
• これ好きだな。

transition使用例

html

  <div class="tra1 example">
    <ul>
      <li class="ease">ease</li>
      <li class="linear">linear</li>
      <li class="ease-in">ease-in</li>
      <li class="ease-out">ease-out</li>
      <li class="ease-in-out">ease-in-out</li>
    </ul>
  </div>

css

.tra1 li {
  -webkit-transition-duration: 1s;
}
.tra1:hover li {
  -webkit-transform: translate(100%, 0);
}

/*transitionのイージング*/
.tra1 li.ease {
  -webkit-transition-timing-function: ease;
}
.tra1 li.linear {
  -webkit-transition-timing-function: linear;
}
.tra1 li.ease-in {
  -webkit-transition-timing-function: ease-in;
}
.tra1 li.ease-out {
  -webkit-transition-timing-function: ease-out;
}
.tra1 li.ease-in-out {
  -webkit-transition-timing-function: ease-in-out;
}

ショートハンド

animationsと同じでtransitionsのページを参考に
CSS Transitions Module Level 3

<p>[<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’> [, [<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’>]]*</p>

この例だと特に使う必要がないけどこんな感じ？

.tra1 li {
  -webkit-transition: 1s;
}
.tra1:hover li {
  -webkit-transform: translate(100%, 0);
}
/*transitionのイージング*/
.tra1 .ease {
  -webkit-transition-timing-function: ease;
}
.tra1 .linear {
  -webkit-transition-timing-function: linear;
}
.tra1 .ease-in {
  -webkit-transition-timing-function: ease-in;
}
.tra1 .ease-out {
  -webkit-transition-timing-function: ease-out;
}
.tra1 .ease-in-out {
  -webkit-transition-timing-function: ease-in-out;
}

durationがないと上手く動かないな。

もしくはこんな感じ？

.tra1:hover li {
  -webkit-transform: translate(100%, 0);
}
/*transitionのイージング*/
.tra1 li.ease {
  -webkit-transition:1s ease;
}
.tra1 li.linear {
  -webkit-transition:1s linear;
}
.tra1 li.ease-in {
  -webkit-transition:1s ease-in;
}
.tra1 li.ease-out {
  -webkit-transition:1s ease-out;
}
.tra1 li.ease-in-out {
  -webkit-transition:1s ease-in-out;
}

もう少しシンプルな書き方が出来そうだけどなぁ。

transform

animationのkeyframesやtransitionの中で出てきたtransformは要素を変形させるプロパティでFirefoxも3.1から対応してるんですって(-moz-が必要)
参考 / CSS3大接近：第3回　transformプロパティ｜gihyo.jp
skew(ゆがみ)とかscale(拡大)とかrotate(回転)とかあってtransalteは移動。

translate(x座標, y座標)

機能	移動
初期値	0
値	ポジティブ，ネガティブどちらも可 ・％ ・相対値(emなど)，絶対値（pxなど）
適用できる要素	・ブロックレベル要素 ・インラインレベル要素
継承	なし（親要素に指定しても子要素に継承されません）
記述例	Firefox3.1betaの場合： ・-moz-transoform:translate(xxdeg); ・-moz-transoform:translateX(xxdeg); ・-moz-transoform:translateY(xxdeg); Webkit系（Safari3.1，Webkit,Google chromeの場合： ・-webkit-transform:translate(xxdeg); ・-webkit-transoform:translateX(xxdeg); ・-webkit-transoform:translateY(xxdeg);

参考

CSS Animations Module Level 3
CSS Transitions Module Level 3

CSS 2D Transforms Module Level 3
CSS 3D Transforms Module Level 3

しかし毎日暑いですねぇ…

わからんといっても、段落には形式段落と意味段落の2種類があることや、それぞれの概念も一応知ってるつもり。
しかしそれでもイマイチ段落というものがどうしたら適切になるのかよくわからんのですよ。

意味段落をフィーリングでしか片付けられない。

わからんわからん言っても少なからず文章は書いてきたわけで、じゃあ今までどうやってきたのか？と過去を振り返ってみるとやっぱりフィーリング。
それと嗜好。

例えばその昔、次のような出来事がありました。

「あんたの書く手紙の文章が誰かに似ていると思っていたんだけどわかった、原田宗典っていう最近はエッセイばっかり書いてるけど小説家の文章に似てるんだ、読んだ事ある？」とたずねられた事があって、「読んだこと無いし誰だかしらん、どこが似ているのか？」と答えたら「大雑把に言うと文章に句読点というか読点があまりないところ」とのこと。

当時はなぜか読点(、)が嫌いだったのと、文章によくわからん勢いを持たせたくて区切りのわからない文章を書いていたので、たしかに上で言われたような書き方をしてた。

不思議な事に、そんな書き方をしていても(日本語で？)紙に書く手紙だと普通に読めてとくに読みづらくなりもしないみたい、言い回しが関係してくるのかもしれないし内容がないからなのかもしれないけど。

けどそのノリでメールを書いたり、フォーラムで質問したり回答したり、blogに文章を書くとこれがうまいこといかない(というか、うまいこといってない手応えを感じる)。
自分でも見づらいし。

徐々にメールは短文になり、質問などは細かく説明するようになって(気力と時間がある時は)文節が長くなって、blogの時はいまだにどうしたらいいのかわからないまま。

でもってWebサイト作成時の話

時代やhtmlの習熟具合によって変化してきた。
なぜなら最初は<p>(paragraph)の存在すら知らなかったので例に漏れず<br>の連続だったような気がするけど、詳しい事は覚えてない。

Web制作とは直接関係ない仕事でWebサイトを編集するようになってから(文章のルールが決められていない場合)は、句点(。)で改行が入ると個人的に見やすいような気がしたので句点ごとに<br>、これが形式段落。
1行分のスペースが開いたら意味段落だと思って<br>の連続で意味段落としてた、多分まだ<p>タグを知らない酷い話。

Web制作の会社に就職して、独学でHTMLを勉強してWeb標準っちゅー流れがある事を知ったり、lintで文法をチェックするようになったり、アメブロによくある改行を多用してるブログに嫌悪感を持つようになったり、観覧者のブラウザサイズは一定じゃないのに何かに合わせて改行をコントロールするのはどうなんだろう？と考えたりしてるうちに<br>を使う事に抵抗を感じるようになって句点(。)ごとに<p>を使うようになる。
しばらくそんな状態でやってきて今も基本は全部<p>だけど、<br>で形式段落、<p>で意味段落か形式段落に落ち着いた感じ。
結局、意味段落はここは意味の繋がりがあるよねってフィーリングのまま。

段落とかパラグラフとか

段落について調べて(検索)していくと、日本語には元々段落というものは存在しなかった的な話があったり面白い(Ted’s Coffeehouse 2: 日本語文章においての段落概念の欠如 (The Lack of the Paragraph Structure in Japanese Writing))

例えば『源氏物語』にはパラグラフ構造がなく、始めから最後までのっぺらぼうに続いており、日本の古典はすべてそうである、といっている。現在印刷されている古典にパラグラフの形が見られるのは、後の編集によるものであろう。

パラグラフって何だろう？

文章の節または段落。みたいな説明をよくみる。
または、トピックであったり、ひとつのテーマだったり、論点だったり主張だったり。

なるほどなぁと思った説明があったので引用させてもらうと。
パラグラフについて書いた外山滋比古。パラダイムのシゲルちゃんじゃないからね。（日本人と西欧人の思考形式の違いかぁ、一応なるほどだけど・・・） – Comments by Dr Marks

確かに「パラグラフとは段落のこと」である。そして、その段落とは文章の区切りであり、字下げ（indentation）や行を空けることによって区切られた文（sentence）のまとまりである。また、それぞれの文のまとまりは、一つ一つの段落の中で意味やアイディアが完結している。したがって、この最後の点が日本語の段落とは様相を異にする。

日本語の段落は、国語学者によって形式段落と意味段落という区別が試みられたように、普通は一つの（外形的・形式的）段落が意味やアイディアを完結することがない。一般的には日本語の段落はすべて形式的な（つまり字下げや行空けがあるだけで）段落に過ぎず、意味やアイディアが完結していない。意味やアイディアが完結するためにはいくつかの形式段落を繋ぎ合わせなければならない。そして、意味としてあるいはアイディアとして一まとまりになった（完結した）段落を無理に意味段落と呼んでいる。

したがって、日本語の見かけ上の段落（形式段落）は短く切れ切れであるが、英語のパラグラフであれば、見かけ上の段落（形式段落）と意味のまとまりの段落（意味段落）が合致するため、日本語の段落よりはるかに長くなる。（英語のパラグラフはすべて意味段落。）どうして日本語の段落が形式的で短いかということについては諸説ある。どうやら、英語の段落のように長い日本語は読みにくくなるらしい。これは確かにそうで、余も日本語のブログの段落は短い形式段落を採用している。

最初の「紙に書いた文章の読みやすさが変わらないようだ」云々は、句読点はないけど見かけ上のまとまりがあったからとか、読んでる人達が段落にこだわりがなかったからとか、短い文章だったからとか、社交辞令だったとかの理由が考えられるのかな？

Webの場合、日本語の段落として扱うより英語のパラグラフとして扱った方が自然ぽい。

パラグラフ・ライティングとトピック・センテンス

そうすると(うちはよく知らないんだけど)英文の定番らしいパラグラフ・ライティングとトピック・センテンスを使えば論理的な文章を自然なマークアップで記述できるようになるのかな？

パラグラフライティングの参考

第３回プロから学ぶ「わかりやすい文章の書き方」
実践！作文研究～メールマガジン・第190号
パラグラフライティングとトピックセンテンス | SEO 検索エンジン最適化 ソーシャルニュース

トピックセンテンスの参考

「トピック・センテンス」とは何か
トピックセンテンス（小論文の書き方）
実践！作文研究～メールマガジン・第194号

問題は

すでにある変更できない(そしてパラグラフ・ライティングとトピック・センテンスを踏まえていない)文章は、どのようにマークアップしたら適切になるのか？
なんだけど、やっぱりフィーリングなの？

プラグインの自動アップデートが完了する前にダッシュボードへ戻ったら(せっかちなので)
『予定に基づいたメンテナンスを行っているためしばらくの間ご利用できません。少し間をおいてサイド確認してください。』のメッセージが消えなくなった。
こんな時間にレンタルサーバーのメンテナンス?とか一瞬思ったけど、いやいやいやそれはないなとすぐその考えを打ち消す。
自身の直前の操作が怪しすぎたもの。

検索してみると、WordPressのルートフォルダにある.maintenanceを削除すればメンテナンスモードから抜けられるとの事。
削除してみたら見事にメンテナンスが解除されました。良かった。
今度からアップデートが終わるまでちゃんと待とう。

うおおおおおおおおおおおおおおおお 突然ですがこれは『気合いの雄叫び』ですッ！

昔は Web developer ( Firefoxのアドオン ) から簡単に、現在見ているページをAnother HTML-lint gatewayでチェック出来ていたのですが、ある日気がつけば以下の文言が表示されるようになって慌てた人も多いのではないでしょうか？

自分がそうだったからって、他の人もそうなんじゃないですかとか決めつけちゃって失礼ですよね、ごめんなさい。
とりあえず、ひとしきり騒いだ後、“外部からのGETリクエスト停止” になった事を知り肩を落としそして少し泣きました。

それ以来 ( 2009年4月30日以降) html の検証をするには、Another HTML-lint gatewayにアクセスして
チェックしたいHTMLのURLを指定するか、HTMLを下のテキスト領域に直接記述して、[チェック] ボタンを押して使う事になりました。

当時はもう文法チェックする頻度も下がってはいたけど、Web developerからチェックする事に慣れきっちゃっていたので
いざ普通に使おうとしたらウオオオオオ ウダラァーーーッとまでは行かないまでも、面倒くさい事面倒くさい事。

あれから一年余、なんと現在も有効なAnother HTML-lintのブックマークレットがありましたッ！。
Another HTML-lintのブックマークレット | 沖縄のWebデザイナーChopstickBrunch
また、簡単にlintにかけられるなんて日が来るなんて、感無量。

人は慣れる。

しばらく ChopstickBrunch 様のブックマークレットを使っていましたが、
これだとチェックしたいページ自体が lint の結果に置き換わってしまう為、若干不便に感じるようになってきました ( ゆとり世代じゃないけどゆとってるなぁ… )。

でもって検証結果を別のタブで開けるようにならないかな？と、勝手に手を加えたのが以下です。

Another HTML-lint gateway のチェック結果をタブで開くブックマークレット

( target=”_blank” なだけだから、タブで開くとは限らないけど )

javascript:var%20f%20=%20document.createElement('form');f.setAttribute('target','_blank');var%20o=new%20Object;o[0]=document.createElement('input');o[0].setAttribute('type','text');o[0].setAttribute('name','Stat');o[0].setAttribute('value','on');o[1]=document.createElement('input');o[1].setAttribute('type','text');o[1].setAttribute('name','Method');o[1].setAttribute('value','URL');o[2]=document.createElement('input');o[2].setAttribute('type','text');o[2].setAttribute('name','URL');o[2].setAttribute('value',location.href);o[3]=document.createElement('input');o[3].setAttribute('type','text');o[3].setAttribute('name','ViewSource');o[3].setAttribute('value','on');for(var%20i%20in%20o){f.appendChild(o[i]);}document.body.appendChild(f);f.action%20=%20'http://openlab.ring.gr.jp/k16/htmllint/htmllint.cgi';f.method%20=%20'POST';f.submit();

このリンクをブックマークしてもおkです→ Another HTML-lint タブで開く

ブックマークレットの使い方

うちもほとんど使った事がないんですけど簡単です。
FirefoxやChromeだと上のリンク(Another HTML-lint タブで開く)をブックマークツールバーまでドラッグ&ドロップ
IE8だと(6や7も?) リンクを右クリックして、お気に入りに追加、なんかalertが開くけどok。

lintチェックしたいページでお気に入りに入っているリンクをクリックすれば実行。

別窓や別タブで結果が開くのウザイよって場合は
Another HTML-lintのブックマークレット | 沖縄のWebデザイナーChopstickBrunch様のページを参考にしてみてください。

どうも非同期トラッキングコードが正式版になったみたい。
Analytics 日本版 公式ブログ: 成長し続ける Google Analytics のエコシステム

非同期トラッキングコード
昨年 12 月に公開した非同期トラッキングコードが、標準のトラッキングコードとしてご利用いただけるようになりました。新たにプロファイルを作成した際、標準のトラッキングコードとして、トラッキングコード設定ウィザードに表示されます。

違いは何?何かいいことあるの?

いままで</body>の直前だったトラッキングコードの挿入場所が</head>の直前に変更されたみたい。
それによってより正確に計測できる、と。

Analytics 日本版 公式ブログ: Google Analytics のトラッキングコードが新しくなりました

新しい非同期トラッキングコードは、ga.js トラッキングコードで計測可能なデータセットと同様のものを得ることができます。

両者の唯一の違いは、計測対象ページへの挿入場所です。従来のga.js トラッキングコードの場合、body セクションの最後に挿入することをご推奨しておりました。一方、新しい非同期トラッキングコードは、他のJavaScript コードの読み込みが完了しなくても正常にロードできるため、HTMLファイル内の head セクション内に記述することが可能です。

ページ末尾に入れる ga.js の場合、ページの読み込みに時間がかかると、り離脱したセッションを正確に計測できないという不都合がありましたが、新しいトラッキングコードではそのような懸念がなくより正確なデータを計測できるため、ぜひ多くのユーザーの皆さまにご利用頂ければと思います。

「り離脱したセッション」は原文ママです。

メリットの説明

非同期トラッキング コードの主なメリットの 1 つは、HTML 文書の一番上に配置できることです。これによって、ユーザーがページを離れる前にトラッキング ビーコンが送信される可能性が高くなります。JavaScript コードは セクションに配置することが慣例となっており、このコードを セクションの一番下に配置すると最高のパフォーマンスが得られます。

トラッキング コードの設定 – Analytics ヘルプ

トラッキングコードの設定

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

実際のトラッキングコードが載ってる場所

Analytics 設定 > プロファイル設定 > トラッキング コード

アナリティクス以外のjsの置き場所について

あらゆるブラウザで最高のパフォーマンスを達成できるように、サイトの他のスクリプトを以下のいずれかの場所に配置することをお勧めします。
HTML の lt;head> セクションのトラッキング コードの前
トラッキング コードとすべてのページ コンテンツの後（HTML body の一番下など）

lt;head>は原文ママ。&が抜けてる、google誤字が多いなぁ。

すでに詳しく検証されてる方がいらっしゃいました(はてブ結構な数ついてるのに気付かなかったなぁ)。
Google Analytics 非同期トラッキングコード再考 | MOL
読み込み時間の高速化とか計測の精度向上とか、移行出来るならしたい感じ。

前置きが長くなったけど本題

これを読んでいて気になったのは、今WordPressに挿入してるトラッキングコードの事。
乱雑モックアップにはUltimate Google Analytics(OraTransplant » Ultimate Google Analytics plugin for WordPress)というプラグインで自動挿入されとります。
これ最後にアップデートされたのが2008年の2月と少し古い。
今回の変更にあわせてアップデートされるかどうかも微妙。

なので新しい非同期トラッキングコードに対応したプラグインがないかPlugin Directoryを探して見つけたのがこれ。
WordPress › Google Analyticator « WordPress Plugins

NEW! Supports standard Google Analytics tracking via the latest async tracking methods (faster and more reliable than the older ga.js tracking method)

使い方

他のプラグインと一緒。
pluginsにアップしてプラグインを有効化
設定に出現したGoogle Analyticsを開いてUA-xxxxxxx-xを入力。
追跡したいファイルがあるならDownload extensions to track:に拡張子を,(カンマ)区切りで入力、.(ドット)は必要ないっぽい。
特に変更も必要なく使えそうだった。

下の方にGoogle Analytics profile ID:とかいう見覚えの無い項目があった。
Entering your profile ID is optional, and is only useful if you have multiple profiles associated with a single UID.
あなたのプロファイルIDを入力するオプションであり、複数のプロファイルを1つのUID を関連付けられている場合にのみ有用です。(google翻訳)

Google Analytics profile IDの確認方法

アナリティクスにログインして編集から確認できた。

切り替えはどういったタイミングで行えばいいんだろう。
とりあえずUltimate Google Analyticsは切ってみた。

乱雑モックアップは、勉強したり試したりしながらその過程やメモを書いてたりするので、投稿に「続編」がしばしば発生する。
続編の扱いをどうしたらいいのかなーというのはずっと考えていて、いまだ結論がでない。

今のところ続きがある場合は、別エントリーとしてポストしてきた。
古い記事を更新しても「最近の投稿」に表示されないから。

といった流れの中、WordPressで再更新（アップデート）した過去記事も最新記事に含ませるカスタマイズ法 – かちびと.netを読んだ。
そしてウィジェットを探してみたら見つけたのが更新した投稿とページのウィジェット→Recently Updated Pages — 病的溺愛シンドローム。

これはディ・モールト、ディ・モールト。
さっそくWordPress › Recently Updated Pages « WordPress PluginsとWordPress › Recently Updated Posts « WordPress Pluginsをダウンロードしてみた。

(ページの更新情報を上げる必要もないから)先にRecently Updated Postsの方を有効にしてみると、んーこれはまだ微妙かも、日付の扱いが。

次にRecently Updated Pagesを有効にしてみる、設定はこんな感じ。

投稿日が表示されるのではなく、最終更新日が表示されるようだから日付は非表示でもいいかなぁ。

問題は誤字脱字を見つけて内容以外を修正した投稿も上がってしまう事かな、と。
age/sage機能があればいいのに。

[追記 / 20100610]
Include blog Posts in the list:(投稿もリストアップする)にチェックを入れると、htmlが酷い事になってた。
ナニが原因なのかわからないけどリンクを < /a> で閉じたり、ちゃんと閉じてるとこもあるのに、なんでだろ?
チェックを外せばおかしなhtmlを吐き出さないけど、ページしか拾ってくれないし意味がない。
弱った。

続きを分ける事の良い部分

注)うちの所感です。

• 1つのエントリーが長くならない(分割してても無駄に長くなってるけど)
• どこが更新した部分か判りやすい
• 更新分が最新の投稿になる

関係ない所まで読み込む必要がない。

反対に悪いところは

• 前後のエントリーを参照しないと判らない事がある
• 検索でやってきて、古い方の投稿を最初に見た人は何回かリンクをクリックしなきゃならない

関係する部分が点在しちゃうと面倒。

Recently Updated Pagesがあれば
(要点をちゃんとまとめられていたらば)追加の情報は別エントリーに分けずとも同じエントリー内に足していった方が良いのではなかろうか?と思うんだけど
あーでもこれやっぱりモノによるんだろうなぁ。ん～。

• word-break:break-all;
• word-wrap:break-word;
• white-space:pre-wrap;

上記3プロパティの動作確認用ページ (ポップアップで開く)
Firefoxはどれを指定しても、連続した半角英数が長いとtableが伸びちゃうなぁ。

以下、自分の解釈メモ ( なので正しいかどうか怪しいです )。

word-break

禁則処理の設定?
break-allにすると日本語の文章中どこでも折り返して、アルファベットもどこでも折り返す。
選べる値

• normal
• keep-all
• loose
• break-strict
• break-all

word-wrap

英単語の折り返し、break-wordで英単語中でも折り返す。
日本語は関係ない?
選べる値

• normal
• break-word

white-space

半角スペース、タブ、改行の処理
pre-wrapだと、基本動作はpre(半角スペース、タブ、改行はそのまま生かされる)でボックスの幅で改行する。
選べる値

• normal
• pre
• nowrap
• pre-wrap
• pre-line

ブロックレベル要素を勝手に拡張したり、ハミ出したりしないかチェック

*色の意味

• 自動で折り返す指定
• 二つ同時に指定すると折り返す
• 勝手に拡張したりハミ出したり

崩さないようにする指定は

今のところtableはcssだけじゃ無理っぽい(Firefoxが)。
preには word-wrap: break-word; と white-space: pre-wrap; (二つ指定しないとFirefoxでハミ出す)
divにも指定するとしたら word-wrap: break-word; のみがいいのかな?

pre{
  word-wrap: break-word;
  white-space: pre-wrap;
}
div{
  word-wrap: break-word;
}

もし、はみ出しちゃった時の為にoverflowを追加しておいてもいいみたい。
優しい人がいるもんだ。

overflow:auto;

contentプロパティ

attr(x)

counter

clearfix

枠付きの吹き出し

属性セレクタと一緒に使ってみる

E[foo]

E:not(s)

contentプロパティ

attr(x)

xの部分を書き出せる。href、title、summary、cite や alt。

_html

<div class="example" title="div の title要素">
<p><a href="アドレス" title="タイトル">テキスト</a></p>
</div>

_css

div:before{
content:'" ' attr(title) ' "';
font-size:2.0em;
}
a:after {
content:'(' attr(href) ')';
background:Olive;
}

counter

カウンター、なんでもolリストみたいにしちゃう。これ非常にわかりづらい。

content : counter (カウンターの名前, [種類 - decimalが初期値、省略可])
counter-reset : カウンターの名前 [開始番号 始めたい数-1を指定、省略可];
counter-increment : カウンターの名前 [カウンターの増加量 10なら10ずつ増えて-1なら1ずつ減ってく、省略可];

_html

<div class="rank">
<p>自治体サイトランキング［2010年3月］
<dl>
  <dt>大阪市（大阪府）</dt>
  <dd>得点 / 8.54</dd>
  <dt>三鷹市（東京都）</dt>
  <dd>得点 / 8.31</dd>
  <dt>相模原市（神奈川県）</dt>
  <dd>得点 / 8.27</dd>
</dl>
</div>

_css

.rank dt{
counter-increment:rank;
}
.rank dt:before{
content:counter(rank)"位 : ";
color:red;
}

clearfix

ブロック内にfloatをclearする要素が無くてもclearするアレ。

_表示省略。

_html

<div id="wrap">
	<div class="article">float:left</div>
	<div class="aside">float:right</div>
</div>

_css / 20110403修正(:afterにheight:0があるとfirefox3.6～4でmarginがおかしくなるバグがある為)
参考:firefoxでmargin-bottomがmargin-top | 乱雑モックアップ

#wrap:after {
content : '';
display : block;
clear : both;
height : 0.01px;/* firefox対策 */
}

/* IE 6-7 */
#warp{
/zoom : 1;
}

枠付きのふきだし

cssだけで作る吹き出しにborderをつけた。

_html

<p class="ballon">The quick brown fox jumps over the lazy dog.</p>

_css

p.ballon {
  position:relative;
  background:white;
  width:400px;
  padding:10px 20px;
  /* 角丸 */
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  margin-bottom:15px;
  border:3px solid MediumVioletRed;
}
p.ballon:before {
  content:'';
  border-top:15px solid MediumVioletRed;
  border-right:12px solid transparent;
  border-left:12px solid transparent;
  position:absolute;
  bottom:-15px;
  left:20px;
}
p.ballon:after {
  content:'';
  border-top:12px solid white;
  border-right:9px solid transparent;
  border-left:9px solid transparent;
  position:absolute;
  bottom:-12px;
  left:23px;
}

属性セレクタと一緒に使ってみる

E[foo]

“foo”属性を持つE要素にマッチ

_html

<pre title="XHTML 1.0 transitonal の DOCTYPE"><code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
</code></pre>

<pre><code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
</code></pre>

_css

pre[title]:before { /* title属性をもつpre要素にマッチ */
  content:'" ' attr(title) ' "';
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

E:not(s)

sに一致しないE要素

_html

<ul>
    <li><a href="http://blog.sakurachiro.com/">乱雑モックアップ / フロントページ</a></li>
    <li><a href="#wrap">ページの先頭へ</a></li>
    <li><a href="http://www.google.co.jp/">google 日本</a></li>
</ul>

_css

a:not([href^='#']):after {
content:' ( ' attr(href) ' ) ';
background:black;
}

print用cssで使うとアンカーリンク以外のリンクを印刷に出力出来るみたい。
_css

@media print{
a:not([href^='#']):after {
content:' ( ' attr(href) ' ) ';
}
}

でも、positionを使ってない要素達の重なり順をコントロールしなきゃならないシチュエーションに遭遇する事なんて、ないだろうから知らなくてもなんとかなるんもんだ。

ついでにその他 z-index の事。

• 数字が小さい方が背面で大きい方が前面。
• マイナスも指定できる。

IE 6,7 絡みの事。

• 入れ子の中で使った場合、その親要素の次に出てくる要素の方が前面に来る。
• 親要素にz-indexを使うと解決できる。

左 / IE7で表示、右 / IE8で表示したスクリーンショット

あんまりposition使わないから関係なさそう。

IE 8 の表示(6～8同じ感じだった)

Firefoxは最初っからイイ感じ。

html

<input type="text" name="example" />

css

input[type="text"]{
height:1.6em;
}

細かい事で申し訳ないけど気持ち悪い、なんとかしたい。

IEでも縦位置中央にするには

試してみた結果、heightと同じ値をline-heightに指定する方法が有効ぽかった。

input[type="text"]{
height:1.6em;
line-height:1.6em;
}

すると、IEの表示がこうなる。

確認用テキストフィールド

heightのみ指定

line-heightを追加

paddingの場合

二転三転中、最初の見極めが甘いんだろうなぁ
作って試してみると、じゃあこうゆう時はどうなる？こうなったら？が出てくること出てくること。
あーしたい、こーしたいって欲も。

前回の練習以降に変更した事。

_1.footerと被った部分の処理とあえて移動させない処理。
ウインドウサイズをちょこちょこ縮めていくと(普通はそんな使い方しないけど)メニューとフッターが被る。
処理を1.ヘッダーが画面内にある場合 / 2.フッターが画面内にある場合 / 3.両方画面内にない場合の3段階に分けて、メニューが移動する位置などを決めるようにした。

_2.コンテンツの中身が全然ないhtmlの場合
4.ヘッダーもフッターも同じ画面にある場合はどうなるの?と思って試してみた。
コンテンツ部分を短くしたら(このページは現在製作中です的な長さ、公開するなよって話)不具合が。

_3.コンテンツの中身が全然ないhtmlの場合:修正
短い場合の修正として、コンテンツの高さを無理やり広げた。
そうしたところ、今度はbodyの高さを取得する順番なんかが狂ってしまった。
スクロールに合わせて移動するメニューなのに移動させない処理を追加

_4.javascript外部化、要素名を変数化
いままでのままだと、移動する要素ややヘッダーやフッターの名前を変更したい時に書き換える部分が沢山あるので変数にした、速度とかも。あとhead内の記述から.jsにした。

外部化したけど、どんなhtmlにも読み込んだらそのまま使えるの?

これがまた使えないんですよねぇ。
まずフッター要素が無いと使えない。ふむー

次に、position周りの指定は自分でやる必要がある。
移動する要素のidも揃える、これは仕方がない。

他の人はどうやってるんだろう?

こういったフローティングメニューを配布してる人の設置方法を流し読みした感じだと、
いろんなhtmlに使う場合でも、フロートさせる要素しか変更しないで平気そうなんですよね。

どうやったら簡単に使いまわせるようになるんだろうか(次の課題)。

[追記 / 20100518 19:24]
ちょっと調べた。
positionを使った2カラムレイアウトの考え方がそもそも違ってたみたい。

大体#navにabsoluteをつけるか / relativeかの2パターンあった。

うちのやり方は

#navにabsolute

(親要素にrelative)。
で#articleのmarginに#navのwidth分を設定してズラす。
これだと見た目は2カラムになっているけど、実際は1カラム。

メリット
左右marginや#navのwidthなんかをemで設定出来る、あと#articleのwidthを設定しなくてもいい。

デメリット
見た目が2カラムだけど実際は1カラムだから、#articleの内容が#navより少ないと#footerが食い込んでくる(#navの高さで#containerが拡張されない)。

#containerがrelativeで#navもrelativeの場合

floatと併用してやってるみたい。

メリットとデメリット
両方ともfloatの2カラムと同じ。

#navも#articleもwidthをちゃんと設定しなきゃいけないし、
左右marginにemを使ったりしたら文字サイズを拡大したときにカラムが崩れる。
アバウトに組めないけど普通はpxできっちりやってるからあまり困らない?

なにより#articleの内容が#navより少なくても、
#containerにclearfixを使えばrelativeのデメリットに書いた現象は起きないです。

うちが今回使ってたcssの組み方だと、最初の理由で#articleの高さが無い時に#footerが食いこむ。
それを回避する為にjQueryを使って(練習なので)#navの高さを#articleの高さに移植した。

なので、高さを計算するのに#articleか#footerの名前が必要だった。
#containerにmin-height使えばいいんだけど、せっかくだから高さ計算しないでも使いたいなぁ。

#navにもrelativeの方すると、#articleが短いときに重なりはしないだろうけど、ウインドウを縮めていったときにどうやってstopする位置を計算するんだろう?

現状のソースと使い方

直接floatingmenu.jsを、開いたりするのはこっちから。

使い方

_1. / 以下の二つを保存して読み込む

• jquery-1.4.2.js
• floatingmenu.js

_jsフォルダに保存してるならこんな感じ。

<script type="text/javascript" src="_js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="_js/floatingmenu.js"></script>

_2. / “floatingmenu.js”を開いて11行目から適当に変更

• offsetY = 13; //フロートさせるボックスの上マージン 単位はpx。
• duration = 800; //処理時間 (ミリ秒) 0だとposition:fixedのようになる、チラつくけど
• _mcName = ‘#main’; //メインコンテンツ部分
• _foName = ‘#primaryNavigation’; //フロートさせるボックス部分
• _ftName = ‘#footer’; //フッター部分

_3. / htmlとpositionの処理

現状footer要素が必要
フロートさせるボックスにposition:absolute; 親要素にposition:relative;

ソース / javascriptソースをフォーマットしてくれるサイトを利用しました。
Online javascript beautifier

[修正した / 20100518 17:23]
でもまだ修正がある、どうしよう。

//jquery.easing.1.3.jsから
jQuery.extend(jQuery.easing, {
  easeOutCubic: function (x, t, b, c, d) {
    return c * ((t = t / d - 1) * t * t + 1) + b;
  }
});

$(function () {
  //[設定する部分]-------------------------
  offsetY = 13; //メニュー上のマージン 1em
  duration = 800; //処理時間 (ミリ秒) 0だとposition:fixedのようになる、チラつくけど
  _mcName = '#main'; //メインコンテンツ部分
  _foName = '#primaryNavigation'; //フロートさせるボックス部分
  _ftName = '#footer'; //フッター部分
  //[/設定する部分]-------------------------
  mainContent = $(_mcName).outerHeight(true); //メインコンテンツの高さ
  navHeight = $(_foName).outerHeight(true); //ナビゲーションのmargin+border+padding+heightを合わせた高さ
  navHeights = navHeight + offsetY;

  bodyHeight = $('body').outerHeight(true); //コンテンツの高さ
  naviSetY = $(_foName).offset().top; //ナビゲーションの初期座標(=margin・paddingを含めたheadの高さ)
  footerSetY = parseInt($(_ftName).offset().top); //フッターの初期座標(=margin・paddingを含めたheadの高さ)
  naviMarginSetY = naviSetY - offsetY; //ヘッダの高さを超えた時の位置用
  //↓body全体の高さからfooterの座標を引くとbodyのpaddingやmarginなどを含めたfooterの高さになる?
  footerArea = bodyHeight - footerSetY; //footer、実際の高さ
  desiredHeight = navHeights + footerArea; //必要な高さ(footer+naviの高さ)
  naviMaxY = bodyHeight - desiredHeight; //naviが重ならずに降りられる一番下
  floatObjMoveChk(mainContent - navHeights);
});

//スクロール毎の処理

function floatObjMove() {
  $(window).scroll(function () {
    var naviScrollTop = parseInt($(this).scrollTop()); //スクロール量
    if (navHeights < windowHeight) {

      //スクロール量が最初の位置より小さい内は
      if (naviScrollTop <= naviSetY) {
        $(_foName).animate({
          top: 0
        }, {
          duration: duration,
          queue: false,
          easing: "easeOutCubic"
        });
      }
      //
      else if (naviMaxY < naviScrollTop) {
        $(_foName).animate({
          top: naviMaxY - naviSetY
        }, {
          duration: duration,
          queue: false,
          easing: "easeOutCubic"
        });
      }
      //(naviMaxY-naviSetYの理由:メニュー自体ヘッダーの下で0だけど、bodyからみたらヘッダ分下にある
      //ヘッダもフッタも無い位置
      else {
        $(_foName).animate({
          top: naviScrollTop - naviMarginSetY
        }, {
          duration: duration,
          queue: false,
          easing: "easeOutCubic"
        });
      }
      //ウインドウサイズが足りないので動かない。
    } else {
      //console.log("ウィンドウの高さ:"+windowHeight," / メニューの高さ:"+desiredHeight,"クリック出来ないメニューが出来るので動かさない");
    }
  });
}

//リサイズしたらwindowのサイズを変更
$(window).resize(function () {
  windowHeight = parseInt($(window).height()); //windowのサイズ
});

function floatObjMoveChk(val) {
  if (val < 0) {
    $(_mcName).css('height', navHeight);
  } else {
    windowHeight = $(window).height(); //変更後windowのサイズ
    floatObjMove();
  }
}

修正前

//jquery.easing.1.3.jsから
jQuery.extend(jQuery.easing, {
  easeOutCubic: function (x, t, b, c, d) {
    return c * ((t = t / d - 1) * t * t + 1) + b;
  }
});

$(function () {
//[設定する部分]-------------------------

  offsetY = 13; //メニュー上のマージン 1em
  duration = 800; //処理時間 0だとposition:fixedのようになる、チラつくけど
  _mcName = '#main'; //メインコンテンツ部分
  _foName = '#primaryNavigation'; //フロートさせるボックス部分
  _ftName = '#footer'; //フッター部分

//[/設定する部分]-------------------------

  mainContent = $(_mcName).outerHeight(true); //メインコンテンツの高さ
  navHeight = $(_foName).outerHeight(true); //ナビゲーションのmargin+border+padding+heightを合わせた高さ
  navHeights = navHeight + offsetY;

  floatObjMoveChk(mainContent - navHeights);
});

function floatObjMoveSet() {
  bodyHeight = $('body').outerHeight(true); //コンテンツの高さ
  windowHeight = $(window).height(); //windowのサイズ
  naviSetY = $(_foName).offset().top; //ナビゲーションの初期座標(=margin・paddingを含めたheadの高さ)
  footerSetY = parseInt($(_ftName).offset().top); //フッターの初期座標(=margin・paddingを含めたheadの高さ)
  naviMarginSetY = naviSetY - offsetY; //ヘッダの高さを超えた時の位置用
  //↓body全体の高さからfooterの座標を引くとbodyのpaddingやmarginなどを含めたfooterの高さになる?
  footerArea = bodyHeight - footerSetY; //footer、実際の高さ
  desiredHeight = navHeights + footerArea; //必要な高さ(footer+naviの高さ)
  naviMaxY = bodyHeight - desiredHeight; //naviが重ならずに降りられる一番下
  /*footerHeight=$(_ftName).outerHeight(true);*/
  floatObjMove();

}

//スクロール毎の処理

function floatObjMove() {
  $(window).scroll(function () {
    var naviScrollTop = parseInt($(this).scrollTop()); //スクロール量
    if (navHeights < windowHeight) {

      //スクロール量が最初の位置より小さい内は
      if (naviScrollTop < naviSetY) {
        $(_foName).animate({
          top: naviScrollTop
        }, {
          duration: duration,
          queue: false,
          easing: "easeOutCubic"
        });
      }
      //
      else if (naviMaxY < naviScrollTop) {
        $(_foName).animate({
          top: naviMaxY - naviSetY
        }, {
          duration: duration,
          queue: false,
          easing: "easeOutCubic"
        });
      }
      //(naviMaxY-naviSetYの理由:メニュー自体ヘッダーの下で0だけど、bodyからみたらヘッダ分下にある
      //ヘッダもフッタも無い位置
      else {
        $(_foName).animate({
          top: naviScrollTop - naviMarginSetY
        }, {
          duration: duration,
          queue: false,
          easing: "easeOutCubic"
        });
      }
      //ウインドウサイズが足りないので動かない。
    } else {
      //console.log("ウィンドウの高さ:"+windowHeight," / メニューの高さ:"+desiredHeight,"クリック出来ないメニューが出来るので動かさない");
    }
  });
}

//リサイズしたらwindowのサイズを変更
$(window).resize(function () {
  windowHeight = parseInt($(window).height()); //windowのサイズ
  //console.log("リサイズしたよ:"+windowHeight);
  floatObjMoveSet();
});

function floatObjMoveChk(val) {
  if (val < 0) {
    $(_mcName).css('height', navHeight);
  } else {
    floatObjMoveSet();
  }
}