CSSで画像に文字を重ねる:グリッドデザインでアイテムのスペースを合わせて表示する 結城永人 - 2018年7月14日 (土) サイト作成で画像に文字を重ねる場合にそれぞれの位置取りが難しい。加えてレスポンシブでデバイスの画面幅によってデザインが伸縮されると画像と文字のバランスが崩れ易い。二つの悩みを同時に解決するために最も相応しい方法はグリッドデザイン:displayのgridで、画像と文字のスペースを合わせて表示できるから正確だ。 目次グリッドデザインで画像に文字を重ねるソースコード画像の中央に文字を重ねる画像の右上に文字を重ねる画像の左上寄りに文字を重ねる文字の位置取りを余白で調節する区分けしたレイアウトで画像に重なる文字を整序させる画像の中央の下のスペースの中央に文字を重ねる文字を整序して位置取りを余白で調節する文字の幅を確保しながら画像に重ねる グリッドデザインで画像に文字を重ねるソースコード 画像に文字を配置するスペースの割合を計算する計算されたスペースの中に文字を実際に配置する CSSのdisplayのgridはコンテンツを縦横に配置して個々に調節できるし、それぞれを重ねるのも配置するスペースを同じに指定すれば良いだけだから簡単なんだ。 サンプルに一枚の画像を使ってスペースに文字を重ねて表示するグリッドデザインのソースコードを色々な仕方で考えてみたい。 画像の中央に文字を重ねる 重なる文字 HTML <div class="grid-pile"> <img src="画像URL"> <span>重なる文字</span> </div> CSS .grid-pile {display:grid;} .grid-pile img {border:1px #000000 solid;box-sizing:border-box;grid-column:1/4;grid-row:1/4;} .grid-pile span {font-size:large;padding:0.5em;color:#483d8b;background-color:#7fffd4;box-sizing:border-box;grid-column:2/3;grid-row:2/3;} displayのgridはそれだけだとコンテンツは別々のスペースに表示される。コンテンツを重ねるには配置するスペースを全体的か部分的に揃えなくてはならない。 サンプルは画像のimgと文字のpのそれぞれに列の「grid-column」と行の「grid-row」を指定している。画像の真ん中に文字を重ねる場合には少なくとも九つに分割して(上下左右から均等に配置するために)考える。前者は「1/4」と「1/4」で列と行の全てのスペースに、後者は「2/3」と「2/3」で真ん中の列と真ん中の行のスペースに表示している。 grid-columnとgrid-rowはgridの開始線と終了線でコンテンツのスペースを区分けするけれども一つ隣ならば終了線は省略できるから文字の方は「2」と「2」で記述しても大丈夫だ。 または開始線から等間隔で続く場合には列も行も終了線はspanで数えても構わないので、画像の方は「1/span 3」と「1/span 3」とも書き換えられる。 画像の右上に文字を重ねる 重なる文字 HTML <div class="grid-pile"> <img src="画像URL"> <span>重なる文字</span> </div> CSS .grid-pile {display:grid;} .grid-pile img {border:1px #000000 solid;box-sizing:border-box;grid-column:1/4;grid-row:1/4;} .grid-pile span {font-size:large;padding:0.5em;color:#483d8b;background-color:#7fffd4;box-sizing:border-box;grid-column:3/4;grid-row:2/3;} 文字の位置取りが「3/4」と「2/3」で画像の「1/4」と「1/4」で九分割された右上のスペースに重ね合わせて指定されている。 同じような仕方で画像を分割したスペースに対して文字の位置取りを指定すればどこにでも重ねて表示できる。 画像の左上寄りに文字を重ねる 重なる文字 HTML <div class="grid-pile"> <img src="画像URL"> <span>重なる文字</span> </div> CSS .grid-pile {display:grid;} .grid-pile img {border:1px #000000 solid;box-sizing:border-box;grid-column:1/7;grid-row:1/7;} .grid-pile span {font-size:large;padding:0.5em;color:#483d8b;background-color:#7fffd4;box-sizing:border-box;grid-column:2/4;grid-row:2/3;} 画像を「1/7」と「1/7」で三十六分割したスペースの二列目から四列目までと三行目に文字を「2/4」と「2/3」で重ね合わせて配置している。 画像を多く/細かく分割した場合、文字のスペースが一列分では入り切らず、改行されるかも知れないので、注意しなくてはならない。 文字の位置取りを余白で調節する 重なる文字 HTML <div class="grid-pile"> <img src="画像URL"> <span>重なる文字</span> </div> CSS .grid-pile {display:grid;} .grid-pile img {border:1px #000000 solid;box-sizing:border-box;grid-column:1/4;grid-row:1/4;} .grid-pile span {font-size:large;padding:0.5em;color:#483d8b;background-color:#7fffd4;box-sizing:border-box;grid-column:3/4;grid-row:1/2;margin-top:1em;margin-right:1em;} 画像に重ねる文字を少し動かして位置取りを調節するには文字に余白を付ける。 サンプルでは画像の右上に配置した文字に「margin-top」で上の外側の余白に、「margin-right」で右の外側の余白に「1em」を付けて各一文字分を引き離している。 margin 上下左右の外側の余白 margin:上下左右(値一つ) margin:上下 左右(値二つ) margin:上 左右 下(値三つ) margin:上 下 左 右(値四つ) margin-top 上の外側の余白 margin-bottle 下の外側の余白 margin-left 左の外側の余白 margin-right 右の外面の余白 ※値は「8px」や「1em」などの大きさを入力する。 CSSで上下左右の外側の余白をmarginで文字に付け加えると画像と重ね合わせたスペースを維持したまま、位置取りを調節できる。 文字の位置取りを余白で調節する際には「box-sizing:border-box」も併せて指定しておくと枠線:borderと内側の余白:paddingが外側の余白に影響しなくなるからデザインを纏め易い。 区分けしたレイアウトで画像に重なる文字を整序させる グリッドデザインは親ボックスにdisplayのgridをかけて子コンテンツのアイテムを行と列でどこにでも重ね合わせて配置できるけれどもアイテムの位置取りをスペースの中で整序させるにはレイアウトを区分けしなくてはならない。 いい換えるとグリッドデザインのレイアウトを区分けしてスペースを確定すればアイテムを個別に扱って位置取りを細かく指定することができる。 画像の中央の下のスペースの中央に文字を重ねる 重なる文字 HTML <div class="grid-pile"> <img src="画像URL"> <span>重なる文字</span> </div> CSS .grid-pile {display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;justify-items:center;align-items:center;} .grid-pile img {border:1px #000000 solid;box-sizing:border-box;grid-column:1/4;grid-row:1/4;} .grid-pile span {font-size:large;padding:0.5em;color:#483d8b;background-color:#7fffd4;box-sizing:border-box;grid-column:2/3;grid-row:3/4;} レイアウトの区分けは列の「grid-template-columns」や行の「grid-template-rows」で行う。値は必要なスペースの数だけ半角スペースで区切って入力する。サンプルは列と行で三つずつに区分けするために値を「1fr 1fr 1fr」と三つずつ載せている。単位は通常の「px」や「em」や「%」などを使えるけど、gridで独特なのが「fr」で、全体の分数(fraction)を意味するけど、列や行で複数のスペースが互いに比率で指定し合える。例えば「1fr」と「1fr」と「1fr」のように同じならば三つのスペースが同じ大きさで、「1fr」と「2fr」だと二つ目が二倍(一つ目が半分)の大きさで取られる。レスポンシブでは画面幅に影響されないからとても役立つ。通常の「%」を使っても大丈夫だけれども「fr」は親ボックスに対する割合ではないところが違う。複数のスペースの大きさを互いに直感的に扱えるのがグリッドデザインには向いていると思う。 そして区分けするスペースが同じならば値はrepeatで記述を短縮することもできる。サンプルの「1fr 1fr 1fr」 は「repeat(3, 1fr)」に置き換えられる。repeatに半角括弧で、相等しく繰り返して表示するスペースの数を入れて半角コンマで区切ってそれぞれに共通する大きさを入れる。 repeatは単独の値として使っても構わない。例えば「1fr 2fr 2fr」だと「1fr repeat(2, 2fr)」に置き換えられる。グリッドデザインでレイアウトにスペースを同じ大きさで数多く区分けする場合には特に便利な記法だ。 displayのgridに加えてgrid-template-columnsやgrid-template-rowsでレイアウトを区分けするとスペースの中でアイテムを個別に整序されられる。 アイテムの横の整序の要素 justify-self 主な値 center:中寄せ left:左寄せ right:右寄せ アイテムの縦の整序の要素 align-self 主な値 center:中寄せ flex-start:上寄せ flex-end:下寄せ レイアウト自体を整序させるならば「justify-content」(縦方向)と「align-content」(横方向)、複数のアイテムを纏めて整序させるならば「justify-items」(縦方向)と「align-items」(横方向)をdisplayのgridが記載された親ボックスのCSSに主な値の「center」や「left」や「right」や「flex-start」や「flex-end」などを使って追加する。 何も指定しないと整序する値は列も行も「stretch」(伸縮)がデフォルトになっていてアイテムのサイズがスペースの大きさまで広がるからもっと小さく纏めたい場合には注意しなくてはならない。 文字を整序して位置取りを余白で調節する 重なる文字 HTML <div class="grid-pile"> <img src="画像URL"> <span>重なる文字</span> </div> CSS .grid-pile {display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;justify-items:center;align-items:center;} .grid-pile img {border:1px #000000 solid:box-sizing:border-box;grid-column:1/4;grid-row:1/4;} .grid-pile span {font-size:large;padding:0.5em;color:#483d8b;background-color:#7fffd4;box-sizing:border-box;grid-column:1/2;grid-row:2/3;margin-left:3em;} 画像に重ねる文字を整序させる位置を基点にしてアイテムの位置取りを余白でさらに細かく調節することもできる。 文字の位置取りを余白で調節する際には「box-sizing:border-box」も併せて指定しておくと枠線:borderと内側の余白:paddingが影響しなくなるからデザインを纏め易い。 サンプルはスマホで閲覧すると文字のスペースが狭いために改行されて画面幅が広くてスペースが十分に取れるタブレットやパソコンと比べてデザインが変わってしまっている。 グリッドデザインでレイアウトを区分けするとスペースの大きさにアイテムの余白が含まれるので、文字の余白を増やし過ぎると溢れ出すように画像に重ねるスペースに入り切らなくて改行されるしかないから注意しなくてはならない。 文字の幅を確保しながら画像に重ねる 重なる文字 HTML <div class="grid-pile"> <img src="画像URL"> <span>重なる文字</span> </div> CSS .grid-pile {display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;justify-items:center;align-items:center;} .grid-pile img {border:1px #000000 solid:box-sizing:border-box;grid-column:1/4;grid-row:1/4;} .grid-pile span {font-size:large;padding:0.5em;color:#483d8b;background-color:#7fffd4;box-sizing:border-box;width:max-content;grid-column:1/2;grid-row:2/3;margin-left:3em;} 画像に重ねる文字のスペースが狭いと文字が入り切らずに改行されてデザインが変わってしまう。避けるためにはレイアウトを区分けしない場合と同様に文字のスペースを十分に大きく取れば(または文字を適切に小さくしても)大丈夫だけど、さらにスペースの文字に「width:max-content」を指定すると文字に合わせてスペースを自動的に広げられもする。 レイアウトに想定されるスペースよりも文字自体のアイテムの大きさが優先されるので、画像に重ねる文字のスペースが文字よりも狭くならず、改行されずに表示されるようになる。 レスポンシブだと画像に文字を重ねても画面幅によってデザインが伸縮して崩れ易いけど、しかしグリッドデザインを使って画像と文字の比率を踏まえながらそれぞれのスペースを合わせて配置するとバランスを保てる可能性は高い。 コメント 新しい投稿 前の投稿
細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス サックス奏者の 細川慎二 のYouTubeチャンネルの Sax in the Night City で出ているサックスのストリートライヴの動画が美しい音色と相俟った街角の雰囲気の良さで心底と泣けて来るほどの感動を催させる。 細川慎二のアルトサックスの美しい音色が響き渡る街角の...
宜保愛子は本物の霊能力者だと考えられる三つの真実 昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...
アドセンスのGDPRに日本でも対応しなくてはならない場合がある アドセンスの個人情報のCookieなどの使用に関してサイトの訪問者に同意を得なくてはならない法律としてEU(European Union/欧州連合)の GDPR (General Data Protection Regulation/EU一般データ保護規則)がある。外国の個人情報...
平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない 日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...
伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...
日本人がジャニーズ事務所で行われた性加害よりも恐れていること イギリスの公共放送のBBC(British Broadcasting Corporation/英国放送協会)が日本のジャニーズ事務所の創業者の ジャニー喜多川 の性加害について取り上げたドキュメンタリーの J-POPの捕食者:秘められたスキャンダル に衝撃を受けた。 目次 ジ...
沖雅也の涅槃への自殺と双極性障害 かつて俳優の 沖雅也 の自殺が伝えられたとき、遺書の言葉とされた「おやじ、涅槃でまっている」と共に何なのかと疑問を感じたのを良く覚えている。聞き慣れない「涅槃」という言葉が入っても何十年も過ぎた今振り返っても自殺者の遺書として本当に珍しい表現だったと改めて驚く。 沖雅也が書い...
玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ 玉置浩二 のYouTubeの公式チャンネルで、最も気に入りの メロディー のライブ版が追加されていた。曲自体をちゃんと聴いたのは約二十五年振りかも知れないけど、しかし初めての内容から以前にも況して大変な感動を覚えることになった。 玉置浩二 『メロディー』Live at Tok...
Imgurで画像URLと埋め込みコードを取得する方法 Imgur は自分でアップロードした画像については画像URL/直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。 そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。 目次 Img...
アドセンスの個人のアメリカの税務情報/W-8BEN納税フォームの書き方 アドセンスに利用者の税務情報が必要となり、2021年6月1日以降、YouTubeのサイト広告などで収益を得る場合には税務情報を提出しないとアドセンスの支払いからアメリカの源泉所得税が米国内国歳入法の第三章により、控除される。 Google は、YouTube パートナー プロ...
コメント