IT技術にまつわる実験ノート

「長編を書くより、短編を数多く完成させてください。それが上達への近道です」 by 手塚治虫

画像の上に文字をのせてみる

はじめに

ここでは、以下の記事を参考にして画像に文字をのせてみることにする。

 

作ってみる

まずはコンテナとなる要素を作成して、その中に画像と文字を入れる。HTML の操作はこれで終了。

f:id:matt-note:20190311155105p:plain

 

position プロパティを指定する。親要素には relative を指定して、画像の上に乗せる文字には absolute を指定する。

f:id:matt-note:20190311155834p:plain

f:id:matt-note:20190311160129p:plain

-> これで最低限のデザインを作成することができた。

 

文字にデザインを追加してみる。

f:id:matt-note:20190311162044p:plain

f:id:matt-note:20190311162101p:plain

-> lett: 50% を指定しているが、ズレてしまった。

 

transform: translate(-50%,-50%); を使って、文字を中央揃えにする。

f:id:matt-note:20190311162555p:plain

f:id:matt-note:20190311162624p:plain

-> 文字を中央揃えにすることができた。

 

文字を画像の左上に配置して、カテゴリーを表現してみる。top: 0; left:0; margin:0; を指定しておく。

f:id:matt-note:20190311163154p:plain

f:id:matt-note:20190311163228p:plain

-> 文字を左上に配置することができた。