LoginSignup
1
0

More than 1 year has passed since last update.

HTML×Djangoの字下げ(インデント)、改行について

Posted at

1. HTMLやDjangoの字下げ、改行について

単一の言語(ここではHTML、CSSを言語と定義)だけでサイトを作ることはほとんどない。個人的には3つ、ないしは4つは使うと考えている。(もっと壮大なものを作るとなると更に。。。?)
それが集結するHTMLファイルはきちんと表示できるのはもちろん、書き方にも気を使いたい。私の中で字下げ、改行のモットーがあるのでそれを共有したい。

HTML:タグはtabキーで入れ子の形に。

bad.html
<div class="design">
<div>
いろいろな内容A
</div>
<div>
いろいろな内容B
</div>
<div>

複数同じタグを使われた場合、関係性が見えにくい。字下げを行い見やすくしよう。

good.html
<div class="design">
    <div>
        いろいろな内容A
    </div>
    <div>
        いろいろな内容B
    </div>
<div>

HTML:style属性は極力使わない。

bad.html
<div style="
           background-size: contain;
           object-fit: cover;
           background-color: #000000;
           background-blend-mode: lighten;">
    <div>
        いろいろな内容A
    </div>
    <div>
        いろいろな内容B
    </div>
<div>

今回は改行しているが、divに他の属性をつけたり、デザインの更新を行う際にもとても使いにくい。デザインはCSSで記述したほうがいいだろう。

good.html
<div class="design">
    <div>
        いろいろな内容A
    </div>
    <div>
        いろいろな内容B
    </div>
<div>
good.css
design {
    background-size: contain;
    object-fit: cover;
    background-color: #000000;
    background-blend-mode: lighten;
}

Django:テンプレートタグ{%%}は字下げは行わない。

badDjango.html
<div>
    <span>タイトル</span><br>
        {% for user in userAll %}
            <form class="tag_box" action="{% url 'example' pk=user.pk %}" method="get">{% csrf_token %}
                <input class="tag_box" id="example1" name="example1" value="example1">
            </form>
        {% endfor %}
</div>

もしテンプレートタグ{%%}がなかったら、二回字下げを行ったことになると考えればわかりやすいかもしれない。

goodDjango.html
<div>
    <span>タイトル</span><br>
    {% for user in userAll %}
        <form class="tag_box" action="{% url 'example' pk=user.pk %}" method="get">{% csrf_token %}
            <input class="tag_box" id="example1" name="example1" value="example1">
        </form>
    {% endfor %}
</div>

気が付いたら随時更新予定

2.参考URL

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0