Output Study！〜ちょっと変わった勉強会〜「#6 レスポンシブコーディング」

こんにちは！！

ロジカルスタジオPR部です！！

先日、社内でレスポンシブコーディングについて勉強会が開催された様子をご紹介★

勉強会の雰囲気はこんなかんじ！

会議室が満杯になるのではないかという程の人数です。。！

コーディングはWeb制作の基礎なので、HTMLコーダーの方はもちろんデザイナーの方やエンジニアの方も大勢参加されているようでした！

◾︎はじめに

今回はHTMLファイルをCSSでレイアウト通りに構築するということをテーマにしたハンズオン形式の勉強会です。

ハンズオン形式なので、聞いて学ぶよりも、実際に手を動かすことで理解がグッ、グググっと深まります。

それに加えて、今回はレスポンシブ対応、いわゆるスマホやタブレットに対応したコーディングも行いました！

また、新人エンジニアの方やHTML/CSSは何となく知ってるけど、レイアウト通りに構築する知識が浅い人を対象にした内容だったので、

まさに新人エンジニアの僕にとっては物凄くわかりやすく、勉強になる内容でした！

◾︎PC版のコーディング

では、ここからはPC版のコーディング内容を紹介していきます！

【完成図】

まず、PC版のコーディングはこちらの完成図を目指していきます！↓

【既存のHTMLファイルがこちら】

この既存のHTMLに対してCSSでレイアウトを整えていきます！↓

<!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 &copy 2020 Logical Studio Co., Ltd. All Rights Reserved.</p>
  </div><!--/ .inner -->
</footer>


</body>
</html>

【CSSファイルを読み込む】

次に、下記のコードをHTMLファイルのheadタグ内に記述し、CSSファイルを読み込みます。

<link href="css/style.css" rel="stylesheet" type="text/css" media="screen,print" />

これをしておかないと、「CSS書いたのにHTMLに反映されない。。」という悲しいことになってしまいますので、しっかりチェックしておきましょう。

今回の勉強会も非常にいい雰囲気ですね！

【 header の作成】

まずは「header」部分を作っていきます！「header」は主にロゴやグローバルナビゲーションがある部分ですね。

続きはロジカルオフィシャルブログで！！

Output Study！〜ちょっと変わった勉強会〜「#6 レスポンシブコーディング」 | Logical Studio Blog

初めまして！ロジカルスタジオPR部のケンティです。エンジニアケンティバックエンドエンジニアの卵として、PHPを日々勉強しています！エンジニアケンティ先日、社内でレスポンシブコーディングについて勉強会が開催されたので、僕も参加してまいりました！場所：『ロジカルスタジオ会議室アドリア(4F)』時間：『1月14日（火） 16:00～17:30』

https://develop.logical-studio.com/study/20200207-output-study-coding-responsive/

Invitation from 株式会社ロジカルスタジオ

If this story triggered your interest, have a chat with the team?

株式会社ロジカルスタジオ's job postings

Output Study！〜ちょっと変わった勉強会〜「#6 レスポンシブコーディング」

小松カレン

株式会社ロジカルスタジオ / Other

CSS HTML Web制作レスポンシブ

6 Likes

Output Study！〜ちょっと変わった勉強会〜「#6 レスポンシブコーディング」

◾︎はじめに

◾︎PC版のコーディング

【完成図】

【既存のHTMLファイルがこちら】

【CSSファイルを読み込む】

【 header の作成】

続きはロジカルオフィシャルブログで！！

株式会社ロジカルスタジオ

Web制作

Weekly ranking