投稿日：2020-02-24T22:37:26+09:00

Webサイト固定幅の解除

はじめに

最近ではフルHDやそれ以上の解像度のディスプレイが当たり前のようになってきましたが、ネットのサイトでは意外とそれを活用できていないと思ったことはありませんか？
と言っても、何のことか分からない方は、以下のImpressのPC Watchの例をご覧下さい。
左右に大きな余白があるのが分かると思います。

(https://pc.watch.impress.co.jp/)
これは、記事の表示幅を必要以上にせまくしているからなのです。
そこで、ちょっとだけ設定を変えてあげることで、余白のところもキチンと活用できるようにする方法をご紹介します。

Stylusのインストール

ブラウザがChromeやFirefoxであれば、Stylusをインストールするのが簡単です。
https://addons.mozilla.org/ja/firefox/addon/styl-us/ (Firefox)
https://chrome.google.com/webstore/detail/stylus-beta/apmmpaebfobifelkijhaljbmpcgbjbdo/ (Chrome用ベータ版)
https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne/ (Chrome用安定版:なぜかリンク切れ)

スタイルのインストール

アドオンをインストールしたら、スタイルをダウンロードします。
ここでいうスタイルとはCSSを変更するものになっています。
様々なスタイルがダウンロードできるのが[userstyles.org]です。
ここで、Impressのサイトの余白を活用できるようにCSSを改変する[拙作のスタイル]をご紹介します。
https://userstyles.org/styles/134703/impress-co-jp-article-width-adjuster
サイトを開いたら"Install style"でスタイルをインストールします。
あとは、アドオンの設定画面からスタイルを有効(スタイル名の前のチェックボックスをチェック)すれば準備OKです。

スタイル適用後のサイト

さっそく適用後のサイトを見てみましょう。トップページではあまり御利益もありませんが(笑)

(https://pc.watch.impress.co.jp/)
記事のページでは効果が大きく見えてきます。余白がなくなって、記事がウィンドウ一杯に広がって見えるのが分かりますでしょうか。大きなディスプレイで画面一杯に広がりすぎる場合は、ウィンドウを小さくすれば、それに合わせて記事も調整されます。

(https://pc.watch.impress.co.jp/docs/news/1236827.html)

最後に

同じようなスタイルをいくつかアップしておりますので、よろしければ使ってみて下さい。（ソースがかなり汚いですが、そこはご容赦を)
https://userstyles.org/users/369218

例としてPC Watchを挙げておりますが、毎日のように拝見しておりますので関係者の方々どうかご容赦下さい。

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-24T21:56:55+09:00

マークアップエンジニアがチェックしたいCSSリファレンスまとめ6つ

基本を既に知っているベテランこそチェックしておきたいCSSリファレンス。
おすすめのCSSリファレンスサイトを6つご紹介します。

CSSリファレンス日本語版

読みやすく安心な日本語のCSSリファレンスの
おすすめ3サイトをご紹介します。

TAG INDEX

初心者におすすめしたいCSSリファレンスサイト。
CSSの基本は、CSSの使い方の元になる「なぜそうなるのか」基本概念がまとめられていますので理解が深まります。
わかりやすい説明をしたい教える側のエンジニアさんにもおすすめです。

https://www.tagindex.com/stylesheet/

HTMLクイックリファレンス

初心者にもわかりやすい平易な言葉使いと丁寧な説明。
プロパティの違いごとに、デモが用意されていて親切なサイトです。
使い方を早く知りたい場合におすすめです。

http://www.htmq.com/style/indexa.shtml

MdN CSSリファレンス

中〜上級者が参考にしたいCSSリファレンス。
上級者向けの詳細な解説が特長です。

https://developer.mozilla.org/ja/docs/Web/CSS/Reference

CSSリファレンス英語版

英語のオススメサイト4つをご紹介します。
英語圏はプログラマ人工が多く、良い情報が豊富にあります。
Google翻訳で英語リファレンスを読む癖をつけると良い情報に出会う確率が高くなりますのでオススメです〜

caniuse

CSSプロパティの解説が付いてないですが、
ブラウザ未対応の使ったことがないようなプロパティを知るのに便利です。

https://caniuse.com/#index

CSS TRICKS

こちらのCSSプロパティ一覧は2つのカテゴリーに分類されています。
- CSSセレクター（Selectors）
- CSSプロパティ（Properties）

サンプルデモがすべてCodepenで用意されていて、手元でコードを触りながら覚えることができます。
インプットしながらアウトプットできて便利です…！

https://css-tricks.com/almanac/

codrops

こちらのCSSプロパティ一覧は6つのカテゴリーに分類されています。
- セレクタ（Pseudo-class）
- プロパティ（Property）
- ファンクション（Function）
- データタイプ（Data Type）
- コンセプト（Concept）
- @rule（@ルール）

コード書き換えが可能なライブデモがついています。
おすすめサイトの中で1番英語の説明が長文なので、英語の勉強になるかも…！

https://tympanus.net/codrops/css_reference/

cssreference

こちらのCSSプロパティ一覧は8つのカテゴリーに分類されています。
- アニメーション（animations）
- 背景（Backgrounds）
- ボックスモデル（Box model）
- フレックスボックス（Flexbox）
- CSSグリッド（CSS Grid）
- ポジション（Positioning）
- トランジション（Transitions）
- タイポグラフィ（Typography）

cssreferenceというサイト名の通り、コンテンツのメインがCSSリファレンスです。
姉妹サイト「htmlreference」もありますのであわせて読みたい

https://cssreference.io/

まとめ

CSSのブラウザ対応が進んだり、CSSの仕様が追加されるので
リファレンスサイトで最新情報をチェックしておきたいです

言語の壁はありますが英語サイトは質が高い情報が豊富なので
チェックしていきたいです

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-24T21:08:34+09:00

CSS:色の設定

h1 {
  /* color: green; */
  color: rgb(255, 255, 0);
  color: #ffff00;
  color: #ff0;
}

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-24T20:52:00+09:00

CSS: CSSをHTMLに追加する

方法1：HEADタグ内に書く方法

index.html

<header>

  <div class="area1">

  <style>
    h1 {
      color: blue;
    }
    .area1 {
      color: red;
    }
  </style>

  </div>

</header>

方法2：外部ファイルへリンクさせる方法

index.html

<header>
  <link rel="stylesheet" href="css/styles.css">
</header>

styles.css

h1 {
  color: blue;
}

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-24T19:05:58+09:00

iPhoneのON,OFFスイッチのようなトグルスイッチを作ってみた

CSSを使ってトグルスイッチの作り方

早速だけどコード

See the Pen zYGoYex by yamazaki (@y_m_z_k) on CodePen.

構成

HTML

HTMLはシンプルにチェックボックスとラベルのみ。

<div class="switch">
  <input type="checkbox" id="toggle" class="toggle" />
  <label for="toggle"></label>
</div>

CSS

CSSがメインとなる。

 .switch {
        margin-top: 4px;
        margin-left: 2px;
        font-size:24px;
        padding: 2px;
    }
    .switch input[type=checkbox]{
        position: absolute;
        opacity: 0;
    }
    .switch label {
        width: 2em;
        height: 2em;
        position: relative;
        cursor: pointer;
        display: block;
    }
    .switch label:before {
        content: '';
        position: absolute;
        width: 2em;
        height: 1em;
        left: 0.1em;
        transition: background 0.1s ease;
        background: #f1f1f1;
        border-radius: 50px;
        box-shadow: inset 0px 1px 1px rgba(171,66,63,0.5);
    }
    .switch label:after {
        content:'';
        position: absolute;
        width: 1em;
        height: 1em;
        border-radius: 50px;
        left: 0;
        transition : all 0.2s ease;
        box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
        background: #fcfff4;
        animation: swich-off .2s ease-out;
        z-index:2;
    }
    .switch input[type=checkbox]:checked+label:before {
        background:#8ce196;
        box-shadow: inset 0px 1px 1px rgba(84,152,140,0.5);
    }
    .switch input[type=checkbox]:checked+label:after {
        animation: switch-on .2s ease-out;
        left: 1.1em;
    }

ポイント

CSSで何やっているかわからないかもしれないが、
重要なのは元のチェックボックスは非表示にして:beforeと:afterの疑似要素で表現していること

疑似要素とはCSSでHTMLの要素のようなものを表現できる。
contentプロパティによって文などを追加できる。

最後に

CSSで分かりやすいデザインを作るのは楽しいのでとりあえず最初になじみのあるこの実装に取り組んでみました。
完成した時は感動しました。。。
他にも簡単に作れるものがあれば教えてください。

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-24T17:13:38+09:00

【class名一覧】CSSでよく使うクラス名をたった１枚にまとめてみました。

class命名のときに毎回
「何にしよっかなー？」って迷わないように
一覧にしてみましたのでシェアいたします。

もっと詳しくまとめてくれている
サイトもあるんですけど、情報が多すぎて・・
印刷したら何ページにもなっちゃうし
かといって
毎回サイトを開いて確認するのも面倒くさい。

そこで、
すっきり１枚にまとめてみました。

サイト模写するときに
この一覧を見ながら
まずはclass名やid名を決めてしまえば
HTMLマークアップのとき
class命名で考えこむ時間を短縮できるはずです。

アナログですけど
けっこう便利ですよ

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-24T16:24:01+09:00

ハンバーガーメニュー + α

filename.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hamburgerMenu</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <div class="headerWrapper">
      <div class="headerInner">
        <h1>
          <a href="#">sample</a>
        </h1>
        <div class="navToggle for_sp">
          <span></span><span></span><span></span>
        </div>
      </div>

      <div id="globalMenuSp" class="">
        <ul id="manu" class="menu">
          <li>
            <a href="#home" target="_top" class="home">Home</a>
          </li>
          <li>
            <a href="#about" target="_top" class="about">About</a>
          </li>
          <li>
            <a href="#skills" target="_top" class="skills">Skills</a>
          </li>
          <li>
            <a href="#portfolio" target="_top" class="portfolio">Portfolio</a>
          </li>
        </ul>
      </div>
    </div>

  </header>
  <main>
    <section class="mv">
      <div class="mvWrapper">
        <img src="./img/cat01.jpg" alt="cat">
      </div>
    </section>
    <div class="sample" id="about">
      <div class="inner">
        <h2>About</h2>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde incidunt voluptate totam hic non commodi molestias vero ullam blanditiis vitae neque et minus nemo optio ex doloremque mollitia, tenetur cumque.
      </div>

    </div>
    <div class="sample" id="skills">
      <div class="inner">
        <h2>Skills</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde incidunt voluptate totam hic non commodi molestias vero ullam blanditiis vitae neque et minus nemo optio ex doloremque mollitia, tenetur cumque.
        </p>
        <ul class="cardWrapper">
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>HTML / CSS</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
              </p>
            </div>
          </li>
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>jQuery / JavaScript</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
              </p>
            </div>
          </li>
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>Sass / scss</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
              </p>
            </div>
          </li>
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>Git / SourceTree</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
              </p>
            </div>
          </li>
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>Responsive</h3>
              <p>
                レスポンシブ対応可能です。
              </p>
            </div>
          </li>
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>Visual Studio Code</h3>
              <p>
                ショートカット、プラグインを使い慣れています。
              </p>
            </div>
          </li>
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>photoshop / Illustrator</h3>
              <p>
                WEBデザイナーが作成したPSD等をjpg,png形式に書き出す作業程度に利用可能です。
              </p>
            </div>
          </li>
        </ul>
      </div>
      </div>

    <div class="sample" id="portfolio">
      <div class="inner">
        <h2>portfolio</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde incidunt voluptate totam hic non commodi molestias vero ullam blanditiis vitae neque et minus nemo optio ex doloremque mollitia, tenetur cumque.
        </p>
        <ul class="cardWrapper">
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>ToDoList Application</h3>
              <ul>
                <li>
                  利用スキル：Vue.js / firebase
                </li>
                <li>製作期間：2か月</li>
                <li>
                  特徴：ログイン機能 / 
                </li>
              </ul>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
              </p>
            </div>
          </li>
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>ToDoList Application</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
              </p>
            </div>
          </li>
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>Corporate Site</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
              </p>
            </div>
          </li>
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>ToDoList Application</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
              </p>
            </div>
          </li>
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>ToDoList Application</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
              </p>
            </div>
          </li>
        </ul>
      </div>

    </div>

  </main>

  <footer>
    <div class="topScroll">
      <a href="#"></a>
    </div>
    <div class="footerTop">
      <ul class="inner">
        <li>
          <a href="">aaa</a>
        </li>
        <li>
          <a href="">bbb</a>
        </li>
        <li>
          <a href="">ccc</a>
        </li>
        <li>
          <a href="">ddd</a>
        </li>
      </ul>
    </div>
    <div class="footerBottom">
      <p class="copyRight">&copy;copyRight 2020</p>
    </div>
  </footer>

  <script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/module.js"></script>
</body>
</html>

style.css

@import url(./reset.css);

.for_pc {
  display: none;
}
.for_sp {
  display: block;
}

img {
  width: 100%;
}

/*ハンバーガーメニュー*/

header {
  position: fixed;
  top: 0;
  z-index: 100;
  background-color: #20b2aa;
  width: 100%;
}

.headerInner {
  padding: 2% 5%;
}

.headerInner h1 {
  text-align: center;
  width: 100%;
  font-size: 10vw;
}

.headerInner h1 a {
  color: white;
}

#globalMenuSp {
  position: fixed;
  z-index: 4;
  top: 0;
  left: -100%;
  color: #000;
  text-align: center;
  transform: translateX(0);
  transition: transform 0.4s;
  width: 100%;
  padding-top:-100px;
  opacity: 0.9;
  padding-top: 17%;
}

#globalMenuSp ul {
  background: #20b2aa;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  display:inherit;
}

#globalMenuSp ul li {
  font-size: 1.1em;
  list-style-type: none;
  padding: 0;
  width: 100%;
  border-bottom: 1px solid #fff;
}

/* 最後はラインを描かない */
#globalMenuSp ul li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

#globalMenuSp ul li a {
  display: block;
  color: #fff;
  padding: 1em 0;
}

/* このクラスを、jQueryで付与・削除する */
#globalMenuSp.active {
  transform: translateX(100%);
}

/*ハンバーガー用CSS*/
.navToggle {
  display: block;
  position: fixed;    /* bodyに対しての絶対位置指定 */
  right: 13px;
  top: 12px;
  width: 42px;
  height: 40px;
  cursor: pointer;
  z-index: 101;
  text-align: center;
}

.navToggle span {
  display: block;
  position: absolute;    /* .navToggleに対して */
  width: 30px;
  /* border-bottom: solid 3px #20b2aa; */
  border-bottom: solid 3px #fff;
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
  left: 6px;
}

.navToggle span:nth-child(1) {
  top: 9px;
}

.navToggle span:nth-child(2) {
  top: 18px;
}

.navToggle span:nth-child(3) {
    top: 27px;
}

.navToggle span:nth-child(4) {
  border: none;
  color: #eee;
  font-size: 9px;
  font-weight: bold;
  top: 34px;
}

/*ハンバーガーメニュータップ後CSS*/
/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
  top: 18px;
  left: 6px;
  border-bottom: solid 3px #eee;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
  top: 18px;
  border-bottom: solid 3px #eee;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

.inner {
  padding: 0 5%;
}

h2 {
  font-size: 40px;
  margin-bottom: 20px;
}

h2::before {
  content: "";
  border-right: 10px solid #20b2aa;
  margin-right: 20px;
}

.mv {
  padding-top: 20%;
}

.sample {
  padding-top: 20%;
}

.cardText ul li {
  margin: 0 0;
}

.topScroll {
  width: 70px;
  height: 70px;
  background-color: #20b2aa;
  border-radius: 50%;
  position: fixed;
  bottom: 5%;
  right: 5%;
}

.topScroll a {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}

.topScroll a::before {
  content: "";
  border-left: 3px solid #fff;
  border-top: 3px solid #fff;
  width: 25px;
  height: 25px;

  transform: rotate(45deg);
  position: absolute;
  top: 30px;
  left: 21px;
}

.footerTop {
  padding: 2% 0;
  text-align: center;
  background-color: #20b2aa;
}



.footerTop ul li a {
  display: block;
  color: white;
  padding: 2% 0;
}

.footerTop ul li a:hover {
  background-color: aquamarine;
  transition: background-color 0.5s;
}

.footerBottom {
  padding: 5% 0;
  background: black;
  color: white;
}

.copyRight {
  display: block;
  text-align: center;
}















@media screen and (min-width: 568px) {
  .for_sp {
    display: none;
  }
  .for_pc {
    display: block;
  }

  #globalMenuSp {
    width: 100%;
    transform: translateY(0%);
    transition: none;
    left: 0;
    position: static;
    padding-top: 0;
  }

  #globalMenuSp ul {
    display: flex;
    /* width: 1080px; */
  }

  #globalMenuSp ul li {
    border-bottom: 5px solid #20b2aa;
  }

  #globalMenuSp ul li:hover {
    /* background-color: aquamarine;
    transition: background-color 0.5s; */
    border-bottom: 5px solid orange;
  }

  #globalMenuSp.active {
    transform: translateX(0);
  }

  .headerWrapper {
    display: flex;
    width: 1080px;
    margin: 0 auto;
  }

  .headerInner {
    padding: 0 0;
    /* width: 1080px; */
  }

  .headerInner h1 {
    text-align: left;
    font-size: 40px;
    margin-right: 150px;
  }

  .inner {
    width: 1080px;
    margin: 0 auto;
    padding: 0 0;
  }

  .mv {
    width: 100%;
    background-color: aliceblue;
    padding-top: 0;
  }

  .mvWrapper {
    width: 1080px;
    margin: 0 auto;
  }

  .mv img {
    max-width: 1080px;
    height: auto;
  }

  .sample {
    padding-top: 150px;
  }


  #skills {
    background-color: aliceblue;
  }

  .cardWrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .cardWrapper li {
    width: 500px;
    margin: 20px 0;

    margin-right: 80px;
  }

  .cardWrapper li:nth-child(2n) {
    margin-right: 0;
  }


  .footerTop ul {
    display: flex;
    justify-content: space-evenly;
  }

  .footerTop ul li {
    width: 100%;
  }

  .footerTop ul li a {
    display: block;
  }
}

module.js

$(function() {
  $('.navToggle').click(function() {
      $(this).toggleClass('active');
      if ($(this).hasClass('active')) {
          $('#globalMenuSp').addClass('active');
      } else {
          $('#globalMenuSp').removeClass('active');
      }        
  });
});

$('#manu a[href]').on('click', function(event) {
    $('.navToggle').trigger('click');
});

// smooth scroll
$(function(){
    // #で始まるリンクをクリックしたら実行されます
    $('a[href^="#"]').click(function() {
      // スクロールの速度
      var speed = 400; // ミリ秒で記述
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
    });
  });

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-24T10:51:23+09:00

Progate ～道場コース:中級編～　学び

はじめに

　ProgateのHTML & CSSをし始めて約一週間の初心者です。
本稿では、道場コースの中級編で、かなり悩んだところをピックし、それに対する自分なりの解決法を書いていきたいと思います！
解釈が本当に正しいとは限りませんので、また分かり次第訂正しようと思います。

学び1.レイアウトの仕方

慣れてないからだとは思いますが、レイアウトの仕方が分からなかったです笑
特に<div>にするところとか。
でも、レイアウトは以下のことを重視することで改善できました！

とにかく箱をイメージ

本稿で書く箱とは、<div>を使う場所のことです。

最初に箱を考えることで色々と整理しやすくなります。
その箱の作り方なんですが、コーディングしまくって慣れるのが一番早いと思います笑
自分も何回か作ることによってだいたいの箱のイメージができるようになりました！

ここに箱があったら、後のCSSファイルの編集がしやすくなりそう！
ここは別に箱にする必要はないな。とか

以下の図は、Progateの道場コース、中級編のトップ部分を作るときに、
私の考えた箱のイメージです

基本的に一番大きい箱から考えていきます
まずは、背景を配置する箱が必要なので、赤の箱をイメージ
次に、仕様書の指定から、1170pxの幅を持つオレンジの箱をイメージ
最後に、色、透明率が一緒であるため、まとめたら利点があると考え、黄色の箱をイメージ

そして、これらのイメージをHTMLファイルに反映するために、<div>を用いてコーディングします
index.html
<div class = "red">
  <div class = "orange">
    <div class = "yellow">
    <h1>見出し</h1>
    <p>説明文</p>
    </div>
  </div>
</div>
と、以上のようなクラス分けとなったわけです。

しかし、CSSの書き方次第では、このような箱をイメージした書き方をしなくてもレイアウトを作ることが可能です。
しかし、第三者から見ても分かりやすいという点で<div>要素は大事だと感じました

また、コーディングすると親要素と子要素の位置が分からなくなったりすることが多かったので、
borderプロパティをつけて頭の中を整理しつつコーディングすることが大切だと感じました

学び2.答えは一通りではない

道場コースの中級編を三回復習し、分かったことです

1回目は自分の書いたコードも模範解答とほとんど丸被りでした
しかし、webの書き方の流れを少しつかんで2回目、3回目に取りかかった結果、

「別に、ここはこーいう書き方もできるよな～」とか、
「ここの<div>要素は別にいらなくね？」

と感じるようになり、コードの書き方は色々あることにきずきました

学び1に書いたindex.htmlも、CSSの書き方次第では、このようにグループ分けしなくても、
完成のページになるということです
しかし、編集が容易で、構造の分かりやすいコードを作るには、先ほども述べたとうり<div>要素による
クラス分けは大切だと思います

学び3.floatの意味

レッスン一覧部分を作る際に、以下の図のレイアウトにする前提で、この課題にとりかかるのですがある疑問が生じました

模範解答のコードをそのまんまコピーして、ボーダーを引いて頭の中を
整理しようとしたその時です。

containerクラスがレイアウトどうりに包括されていないことに疑問を生じました
自分の考えでは、赤色の枠線が表れるという予想でしたが、見事に違いました笑
なぜ、タイトルだけに枠線があるのか本当に謎でした

しかし、これの原因はfloatプロパティにあったと分かりました！

その時に納得させられたサイトがこちらです↓
参考ページ: CSSの【float】についてちょっと本気出して説明してみた。

このページから、floatプロパティで指定したブロックは実際に浮いているということが分かりました。
だから、float:left;によって、containerクラス内包される要素が減ったの範囲が小さくなり、タイトルだけが内包されることになったのでしょう。

まとめ

　以上が個人的に学んだ部分です。

これからも日々精進してHTMLとCSSをしっかり学んでいきたいです！

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-24T04:57:14+09:00

初心者によるプログラミング学習ログ 247日目

100日チャレンジの247日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。

すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

247日目は、

おはようございます
247日目
・youtubeで、Jsのアコーディオンメニュー模写
・Udemyで、Js講座#早起きチャレンジ #駆け出しエンジニアと繋がりたい #100DaysOfCode
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) February 23, 2020

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-24T01:46:43+09:00

CSS 復習

はじめに

自分の中のCSSの知識がスカスカになっていたので、コーディングにおいて分からなかった箇所とその解決方法を書きます。

ヘッダーを横幅いっぱいに広げる

下記のようにwidthを１００％、もしくは100vwヘッダーが横幅いっぱいに広がります。私はこの部分を「width: 100vh;」と書いていたので横幅が広がりませんでした。「vh」とかくとボックスの縦の長さになるんですね...
header {
  position: fixed;
  width: 100%; #もしくは100vw
}
ブロックを中央に配置

marginプロパティにautoを指定するとブロックが中央に配置されます。またmarginが0pxの場合は省略して0にしてもOK。
.hoge{
margin: 0 auto;
}
固定したヘッダーにコンテンツを重ねないようにする。

ヘッダーにz-indexプロパティを指定する。
文字で説明すると難しいので画像で解説します。
・通常時

・下へスクロール　左側の赤いボックスがヘッダーと被ってしまいます。

・ヘッダーのz-indexプロパティに1を指定
これで下にスクロールしてもブロックの上に重なることはなくなりました。

まとめ

2日触らないだけでこんなにスカスカになるんだね...復習は大事。

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-24T00:06:48+09:00

新米フロントエンドエンジニアがお世話になってるサイトまとめ

はじめに

今月よりフロントエンドエンジニアとして働き始めたあくしおです。
業務で進めていく中で自分が普段参考にしていたり勉強で使用しているサイトを羅列していこうと思います。

「こんなもん参考にしてるうちはダメだぞ！」って声もあるかもしれませんが許してください

HTML編

 HTML Reference - A free guide

タグが非常に分かりやすくまとまっており（アルファベット順）画像の通り、そのタグがinline要素なのか
block要素なのかなどが視覚的に非常に分かりやすくなっています。

そのままタグをクリックするとそのタグについての説明が記載されています。
使い所やサンプルコードまで乗っているのでめちゃくちゃオススメのサイトです。
英語のサイトになるのですがChromeの拡張機能などで十分理解できるレベルに翻訳されるので英語アレルギーのある方もぜひ！

HTML入れ子チートシート

その名のとおりHTML5のそれぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールを視覚化して表示してくれます。

CSS編

 CSS Reference - A free guide

はい。先ほどのサイトの姉妹サイトです
HTML ReferenceのCSSバージョンだと思っていただければ問題ありません。
~~ここに長々と説明書くより元のサイト飛んでもらえれば一番分かりやすい~~

Sass

はい。CSSのメタ言語（CSSプリプロセッサ）Sassですね
読み方はサスなんでしょうか、サースなんでしょうか、今だに分かっていません。

いきなり脱線しましたがおすすめサイトはこちらになります。
SassMeister

このように入力したSassのコードをリアルタイムでCSSにコンパイルしてくれるツールです。 Sassが使える環境を構築しなくても、手軽にSassを試すことができます。

有名なので知っている方も多いかと思います。
即座にコンパイル結果が出力されるのでSassの扱いに慣れてないうちは特にいいのではと思います。

JavaScript編

勉強サイトばかりです。

現代のJavaScriptチュートリアル
その名の通りチュートリアルです。
基本的なことから高度なトピックまで扱われているので個人的にイチオシサイトです

しかしかなりのボリュームがあるので毎日少しずつやっていくのがいいと思います。
ちなみにオススメしている本人は終わってません。すいません

 js-primer

二つ目はこちら
著書は有名なazuさんです。2016年よりAngular日本ユーザー会の代表を務めておられるようです　（凄い...

こちらもJavaScriptを学び始める初心者の方にオススメです！
海外のチュートリアルを訳した感じの違和感？のある感じではなく最初から日本人の方が書かれているので自然に読めます！

終わりに

とりあえずパッと思いついたものだけですが羅列してみました。
他にもこんなサイトあるぞ、とかこのサイトもオススメや。みたいなのがあればコメントで教えてください！

それではみなさまお元気で

　 Tweet
Qiitaで続きを読む

20200224のCSSに関する記事は11件です。

Webサイト 固定幅の解除

はじめに

Stylusのインストール

スタイルのインストール

スタイル適用後のサイト

最後に

マークアップエンジニアがチェックしたいCSSリファレンスまとめ6つ

CSSリファレンス 日本語版

TAG INDEX

HTMLクイックリファレンス

MdN CSSリファレンス

CSSリファレンス 英語版

caniuse

CSS TRICKS

codrops

cssreference

まとめ

CSS:色の設定

CSS: CSSをHTMLに追加する

iPhoneのON,OFFスイッチのようなトグルスイッチを作ってみた

CSSを使ってトグルスイッチの作り方

早速だけどコード

構成

HTML

CSS

ポイント

最後に

【class名一覧】CSSでよく使うクラス名をたった１枚にまとめてみました。

ハンバーガーメニュー + α

Progate ～道場コース:中級編～ 学び

はじめに

学び1.レイアウトの仕方

学び2.答えは一通りではない

学び3.floatの意味

まとめ

初心者によるプログラミング学習ログ 247日目

100日チャレンジの247日目

CSS 復習

はじめに

ヘッダーを横幅いっぱいに広げる

ブロックを中央に配置

固定したヘッダーにコンテンツを重ねないようにする。

まとめ

新米フロントエンドエンジニア がお世話になってるサイトまとめ

はじめに

HTML編

CSS編

Sass

JavaScript編

終わりに

日付別

タグ一覧

Webサイト固定幅の解除

CSSリファレンス日本語版

CSSリファレンス英語版

Progate ～道場コース:中級編～　学び

新米フロントエンドエンジニアがお世話になってるサイトまとめ