40代目前の男がフリーランスを目指すブログ

40代目前の男がフリーランスを目指す為の日記です。

Webサイトの写経練習4日目

8月21日(水)の日記です。

今日は雑誌内の写真付きページを1ページスキャンし、それをなるべく忠実にトレースという試みを行ないました。

やり方としては、

  1. スキャンした画像をWebページの横幅に収まる程度のサイズに変更する。
  2. CSSのbackground-image等のやり方でスキャン画像をブラウザ上に表示する。
  3. このままでは、これから作成するブロック等が画像と一体化して見づらくなるので、スキャン画像を薄くする。
  4. スキャン画像の通りにWidthを決め、模写していく。

ですね。
しかし、意外と難しかったのがスキャン画像の固定と、画像を半透明にする事でした。

画像の固定は「position: fixed」でブラウザ上部に固定し、左右のmarginをautoにする事で中央に設定する事が出来たのですが、画像の半透明処理については単純にCSSのopacityを適用するだけではなりませんでした。

なので最終的には新たにブロックを設け、そのbackground-colorを半透明の白に設定する事で解決しました。画像の上に半透明のトレーシングペーパーを敷く感じですね。

ようやく作業に移れたのですが、結論を言うと、やはり完全な模写は非常に難しかったです。ブロックの並びを均等にする為にwidthを%で管理しようとすると、どうやっても写真の位置が模写画像と異なってしまったりと...。

最終的にはある程度の妥協で終わらせましたが、画像を半透明にして模写するやり方もあるのだなという事を知る事が出来ました。