tag:crieit.net,2005:https://crieit.net/users/KyotoT/feed
manabu arataniの投稿 - Crieit
Crieitでユーザーmanabu arataniによる最近の投稿
2020-10-25T10:58:23+09:00
https://crieit.net/users/KyotoT/feed
tag:crieit.net,2005:PublicArticle/16171
2020-10-25T10:42:27+09:00
2020-10-25T10:58:23+09:00
https://crieit.net/posts/feature
ポートフォリオのテンプレートのfeature部分
<h1 id="テキストが下に表示されてしまう"><a href="#%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%8C%E4%B8%8B%E3%81%AB%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%A6%E3%81%97%E3%81%BE%E3%81%86">テキストが下に表示されてしまう</a></h1>
<p><a href="https://crieit.now.sh/upload_images/c6e8bbfab42a5ea14894897287ae96bf5f94dae11802f.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/c6e8bbfab42a5ea14894897287ae96bf5f94dae11802f.png?mw=700" alt="image" /></a></p>
<h1 id="index.html"><a href="#index.html">index.html</a></h1>
<pre><code class="html"> <!-- FEATUREセクション -->
<section id="feature-section">
<div class="inner">
<div class="section-heading">
<h2 class="heading-primary">FEATURE</h2>
</div>
<div class="section-lead">
<p>1サイトの解説</p>
</div>
<div class="feature-item">
<div class="feature-img-wrapper">
<a href="https://www.yahoo.co.jp" target="_blank">
<img src="img/feature/feature.jpg" alt="">
</a>
</div>
<div class="feature-body">
<p><span class="text-bold">サイト名:</span>
<br>サイト名が入る<br>
<a href="#" target="_blank">https://●●●.com</a>
</p>
<p><span class="text-bold">担当:</span><br>Design / Coding (Responsive) / WordPress / Writing</p>
<p><span
class="text-bold">コメント:</span><br>テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
<p>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<div class="clearfix"></div>
</div><!-- ./feature-body -->
</div><!-- ./feature-item -->
</div><!-- ./inner -->
</section>
</code></pre>
<h1 id="CSS"><a href="#CSS">CSS</a></h1>
<p>floatを使ったパターンです。</p>
<pre><code class="css">@charset "utf-8";
/* リセットCSS
----------------------------- */
html,body,h1,h2,ul,li{
margin: 0;
padding: 0;
line-height: 1;
}
img{
max-width: 100%;
height: auto;
vertical-align: bottom;
border-style: none;
}
ul,li{
list-style: none;
}
a{
text-decoration: none;
color: #1ca9e3;
}
/* body
----------------------------- */
body{
font-family: "Quicksand","Hiragino Kaku Gothic Pro","Meiryo",sans-serif;
font-size: 15px;
line-height: 1.8;
letter-spacing: .8px;
word-break: break-all;
color: #333333;
}
/* 文字
----------------------------- */
.heading-primary{
font-family: 'Josefin Sans',sans-serif;
font-size: 40px;
letter-spacing: .05em;
}
.section-heading{
text-align: center;
margin-bottom: 20px;
}
.section-lead{
margin-bottom: 30px;
text-align: center;
}
/* レイアウト
----------------------------- */
.inner{
max-width: 1380px;
margin: 0 auto;
padding: 0 40px;
}
/* header
----------------------------- */
header{
display: flex;
align-items: center;
justify-content: center;
height: 86vh;
}
.logo{
position: relative;
margin-bottom: 30px;
padding: 0 20px;
text-align: center;
}
.logo-title{
font-family: 'Nunito',sans-serif;
font-size: 76px;
letter-spacing: .1em;
}
.logo-subtitle{
font-size: 22px;
margin-top: 5px;
text-align: center;
letter-spacing: .2em;
}
/* グローバルナビ
----------------------------- */
.gnav{
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 100%;
background: #ffffff;
-webkit-box-shadow: 0 3px 3px -3px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 3px 3px -3px rgba(0, 0, 0, .2);
box-shadow: 0 3px 3px -3px rgba(0, 0, 0, .2);
}
.gnav-list{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gnav-item{
font-family: 'Josefin Sans',sans-serif;
font-size: 16px;
padding: 0 24px;
letter-spacing: .05em;
}
.gnav-link{
position: relative;
display: inline-block;
padding: 20px 0;
/* -webkit-transition: .3s;
transition: .3s; */
color: #333333;
}
.gnav-link:hover{
opacity: .5;
}
/* WORKSセクション
----------------------------- */
.works-list{
display: flex;
flex-wrap: wrap;
margin-bottom: 80px;
}
.works-item{
flex-basis: 32.31552%;
margin: 0 auto 40px;
text-align: center;
}
.works-body{
text-align: center;
}
.works-title{
font-size: 12px;
font-weight: bold;
margin-top: 8px;
}
.works-text, .works-url{
font-size: 10px;
}
/* FEATUREセクション
----------------------------- */
.feature-item{
/* display: flex; */
flex-wrap: wrap;
}
.feature-img-wrapper{
/* flex-basis: 45%; */
width: 45%;
margin-right: 40px;
float: left;
}
.feature-body{
flex-grow: 1;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
</code></pre>
<h2 id="参考"><a href="#%E5%8F%82%E8%80%83">参考</a></h2>
<p><a target="_blank" rel="nofollow noopener" href="https://webdesigner-go.com/template/portfolio-02/#comment-799">ポートフォリオHTMLテンプレート(ベーシック)</a></p>
manabu aratani