BETA

ドットインストールの「はじめてHTML 」と「はじめてCSS」のコードをレスポンシブ対応させてみた(HTML&JQuery編))

投稿日:2019-09-28
最終更新:2019-09-29

プログラミング 初心者なら誰もが通るドットインストールの「はじめてHTML」(2018年版)と「はじめてCSS」(2018年版)のコードをレスポンシブ対応させてみたので紹介します。今日はHTMLとJQueryを紹介します。
まずはindex.html

<!DOCTYPE html>  
<html lang="ja" dir="ltr">  
  <head>  
    <meta charset="utf-8">  
    <title>太郎のポートフォリオサイト</title>  
    <link rel="icon" href="favicon.ico">  
    <link rel="stylesheet" href="css/styles.css">  
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">/*ページトップボタンアイコン設置用にFont Awesomeに接続*/  
      <meta name="viewport" content="width=device-width, initial-scale=1.0">/*レスポンシブ対応用にviewportを追加*/  
    <meta name="description" content="太郎のポートフォリオサイトです。">  
  </head>  
  <body>  
    <header>  
      <nav>  
        <ul>  
          <li class="current"><a href="index.html">HOME</a></li>  
          <li><a href="about.html">ABOUT</a></li>  
        </ul>  
      </nav>  
    </header>  
    <section>  

      <img src="taro.png"width="140"height="140" alt="たろうのアイコン"class="icon">  
      <h1>山田太郎</h1>  
      <p>UI/UXデザイナー見習いです</p>  

      <div class="works">  
        <section>  

          <img src="work1.png"width="300"height="" alt="勇者ゲーム">/*work1~3の画像を幅300に統一*/  
          <h1>勇者ゲーム</h1>  
          <p>  
            楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。  
          </p>  
        </section>  
        <section>  

          <img src="work2.png"width="300"height="" alt="宝探しゲーム">  
          <h1>宝探しゲーム</h1>  
          <p>  
            楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。  
          </p>  
        </section>  
        <section>  

          <img src="work3.png"width="300"height="" alt="神経衰弱">  
          <h1>神経衰弱</h1>  
          <p>  
            楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。  
          </p>  
        </section>  
      </div>  
    </section>  

    <footer>  
      <ul>  
        <li><a href="mailto:[email protected]"target=_blank><img src="mail.png"width="20"height="20" alt="メール送信"></a></li>  
        <li><a href="https://dotinstall.com"target="_blank"><img src="blog.png"width="20"height="20" alt="ブログサイトへ"></a></li>  
        <li><a href="https://dotinstall.com"target="_blank"><img src="photos.png" width="20"height="20"alt="写真サイトへ"></a></li>  
      </ul>  
      <p>&copy Taro Yamada</p>  
    </footer>  
     <div id="back-to-top"><a href="#"><i class="fas fa-chevron-circle-up circle"></i>/*ページトップアイコンの画像*/  
       </a></div>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>/*jQueryの導入*/  
    <script src="main.js"></script>  
  </body>  
</html>  

index.htmlの変更点

  1. headタグ内にFontAwesomeとviewportを追加。
  2. sectionタグ内のimgの幅を300に統一。
  3. bodyタグの末尾から3行目にページトップアイコンの追加、続いて2行目にJQueryファイルを追加。

続いて about.html

<!DOCTYPE html>  
<html lang="ja" dir="ltr">  
  <head>  
    <meta charset="utf-8">  
    <title>山田太郎について</title>  
    <link rel="icon" href="favicon.ico">  
          <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">  
    <link rel="stylesheet" href="css/styles2.css">  
    <meta name="description" content="山田太郎について">  
  </head>  
  <body>  
    <header>  
      <nav>  
        <ul>  
          <li><a href="index2.html">HOME</a></li>  
          <li class="current"><a href="about2.html">ABOUT</a></li>  
        </ul>  
      </nav>  
    </header>  

    <section class="about">  

  <img src="taro.png"width="140"height="140" alt="たろうのアイコン"class="icon">  
  <h1>やまだたろう</h1>  

  <p>  
    山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。  
  </p>  

    </section>  

    <footer>  
      <ul>  
        <li><a href="mailto:[email protected]"target=_blank><img src="mail.png"width="20"height="20" alt="メール送信"></a></li>  
        <li><a href="https://dotinstall.com"target="_blank"><img src="blog.png"width="20"height="20" alt="ブログサイトへ"></a></li>  
        <li><a href="https://dotinstall.com"target="_blank"><img src="photos.png" width="20"height="20"alt="写真サイトへ"></a></li>  
      </ul>  
      <p>&copy Taro Yamada</p>  
    </footer>  
         <div id="back-to-top"><a href="#"><i class="fas fa-chevron-circle-up circle"></i>  
           </a></div>  
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  
         <script src="main.js"></script>  

  </body>  
</html>  

about.htmlの変更点

  • index.htmlの 1 と 3 を追加。

続いてmain.js

$(() => {  
  $('#back-to-top').hide();  
  $(window).scroll(function () {  
    if ($(this).scrollTop() > 500) {  
      $('#back-to-top').fadeIn();  
    } else {  
      $('#back-to-top').fadeOut();  
    };  
  });  
  $('#back-to-top >a').click(function () {  
    $('html').animate({  
      scrollTop: 0  
    })  
    return false;  
  });  
})  

CSSへ続く

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

いろんな言語のコードを紹介していきます。

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう