質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.21%

重複したスタイルシートについて

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 556

makosankibu

score 257

お世話になります。

jspでページ内で繰り返し使用することを想定した汎用的なカスタムタグを作成しようとしています。
その際に処理の中でスタイルシートを使用したいのですが、ページ内で繰りかえし使用するタグの為、タグ内に宣言するとスタイルシートの宣言が重複してしまいます。
この場合、処理が遅くなるなど悪影響はありますでしょうか。
また悪影響が出る場合、どのように実装するのが正なのでしょうか。
(カスタムタグを使用する際は「タグを使用する前に~.cssを宣言する」のように説明、運用するべきなのでしょうか。)

cssファイルは100行の記載に満たない想定、ページ内でタグを100回ぐらい使いまわす想定です。

↓↓↓↓↓↓↓↓↓↓以下、追記↓↓↓↓↓↓↓↓
また、jspタグの実装方法は下記のとおりです。
~~~~
1.タグの属性に渡された値を元に動的にアイテムを作成する。
2.ある値が条件式に当てはまるなら、classを変更してその部分の表示を変える(ここでcssを使用する。)

より具体的に申し上げますと、属性にタグのクラス名を記載すると、対応して表示位置が左上になったり中央になったりと柔軟にcssを変更されて欲しいのです。
また、他のタグには適用しにくい指定(position:absoluteを使用)の為、そのタグでしかそのクラス名(タグ属性)は使用しません。

追記していたら、条件分岐で各個、直接style属性に指定した要素を表示させるのが良い気がしてきました。
しかし、何回も繰り返されるタグですので、スマートでない気もします。
何か他に良い方法はございますでしょうか。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+2

css自体は一度定義してしまえば良いので繰り返し処理のなかに入れるメリットは一切ありません。
何度も読み込むのでその分の負荷はもちろんかかります。
単にcssファイルに外だししhead内で読み込ませるだけで済むように思いますが、どのような実装にしようとされているのでしょうか?

jspに組み込む前に完全静的htmlで作ってみて(いわゆる「モック」ですね)、レイアウト確定させてから組み込んだほうが切り分けがやりやすくなります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/03 10:56 編集

    回答ありがとうございます。
    >単にcssファイルに外だししhead内で読み込ませるだけで済むように思いますが、どのような実装にしようとされているのでしょうか?
    →タグに渡された値を元に、動的にアイテムを作成し、ある値が条件式に当てはまるなら、classを変更してその部分の表示を変える(ここでcssを使用する。)といった実装です。

    完全静的htmlで作成してみるというのは何となくやっていましたが、その概念に名称があるのですね!
    大変勉強になります。
    レイアウトについては今回は大体出来ています。

    キャンセル

  • 2019/10/03 11:00

    >単にcssファイルに外だししhead内で読み込ませるだけで済むように思いますが
    →この部分について返信できてませんでした。
    メンテナンスなどを考えたときに質問文にある「カスタムタグを使用する際は「タグを使用する前に~.cssを宣言する」のように説明、運用するべきなのでしょうか。」という疑問になっています。
    ただ、タグを使用する際に一手間かかっているので、それ以外での実装方法(例えば、ページ内で最初の読み込みでしか動作しないような仕組み等)はないかと思い質問致しました。

    キャンセル

+1

ページ内でタグを100回ぐらい使いまわす

繰り返し同じスタイルを適用し、他の要素で一切使わないのであれば、style属性に直接書いても構いませんが、他のタグでも適用するのであればスタイルシート用の定義ファイル(CSS定義ファイル)に書くべきでしょう。

カスタムタグないしはJSPタグが直接クラスを出力するのではなく、利用しているタグから属性を設定できるように定義を作っておくのが理想的です。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/03 17:33

    回答ありがとうございます。
    質問文に追記いたしました。お目通しのほど、よろしくお願いいたします。

    >他のタグでも適用するのであればスタイルシート用の定義ファイル(CSS定義ファイル)に書くべきでしょう。
    →利用しているタグとは、何のことなのかわかりません...
    ご説明いただいてもよろしいでしょうか。

    キャンセル

  • 2019/10/04 11:55

    例えば、<custom:display> の名前でタグを作成して、エラー時と処理成功時で出力するクラスを切り替えるなら、
    <custom:display errorCssClass="error" successCssClass="success"> など固定値でも良いですし、<custom:display errorCssClass="${someValue}" successCssClass="${otherValue}"> などでしょうか

    キャンセル

  • 2019/10/04 12:03 編集

    説明ありがとうございます。理解しました。
    > カスタムタグないしはJSPタグが直接クラスを出力するのではなく、...
    追記にもありますようにタグを使用するjsp側でクラスを属性で指定するというのは前提にあるので、
    つまりは、ページ側のjspで使用するクラスのcssは指定するべきということでしょうか。
    ```ページ側jsp
    <style>.hoge {width:100%}</style>
    <custom:display hogeClass="hoge" />
    ```

    キャンセル

check解決した方法

0

cssをjspファイルで読み込ませ、tag内ではクラスのみを変えるようにしました。
回答がつかないのと、この方法で現状の問題はいったんは解決できたので、自己解決といたします。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.21%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる