SEのほら何だっけアレBlog

SEのほら何だっけアレを書き留めておくブログです。今まで書き溜めた技術メモを掘り返して検証したりもします。あと、調べたことも忘れないうちに書き溜めておきます。

タグ:CSS

今時、テーブル書いてるんですがTDの中で適当に改行させたかったので調べてみた。

1.テーブルそのものの幅を決めてしまう。

<table style="table-layout:fixed;width:○○%;">

2.テーブルセル幅を設定する。

<table style="table-layout:fixed;width:100%;">
    <colgroup>
        <col style="width:33%;">
        <col style="width:33%;">
        <col style="width:33%;">
    </colgroup>
    <tbody>
        <tr><td>これで</td><td>hey</td><td>本当に</td></tr>
        <tr><td>ちゃんと</td><td>hey</td><td>きんとうに</td></tr>
        <tr><td>なります</td><td>hey</td><td>かね</td></tr>
    </tbody>
</table>

3.これだけでもいいみたい

<td style="word-wrap:break-word;"></td>

全部うまくいかないって人へ。

td.title{
width: 20px;
word-break: break-all;
}

<td class="title">20pxで折り返したいんです。aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbb</td>
連続した半角文字に効かせるために「word-break: break-all;」を入れています。



世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書 (世界一わかりやすい教科書) [ 株式会社マジカルリミックス:赤間 公太郎 ]
    このエントリーをはてなブックマークに追加 mixiチェック Share on Tumblr Clip to Evernote

過去の技術メモを掘り起こしてます。
今回は3つ。

pic742


一つ目。

1.span などのタグ内にタグの文章をinnerHTMLで入れておくと
  取り出したときに何故か " が抜けて返ってくる。
  これ常識。

ってメモがあったんだけど、自分でもよくわからないから試してみた。

20190207-1

こういうこと?取れたね?違うこと言ってるのかな。(IE11でも同じ結果でした)
jsonで取り扱ってたのかな。それなら""" 三つ必要だったりするよね。でも、これ書いたころjsonは触ってなかったと思う。
何がどうしてこんなメモ書いたんだろう?ま、いいか。

次いこ。

二つ目。

2.fontタグのcolorに#を設定すると1の時に勝手に省略されてしまう
  これ常識


え?どういうこと?メモしてた時はたぶん真剣に悩んでいたんだと思うんだけど、時間たつと全然わからないね…。(1の時って何?)

20190207-2

とりあえず、上のような実験を行いました。Eclipseのブラウザではこうなりました。

次にEdge立ち上げて同じページを開いてみたらこうなりました。

<Edge、Chromeの結果>
20190207-2_ie
ん。挙動ちがうね。(三つ目のtestがになった)この辺が言いたかったのかな。いや、違うと思うけど…。
(ちなみにChromeもEdgeと同じ挙動をしました)

でもね、IE11はこうなった。

<IE11の結果>
20190207-2_ie
うん、なんかやっぱりIEだけ挙動ちがうのね。
良くわからなかったけど、ただ一つ言えるのは
ちゃんとカラーコードかカラーネーム書こうねってことだね!(それかい)


最後。3つ目。

3.sizeが8以上は7でふぉされる
  これ常識


ちょっと待って。ふぉされるって何?どうした私。干されたのか?

とにかく試してみる。多分fontタグに悩んでたんだと思う。

20190207-2_ie2

おわかりいただけただろうか。やりたい事は■の大きさを比べたかったんだけど見事に文字化けました。(この際どうでもよい 笑)
7より大きい数入れても7と同じだよってことを言いたかったんだと思う。
ところでこれ「笆」なんて読むんでしょうね。調べてみました。

音読み:ハ
訓読み:いばらだけ、たけがき
意味 :とげのある竹、いばらだけ。竹で造った垣根。

だそうです。これ雑学。



文字化けの件は、headタグにこれ入れたら直りました。(ファイル保存形式がutf-8でした)

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
これ常識


この辺読んで勉強し直します。
 
    このエントリーをはてなブックマークに追加 mixiチェック Share on Tumblr Clip to Evernote

このページのトップヘ