Monthly Archives: September 2017

eyecatch_image

CSS: Mac 環境で CSS プリントのデバッグを行う方法

Web サイトやアプリ開発において、プリンタ出力時のスタイルを定義する必要がある要件もあるかと思います。 Mac の場合、デフォルトブラウザが Safari ですが、残念ながら Safari の Web インスペクタにプリントデバッグの機能はありません。 したがって、今回は Mac 版 Chrome を使用し、プリントのスタイルを確認する方法を説明したいと思います。 目次 CSS プリントのデバッグを行う方法 まとめ CSS プリントのデバッグを行う方法 Chrome が未インストールの方は Chrome 公式サイトから ダウンロード します。 Chrome のメインメニューより 表示 -> 開発/管理 -> デベロッパーツール を起動します。 デベロッパーツールの下部ペインの Rendering タブ の下の方にある Emulate CSS media より print を選択すれば 印刷用CSS での出力が確認できます。 まとめ Safari は Mac や iOS デバイスのデバッグに適した Web インスペクタ が用意されていますが、Web 開発のデバッグ時には Chrome のように軽快に動作しない場面も少なからずあります。 iOS アプリ開発時の Safari の Web インスペクタによるデバッグはとても使いやすいので、次期 macOS で改善されればいいのですが。。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Mac: iTunes Match でアルバムアートワークが反映されないときの解決方法

iTunes で大量の音楽データを管理している場合、iTunes Match を利用している方も多いかと思います。 そんな iTunes Match ですが、Mac で取り込んだアルバムのアートワークが iOS デバイスに反映されないときがあります。 本日は、iTunes Match のアルバムアートワークが反映されない場合の対処方法を説明したいと思います。 目次 iTunes Match でアルバムアートワークを更新する まとめ iTunes Match でアルバムアートワークを更新する 初回アップロード時にアルバムアートワークが反映されなかった場合、該当アルバムのアートワークをいくら更新しても、iOS デバイス上では変更が反映されません。 以下の方法でアルバムアートワークを再度アップロードし、クラウド上のデータを更新することで解決します。 アルバムの情報を見る アートワークが反映されていないアルバムを選択し、右クリック -> 情報を見る（もしくは ⌘ + i）を選択します。 アルバムアートワークを追加 既存のアートワークは削除せず、アルバムアートワークを追加し、OK します。 元のアルバムアートワークを削除 再度アルバムを選択し、右クリック -> 情報を見る（もしくは ⌘ + i）を選択し、既存アートワークを削除し、OK します。 少し時間をおいて、iOS デバイス上のアルバムアートワークが更新されていれば完了です。 まとめ iOS デバイスで初回アルバムアートワークが反映されなかった場合、「iCloud ミュージックライブラリをアップデート」を試しても、いつまでたっても更新されない可能性が高いです。 そういった場合は、今回の方法でアートワークそのものを再度アップロードすれば解決します。お試しください。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS3: div 等のブロック要素を width にあわせたアスペクト比にする

img タグは width、height を % 指定することで、アスペクト比によるサイズ指定が簡単に行えます。 一方 div 要素に対し、width 100% のアスペクト比による height を記述しようとすると、なかなか意図した結果にならないと思います。 今回は可変する width に対し、アスペクト比による高さを指定する方法を説明したいと思います。 目次 ブロック要素を width にあわせたアスペクト比にする まとめ ブロック要素を width にあわせたアスペクト比にする ここでは、width 100% に対し、正方形（height 100%）の div を作成します。 HTML ネストになる div を作成します。 CSS 外側の div (aspect-container) の before 要素の padding-top を 100% とすることで、width 100% に対して 100% の高さを確保します。 まとめ アスペクト比を維持したまま、ウインドウサイズや親要素の width に応じて、子ブロック要素の height を変えたい場合に有効な方法です。 今回は正方形を例にしましたが、before の padding-top の比率 を変更することで、任意のアスペクト比への対応も可能です。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

JavaScript: イベントバブリングによる親要素のイベント実行を停止する

親要素に設定されているクリックイベントにより、リンクやボタン等のクリックイベントが実行されない、先に親要素のイベントが発火してしまう、という問題があります。 今回は、イベントが設定されているネストされた要素の、親要素に設定されているイベントを停止する方法を説明します。 目次 イベントバブリングで親要素のイベント実行を停止する まとめ イベントバブリングで親要素のイベント実行を停止する 通常、イベント発生時には DOM ツリーのルート (Window) からイベント発生要素を探索（キャプチャ）し、発生要素を特定（ターゲット）後、再びルート (Window) まで遡り（バブリング）ます。 以下のサンプルでは、外側 div (#wrapper)、内側 div (#content) 両方にクリックイベントが設定されています。 サンプル HTML function divClick 内の e.stopPropagation() により、内側要素 (div#content) クリック時、そこでイベントバブリングが停止し、親要素 (div#wrapper) のクリックイベントは無効となります。 まとめ このように、JavaScript のイベントバブリングをコントロールすることで、ネストされた要素（外側）のイベントを停止したり、優先順位を思いどおりに設定が可能です。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Display Mode :