teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

7

typo修正

2017/07/19 15:24

投稿

think49
think49

スコア18194

answer CHANGED
@@ -48,7 +48,7 @@
48
48
 
49
49
  ### 前景と背景
50
50
 
51
- 前述前景/背景に関しては、それがコンテンツかどうかで決まります。
51
+ 前述前景/背景に関しては、それがコンテンツかどうかで決まります。
52
52
  **重要なコンテンツは前景(img要素)で現し、コンテンツでない画像(表示されなくても支障がない画像)は背景(background-image)で現します。**
53
53
  CSS3 には次の注記があります。
54
54
 

6

背景

2017/07/19 15:24

投稿

think49
think49

スコア18194

answer CHANGED
@@ -49,7 +49,7 @@
49
49
  ### 前景と背景
50
50
 
51
51
  前述と前景/背景に関しては、それがコンテンツかどうかで決まります。
52
- **重要なコンテンツは前景(img要素)で現し、コンテンツでない画像(表示されなくても支障がない画像)は背景で現します。**
52
+ **重要なコンテンツは前景(img要素)で現し、コンテンツでない画像(表示されなくても支障がない画像)は背景(background-image)で現します。**
53
53
  CSS3 には次の注記があります。
54
54
 
55
55
  - [CSS Backgrounds and Borders Module Level 3 (日本語訳)](https://triple-underscore.github.io/css-backgrounds-ja.html#the-background-image)

5

「テキストブラウザで確認する」と「前景と背景」を追記

2017/07/19 15:23

投稿

think49
think49

スコア18194

answer CHANGED
@@ -38,4 +38,28 @@
38
38
  私はこの手法の問題は、`text-indent` でテキストを画面領域外に飛ばす事で、「背景画像を前景であるかのように扱っている事」にあると考えています。
39
39
  機械的に判断すれば、**必要なはずのコンテンツ(テキスト)を領域外に飛ばし、無くても良いはずの背景画像を残す行為は明らかにおかしい**のでスパム行為と判定されるのは自然だと思います。
40
40
 
41
+ ### テキストブラウザで確認する
42
+
43
+ `text-indent` の手法は「テキストブラウザ/音声ブラウザで閲覧した場合にCSSが無効化されるが故にテキストコンテンツとして表示される」という特徴があり、当初は良い手法であるとする意見がありました。
44
+ しかし、Google がそれを否定した事で「テキストブラウザで閲覧可能 === OK」の概念は覆りました。
45
+ Googleは[隠しテキストと隠しリンク - Search Console ヘルプ](https://support.google.com/webmasters/answer/66353)で次のように説明しており、テキストブラウザで確認する事は現在でも必要条件の一つですが、それが全てではありません。
46
+
47
+ > サイトのアクセシビリティは、ブラウザで JavaScript、Flash、画像をオフにしたり、Lynx(リンク先は英語)などのテキスト ブラウザを使用したりすることで確認できます。
48
+
49
+ ### 前景と背景
50
+
51
+ 前述と前景/背景に関しては、それがコンテンツかどうかで決まります。
52
+ **重要なコンテンツは前景(img要素)で現し、コンテンツでない画像(表示されなくても支障がない画像)は背景で現します。**
53
+ CSS3 には次の注記があります。
54
+
55
+ - [CSS Backgrounds and Borders Module Level 3 (日本語訳)](https://triple-underscore.github.io/css-backgrounds-ja.html#the-background-image)
56
+
57
+ > 注記: CSS においては、 content プロパティにより,スタイル的な前景画像を提供し得る。 (意味論的に重要な前景画像は、文書マークアップを通して提供されるべきである — 例えば HTML の img タグなど。)
58
+
59
+ SEO対策以前の前提として、HTML/CSSの仕様に準拠した書き方をする必要があります。
60
+
61
+ ### 更新履歴
62
+
63
+ - 2017/07/20 0:22 「テキストブラウザで確認する」と「前景と背景」を追記
64
+
41
65
  Re: landy77 さん

4

表現の修正

2017/07/19 15:22

投稿

think49
think49

スコア18194

answer CHANGED
@@ -36,6 +36,6 @@
36
36
  対策として、`text-indent: 100%;` が生まれたようですが、やっている事は変わらないので、これもガイドライン違反なのでしょう。
37
37
 
38
38
  私はこの手法の問題は、`text-indent` でテキストを画面領域外に飛ばす事で、「背景画像を前景であるかのように扱っている事」にあると考えています。
39
- 機械的に判断すれば、**必要なはずのコンテンツ(テキスト)を領域外に飛ばし、無くても良いはずの背景画像を残す行為は明らかにおかしい**のでスパム違反と判定されるのは自然だと思います。
39
+ 機械的に判断すれば、**必要なはずのコンテンツ(テキスト)を領域外に飛ばし、無くても良いはずの背景画像を残す行為は明らかにおかしい**のでスパム行為と判定されるのは自然だと思います。
40
40
 
41
41
  Re: landy77 さん

3

markdown修正

2017/07/19 13:12

投稿

think49
think49

スコア18194

answer CHANGED
@@ -36,6 +36,6 @@
36
36
  対策として、`text-indent: 100%;` が生まれたようですが、やっている事は変わらないので、これもガイドライン違反なのでしょう。
37
37
 
38
38
  私はこの手法の問題は、`text-indent` でテキストを画面領域外に飛ばす事で、「背景画像を前景であるかのように扱っている事」にあると考えています。
39
- 機械的に判断すれば、**必要なはずのコンテンツ(テキスト)を領域外に飛ばし、無くても良いはずの背景画像を残す行為**は明らかにおかしいのでスパム違反と判定されるのは自然だと思います。
39
+ 機械的に判断すれば、**必要なはずのコンテンツ(テキスト)を領域外に飛ばし、無くても良いはずの背景画像を残す行為は明らかにおかしい**のでスパム違反と判定されるのは自然だと思います。
40
40
 
41
41
  Re: landy77 さん

2

markdown修正

2017/07/19 13:12

投稿

think49
think49

スコア18194

answer CHANGED
@@ -35,7 +35,7 @@
35
35
  一昔前に流行った記憶がありますが、私もこの手法はよろしくないと読んだ覚えがあります。
36
36
  対策として、`text-indent: 100%;` が生まれたようですが、やっている事は変わらないので、これもガイドライン違反なのでしょう。
37
37
 
38
- 私はこの手法の問題は、`text-indent` でテキストを画面領域外に飛ばす事で、**背景画像を前景であるかのように扱っている事**にあると考えています。
38
+ 私はこの手法の問題は、`text-indent` でテキストを画面領域外に飛ばす事で、背景画像を前景であるかのように扱っている事にあると考えています。
39
- 機械的に判断すれば、これは明らかにおかしいのでスパム違反と判定されるのは自然だと思います。
39
+ 機械的に判断すれば、**必要なずのコンテンツ(テキスト)を領域外に飛ばし、無くても良いはずの背景画像を残す行為**は明らかにおかしいのでスパム違反と判定されるのは自然だと思います。
40
40
 
41
41
  Re: landy77 さん

1

markdown修正

2017/07/19 13:11

投稿

think49
think49

スコア18194

answer CHANGED
@@ -7,7 +7,7 @@
7
7
 
8
8
  下記は[画像 - Search Console ヘルプ](https://support.google.com/webmasters/answer/114016)からの引用です。
9
9
 
10
- > ### 重要なテキストを画像に埋め込まない
10
+ > #### 重要なテキストを画像に埋め込まない
11
11
  > 重要なテキストを、リンク ページの見出しやメニュー項目などの要素の画像に埋め込まないでください。ユーザーによっては、その要素にアクセスできないことがあるからです。重要なテキスト ベースのコンテンツにすべてのユーザーが確実にアクセスできるようにするには、通常の HTML 内に記述してください。
12
12
 
13
13
  というわけで、重要なコンテンツを画像化する事は推奨されていないようです。