CSSブログ～ホームページ制作会社 gravity works（グラビティ・ワークス）のCSSについての知識と備忘録: HTMLアーカイブ

画面サイズによって読み込む画像を変更する

gravity-works (2022年5月23日 10:26) | コメント(0)

もうずっと便利に使っていますが、度々書き方を忘れて調べに行くことがあるので備忘録です。

画面サイズによってPC向け、スマホ向け等画像を切替えたい場合に、HTML5.1 で追加された＜picture＞タグが便利です。

</picture>

上記のように記述することで、

・画面サイズ767px以下では img_sp.jpg を表示

・それ以上では img_pc.jpg を表示

となります。

(max-width: 767px) の部分は min-width: ○○px とすることで、○○px以上でこの画像を表示、とすることもできます。

html は少しごちゃつくものの、以下のような利点があるのでとても便利です。

・htmlのみで実装できる

・条件に当てはまった画像のみ読み込まれる

ちなみにIE11以下が非対応なのですが、icturefill.js を読み込むことでJSで対応させることができます。

picturefill.js

IEで互換表示させない

gravity-works (2016年6月15日 11:02) | コメント(0)

弊社でも何度か問題になったことのあるIEの互換表示。

IE10あたりからは簡単に設定できなくなったため「誤クリックで設定してしまった」という状況は少なくなっていますが、それでも一度問題になったことがあったのでこのタグを入れておくと良さそうです。

<head>内の外部ファイル読み込みよりも前に入れます。

それぞれのIEの標準モードで表示されます。

IE6：div内の最後の要素が落ちてしまうときの対処法

gravity-works (2013年1月15日 19:17) | コメント(0)

上記のように、

大枠（contents）にピッタリになるようにfloatを使って要素を並べたとき、

その内部の最後の要素が落ちてしまうバグの対処法です。

※テキストだと複製され、その分が落ちるようです。

　今回は画像だったためか落ちただけでした。

■余白を作る

上記の場合、contentsの横幅を少し大きく作ると（内部要素1つにつき1px？）

解消されるようです。

■コメントを入れる

余白が作れない場合、最後の要素（3つ目のblock）の後に適当な

コメントを入れると解消されます。

コメントなのでバグで複製されてしまっても見えません。

ページを右クリック禁止にする

gravity-works (2012年2月22日 10:23) | コメント(0)

めったに使うようなものではないと思いますが、

実装の方法が少し思いがけないものだったのでメモ。

ページでの右クリックを禁止にしたい場合は次のように記述します。

<body>

　↓

これだけ。

CSSに記述するか、JSを使うかと思っていたので意外でした。

文字コード

gravity-works (2009年5月25日 15:07) | コメント(0)

【通常】: Shift_JIS / CR+LF

【多言語】: UTF-8 / CR+LF

HTMLファイルがどの文字コードで書かれているか宣言する。
titleタグなどの日本語を書く前に明示しないと、文字化けする場合がある。

■Shift_JIS
別名、SJIS。マイクロソフトが制定した文字コードで、Windows95やMacの文字コードとして採用されていた。
MTなどCMSツールも採用しているコード。

■EUC-JP
日本語版UNIXで採用されている文字コード。
MySQLなど、データベースがからむシステムでよく使われている。

■UTF-8
ユニコード・コンソーシアムが制定した文字コードで、全世界の文字を一つのキャラクターセットで表示できる仕様。
１ページ内に日本語と韓国語、中国語など混在させることが可能だが、文字データの量は他のコードに比べて多くなる。
WebサービスAPIを利用する祭によく使われる。

画像のalt指定について

gravity-works (2009年5月25日 14:42) | コメント(0)

画像タイトル等の文言は、文字数制限なしで使用されている文章をそのまま記述する。
文言のない画像等は、どんな画像か分かるように短い説明や単語を入れる。
何も入れなくていい場合は、空(alt="")で挿入。

meta について

gravity-works (2009年5月25日 14:06) | コメント(0)

■meta content

■meta description
<meta name="description" content="○○○○○○○○○○" />

ページについての説明を書く。各ページにそれぞれ説明を入れる。
あまり長くなりすぎないようにする。
検索結果に表示されるホームページ内容の要約として表示されることがある。
検索結果を見た人に内容が伝わるように書きく。

■meta keyword
<meta name="keywords" content="○○,○○,○○" />

カンマ区切りでキーワードとなる単語をいれる。

各ページにそれぞれのキーワードを入れる。キーワードの数は10個以内くらい。

多過ぎたりまったく関係ないキーワードを羅列っするとスパムと判断されてしまう。

title について

gravity-works (2009年5月25日 14:03) | コメント(0)

ページ名　|　会社名(サイト名)

基本的には上記の用にする。
指定がある場合はそれに従う。

DOCTYPE宣言

gravity-works (2009年5月25日 11:47) | コメント(0)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

宣言文では、HTMLまたはXHTMLのバージョンと文書型を宣言する必要がある。

■HTML／XHTMLのバージョン
最新のバージョンはXHTML1.1だが、このバージョンは、ファイルのメディアタイプ指定を「application/xhtml＋xml」にしないとXML文書として認識されない。しかしこの指定は、IEで対応していないためXHTML1.０を使用する。

■文書型
下記２種類がある。
Strict ..... そのバージョンのHTML文書に厳密。
Transitional ..... 一部非推奨の要素も使っている。
どちらを使ってもブラウザ上では何の問題も起きない。

HTMLの最近のブログ記事