前回、作成してきたアプリを一つにまとめるホームページを作成しました！！
elsammit-beginnerblg.hatenablog.com
 | 1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座 新品価格 |
ちょっと1ページだと寂しいな😅と思ったので、ちょっとページ遷移とかも加えてみました。
結果はこんな感じになりました。
ちょっとは動き出たかな？
最終的にはポートフォリオのようにしていきたいな？と考えています！！
ちょっと困ってしまった部分があったので一応残しておきます！！
困ったところ、、それは、、、
背景画像の上に文字を置くことです！！😅
基本的な部分ですが、思ったより躓いた🤣
では、背景画像の上に文字やボタンを置くためにはposition: absolute; を使用します。
こちらのような背景画像の上に文字やボタンを載せる場合にはhtml、cssをこちらのようにすればOKです。
【html】
render() {
return (<div>
<body className="MainBack">
<div className="Title">
<p>メインページだよ</p>
</div>
<div className="SelectButton">
<button className="SubButton">
<Link to='/MakeGame'>作成アプリ紹介ページへ</Link>
</button>
<button className="SubButton">
<Link to='/Profile'>プロフィール</Link>
</button>
</div>
</body>
</div>);
}【css】
.MainBack{
background-image: url(./image/DSC_0491.JPG);
background-repeat: no-repeat;
background-size:cover;
font-display: center;
background-position: center top;
text-align: center;
height:1000px;
}
.Title{
position: absolute;
top:-10%;
left:20%;
font-size: 150px;
color: white;
}
.SelectButton{
position: absolute;
top:35%;
left:45%;
}
.SubButton{
margin-left: 10px;
display: inline-block;
position: relative;
text-decoration: none;
color: #f9a9ae;
width: 120px;
height: 50px;
line-height: 50px;
border-radius: 5px;
text-align: center;
overflow: hidden;
font-weight: bold;
background: linear-gradient(#fed6e3 0%, #ffaaaa 100%);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}後ボタンについてはこちらのサイトを用いました。
https://saruwakakun.com/html-css/reference/buttons
ホームぺージのソースコードはgithubに上げてみました。
https://github.com/Elsammit/MyIntroduction
github pagesにも上げてみたのですが、、、うまくいかず😨
ページ遷移の部分が上手く働いていないのかな？？
実は事前に前回の1ページの時には問題なく表示出来ていたので。。
う～～ん。。。一難去ってまた一難ww。
ちょっと調べてみたいと思います！！
分かったらまたブログにアップします！！👍
