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

March 3,2015 12:55 AM
Category:[jQuery]
Tag:[iframe, jQuery]
Permalink

親ページから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を適用させる方法を紹介します。

ネットで調べてみるとサンプルが色々出回っているのですが、情報が古かったり動作しないものが多かったので、このエントリーですぐに使えそうなものを作ってみました。

2.親要素からiframe内の要素にCSSを適用させる

親要素からiframe内の要素にCSSを適用させるには次のようなjQueryをindex.htmlに追加します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function(){
    $('#test').on('load', function(){
        $('#test').contents().find('p').css('font-size','150%');
    });
});
</script>

3.解説

jQueryでiframe内を操作する場合、iframeのページ読み込みが完了するのを待つ必要があります。

そこで、

$('#test').on('load', function(){ ... }

という風に、iframeのid属性値「test」に対しon()メソッドでloadイベントを待ち合わせることで、iframeページ読み込みが完了した時点でloadイベントが発火するようにします。

そしてブロック内にある、

$('#test').contents().find('p').css('font-size', '150%');

でiframe内の要素のCSSを変更します。

contents()は、指定した要素の子要素全体(テキストノードも含む)を選択するメソッドです。

4.iframe内にスタイルシートを追加する

iframe内にスタイルシートを追加するには、3項のサンプルから赤色部分のように変更します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function(){
    $('#test').on('load', function(){
        $('#test').contents().find('head').append('<link rel="stylesheet" href="style.css" type="text/css" />');
    });
});
</script>

append()を使って、head要素にlink要素を丸ごと追加すればOKです。

5.注意事項

クロスドメイン(親ページと子ページのドメインが異なる)の場合、この方法は適用できません。

Comments [0] | Trackbacks [0]

レスポンシブウェブデザインで画像を縮小する方法

March 2,2015 12:55 AM
Category:[CSS]
Tag:[CSS, Responsive]
Permalink

レスポンシブウェブデザインで画像を縮小する方法を紹介します。

1.はじめに

Googleは、ページがモバイルに対応していることをモバイル検索のランキング要因として用いることを発表しました。

2015年4月21日から開始するようです。

このブログではモバイルに対応していませんが、この流れに乗り遅れないよう、そろそろレスポンシブウェブデザインに対応しようかと思います。

以前「CSSでブラウザのウィンドウサイズに合わせて画像を拡大・縮小する方法」を紹介したのですが、今回はレスポンシブウェブデザインに対応した画像の縮小方法を紹介したいと思います。

ウェブ制作に携わっている方はよくご存知の内容かと思います。

今回はこのブログのように、PC向けサイトに表示している画像をスマホやタブレットで表示したときに縮小する方法を紹介します。

なお画像がウィンドウサイズに合った表示ができないと、ウェブマスターツールの「検索トラフィック」→「モバイルユーザビリティ」の項目で「コンテンツのサイズがビューポートに対応していません」と表示されるようです。

モバイルユーザビリティ

2.レスポンシブウェブデザインで画像を縮小する

次のような、幅の異なる2枚の画像が表示されているサンプルページを用意しました。

サンプルページ

HTMLページのマークアップ

<style>
body {
    text-align: center;
}
#content {
    background-color: #ddd;
    width: 700px;
    margin: 0 auto;
    padding: 20px;
    text-align: left;
}
p {
    margin: 20px;
}
</style>
<div id="content">
<p><img src="test1.jpg" /></p>
<p><img src="test2.jpg" /></p>
</div>

PCでは問題なく表示されますが、ウィンドウサイズを狭くすると画像の横幅がはみ出します。

ウィンドウを狭くしたときの表示

ウィンドウの横幅が狭くなったときに画像サイズを変更するには次のようなCSSを追加します。

@media (max-width: 700px) {
    #content {
        width: auto;
    }
    img {
        max-width: 100%;
        height: auto;
    }
}

ウィンドウを狭くしたときの表示はつぎのようになります。

ウィンドウを狭くしたときの表示

「@media (max-width: 700px){...}」の部分は、ビューエリアが指定したサイズ(700px)より小さいときにブロック内のスタイルが適用される、という意味です。

この方法のメリットは、ビューエリアより狭い画像は縮小されない、という点です。

下のスクリーンショットはウィンドウサイズを狭くしたときに2つめの画像だけwidthプロパティが適用されている状態です。1つめの画像は元のサイズで表示されています。

ウィンドウを狭くしたときの表示

以上です。

viewportの設定などは省略して画像の縮小だけに特化してみましたが、認識誤り等ありましたらどこかでつぶやいてください。

Comments [0] | Trackbacks [0]

Finaleで3連符に4分音符と8分音符を割り当てる方法

March 1,2015 12:03 AM
Category:[Finale]
Tag:[Finale]
Permalink

Finaleで1つの3連符に4分音符と8分音符を割り当てる方法を紹介します。

完成イメージ
完成イメージ

1.問題点

3連符を入力するには、入力したい音価のアイコンと連符アイコンを選択し、五線上でクリックすればOKです(下)。

3連符

ただこの方法では、冒頭の4分音符と8分音符を組み合わせたような、異なる音価の音符を3連符に入力することができません。

ということで、Finaleで3連符に4分音符と8分音符を割り当てる方法を紹介します。

2.3連符に4分と8分を割り当てる

入力したい音価(ここでは4分)と連符アイコンを選択。

音価と連符アイコンを選択

入力したい位置でShift+クリック。

Shift+クリック

「ステップ入力連符定義」というダイアログが開くので、「8部音符3個の音符を8部音符2個分に入れる」と設定して「OK」をクリック。

(クリックで拡大)
ステップ入力連符定義

これで3連符の先頭に、3連符2個分の4分音符が設定されました。

3連符2個分の4分音符が設定

残りの8分音符は、入力したい音価(ここでは8分)を選択。連符アイコンは選択状態のままにしておきます。

入力したい音価を選択

音符を入力したい位置でクリック。

音符入力

これで8分音符も入力されました。

8分音符が入力

Comments [0] | Trackbacks [0]
 1  |  2  |  3  |  4  |  5  | All pages