###実現したいこと
- SummernoteというHTMLのWYSIWYGエディタを使いたい
- が、Summernoteが依存しているBootstrapは使用したくない
(Summernoteが使うのはかまわないが、自分のサイトに影響してほしくない)
- js,cssの影響範囲を局所的に押さえることはできないのでしょうか
回答2件
あなたの回答
tips
プレビュー
HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。
CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。
HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。
CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。
0グッド
1クリップ
投稿2016/02/20 12:49
###実現したいこと
(Summernoteが使うのはかまわないが、自分のサイトに影響してほしくない)
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
ベストアンサー
一番簡単なのは、Summernoteを含む部分を別のHTMLファイルに分離し、それを <iframe> で元のページに埋め込む方法です。お望みの結果が得られます。
<iframe>は使いたくないという場合、bootstrap.css をそのまま適用することはできないので、何らかの方法でこれを改造して使う必要があります。基本的な考え方はこうです。
次のようなスタイル定義があるとします。
CSS
1.parent .child { 2 font-size: small; 3}
これは、「class="parent" 属性を持つ要素の子要素のうち class="child" 属性を持つ要素」のフォントサイズを変更する定義です。この場合、class="parent" 属性の外側にある class="child" には何の影響もありません。
この手法で、bootstrap.css 内のすべての定義について、セレクタの先頭に ".bootstrap" のような接頭句をつけます。そして Summernote を含む div 等に <div class="bootstrap"> とすれば、bootstrap.css はこの div の外側には影響しなくなります。
bootstrap.css を手作業で改造するのは非常に手間がかかって現実的ではありません。
LESS(CSSプリプロセッサ)を使っている場合、LESS用の定義ファイルがbootstrapのダウンロードファイル(ZIPファイル)のlessフォルダに含まれているので、これを .bootstrap { } の中で @import する方法があります。
CSSプリプロセッサを使っていない(何かの事情で使えない)場合、こちらのサイトで一気に変換(「Prefix」に ".bootstrap" と入力し、「Copy/Paste....」にbootstrap.cssの内容をコピー&ペーストして「Run the prefixer!」をクリック。「Here is your...」のテキストボックスの内容を bootstrap.modified.css のような名前のファイルに保存)することもできます。(ちょっと力技ですが・・・)
以上、ご参考になれば。
投稿2016/02/21 01:20
総合スコア2425
0
iframe経由で表示してはどうでしょうか。
データのやりとりが煩雑になりますが、デザイン上は問題なくなると思います。
投稿2016/02/21 00:54
総合スコア509
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/02/21 06:03