Skip to content

HTMLCSSハンズオン #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

HTMLCSSハンズオン #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Answer/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ a {
-------------------------------------------*/
.articles {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
gap: 40px 16px;
}

Expand Down
2 changes: 1 addition & 1 deletion Answer/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSSファイルの適用 -->
<link rel="stylesheet" href="css/styles.css">

</head>

<body>
Expand Down
77 changes: 74 additions & 3 deletions css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/*-------------------------------------------
*-------------------------------------------
共通部分
-------------------------------------------*/
* {
Expand Down Expand Up @@ -41,28 +41,99 @@ a {
/*-------------------------------------------
ヘッダー
-------------------------------------------*/
.header {
display: flex;
align-items: center;
justify-content: space-between;
height: 80px;
width: 100%;
}

.header-logo {
height: 24px;
}

.header ul {
display: flex;
gap: 24px;
}

.header li a:hover {
opacity: 0.7;
}

/*-------------------------------------------
メインビジュアル
-------------------------------------------*/

.main-visual {
width: 100%;
height: 640px;
object-fit: cover;
border-radius: 16px;
}

/*-------------------------------------------
セクション 共通部分
-------------------------------------------*/
.section {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
}

.section-title {
border-bottom: solid 1px #383e45;
}

/* -------------------------------------------
プロフィール
-------------------------------------------*/
.profile {
display: flex;
align-items: center;
gap: 40px;
}

.profile-image {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
}

.profile-info {
display: flex;
flex-direction: column;
gap: 16px;
}

/* -------------------------------------------
記事
-------------------------------------------*/
.articles {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 40px 16px;
}

.article {
display: flex;
flex-direction: column;
gap: 8px;
}

.article-image {
width: 100%;
height: 200px;
object-fit: cover;
}

/*-------------------------------------------
フッター
-------------------------------------------*/
-------------------------------------------*/
.footer {
font-size: small;
padding: 40px 0;
text-align: center;
}
62 changes: 55 additions & 7 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,76 @@

<head>
<meta charset="utf-8" />
<title>自己紹介</title>
<meta name="description" content="自己紹介サイトです。" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSSファイルの適用 -->

<link rel="stylesheet" href="css/styles.css">
<title>自己紹介</title>
</head>

<body>
<div class="page-wrapper">
<!-- ヘッダー -->

<header class="header">
<img src="img/logo.png" alt="logo" class="header-logo" />
<nav>
<ul>
<li><a href="#profile">Profile</a></li>
<li><a href="#article">Article</a></li>
</ul>
</nav>
</header>
<main class="main-content">
<!-- メインビジュアル -->

<img src="img/main_visual.jpg" alt="メインビジュアル" class="main_visual" />
<!-- プロフィール セクション -->

<section class="section" id="profile">
<h2 class="section-title">Profile</h2>
<div class="profile">
<img src="img/profile.png" alt="profile" class="profile-image" />
<div class="profile-info">
<h3>TARO RARETECH</h3>
<p>
出身: 東京都<br />
趣味: アプリ開発、散歩（公園を中心に歩き回っています）<br />
技術: Python,Django,JavaScript,React,AWS,GCP<br />
主な仕事:マネジメント,バックエンド開発
</p>
</div>
</div>
</section>
<!-- 記事 セクション -->
<section class="section" id="articles">
<h2 class="section-title">Articles</h2>
<div class="articles">
<div class="article">
<img src="img/article.jpg" alt="記事サムネイル" class="article-image" />
<h3>記事のタイトル</h3>
<p>こんな記事を書きました。こんな記事を書きました。こんな記事を書きました。こんな記事を書きました。</p>
</div>
<div class="article">
<img src="img/article.jpg" alt="記事サムネイル" class="article-image" />
<h3>記事のタイトル</h3>
<p>こんな記事を書きました。こんな記事を書きました。こんな記事を書きました。こんな記事を書きました。</p>
</div>
<div class="article">
<img src="img/article.jpg" alt="記事サムネイル" class="article-image" />
<h3>記事のタイトル</h3>
<p>こんな記事を書きました。こんな記事を書きました。こんな記事を書きました。こんな記事を書きました。</p>
</div>
<div class="article">
<img src="img/article.jpg" alt="記事サムネイル" class="article-image" />
<h3>記事のタイトル</h3>
<p>こんな記事を書きました。こんな記事を書きました。こんな記事を書きました。こんな記事を書きました。</p>
</div>
</div>
</section>

</main>

<!-- フッター -->
<footer class="footer">
<p>&copy; 2024 Profile</p>

</footer>
</div>
</body>

Expand Down