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

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

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

8月20日(火)の日記です。

今回の写経材料ですが、巷では非常に有名なサイトで知られる、俳優 阿部寛さんのホームページにしました。

実は知り合いから提案を受けるまで、阿部寛さんのページの事は知りませんでした。
結婚できない男」というドラマは本当に面白かったですね。再放送も見ました。「ドラゴン桜」のドラマの演技も中々のものだったので、自分としては阿部寛さんは好きな男性俳優です。

しかし、有名人のホームページとなると全く関心が無かったというか、恐らく初めてまともに閲覧したのは阿部寛さんのホームページかもしれません。「どんだけ有名人のWebサイトに無関心なんだよ(汗)」とツッコまれそうですね...。

さて、彼のホームページと言えば「最速でページ全体が表示される」事で有名らしく、インターネットが普及し始めた当初のレトロな構成が特徴との事です。自分も最初見た時はとても懐かしさを感じました。今でもこの様なシンプルな雰囲気を残したサイトがあるんだなぁと。

なので、構造がシンプルなので写経もそれ程難しくないだろうと思っていたのですが、それは間違いでした。

  1. レイアウトが妙に癖があり、中々再現が難しい。
  2. 「frame」の存在と、この機能を使わずに同じ機能を持たせるのが困難。

この2点に非常に苦しめられました(笑)。

「frame」という懐かしい機能を未だに実装していた事に驚きですが、いざframeを使わずに同様の機能を付けて右側のメインエリアのレイアウトも調整しようとすると、全然上手くいきません。
これは完全に自分の経験不足なんですが、CSSでの「position: fixed;」を導入しつつ思い通りのレイアウトにしようとする場合、慣れないと本当に難しい事が分かりました。

とはいえ、何とか形にする事が出来たので画像をUPしておきます。また、レスポンシブにも挑戦してみました。個人的には達成感もあり、満足です。

【PC版】

f:id:eewano:20190821072718p:plain

スマホ版】

f:id:eewano:20190821072745p:plain​_

f:id:eewano:20190821072759p:plain