Fellica PM Site 0712

2022年8月
月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

24 August

html/css, Responsive

コーディング演習 (Pickup Stream)

使用テキスト

Pickupstream
何気無い日々の風景を綴るブログです。

facebookのロゴ
twitterのロゴ
Instagramのロゴ
LINEのロゴ

キービジュアルの画像（背景画像）

HOME
ABOUT
NEWS
ACCESS
CONTACT

1AUG
海岸のデコレーション
CATEGORY: 海と海岸と空

植物の画像

こうした植物は「海浜植物」と呼ばれ、砂をかぶって埋もれても、茎が伸びてまた葉を出す仕組みになっています。

ところどころに顔を出す緑色の小さな葉っぱは、海岸をかわいくデコレーションしてくれます。海への道中で踏んづけてしまう前に、足元にあるものを観察してみるのもおもしろいですよ。

使用素材

cssリセット後イメージ

完成イメージ

Box構造

html(08/26)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>PICUPSTREAM</title>  
<meta name="description" content="Pickupstreamは何気無い日々の風景を綴るブログです。今回は海岸のデコレーションと題して海浜植物の観察をしてみました。">
<link rel="stylesheet" href="css/style0.css">
</head> 
<body>

<!-- Header -->
<header>
<div class="container">
<div>
<h1>Pickupstream</h1>
<p>何気無い日々の風景を綴るブログです。</p>
</div>
<!-- SNS icon -->
<aside>
<ul>
<li><a href="#"><img src="img/facebook.svg" alt="facebookのロゴマーク"></a></li>
<li><a href="#"><img src="img/twitter.svg" alt="twitterのロゴマーク"></a></li>
<li><a href="#"><img src="img/insta2.svg" alt="instagramのロゴマーク"></a></li>
<li><a href="#"><img src="img/line.svg" alt="rssのロゴマーク"></a></li>
</ul>
</aside>
</div>
</header>

<!-- Key visual -->
<div class="keyVis"></div>

<!--pc用Navigation-->
<nav>
<ul class="container">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">ACCESS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>

<div class="container wrap">
<!-- 投稿記事 -->
<main>
<article>
<time datetime="2022-08-01">1AUG</time>
<h2>海岸のデコレーション</h2>
<p>CATEGORY: 海と海岸と空</p>
<p><img src="img/sand.jpg" alt="海岸線で生息する小さな植物の画像"></p>
<p>こうした植物は「海浜植物」と呼ばれ、砂をかぶって埋もれても、茎が伸びてまた葉を出す仕組みになっています。</p>
<p>ところどころに顔を出す緑色の小さな葉っぱは、海岸をかわいくデコレーションしてくれます。海への道中で踏んづけてしまう前に、足元にあるものを観察してみるのもおもしろいですよ。</p>
</article>
</main>
<!-- Sidebar -->
<div class="sidebar">
<!-- カテゴリーメニュー-->
<section>
<h2>CATEGORIES</h2>
<ul>
<li><a href="#">山と森林</a></li>
<li><a href="#">海と海岸と空</a></li>
<li><a href="#">都市と建築</a></li>
<li><a href="#">地下</a></li>
</ul>
</section>
<!-- 最近の投稿 -->
<section>
<h2>RECENT POSTS</h2>
<ul>
<li><a href="#">海岸のデコレーション</a></li>
<li><a href="#">風車と海風の関係</a></li>
<li><a href="#">ツルを伸ばしてどこまでも</a></li>
<li><a href="#">色とりどりの絨毯</a></li>
<li><a href="#">休日に買い物にいくなら</a></li>
<li><a href="#">高層ビルと風の関係</a></li>
</ul>
</section>
</div><!--/.sidebar-->
</div><!--/.container-->

<!--Footer-->
<footer>
<div class="container">
<p>PICKUP STREAM</p>
<p><small>Copyright &copy; PICKUP STREAM, all rights reserved.</small></p>
</div>
</footer>

</body>
</html>

<!DOCTYPE html>

<head>

<title>PICUPSTREAM</title>

</head>

<body>

<div>

<h1>Pickupstream</h1>

<p>何気無い日々の風景を綴るブログです。</p>

</div>

<aside>

<ul>

</ul>

</aside>

</div>

</header>

<nav>

<li><a href="#">ABOUT</a></li>

<li><a href="#">ACCESS</a></li>

<li><a href="#">CONTACT</a></li>

</ul>

</nav>

<main>

<h2>海岸のデコレーション</h2>

<p>CATEGORY: 海と海岸と空</p>

<p>こうした植物は「海浜植物」と呼ばれ、砂をかぶって埋もれても、茎が伸びてまた葉を出す仕組みになっています。</p>

<p>ところどころに顔を出す緑色の小さな葉っぱは、海岸をかわいくデコレーションしてくれます。海への道中で踏んづけてしまう前に、足元にあるものを観察してみるのもおもしろいですよ。</p>

</article>

</main>

<h2>CATEGORIES</h2>

<ul>

<li><a href="#">海と海岸と空</a></li>

<li><a href="#">都市と建築</a></li>

</ul>

</section>

<h2>RECENT POSTS</h2>

<ul>

<li><a href="#">海岸のデコレーション</a></li>

<li><a href="#">風車と海風の関係</a></li>

<li><a href="#">ツルを伸ばしてどこまでも</a></li>

<li><a href="#">色とりどりの絨毯</a></li>

<li><a href="#">休日に買い物にいくなら</a></li>

<li><a href="#">高層ビルと風の関係</a></li>

</ul>

</section>

</div>

</div>

<p>PICKUP STREAM</p>

</div>

</footer>

</body>

</html>

指定校

css(08/26)

@charset "uft-8";

/*----Reset----*/
*{
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
img {
max-width: 100%;
/* vertical-align: bottom; */
}
body{
line-height: 1;
font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
/* 共通css */
.container{
max-width:960px;
margin:0 auto;
display: flex;
justify-content:
space-between;
}
/* Header */
header{
padding: 20px 0;
background: #000;
color: #fff;
}
header .container {
align-items: flex-end;
}
h1 {
font-family: "Lacquer", sans-serif;
font-size: 44px;
margin-bottom: 5px;
}

/*SNSリンク*/
aside ul{
display: flex;
gap:5px;
}
/* snsアイコン */
aside img{
width:50px;
}

/*キービジュアル*/
.keyVis {
height: 200px;
background: url(../img/header2.jpg) no-repeat right center/cover;
/* background-size: cover; */
}

/* PCナビゲーション */
nav{
background: 
linear-gradient(#777,#000);
}
nav li {
width: 20%;
line-height: 50px;
text-align: center;
}
nav a {
display: block;
border-right: solid 1px #fff;
color: #fff;
}
nav li:first-child a {
border-left: 1px solid #fff;
}
nav a:hover {
background:
linear-gradient(#000, #777);
}

/*----コンテンツ----*/
.wrap{
padding:50px 0;
}
/*2カラム幅指定*/
main {
width: calc(100% * (600 / 960));
}
.sidebar {
width: calc(100% * (300 / 960));
}

/*投稿日時*/
time {
background: #0097d8;
color: #fff;
font-weight: bold;
padding: 20px;
border-radius: 50%;
float: right;
}
/* 見出し */
article h2 {
font-size: 28px;
border-bottom: solid 1px #000;
padding-bottom: 10px;
margin-bottom: 10px;
}
article p:first-of-type{
font-size: 14px;
}
/*画像枠*/
article img {
border: 10px solid #0097d8;
}
/*記事段落*/
article p+p{
margin-top: 10px;
line-height: 1.5;
}

/* ------ サイドバー ----- */
.sidebar section:first-child{
margin-bottom: 50px;
}
/* 見出し*/
.sidebar h2 {
font-size: 28px;
color: #0097d8;
margin-bottom: 10px;
}
/* メニューボーダー */
.sidebar ul{
border-top: solid 1px #aaa;
}
.sidebar li {
line-height: 50px;
border-bottom: solid 1px #aaa;
}
.sidebar a {
display: block;
padding-left: 18px;
}
.sidebar a:hover {
background:
url(../img/listmark.png) no-repeat left center;
}

/*フッター*/
footer {
color: #fff;
background: #000;
padding: 30px 0;
}
footer .container{
display: block;
}
footer p:first-child {
margin-bottom: 5px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

@charset "uft-8";

/*----Reset----*/

margin: 0;

padding: 0;

}

ul {

list-style: none;

}

a {

text-decoration: none;

color: inherit;

}

img {

max-width: 100%;

/* vertical-align: bottom; */

}

body{

line-height: 1;

font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

}

/* 共通css */

.container{

max-width:960px;

margin:0 auto;

display: flex;

justify-content:

space-between;

}

/* Header */

header{

padding: 20px 0;

background: #000;

color: #fff;

}

header .container {

align-items: flex-end;

}

h1 {

font-family: "Lacquer", sans-serif;

font-size: 44px;

margin-bottom: 5px;

}

/*SNSリンク*/

aside ul{

display: flex;

gap:5px;

}

/* snsアイコン */

aside img{

width:50px;

}

/*キービジュアル*/

.keyVis {

height: 200px;

background: url(../img/header2.jpg) no-repeat right center/cover;

/* background-size: cover; */

}

/* PCナビゲーション */

nav{

background:

linear-gradient(#777,#000);

}

nav li {

width: 20%;

line-height: 50px;

text-align: center;

}

nav a {

display: block;

border-right: solid 1px #fff;

color: #fff;

}

nav li:first-child a {

border-left: 1px solid #fff;

}

nav a:hover {

background:

linear-gradient(#000, #777);

}

/*----コンテンツ----*/

.wrap{

padding:50px 0;

}

/*2カラム幅指定*/

main {

width: calc(100% * (600 / 960));

}

.sidebar {

width: calc(100% * (300 / 960));

}

/*投稿日時*/

time {

background: #0097d8;

color: #fff;

font-weight: bold;

padding: 20px;

border-radius: 50%;

float: right;

}

/* 見出し */

article h2 {

font-size: 28px;

border-bottom: solid 1px #000;

padding-bottom: 10px;

margin-bottom: 10px;

}

article p:first-of-type{

font-size: 14px;

}

/*画像枠*/

article img {

border: 10px solid #0097d8;

}

/*記事段落*/

article p+p{

margin-top: 10px;

line-height: 1.5;

}

/* ------ サイドバー ----- */

.sidebar section:first-child{

margin-bottom: 50px;

}

/* 見出し*/

.sidebar h2 {

font-size: 28px;

color: #0097d8;

margin-bottom: 10px;

}

/* メニューボーダー */

.sidebar ul{

border-top: solid 1px #aaa;

}

.sidebar li {

line-height: 50px;

border-bottom: solid 1px #aaa;

}

.sidebar a {

display: block;

padding-left: 18px;

}

.sidebar a:hover {

background:

url(../img/listmark.png) no-repeat left center;

}

/*フッター*/

footer {

color: #fff;

background: #000;

padding: 30px 0;

}

footer .container{

display: block;

}

footer p:first-child {

margin-bottom: 5px;

}

S.V.G.画像バナー制作演習（Summer Sale）

カテゴリー

最近の投稿

リンク

ペンツール練習サイト

コーディング演習 (Pickup Stream)

使用テキスト

使用素材

cssリセット後イメージ

完成イメージ

Box構造

指定校