PM初心者の研修記録#4【サイト作成】初心者が2週間で作ったサイトを公開!(HTMLとCSSのコード付き!)

contents
  1. 経緯
  2. こんなサイトを作ってみた!
  3. 制作中のメモ
  4. 実際に書いたコード

1.経緯

これまでPMになるための勉強をしてきたので、ここからやっと実践に入っていきます!😀
うちの会社(弊社と言った方がいい?)では仕事でWebサービスを使うことが多いので、
その基礎となるHTMLとCSSを使ってサイトを作ってみることにしました!

(この2つはすぐ画面に反映されるから、初心者でも作っていて楽しいらしい。)
ここでプログラマーの体験を行うことで、エンジニアとのやりとりをやりやすくなるようにしていきます!!

2.こんなサイトを作ってみた!

既存の心理テストを少しいじって、自分なりにサイトを作ってみました〜!
2週間弱ぐらいかけて、自分好みの手の込んだサイトになりました。
(自分が該当する答えのボタンを押すと、心理テストの結果に飛ぶようになっています!)

サイトイメージ画像
サイトイメージ画像

3.製作中に書いたメモ

これは、私がサイトを作っている途中でわからなかったことをメモしたものです!
参考にしたサイトや、つまづいたところの対処法もメモしてあるので、よかったら参考にしてください。。。

  1. サイトを作る流れ
    ・使うツール:mi
    ・使う言語:HTML(できればCSS)
    1. <Progateで習った内容を生かして「簡単な心理テストサイト」を作ってみる>

      ①簡単なサイトイメージを紙に書く(今回はスプレッドシートに)
       ・心理テストが良さそう(例: https://ananweb.jp/uranai/shinritest/427696/ )
       ・具体的でちょっと可愛いサイト
       ・技術的なフォロー(井田)
      ②ローカル(自分が操作しているコンピュータ上)で作り始めてみる

       [!]わからない事が見つかる
       ・教科書サイトで該当箇所を勉強
       ・ググってみる
      ③公式HPのサーバーにアップしてみる

  2. 参考にしたサイト

    1. (HTML)基本となるHTMLコード一覧

    2. (HTML)初心者向けHTML入門:書き方の基本とタグの使い方

    3. (CSS)CSSプロパティ一覧

  3. わからなかったところ
    1.  HTML編
      1.  画像の挿入の仕方
      2. 表示されない画像がある
        →「いらすとや」の画像なら20枚まで大丈夫
      3. ボタンで押すようにした
      4.  文章の途中で改行したいとき


         

      5. リンクの付け方
        アンカーテキスト

         ※#の有無
          例)#section1→飛んだサイトの指定場所まで飛べる
    2. CSS編
      1. ①横並びにする方法
         親要素にdisplay:flex;またはfloat: left;
      2.  
      3. の”・”を取る方法
        li {
           list-style:none;
        }
      4. HTMLにCSSを適応させる方法
         HTMLのタグ内に記述する
      5. テキストを中央に寄せる方法
        親要素にtext-align: center;
      6. 横に並べた画像の大きさを整える
        (1)flex-grow:相対比率;
        (特徴)
         ・空間が余った場合の、子要素達の伸び具合を調整する
         ・親要素ではなく、子要素に指定する
         ・0だと伸びない
         ・大きい数値を指定するとよく伸びる
         ・初期値は0
        (2)display:flex;
      7. imgにクラスを追加する方法
        ⑴imgタグそのものに追加する方法
         
        ⑵divを使う方法

         

      8. ボタンに動きをつける方法
        ・CSSで、セレクタ:hoverとすることで、カーソルが乗ったときのCSSを指定することができる。
        transitionを使うとアニメーションをつけることができる。
        ・「変化の対象」や、「変化にかかる時間」などを指定できる。
        ・「変化の対象」にはcolorなどのプロパティを指定するが、allを指定すると全てのプロパティに適用出来る。
        transitionは多くの場合hoverと組み合わせて使う。
      9. タグの意味
  4. 発生した問題
     [!]リンク先に飛ばない
      →原因⑴:ファイル名に半角スペースを使っていた。
          *ファイル名として使ってはいけないもの
           ・半角スペース
           ・コンマ 
       原因⑵:「=」が抜けてた。
  5. +a もう少し凝ったサイトにしてみよう!
     ①実際にTwitterに共有する方法
       【html】Twitterへの投稿リンク(Twitter Share Button)の設置

     ・パラメータ
      :アクセス先のURLにパラメータを付与する。
       ?でパラメータを接続して、複数の場合はさらに&でつなげる

     ・エンコードとデコード
      :URLにできない文字(日本語)を暗号化して表示すること

    ▼URLエンコード・デコード変換
    https://tech-unlimited.com/urlencode.html

    ▼LINE、Facebookも
    https://r17n.page/2019/11/03/html-share-links-to-major-sns/

    ②スマホ画面で見た時の縮小を直す方法

    スマートフォン用ページが自動縮小されないようにする

    1. 内に埋め込む

    2. @media(max-width:670px)でスマホサイズ時の横幅、縦幅比の指定

    3. object-fit: contain;でimgタグの縦横比維持

 

4.実際に書いたコード

私が実際に書いたコードはこちらです!

次回は

このサイトを作る前に行なった下準備を紹介するよ!
(企画で勉強したことが生きてくるよ!)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です