フロントエンド案件修行 256times Media編に参加しました。
フロントページから詳細ページへ移動することができる、Webサイトを初めて作り、とても楽しかったです。
こちらが４日目に作成した、256times Mediaのサイトです。
工夫したところ
- SP版では、ハンバーガーメニューを設置しました。
- PC版では、ヘッダーに検索窓を設置しました。
- 日付が何日前と表記されるようにしました。
- PC版では、2カラムにし、人気記事と広告を配置しました。
- ヒーローエリアトップにも、広告を配置しました。
- WordPressのように、人気記事のアイキャッチをクリックすると、記事詳細ページに飛ぶように作りました。
- 記事詳細ページのJavaScriptは、そのページ内の
<script>タグに記載しないと、動きませんでした。 - 記事詳細ページのヘッダーのアイコンをクリックすると、トップページに戻る仕様にしました。
- 画像を綺麗に配置するために、
css: object-fit:cover;を使いましたが、自分のイメージのようにはなりませんでした。
WordPressのようなサイトを作る事が出来て、楽しかったです。