社会人2年間の集大成！占いサイトを作成した話⑤のつづきとなります！
ついにこれがラストです！！
特集画面の紹介
機能の紹介
特集１
自分で考えるのはなかなか大変だったため、この文章は占いサイトからお借りしました。。
特集２
おやつ占いというのを他のサイトで見つけたので採用し、おやつの内容は自分で考えました。シンプルになりすぎないよう、各星座のところにイラストを追加してみました！
特集３
この開運術は自分で考えてみました！このページに関してもシンプルにならないよう各題名のところにイラストを追加しています。このイラストはFontAwesomeのものを使用しています。
特集ページは統一感が出るよう同じCSSを使用しています！
実装方法の紹介
特集画面のコンテンツ部分のHTML
<section class="contents">
<ul>
<li>
<div class="exp">
<a href="contents3.html">
<img src="../../images/animal_usagi.png">
<span class="title">【2021年の運勢】生まれ年でわかる「最強の総合運」TOP3大公開!</span>
</a>
</div>
</li>
<li>
<div class="exp">
<a href="contents2.html">
<img src="../../images/food_sweets.png">
<span class="title">星座別！2021年のラッキーおやつ占い</span>
</a>
</div>
</li>
<li>
<div class="exp">
<a href="contents1.html">
<img src="../../images/oosouji_mado.png">
<span class="title">2021年の運勢をあげる「簡単開運術」4選</span>
</a>
</div>
</li>
</ul>
</section>
画像と文字を押下した際にページ遷移するようにaタグでimageタグとspanタグを囲っています。
使用したCSS
// 各特集ページの題名の下線をドットにする設定
.contents-title {
border-bottom: 3px dotted rgba(220,220,220,.5);
}
.contents {
text-align: left;
}
// 各特集ページの見出しの余白、位置、下線の設定
h2 {
padding: 30px 30px 10px;
text-align: left;
border-bottom: 1px solid black;
}
// リスト項目の先頭に設定される「・」の削除
ul {
list-style: none;
}
// 特集ページの見出しの下線の設定
.exp {
border-bottom: 1px solid#e5e5e5;
}
// 特集ページの見出しの画像の余白、大きさの設定
.exp img {
padding: 15px 10px 10px;
width: 170px;
height: 150px;
}
// 特集ページの見出しの文字の色、大きさ、余白、位置の設定
.title {
color: black;
font-size: larger;
margin-top: 60px;
position: absolute;
}
まとめ
特集サイトを作ろうと決めてはいましたが、自分で特集内容を考えるとなるとなかなか苦労しました。。今回は色々なサイトを参考にし、特集を作成していき無事完成しました！！
また、全体を通して色々な占いを考え想像以上にサイトを完成するのには苦労しました。作っていく中で自分の思い通りにサイトを作りたいという気持ちと妥協したい気持ちが揺れ動きどちらを優先するかというのを味わえたのは個人開発だからこそだと思いました。今後もwebサイトやアプリを作っていきたいと思います
↧