ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

疑似クラスの設定の順番

November 04 2008

CSSでリンク関連の文字の色をデザインすることは良くあります。
よくあるどころか必須ですね(笑)
しかし、たまに焦ってCSSを書くと「あれ?あれ??あれれれ??」と
全然色が変わってくれない事がたまにあります。

それは記述の順番にどうやら秘密があったようです。
たとえば・・・

a:link {
color: #009999;
text-decoration: none;
}
a:visited {
color: #6633CC;
text-decoration: none;
}
a:hover {
color: #FF0099;
text-decoration: underline;
}
a:active {
/*設定なし*/
}

こんな感じで
1.a:link
2.a:visited
3.a:hover
4.a:active
の順番で記述しないと意図した結果にならないそうな。
この順番をLOVE and HATE などと覚えられていることもあるようです。
(Link、Visited、Hover、Active)
スイヘーリーベー僕のフネーみたいだな・・・・・・

元素記号なんてもうすっかり忘れてしまった気がする今日この頃です。

携帯で表示させてPCで表示させない。

November 04 2008

あるサイト(PC+携帯サイト)を作っていた時に
「更新1回で済ませたいのでお知らせページをPCと携帯で共用で」
という事がありました。

さて、携帯ではPCサイトはそのまま表示できぬ。
外部CSSで装飾すりゃいーっか、と思ってもDocomoの仕様が・・
(Docomoは外部CSS読み込みができない)
って事は限りなくインラインCSSで装飾した携帯ページを使うしかないか・・
それでも、PCで見たらやっぱり限界があるぞ・・・

そうだ。外部ウィンドウ使って小さく表示させよう。
今ならJavascriptのライブラリがあるのでそれでいけるか!
あ・・・・「閉じる」リンクを作っても携帯では・・・・
んじゃ、携帯用に「トップへ戻る」リンクを追加してっと。
んあああ、でもPCの小さいウィンドウで開いたそのページの
「トップへ戻る」リンクをクリックしてまうとエライ事になるぞっ。

携帯で表示させて、PCで表示させない・・・
携帯で表示させて、PCで表示させない・・・
携帯で表示させて、PCで表示させない・・・

携帯はすべてJavascript非対応だな!

function insertCloseBtn(){document.write
('<a href="javascript:window.close()">閉じる</a>');

こういうjsファイルを書いて、close.jsで保存。
HTMLで

<script type="text/javascript" src="../js/close.js">
コンテンツ~~~~~~~~~
<script type="text/javascript">
<!--
insertCloseBtn();
//-->
</script>
<noscript>
<a href="/mb/index.html">トップページへ</a>
</noscript>

これでスクリプトオンのPCなら「閉じる」だけ表示されて
Javascriptに対応していない携帯電話は「閉じる」がスルーされて
noscriptタグの中身の「トップページへ」が表示される結果になりました。

しかし、携帯電話がJavascriptに対応すると一気にダメになりますが。

※2010/2/5 追記
i-modeブラウザ2.0が2009年5月に発表されてますが
javascript対応となっており、この方法は使えなくなっています。
外部CSSとかPDFにも対応しましたが・・・・
というか、なんでいきなり突出しますかドコモさん・・・・

preタグ自動改行とBlogn+チョイ改造

November 03 2008

今までpreタグなんて使ったことなくて(汗)
「ちょいとネタ残すために使ってみるかー」とがんばってみたら
CSSで幅を設定してると、書くコードの長さによっては思いっきりはみ出よるんですね。

自動改行させるべく色々と調べてみたら

pre {
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap;     /* Opera 4-6 */
white-space: -o-pre-wrap;   /* Opera 7 */
white-space: pre-wrap;      /* CSS3 */
word-wrap: break-word;      /* IE 5.5+ */
}

こう書けば設定した幅で折り返してくれるみたい。
元ネタはこちら。
http://d.hatena.ne.jp/cocelo/20070217/1171716615

で、いつもお世話になってるBlogn+でpreタグ使って書いてみると
preタグの中のコードの改行がそのまま記事を書くときにbrタグが入ってしまって
コピペしてみるといらん改行は入ってしまうし、見た目も縦にズラーっと長くなってしまい
なんかもう、めんどくさい。

で、index.phpの中の(Ver.2.56)324行目の

// brタグの後ろに改行コードを入れる
$blogn_skin = eregi_replace("<br>", "<br />\n", $blogn_skin);

こいつをコメントアウトしたら希望通りの表示になりました。
brタグでの改行の後に、改行コードを追加しているみたいですね。

あと「HTMLタグ直後の改行を禁止したい」も施しておきました。
http://i-njoy.net/blognplus/index.php?e=174

これでちょいと便利になりました。

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