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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

757閲覧

特定のページのみ専用のCSSを読み込ませたい

yokoyamax

総合スコア16

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/02/06 03:18

編集2019/02/06 05:25

実現したいこと

タイトルの通り、特定のページにのみ専用のCSSファイルを読み込ませたいです。
調べてみると、WordPressではそれらしき方法があるのですが、今のサイトはSIRIUSというCMSで構成されている為、
方法がわかりませんでした。

現在の環境

  • 「SIRIUS」というツールで作成
  • SIRIUS仕様
  1. スタイル割り込み:インラインでCSSを追記できるが、遅延読み込みできないので使用は避けたい
  2. headタグ:head内に任意の記述を追加できる
  • html…以下の通り

html

1<?php print '<?xml version="1.0" encoding="UTF-8"?>'; ?> 2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3<html xmlns="//www.w3.org/1999/xhtml" xml:lang="ja,zh" lang="ja,zh"> 4<head> 5<meta name="robots" content="noindex,nofollow,noarchive"> 6<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7<meta http-equiv="Content-Style-Type" content="text/css"> 8<meta name="format-detection" content="telephone=no"> 9<title>hoge</title> 10<meta name="keywords" content="hoge"> 11<meta name="description" content="hoge"> 12<meta name="viewport" content="width=device-width, initial-scale=1.0"> 13<link rel="preconnect" href="https://www.google.com"> 14<link rel="preconnect" href="https://maxcdn.bootstrapcdn.com"> 15<link rel="preconnect" href="https://www.google-analytics.com"> 16<link rel="preconnect" href="https://ajax.googleapis.com"> 17<link rel="preconnect" href="https://cse.google.com"> 18<link rel="preconnect" href="https://cdnjs.cloudflare.com"> 19<link rel="preconnect" href="https://www.googleapis.com"> 20<link rel="preconnect" href="https://code.jquery.com"> 21<link rel="preload" href="./styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> 22<script> 23 /*! loadCSS. [c]2017 Filament Group, Inc. MIT License */ ! function(t) { 24 "use strict"; 25 t.loadCSS || (t.loadCSS = function() {}); 26 var e = loadCSS.relpreload = {}; 27 if (e.support = function() { 28 var e; 29 try { 30 e = t.document.createElement("link").relList.supports("preload") 31 } catch (a) { 32 e = !1 33 } 34 return function() { 35 return e 36 } 37 }(), e.bindMediaToggle = function(t) { 38 function e() { 39 t.addEventListener ? t.removeEventListener("load", e) : t.attachEvent && t.detachEvent("onload", e), t.setAttribute("onload", null), t.media = a 40 } 41 var a = t.media || "all"; 42 t.addEventListener ? t.addEventListener("load", e) : t.attachEvent && t.attachEvent("onload", e), setTimeout(function() { 43 t.rel = "stylesheet", t.media = "only x" 44 }), setTimeout(e, 3e3) 45 }, e.poly = function() { 46 if (!e.support()) 47 for (var a = t.document.getElementsByTagName("link"), n = 0; n < a.length; n++) { 48 var o = a[n]; 49 "preload" !== o.rel || "style" !== o.getAttribute("as") || o.getAttribute("data-loadcss") || (o.setAttribute("data-loadcss", !0), e.bindMediaToggle(o)) 50 } 51 }, !e.support()) { 52 e.poly(); 53 var a = t.setInterval(e.poly, 500); 54 t.addEventListener ? t.addEventListener("load", function() { 55 e.poly(), t.clearInterval(a) 56 }) : t.attachEvent && t.attachEvent("onload", function() { 57 e.poly(), t.clearInterval(a) 58 }) 59 } 60 "undefined" != typeof exports ? exports.loadCSS = loadCSS : t.loadCSS = loadCSS 61 }("undefined" != typeof global ? global : this); 62</script> 63</head> 64<body> 65hoge 66</body> 67</html>

※一部のscriptは除いています

困っていること

上記のように共通CSSを

html

1<link rel="preload" href="./styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

で読み込みつつ、専用のCSSを読み込ませたいページにのみ、
例えば特定の記述を追加するなどで、実現することは可能でしょうか?

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/02/06 03:32

シリウスって CDA ( コンテンツ デザイン アプリ : 開発環境 ) なのでは?
yokoyamax

2019/02/06 05:23

ご回答ありがとうございます。 SIRIUSはCMSという認識でした。表現を修正致します。 作成ツールとライセンス制で有料というのは何か問題があるのでしょうか?
x_x

2019/02/06 06:46

CSSを後から読み込めばリフローが発生し、最終的な表示は遅くなってしまうのでは? この辺は調査済みなのでしょうか?
退会済みユーザー

退会済みユーザー

2019/02/06 12:32

有料ツール → よほど高性能、高機能じゃない限り 買う必要がない その認識のCMSだったら、ホームページビルダー(オーサリングツール)もCMSだよな
guest

回答1

0

ベストアンサー

スタイル割り込み:インラインでCSSを追記できるが、遅延読み込みできないので使用は避けたい

「特定のページだけ使うCSS」がものすごく巨大だということでもなければ、そのまま使っていいのではないかと思います。

投稿2019/02/06 03:20

編集2019/02/06 03:21
maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yokoyamax

2019/02/06 05:19

ご回答ありがとうございます。 たしかにおっしゃる通りなのですが、それだと遅延読み込みができなくなってしまいますので本末転倒なのではないかと考えておりました…
maisumakun

2019/02/06 05:36

CSSそのものや、呼び出す画像がよほど大きい場合を除けば、CSSを遅延させるメリットはそう大きくないかと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問