(土)サイト作成で画像に文字を重ねる場合にそれぞれの位置取りが難しい。加えてレスポンシブでデバイスの画面幅によってデザインが伸縮されると画像と文字のバランスが崩れ易い。二つの悩みを同時に解決するために最も相応しい方法はグリッドデザイン:displayのgridで、画像と文字のスペースを合わせて表示できるから正確だ。目次グリッドデザインで画像に文字を重ねるソースコード画像の中央に文字を重ねる画像の右上に文字を重ねる画像の左上寄りに文字を重ねる文字の位置取りを余白で調節する区分けしたレイアウトで画像に重なる文字を整序させる画像の中央の下のスペースの中央に文字を重ねる文字を整序して位置取りを余白で調節する文字の幅を確保しながら画像に重ねるグリッドデザインで画像に文字を重ねるソースコード画像に文字を配置するスペースの割合を計算する計算されたスペースの中に文字を実際に配置するCSSのdisplayのgridはコンテンツを縦横に配置して個々に調節できるし、それぞれを重ねるのも配置するスペースを同じに指定すれば良いだけだから簡単なんだ。サンプルに一枚の画像を使ってスペースに文字を重ねて表示するグリッドデザインのソースコードを色々な仕方で考えてみたい。{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」で記述しても大丈夫だ。3」とも書き換えられる。{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」で九分割された右上のスペースに重ね合わせて指定されている。同じような仕方で画像を分割したスペースに対して文字の位置取りを指定すればどこにでも重ねて表示できる。{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」で重ね合わせて配置している。画像を多く/細かく分割した場合、文字のスペースが一列分では入り切らず、改行されるかも知れないので、注意しなくてはならない。{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」を付けて各一文字分を引き離している。※値は「8px」や「1em」などの大きさを入力する。CSSで上下左右の外側の余白をmarginで文字に付け加えると画像と重ね合わせたスペースを維持したまま、位置取りを調節できる。文字の位置取りを余白で調節する際には「box-sizing:border-box」も併せて指定しておくと枠線:borderと内側の余白:paddingが外側の余白に影響しなくなるからデザインを纏め易い。区分けしたレイアウトで画像に重なる文字を整序させるグリッドデザインは親ボックスにdisplayのgridをかけて子コンテンツのアイテムを行と列でどこにでも重ね合わせて配置できるけれどもアイテムの位置取りをスペースの中で整序させるにはレイアウトを区分けしなくてはならない。いい換えるとグリッドデザインのレイアウトを区分けしてスペースを確定すればアイテムを個別に扱って位置取りを細かく指定することができる。{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」と三つずつ載せている。単位は通常の「px」や「em」や「%」などを使えるけど、gridで独特なのが「fr」で、全体の分数(fraction)を意味するけど、列や行で複数のスペースが互いに比率で指定し合える。「1fr」と「1fr」と「1fr」のように同じならば三つのスペースが同じ大きさで、「1fr」と「2fr」だと二つ目が二倍(一つ目が半分)の大きさで取られる。レスポンシブでは画面幅に影響されないからとても役立つ。通常の「%」を使っても大丈夫だけれども「fr」は親ボックスに対する割合ではないところが違う。複数のスペースの大きさを互いに直感的に扱えるのがグリッドデザインには向いていると思う。区分けするスペースが同じならば値はrepeatで記述を短縮することもできる。1fr)」に置き換えられる。repeatに半角括弧で、相等しく繰り返して表示するスペースの数を入れて半角コンマで区切ってそれぞれに共通する大きさを入れる。repeatは単独の値として使っても構わない。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」(伸縮)がデフォルトになっていてアイテムのサイズがスペースの大きさまで広がるからもっと小さく纏めたい場合には注意しなくてはならない。{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が影響しなくなるからデザインを纏め易い。サンプルはスマホで閲覧すると文字のスペースが狭いために改行されて画面幅が広くてスペースが十分に取れるタブレットやパソコンと比べてデザインが変わってしまっている。グリッドデザインでレイアウトを区分けするとスペースの大きさにアイテムの余白が含まれるので、文字の余白を増やし過ぎると溢れ出すように画像に重ねるスペースに入り切らなくて改行されるしかないから注意しなくてはならない。{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」を指定すると文字に合わせてスペースを自動的に広げられもする。レイアウトに想定されるスペースよりも文字自体のアイテムの大きさが優先されるので、画像に重ねる文字のスペースが文字よりも狭くならず、改行されずに表示されるようになる。レスポンシブだと画像に文字を重ねても画面幅によってデザインが伸縮して崩れ易いけど、しかしグリッドデザインを使って画像と文字の比率を踏まえながらそれぞれのスペースを合わせて配置するとバランスを保てる可能性は高い。始まらなかったり、途中で止まったりもしていたPlayストアでのAndroidアプリのダウンロードは安定して来ていると思うし、喜ばしいかぎりの昨今だけれども速度自体はいつも同じではないから何だろうと訝られる。続きを読むスノーボードのジャンプ中のグラブには幾つもの種類があるスノーボードでジャンプして板を掴む動作をグラブ、またはグラブトリック(掴み技)としてエアー(空中)に組み込まれる。幾つもの種類があって空中での姿勢を安定させたり、ハーフパイプやスロープスタイルやビッグエアーなどの演技を競う試合では得点を左右する要因にもなっている。自分でアップロードした画像については画像URL/直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。使うのは初めてではなかったものの本格的には未経験だったので、どうなるかと不安が心に過った。使っている間に慣れて来て特に支障はないと感じた。使い易くて良いと思った。続きを読むJavaScriptの繰り返しボタン:押した回数を数えて実行結果を元に戻すプログラムサイトのボタンはHTMLのinputやbuttonとJavaScriptのonclickを組み合わせて実装できる。後者のプログラムが前者を押して発動するようになる。動物の取り分け哺乳類として極めて特徴的な風体を示している。2015プロフィール結城永人Japan二十代前半から作家活動を天職に励んで来ました。当初は小説家を志望していましたが、しかし十数年を経て作詩する機会も増すほどに詩人こそ素性だと考えるに至りました。以降、個人的に永遠を歌う生き方として自分の中で最も重要な位置を占めています。