ブックマーク / www.koikikukan.com (3)

  • 親ページからiframe内の要素にCSSを適用させる方法

    親ページからiframe内にCSSを適用させる方法を紹介します。 1.問題点 次のようなHTMLがあるとします。 index.html(親ページ) <iframe id="test" src="test.html"></iframe> test.html(iframeで呼び出すページ) <html> <head> <title>test</title> </head> <body> <p>test</p> </body> </html> で、iframe内に表示させるページのp要素にindex.htmlからcssを設定したいのですが、方法が分かりません。 ということで、親ページからiframe内の要素にCSSを適用させる方法を紹介します。 ネットで調べてみるとサンプルが色々出回っているのですが、情報が古かったり動作しないものが多かったので、このエントリーですぐに使えそうなものを作ってみまし

    takatoka
    takatoka 2017/01/13
  • jQueryで要素を追加するメソッドのまとめ

    jQueryで要素を追加するメソッドをまとめてみました。 このエントリーはビギナーの方向けの内容です。 jQueryを呼び出すためのscript要素(以下)は文中のサンプルでは省略してますので、適宜追加してください。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 1.指定した要素の直後に要素を追加する 指定した要素の直後に要素を追加するには、after()メソッドを利用します。 <script> $(function() { var div = $('<div id="bar"></div>'); $("#foo").after(div); }); </script> <div id="foo"></div> 実行結果 <div id="foo"></div>

  • 三点リーダが真ん中に表示されない理由

    三点リーダ「…」が「…」という風に真ん中に表示されない問題について調べてみました。 1.三点リーダとは 説明するまでもありませんが、点を3つ横に並べた形をした記号のことで、語尾を省略したり、言葉の余韻を残すときに使う「…」です。 2.問題点 たとえばブログを書いているときに、記事編集画面のテキストエリアでは「…」と表示されているのに、公開したページでは「…」となることがあります。 3.原因 三点リーダが真ん中に表示されないのはCSSの「font-family」の設定によるものです。 「font-family」の値には多くのフォントを並べているケースが多いと思いますが、その一番最初に記述しているフォントに依存します。 たとえば、このブログのfont-familyは以下のようになっています。 font-family: Verdana,Arial,"メイリオ",Meiryo,"ヒラギノ角ゴPro

    三点リーダが真ん中に表示されない理由
  • 1