21
<<
<
>
>>
1/1
1 たぶん
2012/11/27(火) 04:53:19 ID: fq8ujfWtUX
①table は border-collapse: collapse;
②td に追加 vertical-align: top;
2 ななしのよっしん
2012/11/28(水) 15:25:53 ID: Ljcvurdwm+
>>1
さんくす
①bodyに書いてあった
②div.article tdとdiv.content td別にしてあるとか嫌がらせだろ、これwww
3 ぎみっく
2012/11/29(木) 13:12:11 ID: Ljcvurdwm+
>>1
今調べてみたら
②についてなんだが
html > body#basebody > div#container > div#contents > div#main > div#left-box > div#article > table > tbody > tr > td
ってなってて(td = body#tinymce td, div.article td)
なんか
div.content td {
vertical-align: top;
}
は適用されてないみたいなんだが…
つーかこれが適用されてねーからブラウザによるレイアウトの違いの「テーブルで画像と並んだ文章がずれる問題」が起こんじゃねーの?
4 ななしのよっしん
2012/11/29(木) 22:01:50 ID: yXOMC1KaAh
td の vertical-align はブラウザのデフォルト(baseline)だと思います。
お絵カキコ入れたtable作る時はわざわざvertical-align: top;自分で入れてるし。
個人的にはtopのほうが汎用性高いと思うけど、一行で揃える時はbaselineのほうが良いこともありますね。
5 ななしのよっしん
2012/11/30(金) 01:33:17 ID: fq8ujfWtUX
tdに適用されてるのは
vertical-align: baseline;
ですね。最初のリセットCSS部分の。つまり ニコニコ大百科:HTMLタグ一覧 の説明が間違っているか、仕様が変わったか。
あとは不要ですが、なぜか編集画面の時はフォントが指定されてる謎。実際の記事ではフォント指定無いようだけれど。(Windows)
6 削除しました
削除しました ID: 7xcDZYI1/K
削除しました
7 ななしのよっしん
2014/03/04(火) 00:29:57 ID: tWczs1Ailu
スマートフォン版だと<table>タグのデフォルトCSSが[border-collapse: separate;]になっているようです。
明示的に[border-collapse: collapse;]を設定することで、PC版と同じ表示になるのを確認しました。
8 ななしのよっしん
2014/04/24(木) 06:31:12 ID: H5t41DzMyc
「について語るスレ」の名前(↑の「ななしのよっしん」)の色が #008800; なんですけど、この記事に載せるのは違いますかね・・・?
9 ななしのよっしん
2014/04/24(木) 09:12:26 ID: H5t41DzMyc
あ、それとさっき気づいたんですが、cssファイルのURLがまた変わってたようです。たぶんこれかな?
http://d
http://d
記事にある↑は、背景画像のみを指定するようになってますね。恐らく「木目にする」実装のとき?
ついでに木目版のcss
http://d
10 ななしのよっしん
2014/11/22(土) 15:37:10 ID: ZfigrJU6DQ
ほんまこの記事にはいつも助けられてます
本当にありがとうございました
11 ななしのよっしん
2014/11/30(日) 03:40:24 ID: Ljcvurdwm+
>>編集
h4とh5は対応するお絵カキコが無かったから、暫定的に用いたh3のアイコンお絵カキコがそのままになってたんですよ。
現状の記事に使用されてるやつもオリジナルの物とは配色違いますし…それだけの為にドット拾うのもだるいし
それとは別件で、スマホ版で適用されるCSSも記載した方がいいかな?
max-widthとか色々とレイアウト崩れる原因になってる要素がいくつかあるし
12 ななしのよっしん
2014/11/30(日) 08:35:16 ID: ZfigrJU6DQ
>>11
スマホ版のcssがあるととても助かります
画像周りとかレイアウトがやたらと崩れるので…
13 ななしのよっしん
2014/11/30(日) 09:51:36 ID: bj+gWC+t1L
>>11
>h4とh5は対応するお絵カキコが無かったから、暫定的に用いたh3のアイコンお絵カキコがそのままになってたんですよ。
了解しました。
スマホ版はあると助かります。
14 ななしのよっしん
2014/12/22(月) 08:34:02 ID: Ljcvurdwm+
>>12-13
了解です。
スマホ版のCSSはそんなに変更点がないみたいなので、
変更点のみの記載とレイアウトが崩れる原因となっている要素への対応策を載せてみようかと思います。
PC版とスマホ版のCSSを同一ページで記載するとわかり難くなるかもなので
過去リビジョンの使用を検討してみます。
15 ななしのよっしん
2014/12/22(月) 09:12:03 ID: bj+gWC+t1L
>>14
> PC版とスマホ版のCSSを同一ページで記載するとわかり難くなるかもなので
> 過去リビジョンの使用を検討してみます。
それなら別記事のほうがいいと思います。
16 ななしのよっしん
2014/12/24(水) 01:22:26 ID: Ljcvurdwm+
>>15
> それなら別記事のほうがいいと思います。
やっぱりそうですよね…
項目毎に書くにしても、スマホ版を分離して記述するにしても
同一ページだと混同してしまうだろうな、と。
と言っても、変更点だけなら記事にするほどの量でもないっていう…
17 ななしのよっしん
2015/01/03(土) 07:55:06 ID: Ljcvurdwm+
>>15
一応、現状の記事に項目別にスマホ版で変わってる部分だけ載せたらこんな感じになる。
https://
最初のフォントサイズとかの所は判り易く背景色つけてみた
18 ななしのよっしん
2015/01/03(土) 12:57:42 ID: bj+gWC+t1L
>>17
これでいいと思います
19 ななしのよっしん
2015/01/05(月) 14:00:06 ID: MBV1cqzHNo
スマホ版か。
これから試行錯誤してみるが、関連項目は<ul>からなんとかできそうな気がする
20 ななしのよっしん
2020/08/18(火) 15:16:37 ID: 5GfF9O1moR
21 ななしのよっしん
2022/04/06(水) 15:44:20 ID: tWczs1Ailu
ここの情報のおかげで記事作成にとても助かってます
ありがとうございます
<<
<
>
>>
1/1
ほめた!
ほめるを取消しました。
ほめるに失敗しました。
ほめるの取消しに失敗しました。