<!-- 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>
floatを使ったパターンです。
@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;
}
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント