デザイン鍛錬21②
前回の投稿で、デザインをした自分のポートフォリオサイトですが、
htmlとCSSで簡単に実装してみました。
GitHubで実装しようかと思いましたが、思いのほか初期設定がめんどうだったので、Google App Scriptで実装しました。
※閲覧するには、Google アカウントにログインが必要です。
元々のデザイン案は、こんな感じです。
最初の写真と、下部「その他の作品」のsectionは若干デザインを変更しました。
＊
コードはこんな感じです。
html
<!DOCTYPE html>
<html lang="ja">
<head>
<base target="_top">
<!-- CSSの強制読み込み-->
<?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
</head>
<body>
<section id="header">
<h1>Hitomi.I</h1>
<nav>
<ul>
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</section><!-- #header -->
<section id="contents">
<div id="motto">
<h2>置かれた場所で咲く。</h2>
<ul class="headling">
<li class="left">”どのような状況に置かれても、まずはやってみる。”その思いで、様々なことに挑戦してきました。そしてたまに休みながら、でも継続的に学ぶ姿勢を貫いてきました。このポートフォリオサイトは、私が継続的に学んできた証です。</li>
<li class="right"><img src="https://cocoda-production.s3.amazonaws.com/uploads/user/thumbnail_url/11648/thumbnail_url.png"></li>
</ul>
</div>
<div id="app">
<h2>様々なお題に即した、アプリのデザイン</h2>
<ul class="headling">
<li class="left">Daily Cocodaのサービスを利用して、50回分をデザインしました。初めの方は、ただ現在あるサービスをトレースするだけで精一杯でしたが、回を重ねるうちに、「もっとこうした方がユーザーにとってわかりやすい」と考えるようになり、デザイン案に起こすようになりました。そう思えたのは、初めの方に挑戦したデザインをもう1度考え直す機会があったこの回でした。</li>
<li class="right"><img src="https://cocoda-production.s3.amazonaws.com/uploads/daily_product/thumbnail/31683/1599898776-thumbnail.png"></li>
</ul>
</div>
<div id="offer">
<h2>自分のデザインを身近で提案</h2>
<ul class="headling">
<li class="left">私が足繁く通う行きつけのお店では、毎週異なるカレーランチを展開しています。はじめExcelで作成したというデザインは、私個人的にもう少し改善点があるだろうと考え、オーナーさんに提案し、作らせてもらいました。オーナーさんに気に入っていただき、今では店内に飾ってあるだけでなく、お店の近所のチラシとして配布されています。</li>
<li class="right"><img src="https://cocoda-production.s3.amazonaws.com/uploads/original_product/thumbnail/32839/1601987288-thumbnail.jpeg"></li>
</ul>
</div>
<div id="work">
<h2>会社でLPデザインを担当</h2>
<ul class="headling">
<li class="left">会社では、入社してまだ数年であるものの、期待の意味も込め特集ページのデザインを担当しています。会社名が出てしまうと個人情報になってしまうのでここでは割愛しますが、現時点で特集ページがWebにUPされており、お客様の商品購入・会社への売上に貢献しています。</li>
</ul>
</div>
<div id="others">
<h2>
<a href="https://cocoda-design.com/ichito0123">その他の作品を見る</a>
</h2>
</div>
</section><!-- #contents -->
<section id="footer">Copyright(c) Hitomi</section>
</body>
</html>CSS
※Google App Scriptでは投稿時点で、CSSをhtmlファイルとして直書きしないと反映されないようでしたので、このようなコードになっています。
<style>
body {
margin: 0;
padding: 0;
}
#header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 30px;
background-color: #D6D3D3;
}
nav {
display: inline-block;
margin: 0;
padding: 20px 0;
}
nav ul {
list-style: none;
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
nav li {
margin-left: 10px;
display: inline-block;
}
#contents div {
padding: 70px;
margin: auto;
}
#motto {
background-color: #fff;
}
#app {
background-color: #707070;
color: #fff;
}
#offer {
background-color: #D6D3D3;
}
#work {
background-color: #707070;
color: #fff;
}
#others {
background-color: #fff;
}
h2 {
margin: 0;
padding: 25px 0;
font-family: serif;
font-size: 30px;
}
.headling {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
justify-content: space-between;
}
.headling .left {
display: inline-block;
width:55%;
font-family: serif;
font-size: 15px;
}
.headling .right {
display: inline-block;
width: 39%;
padding: 0 18px;
text-align: right;
}
#motto .headling .right img{
width: 75%;
}
#offer .headling .right img{
width: 75%;
}
.headling .right img {
width: 100%;
}
#others a {
text-decoration: none;
display: block;
color: #000;
width: 45%;
background-color: #D6D3D3;
text-align: center;
border-radius: 10px;
margin: auto;
}
#footer {
text-align: center;
padding: 20px 0;
}
</style>参考記事
GitHubをスラスラ使えるようになりたい。
いいなと思ったら応援しよう！
