CSS アコーディオンメニューが消えた?

2018/2 構想もデザインも迷走されているクラさんの案件を作成中・・・
レスポンシブをiPhoneで確認してみると、
CSS アコーディオンメニューが消えた! 何処に消えた?
PC各ブラウザでもAndroidでも表示されているのにiPhoneだけ
iPhoneのヘッダー右上にあるはずのメニューボタンが無い。

CSS アコーディオンメニューが消えた
float:right;で右配置でしたが、
position:absolute;でも出てこない・・・
あれ、右ページにフリックできる?
フリックすると、右上にポツンとあったw

さて、原因の追求と解決案を模索しなければ、次に進めません。
クラさんからの変更変更で、
ヘッダー周りのCSSとjQueryが複雑になりすぎて、手が付けられませんw
これかな? bodyのposition: relative; & position:fixed; for iPhone iOS
div.innerを噛ませたけど何も変わらず・・・原因もわからずw

横画面だとOK 縦画面だとNG
という事は、@mediaクエリ (max-width: 480px)のハズだが誤記は無い・・・
試作ページなので、1ページ内に全コンテンツを突っ込んでいたので、縦スクロールも半端ないが、途方に暮れて何気に下スクロールをしていたら、そこに有る筈のform一式が無い・・・
あれ!? 横フリックが出来るけど、何故?

原因判明!
長いURL表記が折り返さず wrap!

枠を突き抜け、bodyが150%ぐらいになっていた・・・

「携帯キャリアのドメイン受信指定サイトへ誘導で記したURLで、
Copyright文は改行するから、半角スペースは問題無いとして、
URLだと単語と判斷されるので改行でしないんですよね。

レスポンシブの注意点

  • 長いURL表記に気をつけよう
  • 大画像のwidthもNG
  • white-space: nowrap;
  • float:right;
  • bodyからのposition:absolute; right:×;

レスポンシブの改善策

  • word-wrap : break-word;
    overflow-wrap : break-word;
  • overflow:hidden;

スマホチェックが必須項目になりましたね。


CSS 目立つ色:赤

ウェブサイト制作中に、
見出しや文章の一部を「目立つように!」というご要望が良くあります。
HTMLベースでの強調と言えば、
 Hxタグ=「大文字&太字」になります。
 STRONG=「太字」になります。
もちろん、CSSで色や大きさなどに手を加えると更に目立ちます。

昔から赤({ color: red;})が定番ですが、
あえて、{ color: #DC143C;}{ color: #CC0000;}を良く利用します。
理由は、単なる赤だと、明るくて安っぽい感じになってしまうから・・・
個人的には、これら濃い赤色を血の色と呼んでいて、
動物的直感として、一番注目される色だと思います。


CSS3 text-shadowで縁取り

Q ブログのヘッダに背景画像を利用すると、
画像と見出しの色が被って読み難くなる場合がある。
A CSS3のtext-shadowでテキストを縁取りしてやれば良い。
CSS3のtext-shadow

以前は透過したスモーク画像をテキストの裏に配置してごまかしたりw
テキストを画像化する事もありましたが、マークアップとしては不本意でした。
そこで、CSS3のtext-shadow(ドロップシャドウ)を利用すれば、テキストが画像のように目立ちます。
但し、IE10以上(CSS3のサポート状況 旧IEにはjQueryかfilterでしょうが面倒です)

CSS3 text-shadow
CSS3 text-shadow
CSS3 text-shadow
CSS3 text-shadow
CSS3 text-shadow
CSS3 text-shadow

text-shadowの解説:
text-shadow: 2px 2px 3px #000;
text-shadow: 横方向 縦方向 ぼかし 影の色;
設置例(CSS):
h1 a {
color: #FFD700;
text-shadow: 2px 4px 3px #000;
}

スマホでboldが反映しない場合に、text-shadowを利用する例も増えているようです。


CSS3で円を描く

CSS3角丸「CSS3 radius」で、今更ながら気付いた事。
border-radiusで、数pxのみ指定する場合が多いのですが、半径分を計算して指定(50%で良い)すれば、円になるって事でした。知らなかった・・・
「角丸が伸びて接したら円になる」ちょっと考えたら当たり前の事ですねw
「radius=角丸」と覚えたのがNG、「radius=半径」と認識した方が良さそう。

CSS3 円

width: 150px; height:150px;
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;
 border-radius: 50%;

IE動作環境:IE9以上

CSS3 楕円

参考CSS3: http://css-tricks.com/examples/ShapesOfCSS/
それにしても、 -moz- や -webkit- 何時まで考慮すれば良いのか・・・


abbrとacronymの下線を削除

Firefoxで、abbrとacronymには下線が表示されます。
abbrとacronymの下線

abbr, acronym { text-decoration: none;}
では、下線が消えません・・・
Firefoxでは、abbr[title], acronym[title] { border-bottom: dotted 1px;}
のCSSで、レンダリングされていますので、
下線を削除するクロスブラウザ用CSSは、
abbr[title], acronym[title] { border-bottom-width: 0;}
Firefox用ハックでもよいでしょう。

YUIでは、
abbr,acronym{ border:0; font-variant:normal}
となっています。

HTML5では、acronymは廃止される方向です。


Opera 11用ハック

Opera 11用のハックが、今までのハックとはちょっと違う

Opera 11用ハック
@media not screen and (1) { p { color: blue; }}

IE6のフォントサイズ

自分のミスで、時間を無駄にしました。 というか、今更ながらIE6

試作品のCGIの差異確認をしいてたら、
IE6だけ、フォントサイズが小さい!
タイムテーブルのCGIで、
時間帯と表を一致させる仕様なので、これでは「NG」
はて? 最近、基盤にしている汎用CSSでは、問題は無かったはず・・・
確かに、部分的には、スターハックも利用したが、
これ以外でも反応しているので、
スターハックが悪さをしている訳ではなさそう。
今更、IE6も非対応でも良い頃だと思うが、
気になるので、.html表示でゴニョゴニョやってみる。

まずは、
  1. CSS,HTMLの誤記確認 → ○ 問題無し
  2. font-familyの変更 → ○ 変化なし
  3. スターハックを全削除 → ○ 変化なし
  4. DTDを変更 → × これでした。

という事は、IE6標準モードでおかしくなる。
しかし、font-sizeは、ここ数年利用中の
body{ font-size:small !important; font-size:x-small;}
YUIベースの変形バージョンのCSSで問題ないはずで、
わざわざ、IE6の為にキーワード設定をしている。
これで、XML宣言ありXHTMLは、IE6で後方互換モードだから、
新旧各ブラウザで、フォントサイズが13pxで共通になるのだが、
DOCTYPEスイッチでも、
XML宣言ありXHTMLは、IE6で後方互換モードだから、
IE5系以前とIE6互換モード、MacIE4X,5互換モードとNN4,Opera6.0?以前が、
「medium」ではなく「small」が標準。
つまり、
medium → small → x-small → xx-small で、
IE6過去互換モードでは、x-small は、標準の1段階下のサイズで、
IE6標準準拠モードでは、x-small は、
ああああ! 2段階下のサイズ xx-small が適用されるんだったか・・・

最近は、HTML 4.01で新規制作する事が全く無かったので、
IE6のフォントキーワードなんて、全然覚えていないw
HTML 4.01は、XHTML,XM宣言L無しDTDと同じだったか・・・
HTML 4.01標準でのIE6 font-size:は、
IE6を%で、IE7をsmallのハックを利用した方が良い。
この辺の確認を毎回忘れないようにしなければ。


カラム落ち

ある管理サイトで、IE6で文字サイズを大にしたら
1ページだけ、サイドバーがカラム落ちしていた・・・
見たところ、はみ出しているコンテンツは無い!
原因を探ると、
特設した情報ボックスのwidthを文字数に合わせてem幅設定していた事で、
IE6の文字サイズ大で親ボックス内で最大幅になって、
そのmargin-leftが飛び出したのでしょう・・・
border:1px redを追加設定したので、
文字幅に合わせて最小限になるよう柔軟にしたつもりが仇になった。
width: 90%; にして、margin: 0 auto; に変更。
IE6は過去モの左寄せのままで良いでしょう。

clear

やはり、clearfixは趣味じゃないが、
{ overflow: hidden; zoom: 1;} てのも変だね。
スターハック併用が良いのかな? と思い始めている傾向。
<br class="clear" />
<hr class="clear" />
<div class="clear"></div>
いつもこの辺で、手が止まってしまいます。
今回は、切れ目だから hr で visibility:hidden; の方が良いかな。