-
1:ID:L19C2y · 2週間前

#html HTMLを勉強し始めて
<table>
<tr>
<td>
<p> テキスト 1</p>
</td>
<tr>
<tr>
<td>
<p> テキスト2 </p>
</td>
<tr>



</table>
のように書いてテキスト以外変わらない行をいくつか作りました。しかしこのままだと冗長になってしまうので<tr>から</tr>までをクラス化して、例えば<gyou text="テキスト1"></gyou>と書くだけで一行作るような仕組みを作りたいです。スタイルシート、CSSあたりを調べましたが実現可能かは分かりませんでした。こうしたクラス化は可能でしょうか?

18 件の回答

2:ID:Blq4ao · 2週間前

Custom Elementでググって

3:ID:daNMIr · 2週間前

Emmetで書いたらいいんじゃね?

4:ID:honaj. · 2週間前

「プログラム」とは概ね「作業の自動化」のことを指せるよ。
html/cssはプログラムではないので、「作業の自動化」はできないよ。
その意味で、主は、そろそろプログラムを始めるタイミングなのかもね。

様々な方法でその自動化は可能なんだけど、どの方法がベストな選択かはケースバイケースで一概には決定できないよ。分かりやすく一般的な手法を挙げるならば、javascriptかphpかな。

5:ID:M63biq · 2週間前

HTML/CSS のみでは不可能。何らかのプログラミング言語を介する必要がある。JS や PHP で直接書いてもいいが、Pug のようなテンプレートエンジンを利用する手もある。

6:ID: · 2週間前

Re:4
詳しくありがとうございます。やはりHTMLとCSSでは実現できないですか…
JavaScriptでこねると出来そうではありますが複雑になると思うので、どうしても必要な時はJavaScriptあたりで実装しようかと思います。

7:ID: · 2週間前

Re:5
なかなか複雑になりそうですね…詳しくありがとうございます、この先実装の手間を考慮して利点が大きそうになればJSで実装しようと思います。

8:ID: · 2週間前

Re:3
ありがとうございます!

9:ID: · 2週間前

Re:2
ありがとうございます!

10:ID:6.sbjv · 1週間前

マークダウンで書いてHTMLに変換って手もある

11:ID:KltWt5 · 1週間前

まあ、長いと間違えるよね
</tr>と書くべきところが<tr>になってるし

12:ID:M63biq · 1週間前

Re:11
(じじい)昔は省略できたんじゃ…相当古い文献を参考にしとるんじゃなかろうか。<tbody> もないでなあ。あと <td> の中に <p> はいらないのじゃ。

14:ID:zNsAn/ · 1週間前

Re:12
>開始タグは必須。 <tr> 要素の直後に <tr> 要素がある場合、または親の表グループ要素 (<thead>, <tbody>, <tfoot>) 内で最後の要素である場合は終了タグを省略可能。

ほんまや!昔はっていうかhtml5でもそうらしいな、知らんかった。liやdt、pあたりは知ってたけどtr, td, th, thead, tfoot も省略可なんやな…。

主は寧ろ最速のコーディングを探求する玄人なのではと思えてきた。

16:ID:zNsAn/ · 1週間前

Re:12 主のタグを借りると最小はこう?なんでpいらんのん?一段だから?

<table>
<tbody>
<tr>
<td>テキスト 1
<tr>
<td>テキスト 2
</tbody>
</table>

17:ID:zNsAn/ · 1週間前

CSSはブラウザ上の見た目を変える言語だからHTMLを操作するのはできない。でも逆に言えば見た目だけなら表っぽくすることはできるよね。(構文とかSEOとかクロスブラウザとか無視する前提で)
<div>
<span>テキスト1</span>
<span>テキスト2</span>
</div>
でcssはdisplay:tableとか駆使する感じ。

18:ID:M63biq · 1週間前

Re:14
一時期流行ったXHTMLはどのタグにも終端タグが必須だったんぢゃが(<br> でさえ <br /> とせねばならないのぢゃ)、HTMLの方はいらないヤツはずっといらないのぢゃな…ワシも耄碌したのう…。

19:ID:KltWt5 · 1週間前

Re:12
<tbody>を書かないとtbodyが必須だったHTML4時代の名残でブラウザによっては勝手に補う。
そのせいでCSSが効かなかったりするので<tbody>を書いて紛れをなくすのが吉

2 件の回答が除外されました。[詳細]
コメントの受付は終了しました。

一緒に読まれている質問

ページ上部に戻る