質問: ### 前提・実現したいこと konichiwaと申します。 WEB超初心者なので的を射た質問ができないかもしれませんがお許し下さい。 縦書きの雑誌風WEBサイトを作っていて二進も三進もいかなくなってしまいました。 実現したいスタイルは以下の通りです。「→」の部分は実際に適用している内容です。 * 背景に画像を配置 * 背景画像は常に左右の中心揃え、ウィンドウの幅に応じて拡大/縮小(最大1000px) ``` →ページ全体に { max-width: 1000px; margin: 0 auto; padding 0; } ``` ``` →imgタグに { max-width: 100%; height: auto; } を適用 ``` * 画像にマッピングでリンクを配置 →imgタグにhtmlの`usemap`を使用、jqueryの`rwdImageMaps`を使用 * 画像の上にテキスト ``` →背景画像を親要素にして { position: relative } を適用 ``` ``` →テキストを子要素にして { position: absolute; top: 20; left: 30; } を適用して位置を指定。 ``` * テキストは縦組み ``` →テキストに { -ms-writing-mode: tb-rl; writing-mode: vertical-rl; } を適用 ``` * テキストは極小フォント(画像とともに拡大/縮小) ``` →テキストに { font-size: 4vw; -webkit-transform:scale(0.1); -moz-transform:scale(0.1); -ms-transform:scale(0.1); -o-transform:scale(0.1); transform:scale(0.1); } を適用 ``` ### 発生している問題・エラーメッセージ テキストの縦組み、`transform:scale`での極小文字、その拡大縮小はうまくいくが、 `position: absolute`を使用した`top`,`left`の位置指定が機能しません。 Google Chromeにてプレビューし、DevToolsで確認すると、`top`,`left`ともにエラーのアイコンがついていて、Consoleに表示されるエラーメッセージ ``` The key "intial-scale" is not recognized and ignored. ``` が表示されます。 適用しているスタイル同士が競合して、`position`要素を無効化しているのでしょうか? 詳しい方のご指摘をお待ちしています。 宜しくお願いいたします! ### 該当のソースコード すみません、ここの書き方がわかりません、上記の内容でいかがでしょうか? ### 試したこと わからないなりに、CSSの記述の順番を変えてみたりしましたが効果はありませんでした。 `top`,`left`に指定している数値がおかしいのかと思って変えてみましたがそうではありませんでした。 `top: 0;` `left: 0;`に指定した時だけはテキストが画面の比較的左寄りに表示され、それ以外の数値(マイナス値を含む)の場合はそれよりも右寄りに表示され、数値に依る変化はありません。 ### 補足情報(FW/ツールのバージョンなど) macOS Sierraでbracketsを使っています。 ``` bracketsのバージョン リリース 1.11 ビルド 1.11.0-17524 ビルドのタイムスタンプ : Wed Sep 20 2017 03:34:28 GMT-0700 ```
回答: コードを見た感じ、おそらく2点問題がありそうです。 1. 背景画像のタグのdisplay要素がインラインになっている可能性 2. top,leftの指定に単位(px)がついてない 1.背景画像としているタグはdivでしょうか。 であれば問題ないです。 今後は、htmlも全部掲載するといいかと思います。 2. > > →テキストを子要素にして > > { position: absolute; > > top: 20; > > left: 30; } > > を適用して位置を指定。 > > > これは ``` top: 20px; left: 30px; ``` のように単位が必要です。