酷い入力欄

なんで入力する内容の説明をプレースホルダーだけで賄おうって思ったんだって話。
こんなの全然スタイリッシュでもなんでもないですから。くっそ使いづらい。

さらにここは、よくある並びの
[姓 名]
[セイ メイ]
じゃなく
[姓 セイ]
[名 メイ]
が1列になってる点もポイント高いんじゃないかって思います。


失敗

display: table-cell;で縦中央させてる要素内のテキストに
text-overflow: ellipsis;で「…」付けようとしたらwidthが消えちゃった。

text-overflow: ellipsis;で「…」付ける為の条件

text-overflow – CSS | MDN

使用html

使用css

こうすると.leftのwidthが消滅するという現象が起きた

IE6で必要って書いてあるwidthを逆に消せばいいのか?と
.right pのwidthを消しても駄目だった。

次にpxで指定してみたら「…」が表示され.leftのwidthも復活した

成功

まとめ

text-overflow: ellipsis;側のwidthはpxで指定する。


昔つくったサイトでレイアウトが崩れると連絡がありました。

話を聞くと、httpsで見るとレイアウトが崩れるとか。
そんな事あるのかな?と確認するとfloat部分がカラム落ちしてました。

httpだとこうなってる
2015-02-16_r1

httpsだとこうなる
2015-02-16_r2

現象としては、横並びさせてる3要素の最後のmarginをjsで0にしてたんだけど、それが効いてない感じ。
jqeury本体は▼のを使ってた

もしかして、httpだから?
で調べてみるとプロトコル表記は省略出来るとの事で、次のように変更。

参考

全般的なスタイルルール プロトコル 埋め込みリソースからプロトコル表記(http:,https:)を省略する。

httpsだとjQuery/Ajaxは使えないのでしょうか?


Wrap with Abbreviation時に
option[value=$#]*>{$#}を使うと

こんなhtmlがあった時

Wrap with Abbreviation
こう出来る!

素敵っ!

参考

Controlling output position


センタリング

通常、ブロック要素をセンタリングさせるには

1)横幅を指定
2)左右のmarginをauto

するけど
横幅を指定しちゃうから、内容に合わせて横幅が伸縮するような要素をセンタリングさせられません。

けど、widthの代わりにdisplay:tableを使うと
横幅が変動する要素をセンタリングが可能にッ!!!

display:table;はIE8も理解してくれます


coteditor

ちょっとしたhtmlを書いたり、修正したりする際(たまに)CotEditorを使ったりしてます
やっぱり立ち上がりが早いっていいです。

ただ、html中に書いたcssのコメントがコメント扱いされず見づれーなぁと思う時さあっで
cssのコメント/* cssコメント */もコメント扱いさせられねぇべかと
環境設定を弄っていたらcssのコメントもコメント扱い出来たから方法をシェアするど\( ‘jjj’ )/

通常のhtmlカラーリング

Continue reading


tableに指定した背景を少し広げようと思って
paddingを指定したけどうんともすんとも言わない

firebugで確認してもpaddingは指定されてるわ、でも実際には反映されてないわってのが確認できた
最小のソースで試してみたらそっちはちゃんとpadding効いた

さっぱり意味がわからず時間も無かったから
その時は背景色と同じ色のborderで誤魔化した(邪道)けど
落ち着いてよく考えてみたら
問題の起きてるファイルに読み込まれてて
最小の記述に読み込まれてないreset.css内の内容がほぼ犯人としか思えない

そこでtable周りのreset指定を見なおして、とてつもなく怪しい奴がいました

って事で次のように書き換えてみると

tableに指定したpaddingが反映されました

[image]tableにmargin