こんにちは！！
ロジカルスタジオPR部です！！
先日、社内でレスポンシブコーディングについて勉強会が開催された様子をご紹介★
勉強会の雰囲気はこんなかんじ！
会議室が満杯になるのではないかという程の人数です。。！
コーディングはWeb制作の基礎なので、HTMLコーダーの方はもちろんデザイナーの方やエンジニアの方も大勢参加されているようでした！
今回はHTMLファイルをCSSでレイアウト通りに構築するということをテーマにしたハンズオン形式の勉強会です。
ハンズオン形式なので、聞いて学ぶよりも、実際に手を動かすことで理解がグッ、グググっと深まります。
それに加えて、今回はレスポンシブ対応、いわゆるスマホやタブレットに対応したコーディングも行いました！
また、新人エンジニアの方やHTML/CSSは何となく知ってるけど、レイアウト通りに構築する知識が浅い人を対象にした内容だったので、
まさに新人エンジニアの僕にとっては物凄くわかりやすく、勉強になる内容でした！
では、ここからはPC版のコーディング内容を紹介していきます！
まず、PC版のコーディングはこちらの完成図を目指していきます！↓
この既存のHTMLに対してCSSでレイアウトを整えていきます！↓
/assets/images/2125371/original/ddd7dc60-0d09-4013-af2f-6cbe9f986e0f?1640614821)
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<title>LOGICAL STUDIO | 株式会社ロジカルスタジオ</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen,tv,print" >
<link href="img/favicon.ico" type="image/x-icon" rel="shortcut icon">
</head>
<body>
<header>
<div class="inner">
<h1><a href="#"><img src="img/header_logo.png" alt=""></a></h1>
<nav>
<ul id="global-nav">
<li class="home"><a href="#">ホーム</a></li>
<li class="work"><a href="#">制作事例</a></li>
<li class="service"><a href="#">サービス</a></li>
<li class="corporate"><a href="#">会社情報</a></li>
<li class="recruit"><a href="#">リクルート</a></li>
<li class="blog"><a href="#">ブログ</a></li>
<li class="content"><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</div>
</header>
<section id="main">
<img src="img/main.jpg" alt="Learn,Find and Think" class="pc-only">
<img src="img/sp_main.jpg" alt="Learn,Find and Think" class="sp-only">
</section>
<section id="works">
<div class="inner">
<h2>制作事例</h2>
<ul class="works-list">
<li>
<a href="#">
<div class="colorfilter">
<img src="img/works1.jpg" alt="">
<p class="works-title">コーポレートサイト</p>
<p class="works-name">オーティー情報システム株式会社 様</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="colorfilter">
<img src="img/works2.jpg" alt="">
<p class="works-title">リクルートサイト</p>
<p class="works-name">株式会社クオンテックス 様</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="colorfilter">
<img src="img/works3.jpg" alt="">
<p class="works-title">おでかけ情報サイト「otent」</p>
<p class="works-name">南海電気鉄道株式会社 様</p>
</div>
</a>
</li>
</ul>
</div>
</section>
<footer>
<div class="inner">
<p class="copyright">Copyright © 2020 Logical Studio Co., Ltd. All Rights Reserved.</p>
</div><!--/ .inner -->
</footer>
</body>
</html>次に、下記のコードをHTMLファイルのheadタグ内に記述し、CSSファイルを読み込みます。
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen,print" />これをしておかないと、「CSS書いたのにHTMLに反映されない。。」という悲しいことになってしまいますので、しっかりチェックしておきましょう。
今回の勉強会も非常にいい雰囲気ですね！
まずは「header」部分を作っていきます！「header」は主にロゴやグローバルナビゲーションがある部分ですね。
/assets/images/2125371/original/ddd7dc60-0d09-4013-af2f-6cbe9f986e0f?1640614821)
/assets/images/2125371/original/ddd7dc60-0d09-4013-af2f-6cbe9f986e0f?1640614821)
