Webサイト制作日報

<select>で、・ご選択あああABCDEFGHI12345「ご選択」のテキストを最上部に表示した方が、親切だったり誘導だったりするので、配置していましたが、required※必須だと、未選択でスルーしても、「ご選択」を選択した事になってしまい※必須が無意味です・・・

フォームで、見本テキストのように案内テキストをグレーアウト（リプレイス）で表示するのは、placeholder=' ' が仕様です。

<input placeholder='ここにテキスト'>
<textarea placeholder='ここにテキスト'></textarea>

でも、<select>では無理です・・・　HTMLだけで設定すると、
・ご選択あああABCDEFGHI12345　← 「ご選択」自体すらOP項目になっちゃいます・・・
ところがこれ、CSSで実現できるんですね！
・ご選択あああABCDEFGHI12345　← 「ご選択」自体は、OP項目に出ません！
しかも、 value=''の値が０になるので、※必須が有効になるのです。

<option value='' disabled selected style='display:none;'>

これが実現できるなんて、この方法は思いつきませんでしたｗ

<select>
<option value='' disabled selected style='display:none;'>・ご選択</option>
<option>あああ</option>
<option>ABCDEFGHI</option>
<option>12345</option>
</select>

SELECTED属性も付与できますし、フォーム用.cssで、デフォ利用すると便利でしょう。
selectでdisabledなんて使わないから、
select option:first-child[disabled]{ display: none;}で良いでしょうね。

ただ、フォームの目的に関しては、
※必須や記入/選択の項目を多く設定/設置してしまうと、選択肢に該当しないユーザーを強制する事になるので、送信率が減ります・・・
なので、
<option value='未選択'>・ご選択</option> のように曖昧にしておりました。[その他]の項目でも親切でした。
この目的としては、フォームでの第一声「ファーストコンタクト」を頂く事が、利便性よりもマーケティングとして優先事項/重要だったりしますので、※必須や記入/選択の項目は、慎重に設置しましょう。

| コメント(0) | CSS | |

2020/3/18
最近、CSSの学習を全くやっていませんでしたら流行に遅れました（笑
APPLE系のフォントで、ヒラギノ角ゴシックの表示が怪しいとの話
CSS font-familyで、ヒラギノ角ゴシック系は、前方に配置して優先していた・・・

ヒラギノ角ゴシックをやめて、以下に変更しちゃいましょうか。
font-family: -apple-system;

2020年用 font-family

font-family: -apple-system,
 'Segoe UI','メイリオ',Meiryo,Osaka,
 'ＭＳ Ｐゴシック','MS PGothic',sans-serif;

ＭＳ Ｐゴシックも不要だねｗ
実際、正解のない世界なので、sans-serifだけでも良いのかもしれません・・・

| コメント(0) | CSS | |

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

float:right;で右配置でしたが、
position:absolute;でも出てこない・・・
あれ、右ページにフリックできる？
フリックすると、右上にポツンとあったｗ

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

横画面だとOK 縦画面だとNG
という事は、@mediaクエリ (max-width: 480px)のハズだが誤記は無い・・・
試作ページなので、１ページ内に全コンテンツを突っ込んでいたので、縦スクロールも半端ないが、途方に暮れて何気に下スクロールをしていたら、そこに有る筈の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;

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

| コメント(0) | CSS | |

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

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

| コメント(0) | CSS | |

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

以前は透過したスモーク画像をテキストの裏に配置してごまかしたりｗ
テキストを画像化する事もありましたが、マークアップとしては不本意でした。
そこで、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を利用する例も増えているようです。

| コメント(0) | CSS | |

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

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

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

| コメント(0) | CSS | |

Firefoxで、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は廃止される方向です。

| コメント(0) | CSS | |

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

Opera 11用ハック

@media not screen and (1) { p { color: blue; }}

| コメント(0) | CSS | |

自分のミスで、時間を無駄にしました。　というか、今更ながら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 は、標準の１段階下のサイズで、
IE6標準準拠モードでは、x-small は、
あああ_ああ！　２段階下のサイズ xx-small が適用されるんだったか・・・

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

| コメント(0) | CSS | |