📖勉強19日目
✓活動内容
１．Web技術の理解
２．コーディング
１．Web技術の理解
Web技術の理解については前回の続きですので、8月16日の記事をご覧ください！
２．コーディング
今日は、前回完成させたフレームワークをコーディングしました！
作業内容はHTMLによる配置を行い、CSSによる修飾は次回以降になります😊
今日作業したコードは下記に載せておきます！
過去にProgateでHTML/CSSの勉強を終わらせていたので、スムーズに配置を終わらせることが出来ましたが、より詳しい知識が貧しいので、コーディングをしながら知識を積んでいきます！
次回からのCSSによる修飾も頑張ります🙌
Contact Formにphpを使用することを知ったので、phpの勉強せばね(`･ω･´)ｶﾞﾝﾊﾞﾙｿﾞ~
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PortfolioSite</title>
<link rel="icon" type="image/png" href="image/favicon.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 鳥のロゴとヘッダーメニュー -->
<header>
<div class="container">
<div class="site_logo">
<img src="image/site_logo.png" alt="サイトロゴ" width="90" height="75">
</div>
<nav class="nav_header">
<ul>
<li><a href="#">Skill</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<!-- 背景：緑部のヘッダー画像 -->
<div class="home_header">
<h1>So Ke</h1>
<h2>全ての想いを届けます</h2>
</div>
<!-- Skill -->
<section>
<div class="skill">
<h1>Skill</h1>
</div>
<section>
<div class="skill_article">
<div class="skill-list">
<ul>
<li>マーケティング</li>
<li>Webデザイン</li>
<li>コーディング</li>
</ul>
</div>
<div class="skill_explanation">
<div class="mk_explanation">
<div class="mk">
<img src="image/mk_logo.png" alt="マーケティング" width="229" height="215">
</div>
<p>YouTubeを複数運用していた経験から
お客様視点を大事にして、目的達成に
導きます。特に設計を重視し、ターゲ
ットの行動を細かく意識したペルソナ
設定を心掛けています。</p>
</div>
<div class="web_explanation">
<div class="web">
<img src="image/mouse_logo.png" alt="Webサイトデザイン" width="100" height="130">
</div>
<p>デザインの本来の意味を理解して、作
成します。お客様の要望・目的達成は
もちろんのこと、使う人･見る人全て
を意識したデザインにします。</p>
</div>
<div class="cd_explanation">
<div class="cd">
<img src="image/cd_logo.png" alt="コーディング" width="150" height="130">
</div>
<p>パソコン、スマートフォンの両方に対
応したコーディングをします。HTML
/CSSを使用したコーディングに加え、
JavaScriptで動きのあるサイトのコー
ディングも行います。</p>
</div>
</div>
</div>
</section>
</section>
<!-- Works -->
<section>
<div class="works">
<h1>Works</h1>
</div>
<div class="works_1">
<img src="image/works1.PNG" alt="Webサイト">
</div>
<div class="works_2">
<img src="image/works2.png" alt="バナー">
</div>
<div class="works_3">
<img src="image/works3.png" alt="バナー">
</div>
<div class="works_4">
<img src="image/works4.png" alt="ヘッダー">
</div>
<div class="works_5">
<img src="image/works5.png" alt="ヘッダー">
</div>
<div class="works_6">
<img src="image/works6.png" alt="サムネイル">
</div>
<div class="works_7">
<img src="image/works7.png" alt="サムネイル">
</div>
</section>
<!-- About -->
<section>
<div class="about">
<div class="about_title">
<h1>About</h1>
</div>
<div class="about_img">
<img src="image/aboutimg.png" alt="自画像">
</div>
<div class="about_menu">
<h2>3つの心</h2>
<ul>
<li class="about_1">想い</li>
<li class="about_2">目的</li>
<li class="about_3">喜び</li>
</ul>
</div>
<p>3つの心をデザインに蘇らせ
お互いが幸せになれるWebデザイナーになりたいです。</p>
<div class="about_link">
<a href="#">詳しく見る</a>
</div>
</div>
</section>
<!-- Contact -->
<section id="footer_contact">
<h1>Contact</h1>
<p>当ポートフォリオサイトにご訪問いただき、誠にありがとうございます。
相談・ご不明な点等ございましたら、下記フォームをご入力の上、お気軽にお問い合わせください。
3営業日以内にご連絡させていただきます。</p>
<div class="contact_article">
<form action="contact.php" method="post" name="contact_form">
<label>貴社名</label>
<input type="text">
<label>お名前<span>必須</span></label>
<input type="text">
<label>メールアドレス<span>必須</span></label>
<input type="text">
<label>お問い合わせ<span>必須</span></label>
<textarea name="message" placeholder="メッセージを入力"></textarea>
</form>
<div class="contact_submit">
<input type="submit" value="内容を送信する">
</div>
</div>
</section>
<footer>
<div class="footer_content">
<nav class="nav_header">
<ul>
<li><a href="#">Skill</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<p class="copy_right">@ 2023 So Ke</p>
</div>
</footer>
</body>
</html>
