本日のプログラミング学習
HTML & CSS / 2hour
Aug / 55.5hour
Total / 80.5hour
LP模写にトライするも、ゼロイチで作成することがあまり出来なかったため、基礎固め。
インプットばっかりしてもダメ、ということはわかっているものの基礎がないと歯が立たないと実感し練習。
参考テキスト
スコットランドケラムメソッドとは？
画像置換
通常、HTMLはテキスト主体でマークアップしていくが、画像を用いる方がユーザーが直感的に分かる場合もある。
そうした時に「画像置換」を用いることで、ソースコードは文章だがブラウザ上だと画像に置き換える、ということが可能。
スコットランドケラムメソッドは、下記の三つのCSSプロパティを用いてそれを実現する方法を指す。
⒈ text-intend: 100%;
⒉ white-space: no-wrap;
3. overflow: hidden;
- text-intend = 文章の1行目の幅をどのぐらいにするのか、を指定するプロパティ。100%にするとその要素幅いっぱいまでインテンドされる。
- white-space = その要素内における改行表示をどうするのか、を指定するプロパティ。no-wrapにすると要素内でも改行することなくテキストが表示される
- overflow = ボックス要素の範囲内にその内容が収まらない場合に、どう表示するのかを指定するプロパティ。hiddenとすることで、要素から溢れたコンテンツは隠してね、と指定する。
順番を追って見ていこう。
０. 初期コードと表示
あたり前だが、画像の上にテキストがある状態。
１. text-intend: 100%;
要素幅いっぱいまでテキストが表示されて・・・
２. white-space: no-wrap;
要素内で改行をなしに制限して・・・
３. overflow: hidden;
要素外にはみ出しているテキストをhiddenで隠せば、テキストが画像に置き換わりました。
グーグルでは隠しテキストはSEO上推奨はされていないが、ユーザーのとって役立つ・UI/UX的に問題がなければそこまで影響はなさそう。あまりに多用するのは問題だけど、サイトをリッチに表示する上でもおぼえておきたいテクニックでした。