カテゴリー: HTML / CSS

iframeの中身にスクロールバーを常に表示させる方法（Mac：Safari、Chrome）

Macはデフォルトでスクロールしたとき以外はスクロールバーが出ないようになっています。

通常のWEBページだとコンテンツが画面より多くても、ユーザーはスクロールして見ようとすると思いますが、iframeだとコンテンツがまだあると気づかずに閉じてしまう恐れがあります。

そのため、iframeの中はスクロールバーを常に表示する方がいい場合が多いと思います。今回はその方法をご紹介します。

◯解決方法
<style>
::-webkit-scrollbar { -webkit-appearance:none; width:7px; }
::-webkit-scrollbar-thumb { border-radius:4px; background-color: rgba(0,0,0,.5); box-shadow:0 0 1px rgba(255,255,255,.5); }
</style>
iframeのhtmlに上記のコードを入れると、コンテンツがあふれたときだけスクロールバーが表示されるようになりました。ただ、FireFoxでは一瞬だけ出て消えてしまいました。

※上記のコードのうち、widthとborder-radius、background-color、box-shadowを変えることで、スクロールバーをデザインすることも可能です。

※cssファイルに記述しても動きますが、他のページにも適用するcssに書くと、そのページにもスクロールバーがついてしまうので要注意です。

◯参考サイト
スクロールバーをデザインする方法が書いています。 http://unformedbuilding.com/articles/learn-about-webkit-scrollbar/
◯関連記事
colorboxでiframeを表示した時に起こる問題を記事にしています。

colorboxでモーダルウィンドウの中身がスクロールできなくなる現象を解決する方法

スマホで見た時に電話番号のスタイルが変わってしまうのを防ぐ方法

電話番号の自動リンク機能
iPhoneのsafariは自動的に数字の羅列を電話番号と認識して、番号をタップすると電話をかけることができるようにする機能がついています。それ自体は便利な機能ですが、電話番号のスタイルが変わってしまうことがあります。今回はそれを防ぐ方法を共有しようと思います。
①電話をかけることができる機能自体をなくしたい場合
<meta name="format-detection" content="telephone=no">
<head>内に上記のコードを書けば、そのページ全体で電話番号の自動リンク機能をなくすことができます。
②スタイルだけ元に戻す
電話番号の自動リンク機能がついているコードを見てみると、 
<p class="foo"><a href="tel:0123456789">0123456789</a></p>
のようになっています。
・スタイルを元に戻すには
.foo a{color:#fff;}
上記のようにスタイルを指定すると、スタイルを元に戻すことができます。
参考サイト：
http://www.tagindex.com/html5/page/meta_format_detection.html

文字コードの記号・アイコンを使う方法



アイコンを文字コードで使用する方法です。
メリットは、色や大きさをCSSで変更できる点です。また文字なので、大きくしてもアイコンの画像は荒れません。

参考サイト：http://fontawesome.io/icons/

【１】以下のGithubよりセットをダウンロードしてください。

https://gitlab.com/accorder/accorder_library/tree/master/07.%20html_css/%E6%96%87%E5%AD%97%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%82%92%E4%BD%BF%E3%81%86

セット内容の
/fonts フォルダ以下
/css/font-awesome.min.css 　をサイトにコピー

【２】<head>に追加する項目 
<link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all"> <!--フォントアイコン使う-->

【３】<body>に追加する項目

classのfa の後ろに入れたいアイコンの名前を入れる。（サイトに一覧が載っています。）
<i class="fa fa-angle-down" aria-hidden="true"></i>

【４】cssファイルで以下の様に i 要素を変更する。色や大きさ等を設定できる
.products_list li i { display:block; font-size:26px; color:#fff; }

img要素のaltの書き方

 img要素のaltの書き方について参考書籍をもとにまとめてきましたので紹介します。少し古い本なので、新しい情報があれば追加したり、いらない情報は消したりしていただければ幸いです。

＜１＞alt属性の使い方

①省略できる場合もありますが、alt属性を指定するのが原則。
②alt属性には代替テキストを記述します。「ページのimg要素がalt属性の値に置き換わったとしても、文脈としておかしくならないこと」を基準に考えます。
③他のコンテンツと意味が重複しないようにします。

 ＜２＞画像の意味がsrc属性とalt属性の組み合わせによって変わります

①src属性にもalt属性にも値がある場合
<img src="images/aaa.jpg" alt="bbb">
画像はコンテンツの重要な部分であることを表します。
②src属性に値があり、alt属性に値がない場合
<img src="images/aaa.jpg" alt="">
画像は装飾または補足であることを表します。
③src属性に値があり、alt属性そのものがない場合
<img src="images/aaa.jpg">
画像はコンテンツの重要な部分である可能性を持ちますが、代替テキストはありません。画像を装飾や補足で使う場合は、このパターンのようにalt属性自体を書かないのは好ましくなく、パターン②のように書きましょう。

 ＜３＞画像の種類ごとのALT属性の書き方

①画像のみのリンクやボタン
alt属性にはリンクやボタンの目的を伝えるテキストを指定します。
<a href ="/"><img src="images/aaa.png" alt="accorder.co.jp"></a>
②チャート・グラフ・図・地図・イラストなど
これらは情報を伝えるのに優れたコンテンツですが、画像を閲覧できないユーザーにも正しく伝わるように、alt属性を使って代替テキストで情報を提供する必要があります。
（例）カップ麺の作り方を示すフローチャート
<img src="aaa.jpg" alt="フタを開けて、かやくとスープを取り出します。次に、かやくとスープの中身をカップの中に入れ、熱湯を注ぎます。3分待って、よくまぜて召し上がりください">
例えばカップ麺の作り方を示すフローチャートをimg要素で表示するなら、上記のように書きます。
※alt属性はあくまで代替テキスト
alt属性はあくまで代替テキストなので、「alt=”カップ麺の作り方のフローチャート”」（このテキストならtitle属性が適切）のようにalt属性を指定するのではなく、文脈として不自然のないように指定しましょう。
○アイコンやロゴ
・アイコンとその後のテキストが同じ意味を伝えている場合はalt属性は空欄。
・アイコンだけで情報を伝える場合はalt属性を指定する。
・サイトヘッダーのロゴは会社名やサイト名などを入れる。
○画像化されたテキスト
特殊なフォント使ったり、文字間を精密に調整して見せたりしたい時に、テキストを画像化して使うことがあります。この場合は、単純に画像化したテキストをalt属性値とします。
◯装飾用やテキストを補足する画像
直接的な意味は持たないものの、雰囲気を演出する画像やテキストを補足する画像は「alt=””」と記述します。属性値は何も入れません。
＜参考文献＞
浜俊太朗（2013）『HTML5マークアップ　現場で使える最短攻略ガイド』アスキー・メディアワークス