@cypher256 (Kashihara Shinji)posted at 2022-10-18

Qiita でコードブロックを横並びに表示したときの横幅調整したい

Q&A

解決したいこと

Qiita でコードブロックを横並びに表示したときの、それぞれのコードブロックの横幅を狭くしたい（幅を均等に表示したい）です。または、ブラウザの横幅を広げたときに、記事の表示幅が非常に狭いので、最近のモニタ解像度に対応できるようにレスポンシブに広げたい。

2022/10/19 追記
可能ならコードブロック横並びより、マークダウンのコードブロック diff 機能を、Unified 形式の縦ではなく、横並びに（全体の横幅も広く）表示したい。ほとんど同じ 2 つのコードの違いを分かりやすく、横並びで表示したい。

発生している問題

こう表示されているのを、
（横スクロールバーが二重になって、スクロールバーが見えない上のほうで普通に左右に動かせない）

ブラウザの横幅を広げても、Qiita 記事の横幅がとても狭い。レスポンシブに広がらない。

こうしたい（開発者ツールで無理やり
.it-MdContent td {max-width: 600px;} を
.it-MdContent td {max-width: 360px;} にしたとこ
）。また、レスポンシブに広がるようにしたい。

該当のページ

該当するソースコード

Qiita マークダウン

<table>
<tr>
<td>

```html
<!DOCTYPE html>
<html>
左側の HTML コード内容
</html>
```

</td>
<td>

```html
<!DOCTYPE html>
<html>
右側の HTML コード内容
</html>
```

</td>
</tr>
</table>

自分で試したこと

width, style 属性を指定

4Answer

@tonberry1050 posted at 2022-10-18

該当のページはテーブルにコードを記載するみたいなことをしているので果たしてそれが美しい方法かどうかはさておき、以下のCSSを利用するととりあえず左右の邪魔な制限を消して横幅を広げられますよ

[id*="QuestionPage"] > div {
    width: initial;
}

[id*="PersonalArticlePage"] > div > div:nth-child(3),
[id*="QuestionPage"] > div > div:nth-child(1) {
    display: block;
    max-width: initial;
}

stylusあたりを利用してオンにしたりオフにしたりすると便利です。

1Like

Comments

@tonberry1050
qiitaもベータレイアウト試してる最中らしいので、幅を増やす要望を送っても良いかもしれませんね

@tonberry1050 posted at 2022-10-19

markdown自体はhtmlタグを差し込めるので、例えばよくあるmarkdownビューワーではできます。
が、投稿サイトでそれを許すのはスクリプト攻撃を許すと同義なのでサニタイズしていると思いますよ、、、

1Like

@tonberry1050 posted at 2022-10-18

td {
    max-width: initial!important;
}

をつけるととりあえずテーブルの横幅制限も消せて、スクロールが１つになります。

でも、普通にテーブルをやめて２個コードブロックを書くのが正しいと思いますよ。

0Like

@cypher256 posted at 2022-10-19

@tonberry1050
ありがとうございます。
自分の表示だけでなく、他者が見た時の表示で実現したいんです。
（マークダウンで CSS 指定できないですよね）

qiitaのベータレイアウト、知りませんでした！要望送ってみま～す。