What's New Qiita

20201112のHTMLに関する記事は12件です。

  • 投稿日：2020-11-12T22:31:21+09:00

ReactのformをBootstrapからMaterial UIに移行する際の注意点

Reactを勉強する際に、YouTubeやUdemyなど様々なところで超有益な動画がたくさんあります。特に英語での解説がされている動画をみていると、短い時間で綺麗なデザインで、かつ機能もある程度しっかり実装されていることが多いです。

このような短時間で綺麗なデザインのwebアプリを作っている動画では、React Bootstrapが使われていることが多いです。

ただ、「最近はMaterialデザイン流行ってそうだし、MaterialUIでも導入してみるか」と言うことで、後から作り替えるなんて方もいるかもしれません。

この記事ではそんな「BootstrapからMaterial UIに移行したい」と考えている方で、その中でも特に移行したい機能の一部にFormがあると言う方向けになっています。

TextFieldでハマった?

この記事で一番伝えたいのは、BootstrapからMaterial UIに移す時に、valueはしっかり設定しようと言うところなのですが、そこについて深掘ります。

以下のコードをご覧ください

PostForm.jsx
//一部省略してます
export default function PostForm() {
    const classes = useStyles();
    const [error, setError] = useState("")
    const [loading, setLoading] = useState(false)
    const history = useHistory()
    const titleRef = useRef()
    const contentRef = useRef()
    const { createPost, currentUser } = useAuth()

    const handleSubmit = async(e) => {
      e.preventDefault();

      setError("")
      setLoading(true)
      const authorName = currentUser.username
      createPost(titleRef.current.valur, contentRef.current.value, authorName)
      history.push("/")
      setError("投稿に失敗しました")
      setLoading(false)
    }

    return (
        <>
          {error && <Alert variant="danger">{error}</Alert>}
              <h2 className={classes.header}>新規投稿を作成</h2>
              <form className={classes.root} noValidate autoComplete="off" onSubmit={handleSubmit}>
                  <div className={classes.postFormBox}>
                    <TextField 
                      type="text" 
                      label="タイトル" 
                      ref={titleRef} 
                      className={classes.postFormTextField} 
                      multiline={true}
                      required
                    />
                    <br/>
                    <TextField 
                      type="text" 
                      label="内容" 
                      ref={contentRef} 
                      className={classes.postFormTextField} 
                      multiline={true}
                      rows={4} 
                      required 
                    />
                    <br/>
                    <Button 
                      variant="contained" 
                      type="submit" 
                      color="primary" 
                      disabled={loading}
                    >
                      投稿
                    </Button>
                  </div>
              </form>      
        </>
    )
}

タイトルと投稿内容を入力するためのTextFieldにsubmit用のボタン、さらにはボタンが押された時に関数handleSubmitが呼ばれ、handleSubmit内の処置が走ると言うシンプルなformのコンポーネントです。

これをみると一見、動きそうに見えますが、handleSubmitのcreatePostの処理でエラーがおきます。

どのようなエラーかと言うと、定義されていない値を参照してしまうエラーで、僕の場合はfirestoreを使っていたので、×
Unhandled Rejection (FirebaseError): Function DocumentReference.set() called with invalid data. Unsupported field value: undefinedと言うエラーが出ましたが、普通のJavaScriptならUncaught TypeError: Cannot read property ‘プロパティ名’ of undefinedと言うエラーになります。

これはundifinedの値を参照しようとしている時に起こります。

そうです、上記のコードではTextField、つまりinputのvalueがundifinedとして返されてしまいます。

なので、inputでvalueをせってしてあげる必要があります。

解決策

今回はReactを利用しているので、useStateでそれぞれのvalueのstateを作る必要があります。
上記の例で言うなら、タイトルにはtitle、内容にはcontentと言う名前でstateを持たせます。

さらにそれらのstateの変更の度にコンポーネントを再レンダリングするためのuseCallbackを使ったinputContentとinputTitleを加えたコードが以下になります。

PostForm.jsx
export default function PostForm() {
    const classes = useStyles();
    const [error, setError] = useState("")
    const [title, setTitle] = useState("")
    const [content, setContent] = useState("")
    const [loading, setLoading] = useState(false)
    const history = useHistory()
    const titleRef = useRef()
    const contentRef = useRef()
    const { createPost, currentUser } = useAuth()

    const inputTitle = useCallback((event) => {
      setTitle(event.target.value)
    }, [setTitle]);

    const inputContent = useCallback((event) => {
      setContent(event.target.value)
    }, [setContent]);

    const handleSubmit = async(e) => {
      e.preventDefault();

      setError("")
      setLoading(true)
      setTitle("")
      setContent("")
      const authorName = currentUser.username
      createPost(title, content, authorName)
      history.push("/")
      setError("投稿に失敗しました")
      setLoading(false)
    }

    return (
        <>
          {error && <Alert variant="danger">{error}</Alert>}
          <Card className={classes.card}>
            <CardContent>
              <h2 className={classes.header}>新規投稿を作成</h2>
              <form className={classes.root} noValidate autoComplete="off" onSubmit={handleSubmit}>
                  <div className={classes.postFormBox}>
                    <TextField 
                      type="text" 
                      label="タイトル" 
                      ref={titleRef} 
                      className={classes.postFormTextField} 
                      multiline={true}
                      required
                      //大切なのはここ!!valueをちゃんと設定する！！
                      value={title}
                      onChange={inputTitle}
                    />
                    <br/>
                    <TextField 
                      type="text" 
                      label="内容" 
                      ref={contentRef} 
                      className={classes.postFormTextField} 
                      multiline={true}
                      rows={4} 
                      required 
                      //大切なのはここ!!valueをちゃんと設定する！！
                      value={content}
                      onChange={inputContent}
                    />
                    <br/>
                    <Button 
                      variant="contained" 
                      type="submit" 
                      color="primary" 
                      style={{ width: "100%", marginTop: "15px" }}
                      disabled={loading}
                    >
                      投稿
                    </Button>
                  </div>
              </form>  
            </CardContent>
          </Card> 
          <Link to="/" className={classes.cancel}>
            キャンセル
          </Link>          
        </>
    )
}

まとめ

ちゃんとvalueを設定しよう

ついでですが、buttonのtypeは忘れずに設定しましょう。僕はsubmitを忘れて、エラーも出ずほんと数時間無駄にしました...w

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-12T21:43:34+09:00

CSSが反映されない時の対処法

CSSがブラウザに反映されない時はいくつか原因があります。
今回は、考えられる原因とその対処法をご紹介します。

反映されない原因

・キャッシュが残っている。
・CSSが機能していない。
・他の記述が優先されている。
・書いたCSSが確認できない。
・レイアウトのミス。

キャッシュが残っている場合

キャッシュ = 過去に閲覧したWebサイトのファイルデータ（htmlファイルやcssファイル、画像など）を
　　　　　　パソコンの容量として一時的に保存してからブラウザに再利用させる機能。
つまり、簡単にまとめると過去の閲覧情報を残すことで、次のサイト表示速度を上げるということです。

「解決方法」
スーパーリロードする。
スーパーリロード = キャッシュを破棄して最新のデータを読み込む。
・Windows：CtrlキーとF5キーを同時押し
・Mac ：commandキーとshiftキーとRキーを同時押し

CSSが機能していない

CSSがしっかり機能しているかは、デベロッパーツールで確認できます。
デベロッパーツール = 無料でWEBサイトの状態確認や検証ができる。

「確認方法」
ブラウザ上で右クリック→検証→反映されてないコードは黒線で囲んである所のように、⚠︎注意マークと横線が入っています。
スペルミスや全角スペースが入っていないか、記述が間違っていないかなどを確認しましょう。
スクリーンショット 2020-11-12 20.40.10.png
スクリーンショット 2020-11-12 20.47.54.png

他の記述が優先されていないか

先程と違って横線のみの場合は、書き方に間違いはないが、この記述は反映されていないということです。
原因はCSSの適用優先順位によるものです。

スクリーンショット 2020-11-12 20.40.51.png

「解決方法」
・上の方に同じCSSが反映されていることがある為、反映されているCSSを削除する。
・削除したくない場合は、CSSの優先順位を上げる。
→セレクタを長くする、もしくはIDで指定する。

<div id="menu"> // htmlでid指定。

#menu {         // cssは#から記述。
 color: red;   // セレクタ：menu プロパティ：color 値：red 
}

CSSが確認できない

書いたはずのCSSがデベロッパーツールで確認できない場合は、そもそもCSSが読み込まれていないか、セレクタ名を間違えている可能性があります。
・CSS読み込み　→　<link rel="stylesheet" href="sample.css">
・セレクタ名ミス　
　1.ID名の前に「#」をつけていない。
　2.class名の前に「.」をつけていない。
　3.つづりミス。

<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="sample.css">
    <title>CSS読み込み方法</title>
  </head>
  <body>
    <h1></h1>
  </body>
</html>

レイアウトのミス

上記の方法でも解決できないということは、記述ミスではなくCSSの仕様に問題があるかもしれません。
具体的には下記のことが考えられます。
・float、positionの解除忘れ。
・幅や高さの指定による問題。
・ブロック要素とインライン要素による問題。etc...

こちらの解決方法に関しては、この記事では省かせていただきます。
なお、下記のサイトにて詳しく解決方法が記載されていますのでご覧になってみてください。
対処法：(https://www.sejuku.net/blog/100015)

参考元はこちら
対処法：(https://www.sejuku.net/blog/100015)
セレクタ：(https://www.asobou.co.jp/blog/web/css-selectors#CSSHTMLCSS)
CSS読み込み：(https://techacademy.jp/magazine/9647)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-12T21:34:42+09:00

スライドパズルの制作

スライドパズルの制作

1〜24までの数字と数字の振られていないパネルで、数字の振られていないパネルにパネルを移動させて数字を並べていくゲームです。

<body onload="init()">
  <p>パネル</p>
  <table id="table"></table>
</body>

まず、body要素内にtable要素をidを指定して記述します。

  <script>
    let tiles = [];
    function init() {
      let table = document.getElementById("table");
      for(let i = 0; i < 5; i++) {
        let tr = document.createElement("tr");
        for(let j = 0; j < 5; j++) {
          let td = document.createElement("td");
          index = i * 5 + j;
          td.index = index;
          td.value = index;
          td.textContent = index == 0?"":index;
          td.className = "tile";
          td.onclick = clicked;
          tr.appendChild(td);
          tiles.push(td);
        }
        table.appendChild(tr);
      }
      for(let i = 0; i < 10000; i++) {
        clicked({target: {index: Math.floor(Math.random() * 25)}});
      }
    }

次にscript要素内に配列tilesをグローバル変数で指定して、init関数を作成します。
init関数内では5×5になるようにtable要素内に二次元配列を展開します。(下記の部分)「tiles.push(td)」の部分で作成したtd要素を配列tilesに追加していきます。

let table = document.getElementById("table");
    for(let i = 0; i < 5; i++) {
      let tr = document.createElement("tr");
      for(let j = 0; j < 5; j++) {
        let td = document.createElement("td");
        tr.appendChild(td);
        tiles.push(td);
      }
      table.appendChild(tr);
    }

td要素にはそれぞれプロパティを作成していきます。
indexには0〜24までの数字を代入していき、tdのindex要素とvalue要素に代入します。textContentには三項演算子でindexの値が0のときは空をそれ以外の値のときはindexを代入します。
クリックしたときに「clicked関数」が発火するようにします。

  index = i * 5 + j;
  td.index = index;
  td.value = index;
  td.textContent = index == 0?"":index;
  td.className = "tile";
  td.onclick = clicked;

※三項演算子
「index == 0?"":index」であれば、indexの値が0のときは?の後にある""を、それ以外のときは:の後にあるindexを代入する。

    function clicked(e) {
      let i = e.target.index;
      if(i % 5 !== 0 && tiles[i - 1].value === 0) {
        swap(i, i - 1);
      }
      if(i > 4 && tiles[i - 5].value === 0) {
        swap(i, i - 5);
      }
      if(i % 5 !== 4 && tiles[i + 1].value === 0) {
        swap(i, i + 1);
      }
      if(i < 20 && tiles[i + 5].value === 0) {
        swap(i, i + 5);
      }
    }

clicked関数は引数に「e」を指定します。「let i = e.target.index」でクリックしたtd要素（パネル）のindexの値を取得します。
空のパネルがクリックしたパネルの左、上、右、下、それぞれに配置されているときで処理を変えます。swap関数をそれぞれ行うようにします。(iがクリックしたパネルで「i - 1」がiの左、「i - 5」がiの上、「i + 1」がiの右、「i + 5」がiの下)

    function swap(x, y) {
      let i = tiles[x].value;
      tiles[x].value = tiles[y].value;
      tiles[x].textContent = tiles[y].textContent;
      tiles[y].value = i;
      tiles[y].textContent = i;
    }

swap関数はクリックしたパネルと空のパネルの配置を変更する関数です。valueプロバティとtextContentの値を交換します。

下記が全体のコードです。ファイルにコピーして実行すれば試せます。

<!DOCTYPE html>

<html>

<head>
  <meta charset="UTF-8">
  <title>SlidePuzzle</title>
  <style>
    table {
      border-collapse: collapse;
    }
    .tile {
      width: 100px;
      height: 100px;
      font-size: 70px;
      text-align: center;
      border: 1px solid black;
    }
  </style>
  <script>
    let tiles = [];
    function init() {
      let table = document.getElementById("table");
      for(let i = 0; i < 5; i++) {
        let tr = document.createElement("tr");
        for(let j = 0; j < 5; j++) {
          let td = document.createElement("td");
          let index = i * 5 + j;
          td.index = index;
          td.value = index;
          td.textContent = index == 0?"":index;
          td.className = "tile";
          td.onclick = clicked;
          tr.appendChild(td);
          tiles.push(td);
        }
        table.appendChild(tr);
      }
      for(let i = 0; i < 10000; i++) {
        clicked({target: {index: Math.floor(Math.random() * 25)}});
      }
    }

    function clicked(e) {
      let i = e.target.index;
      if(i % 5 !== 0 && tiles[i - 1].value === 0) {
        swap(i, i - 1);
      }
      if(i > 4 && tiles[i - 5].value === 0) {
        swap(i, i - 5);
      }
      if(i % 5 !== 4 && tiles[i + 1].value === 0) {
        swap(i, i + 1);
      }
      if(i < 20 && tiles[i + 5].value === 0) {
        swap(i, i + 5);
      }
    }

    function swap(x, y) {
      let i = tiles[x].value;
      tiles[x].value = tiles[y].value;
      tiles[x].textContent = tiles[y].textContent;
      tiles[y].value = i;
      tiles[y].textContent = i;
    }
  </script>
</head>

<body onload="init()">
  <p>パネル</p>
  <table id="table"></table>
</body>
</html>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-12T21:19:07+09:00

【初心者】タブ等で内容を出し分けるメニューの作り方

どうも7noteです。タブ等をクリックで内容を出し分ける作り方。

とくにこれ以上説明もないのでソースをどうぞ。

sample.gif

ソース

※jQueryを使用しています。jQueryってなんだ？？？って方はこちら

index.html
<ul class="tab">
  <li class="carrent" rel="item1">メニュー１</li>  <!-- 初期で選択状態のものにクラス「carrent」 -->
  <li rel="item2">メニュー２</li>    <!--rel属性を作り、任意の名前を設定 -->
</ul>
<div class="items">
  <div class="detail item1"><!-- 上のタブのrelと連動するようにクラス名を付ける（例：item1） -->
    <p>ここに1つ目のアイテムの内容を入れる</p>
    <p>ここに1つ目のアイテムの内容を入れる</p>
    <p>ここに1つ目のアイテムの内容を入れる</p>
  </div>
  <div class="detail item2"><!-- 同様にクラス名を付ける -->
    <p>ここに2つ目のアイテムの内容を入れる</p>
    <p>ここに2つ目のアイテムの内容を入れる</p>
    <p>ここに2つ目のアイテムの内容を入れる</p>
    <p>ここに2つ目のアイテムの内容を入れる</p>
  </div>
</div>
style.css
.tab {
  width: 300px;  /* 横幅を300pxに指定 */
  display: flex; /* タブを横並びの配置にする */
}

.tab li {
  color: #aaa;             /* 文字色をグレーに（選択されていない方の色） */
  font-size: 16px;         /* 適当な文字サイズを入力 */
  text-align: center;      /* 文字を中央揃えにする */
  width: 50%;              /* タブが2つなので半分ずつするため50%を指定 */
  border: 1px solid #000;  /* 1pxの枠線を作成 */
  padding: 5px 10px;       /* 余白を指定 */
  cursor: pointer;         /* マウスカーソルが乗った時?の形にする */
}

.tab li.carrent {
  color: #fff;             /* 選択されているときは文字色を白 */
  font-weight: bold;       /* 選択されているときは太文字 */
  background: #777;        /* 選択されているときは背景色をグレー */
}

.items .detail {
  font-size: 14px;         /* 文字サイズを14pxに指定 */
  width: 300px;            /* 横幅を300pxに指定 */
  color: #fff;             /* 文字色を白に指定 */
  background: #000;        /* 背景色を黒に指定 */
  box-sizing: border-box;  /* 余白の計算を簡単にする */
  padding: 10px 20px;      /* 余白を指定 */
  display: none;           /* ページ読み込み時は非表示 */
}
script.js
$('.item1').show();                      // 初期で見せる箇所を表示
$('.tab li').on('click',function () {    // どれかのタブがクリックされた時

  /* タブの処理 */
  $('.tab li').removeClass('carrent'); // タブについているクラス「carrent」を削除
  $(this).addClass('carrent');         // クリックしたタブを選択状態にするためクラス「carrent」を追加

  /* itemの処理 */
  $('.detail').hide();                 // 一度詳細を全ての「.detail」を非表示にする
  var targ = $(this).attr('rel');      // クリックしたタブのrel属性の値を取得
  $('.' + targ).fadeIn();              // 取得したrel情報と同じクラスをもつitemを表示

});

解説

今回の仕様はタブと表示内容を切り離して作成したので、離れた場所やサイドバーにメニューを配置したい場合でも利用が可能です。

「タブのほうにrel属性」、「要素の方にクラス名」をそれぞれ同じ名前のものを設定して紐づけておくことで、表示することができます。

クラスや表示の切り換えはシンプルな構造で、一度全部非表示（クラス削除）してから、任意のものだけ表示（クラスを付与）することで切り換え処理を行なっています。

CSSはほぼ体裁を整えるだけのものなので今回はあまり解説するほどのポイントはありません。

まとめ

見た目がタブでなくても使える方法なので、様々なところに応用できるかと思います。

余分なdiv要素を減らしたかったので、2箇所にwidth:300px;を指定していますが、このデザインであれば2つをくくる親要素を作成して、その親要素にwidthを指定する方が最善かも。
デザインに合わせて修正してお使いください。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-12T19:58:32+09:00

wordpressで作成したHPのテーブル内の改行をきれいにする方法

解決したい課題

以下のように表示されており､汚い｡

・仕事の範囲が不明確な場合や変更が多く発生しても周囲と良好な
コミュニケーションを取れる

以下のように､改行された先頭文字は"・"の一文字を開けて(字下げして)表示されてほしい｡かつ､固定ではなくてサイズによって可変にしたい｡

・仕事の範囲が不明確な場合や変更が多く発生しても周囲と良好な
　コミュニケーションを取れる

結論

"・"はちょっと太くなっちゃいますが､<ul>タグを使用すれば良い｡

  • 仕事の範囲が不明確な場合や変更が多く発生しても周囲と良好なコミュニケーションを取れる

悩み抜いた過程

どのファイルを編集するの？

そもそも､wordpressのcssは複数箇所に分かれているため初心者は迷う｡｡｡
wordpressでのhtmlとcssの関係､どこを編集すればよいのかはこちら

そのファイルのどこをどう編集するの？

ここが今回の難関｡
テーブル内であることを無視すれば､以下のような方法で解決可能｡
・【CSS】2行目以降を1文字下げる［text-indent］の使い方。
https://on-ze.com/archives/323

・【css】文章中に改行がある時に、行頭を揃える小ワザ
https://nodoame.net/archives/1888

→ただ､これだと2行目移行がすべて1文字下がっちゃうんです､､､｡今回は2行目だけ("・"から続く文章だけ)下げたいんです｡｡｡

テーブルの中身じゃなければそれぞれ<p>タグで囲ってやったりすればいいのですが､今回はテーブルの中身なんですよ｡｡｡
やってる人全然いなくて困りました｡

発想を変えてみる

ここまでは､"2行目をどうずらすか？"という発想で調査していた｡
発想を変えて､"どうきれいに箇条書するか？"と考えてみた｡

すると､､､<ul>タグと<li>タグで表記しちゃえばテーブルの中だろうときれいに表示されてくれるのでは？
と気づく｡

<p class="s_title">経験・スキル</p>
<table>
<tbody>
<tr><th>求めるスキル</th><td class="txt" data-label="内容">
<ul>
<li>コミュニケーション能力
<li>事務処理能力
</ul>
【歓迎スキル】
<ul>
<li>秘書経験
<li>秘書検定取得
</ul>
</td></tr>
<tr><th>求める人物像</th><td class="txt" data-label="内容">
<ul>
<li>仕事の範囲が不明確な場合や変更が多く発生しても周囲と良好なコミュニケーションを取れる
~以下略~

小言

そもそも"・"を直打ちするのがちょっとナンセンスなのかも｡
<ul>と<li>を使いましょう｡

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-12T19:43:29+09:00

wordpressでのhtmlとcssの関係_どこを編集すればいいの？

解決したい課題

wordpressのhtmlとcssを修正したいが､どこを編集すればいいのかわからなかった｡複数箇所に分かれているため初心者は迷う｡｡｡

結論

各投稿のcssはstyle.cssをincludeしているはずで､以下のページを編集する｡(includeしてない場合はどうするんだろう？)
外観>テーマエディタ
これで､Stylesheet(style.css)の編集画面にたどり着く

固定ページのcssは､各ページごとにカスタムCSSが設定されているため､固定ページ下部の"カスタムCSS"欄を編集する｡

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-12T19:28:01+09:00

【もう挫折しない】Progate HTML＆CSS 道場コース攻略【初級編】

はじめに

この記事は駆け出しエンジニアの最初の難関であるProgateの道場コースを今まさに挫折しかけている人に向け、ひとつひとつ実践と解説を交え、一緒に攻略しようという趣旨のものとなります。

できるようになること

道場コースHTML & CSS初級編をクリアできます。

全体像の確認

まずは全体像を把握しましょう。
スクリーンショット 2020-10-20 5.46.44.png

とりあえず大きく３つのdiv要素に分けてみましょう。
スクリーンショット 2020-10-20 5.46..png

header、main、footerに分けることができました。
道場コースの手順通り、最初はheaderから攻めていくことにします。

headar

headarを各div要素ごとに分けるとこんな感じです。
スクリーンショット 2020-10-23 20.32.34.png

index.html
<div class="header">
  <div class="header-logo"></div>
  <div class="header-list"></div>
</div>

header-list内はul要素で構成されています。
そこに文字を入れちゃいましょう。

index.html
<div class="header">
  <div class="header-logo">Progate</div>
  <div class="header-list">
    <ul>
      <li>プログラミングとは</li>
      <li>学べるレッスン</li>
      <li>お問い合わせ</li>
    </ul>
  </div>
</div>

現状はこんな感じです。
スクリーンショット 2020-10-20 7.11.50.png

※Progateではデフォルトでli要素に対しlist-style: none;が適用されているので頭の「・」は無くなっています。本来は手動でlist-style: none;を付ける必要があります。

ではCSSを付けていきましょう。
まずはheaderクラスの背景色を付けます。

stylesheet.css
.header {
  background-color: #26d0c9;
}

スクリーンショット 2020-10-20 7.25.44.png

divはブロック要素なのでwidth（幅）とheight(高さ)を指定しなければ、
・幅は親要素のwidth(ここではbody)に依存します。
・高さは含まれる内容の高さ分追加されます。

では次に要素を横並びにしましょう。
ここで初級道場コースの番人こと、「float」が登場します。

「float」の機能を簡単に説明します。
float: left; 　 ＝ 　 左に寄せる
float: right;　＝ 　 右に寄せる

まずheader-logoに対してfloat: left;を適応させましょう。

stylesheet.css
.header {
  background-color: #26d0c9;
}

.header-logo {
  float: left;
}

すると
スクリーンショット 2020-10-20 8.40.55.png

「ん？なんで「Progate」と「プログラミングとは」が横並びになってるの？？」
と思った方がいるかも知れません。

float: left; は「左に寄せる」ですが、正確には「浮かせて左に寄せる」です。

ではこれの見る角度を変えて見ましょうスクリーンショット 2020-10-20 8.56.3.png

header-logoに対してfloat: left;を適応させると・・・
スクリーンショット 2020-10-20 8.5..png

header-logoが浮きました！
しかしこのままでは文字が被ってしまうので自動的に文字が移動します。スクリーンショット 2020-10-20 8...png

ではfloatの仕様がわかったところで次はheader-listのそれぞれのli要素にfloat: left; を適用させましょう。

stylesheet.css
.header {
  background-color: #26d0c9;
}

.header-logo {
  float: left;
}

.header-list li {
  float: left;
}

これでheader-list内のそれぞれのli要素が上から順番に浮いて左に寄るはずです。
スクリーンショット 2020-10-20 10.15.30.png

できました！

・・・が背景色が消えてしまいました。

これはブロック要素の中身が無ければ高さが無くなるという性質が原因となっています。
スクリーンショット 2020-10-20 8..png
スクリーンショット 2020-10-20 .png

仕様書の指定通り、header-logoに高さを指定して上げましょう。

stylesheet.css
.header {
  background-color: #26d0c9;
  height: 90px;
}

.header-logo {
  float: left;
}

.header-list li {
  float: left;
}

スクリーンショット 2020-10-20 11.12.41.png

いい感じですね！
続いてheader内のスタイルを整えて行きましょう。

まずはmarginを使って間隔を空けます。

stylesheet.css
.header {
  background-color: #26d0c9;
  height: 90px;
}

.header-logo {
  float: left;
  margin: 20px 40px;
}

.header-list li {
  float: left;
  margin: 33px 20px;
}

スクリーンショット 2020-10-25 16.02.58.png

間隔を開ける方法としてmarginとpaddingがあります。
最初はこれがどっちがどっちか分からなくなるものなので、ここで詳しく解説しておきます。

header-logoを例にとってみましょう
スクリーンショット 2020-10-25 16.49.22.png

わかりやすくする為header-logoに対しborderを指定します。

stylesheet.css
.header-logo {
  float: left;
  margin: 20px 40px;
  border: 1px solid black;
}

スクリーンショット 2020-10-25 16.54.04.png

では、まずはmarginを変更してみます。
上下のmarginを40pxにします。

stylesheet.css
.header-logo {
  float: left;
  margin: 40px 40px;
  border: 1px solid black;
}

スクリーンショット 2020-10-25 17.04.57.png

するとボーダーラインごとheader-logoが動きましたね。

続いてpaddingを指定してみます。

stylesheet.css
.header-logo {
  float: left;
  margin: 40px 40px;
  padding: 10px;
  border: 1px solid black;
}

スクリーンショット 2020-10-25 17.06.14.png

今度はボーダラインの内側の間隔が空いたのがわかります。

要は
marginはボーダーラインの外側に間隔を空ける
paddingはボーダーラインの内側に間隔を空ける
ということになります。
スクリーンショット 2020-10-25 17.14.42.png

ではheaderを完成させましょう。
あとはheader-logoのfont-sizeとテキストの色を変えればOKです。

stylesheet.css
.header {
  background-color: #26d0c9;
  height: 90px;
  color: #fff; /*親要素に指定すれば子要素にも適用されます*/
}

.header-logo {
  float: left;
  margin: 20px 40px;
  font-size: 36px;
}

.header-list li {
  float: left;
  margin: 33px 20px;
}

スクリーンショット 2020-10-25 17.42.48.png

これでheaderの完成です！

main

次にmainを作っていきます。
mainはたくさんの要素がありますが、ひとつひとつ落ち着いて見ていきましょう。

とりあえず、mainを大きく3つのdiv要素に分けてみます。
スクリーンショット 2020-10-26 9.22.40.png

index.html
<div class="header">
  <div class="header-logo">Progate</div>
  <div class="header-list">
    <ul>
      <li>プログラミングとは</li>
      <li>学べるレッスン</li>
      <li>お問い合わせ</li>
    </ul>
  </div>
</div>
<!-- ↓ここから -->
<div class="main">
  <div class="copy-container"></div>
  <div class="contents"></div>
  <div class="contact-form"></div>
</div>

さて、ではcopy-containerから攻めて行きます。
ここは簡単です、各テキストはｈ1、ｈ２タグで構成されています。
スクリーンショット 2020-10-26 9.44.11.png

そして、「 . 」のみが赤色になっているので、あとでスタイルを付ける為にspanタグで囲ってあげましょう

index.html
<div class="copy-container">
   <h1>HELLO WORLD<span>.</span></h1>
   <h2>プログラミングの世界へようこそ</h2>
</div>

スクリーンショット 2020-10-26 9.59.41.png

現状こんな感じです。

次に仕様書の通りスタイルを付けていきます

stylesheet.css
.header-list li {
  float: left;
  margin: 33px 20px;
}

/* ↓ここから */
.main {
  padding: 100px 80px;
}

.copy-container h1 {
  font-size: 140px;
}

.copy-container h2 {
  font-size: 60px;
}

.copy-container span {
  color: #ff4a4a
}

スクリーンショット 2020-10-26 10.21.15.png

こんな感じになったと思います。
mainのpadding-bottomは最終的に100pxになるので今のうちに付けています。

ではcontentsに移ります。
ここはまたfloatが入ってくるので少しややこしく感じるかも知れません。

とりあえず、contentsを各要素に分けてみます。
スクリーンショット 2020-10-26 10.33.19.png

index.html
<div class="main">
  <div class="copy-container">
    <h1>HELLO WORLD<span>.</span></h1>
    <h2>プログラミングの世界へようこそ</h2>
  </div>
  <!-- ↓ここから -->
  <div class="contents">
    <h3 class="section-title"></h3>
    <!-- item1 -->
    <div class="contents-item">
      <img src="">
      <p></p>
    </div>
    <!-- item2 -->
    <div class="contents-item">
      <img src="">
      <p></p>
    </div>
    <!-- item3 -->
    <div class="contents-item">
      <img src="">
      <p></p>
    </div>
    <!-- item4 -->
    <div class="contents-item">
      <img src="">
      <p></p>
    </div>
  </div>

急に記述が長くなるとどれがどれだか分からなくなりますよねｗ
落ち着いてコメントアウトを活用しつつ、少しでも見やすくしましょう。

さぁ、雛形はできたので、あとは必要な項目を入れていくだけです。
画像のURLはProgateのヒントからコピペしましょう。

index.html
  <div class="contents">
    <h3 class="section-title">学べるレッスン</h3>
    <!-- item1 -->
    <div class="contents-item">
      <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
      <p>HTML & CSS</p>
    </div>
    <!-- item2 -->
    <div class="contents-item">
      <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
      <p>PHP</p>
    </div>
    <!-- item3 -->
    <div class="contents-item">
      <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
      <p>Ruby</p>
    </div>
    <!-- item4 -->
    <div class="contents-item">
      <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
      <p>Swift</p>
    </div>
  </div>

スクリーンショット 2020-10-26 11.28.08.png

材料は揃いました。
スタイルを付けて行きましょう。

まず、横並びから片付けましょう。
flaotの概念を理解したあなたにはもう解りますよね？

stylesheet.css
.copy-container span {
  color: #ff4a4a
}
/* ↓ここから */
.contents-item {
  float: left;
}

スクリーンショット 2020-10-26 11.46.06.png

できました！

しかし、flaotの処理はこれで終わりではありません。
確かflaotで浮いた分だけ、親要素の高さ(height)は消えてしまうのでしたね？
現状、親要素contentsの高さはcontentsの中にあるsection-titleの高さ分しかありません。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3633353835322f36643430363537652d343666312d646161392d353334642d6364383431373364653630622e706e67.png

このままだと次の要素を追加してもレイアウトが崩れてしまいます。
スクリーンショット 2020-10-26 12.00.14.png

　　　　　　　　　　　　　　↓角度をかえると・・・
スクリーンショット 2020-10-26 12.07.48.png

Progateの仕様書通り、contentsのheightを500pxにしてあげましょう。

stylesheet.css
.copy-container span {
  color: #ff4a4a
}

.contents {
  height: 500px;
}

.contents-item {
  float: left;
}

スクリーンショット 2020-10-26 12.57.07.png

OKです！

さぁ、ここまでできたらもう少しです。
あとは仕様書通りにスタイルを付けましょう。

stylesheet.css
.contents {
  height: 500px;
}

.contents-item {
  float: left;
}

.section-title {
  font-size: 28px;
  border-bottom: 2px solid #dee7ec;
  /* ↓paddingとmarginを上手く使い分ける必要があります */
  padding-bottom: 15px;
  margin: 100px 0 50px;
}

.contents-item {
  margin-right: 40px;
}

.contents-item p {
  font-size: 24px;
  margin-top: 30px;
}

スクリーンショット 2020-10-26 13.47.38.png

いいですね！
ここまで来るとあとは折り返しです！
頑張りましょう！

main部の最後contact-formに入ります。
例のごとく、各要素ごとに分けていきます。
スクリーンショット 2020-10-26 13.58.14.png

index.html
  <!-- item4 -->
  <div class="contents-item">
    <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
    <p>Swift</p>
  </div>
</div>
 <!-- ↓ここから -->
<div class="contact-form">
  <h3 class="section-title">お問い合わせ</h3>
  <p>メールアドレス（必須）</p>
  <input type="text">
  <p>お問い合わせ内容（必須）</p>
  <textarea></textarea>
  <p>※必須項目は必ずご入力ください</p>
  <input type="submit" value="送信" class="contact-submit">
</div>

深く考えずにポンポンと置いていけば良いですね。
送信ボタンにはcontact-submitクラスを付けてあげましょう。

現状はこんな感じです。
スクリーンショット 2020-10-26 14.22.57.png

スタイルに関しても仕様書通りにやればいけそうです
section-titleには前にスタイルを付けているので触る必要はないですね。

stylesheet.css
.contents-item p {
  font-size: 24px;
  margin-top: 30px;
}
/* ↓ここから */
input, textarea {
  width: 400px;
  padding: 20px;
  margin: 10px 0 30px;
  border: 1px solid #dee4ec;
}

.contact-submit {
  font-size: 18px;
  background-color: #dee7ec;
  color: #889eab;
}

image.png

これでmainは終わりです！
次でいよいよラストです！

footer

footerの構成はこんな感じです。
ここでもfloatを使う必要がありそうですね。
image.png

とりあえずHTMLを置いて行きます。

index.html
        <p>※必須項目は必ずご入力ください</p>
        <input type="submit" value="送信" class="contact-submit">
      </div>
    </div>
    <!-- ↓ここから -->
    <div class="footer">
      <div class="footer-logo">Progate</div>
      <div class="footer-list">
        <ul>
          <li>会社概要</li>
          <li>採用</li>
          <li>お問い合わせ</li>
        </ul>
      </div>

そして、float以外のスタイルは付けてしまいますね。

stylesheet.css
.contact-submit {
  font-size: 18px;
  background-color: #dee7ec;
  color: #889eab;
}
/* ↓ここから */
.footer {
  color: #fff;
  height: 120px;
  background-color: #2f5167;
  padding: 40px;
}

.footer-logo {
  font-size: 32px;
}

.footer-list {

}

.footer-list li {
  margin-bottom: 20px;
}

こんな感じになっているはずです。
image.png

ここからやりたいことはfooter-listを右に持っていくことですね。
ではfooter-listにfloat: right;を適用させてやれば良さそうです。

stylesheet.css
.footer {
  color: #fff;
  height: 120px;
  background-color: #2f5167;
  padding: 40px;
}

.footer-logo {
  font-size: 32px;
}

.footer-list {
  float: right;
}

.footer-list li {
  margin-bottom: 20px;
}

　　　　　　　　　　　　　　　　　すると・・・
image.png
header-listの位置が少し下にズレていますね。
これだけでは足りないようです。

header-logoにもfloatを適用させましょう。

stylesheet.css
.footer-logo {
  font-size: 32px;
  float: left;
}

.footer-list {
  float: right;
}

.footer-list li {
  margin-bottom: 20px;
}

スクリーンショット 2020-11-12 7.58.13.png

完成！

ここまでお疲れ様でした！

良いProgateライフを！！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-12T17:24:18+09:00

HTML rel / href / srcとは何か

プロローグ

何となくでHTMLを書いていたのですが（よくない）、そういえばsrc,href,relってよく使うけど、ちゃんと説明できないなと思い、今回まとめてみました。

何となく書いて、何となく使えてるから、こういうもんだよねって１つ１つのタグや属性を適当にあしらっていてはいけないです。
特に、私は初心者なので、わからないことはすぐ調べて、解釈して自分の言葉で発信することが大切なのかなと思います。

ということで、今回はHTMLで使う属性【src / href / rel】についてまとめていきます。

rel属性について

rel属性に関して、まずlinkタグを知る必要があります。
こちらに詳しく書いてありますので、ご参考に。

HTMLのlinkタグとは？基本的な書き方とrel属性まとめ

：記載したリンク先（href)と現在のページとの関係性を説明する属性

外部ファイルと、現在のページの接続をしてくれるのです。
linkタグ以外にも、aタグ、areaタグに使用できます。

Q:書かないと、どうなる？
接続ができなくなるので、設定したものが無効になります。

例

qiita.html
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Document</title>
    <link href="slideshow.css"> 　#hrefだけ
</head>

スクリーンショット 2020-11-12 16.43.28.png

Q:stylesheetをよく使うけど、他にどんなのがあるの？

下記の属性値があります。
バージョンによって異なると思いますので、詳細は調べてみてください。
また、linkタグ、aタグ、areaタグによって、使用できるできないもあります。

１つ１つ丁寧に解説してくださっている記事がございました。
[HTML] Aタグにおけるrel属性の意味と効果について

属性値　　　　 意味　　　　　
alternate　 現在のhtmlを置換える。代替文書。
author 　 著者情報。
help リンク先が現在のページの内容を説明する。
icon 　 現在のページに記載するアイコン。
license 著作権にかんするリンクをしていする。
next 　　　　 現在のページの続きのリンクを表す。
nofollow リンク先が現在のページと関係ないことを示す。
prefetch リンク先を事前に読み取る。
prev 現在のページの前回のリンクを表す。
search 現在のページを検索するためのリンクを表す。
styleshee スタイルシート。
tag 関連するタグ。

他にも色々ありました。

href属性について

：外部のリンク先を指定する属性のこと。 他のリンク先へのハイパーリンクを指定する属性。

Q:ハイパーリンクってなに？

ハイパーリンクとは指定範囲のテキストまたは画像を他のページなどへリンクさせ、その部分を選択することでそのリンク先へ移動できるようにする要素。

通常は単にリンクと呼び、ハイパーリンクをつけることをリンクを張るという

(参照：wiki HTML/ハイパーリンク）

src属性について

：画像や別のページ（例えば、同じファイルにあるqiita.jsとか）の情報をもってくる属性。現在のページに埋め込む。

Q:hrefとsrcの違いってなに？
=>私のhrefとsrcの違いのざっくりイメージ
・htefは、現在のページからリンク先へ移動する。別ページの情報を取ってくる。
現在のページ→href→参照元

・srcは、現在のページの元になるデータやページを呼び込む。取り寄せる。
現在のページ←src←参照元

なのかなと思いました。
間違えてたらご教授お願い致します?‍♂️

参考記事

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-12T15:52:58+09:00

初心者への問題｜htmlでコンテンツを非表示にする方法３つを考える

プロローグ

先日にあった、あるサイトの更新の話

クライアント：「期間限定キャンペーンの部分、もういらないから消してください」

私：（消すのはいいけど、絶対にまた同じ様なキャンペーン内容を表示させるよな...）

問題：非表示にする最適解は？

クライアントは「消せ」というが、サイト管理者として完全に消したくない場合に（該当部を非表示で留めておきたい場合に）、どの手段を取るのが最適か？

なお、htmlファイル単体で更新を行うものとします。

選択肢

  • A）該当部にstyle="display:none"を追加
  • B）該当部にstyle="visibility:hidden"を追加
  • C）該当部をコメントアウト <!-- -->

上記はいずれもコンテンツを見た目上では非表示にすることができます（ソースコード上には残っています）

検討

参考サイト１） display:none と visibility:hidden の違い

【CSS】display:noneとvisibility:hiddenの違いと非表示にする際の注意点
* 要約すると「display:none と visibility:hiddenの違いは、要素をなくすか非表示にだけするか」ということ

参考サイト2） 「display:none」はSEO効果を下げる！？

「display:none」はSEO効果を下げる／Google発言、長い論争に決着
* 要約すると、例えばウィンドウサイズで（メディアクエリで）コンテンツの表示/非表示を切り替えるために「display:none」を使うのは構わないが、常時に（どんな場合でも）「display:none」しているようなコンテンツがあると、SEO的に不利でっせ、ということ

参考サイト3） コメントアウト部をGoogleは完全に無視する

コメントアウトの便利な使い方と注意点についてご紹介します
* 要約すると「コメントアウト部をGoogleは完全に無視する」「ただし、コメントアウト部が多ければ、ファイル量も増えるし、レスポンスの観点からSEO的には不利になるんちゃうかな。不要なコメントアウトは消しましょう」ということ

結論

今回は「C）該当部をコメントアウトする」を選択しました。

A）じゃない理由

  • A）該当部にstyle="display:none"を追加
  • クライアントの指示があるまで該当部は、ずっと非表示にしているので、SEO的に良くない為。

B）じゃない理由

  • B）該当部にstyle="visibility:hidden"を追加
  • 要素自体が消えるわけではなく、サイトのデザイン的に不自然な空白が生まれる為。

C）である理由

  • C）該当部をコメントアウト
  • 非表示にしたかったのは、画像１つとテキスト数行だけ。レスポンスに影響があるようなものではないと思うので。

本稿は以上です。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-12T11:45:43+09:00

超個人メモ htmlファイルで`<`や`>`を文字列として表示したい時の話

  • <を文字列として表示したいときは下記のように記載することで表示する事ができる。

    &lt;

  • >を文字列として表示したいときは下記のように記載することで表示する事ができる。

    &gt;

  • その他にhtmlで特殊文字列として扱われているものを文字列として表示したいときは下記サイトのコード表を参考にすると良いかもしれない。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-12T02:41:05+09:00

webサイト制作を行う際、事前に策定すべき事項

HTMLとCSSを使用したWebサイト制作を行う際、事前に策定する事項をまとめました。

1. 対象ブラウザを決める

動作を保証するブラウザを取り決める。
基本的にはシェア率を元に考えていく。

ブラウザの国内シェア率：
Browser Market Share Japan | StatCounter Global Stats

例

下記ブラウザの各最新版に対応する。

  • Google Chrome
  • Safari
  • Firefox
  • Microsoft Edge

IE10以前について

サポートが切れているため対応しない。

IE11について

基本的には対応しないが、ターゲットユーザーによっては配慮が必要になる。

参考記事：
IEでWebサイトが崩れる？大手サイトも切り離したIEとどう付き合うか | Digital Solution Media

2. 対象OSを決める

動作を保証するOSを取り決める。
基本的にはシェア率を元に考えていく。

Windowsのバージョン国内シェア率：
Desktop Windows Version Market Share Japan | StatCounter Global Stats

macOSのバージョン国内シェア率：
Desktop macOS Version Market Share Japan | StatCounter Global Stats

iOSのバージョン国内シェア率：
Mobile & Tablet iOS Version Market Share Japan | StatCounter Global Stats

Androidのバージョン国内シェア率：
Mobile & Tablet Android Version Market Share Japan | StatCounter Global Stats

例

  • Windows：10.x 以降に対応
  • macOS：10.13 以降に対応
  • iOS：12.x 以降に対応
  • Android：6.x 以降に対応

3. レスポンシブ対応について

ブレイクポイントを検討する

スタイル切り替えの基準点となるブレイクポイントを取り決める。
基本的にはシェア率を元に考えていく。

デバイス幅の国内シェア率：
Screen Resolution Stats Japan | StatCounter Global Stats

「デスクトップ vs モバイル vs タブレット」の国内シェア率：
Desktop vs Mobile vs Tablet Market Share Japan | StatCounter Global Stats

参考記事：

メディアクエリの記述方法

CSSで記述

.foo { display: none; }

@media (min-width: 769px) {
  .foo { display: block; }
}

SCSSで記述 & メディアクエリ用Mixinの sass-mq を使用

$mq-breakpoints: (
  desktop: 769px
);

@import 'mq';

.foo {
  display: none;

  @include mq(desktop) {
    display: block;
  }
}

上記のようにセレクタベースでメディアクエリを記述した場合、生成されるCSS内で同じサイズのメディアクエリが散らばってしまうため、CSS MQPacker などのツールを利用してまとめる必要がある。

From:

@media (min-width: 769px) {
  .foo { display: block; }
}
@media (min-width: 769px) {
  .bar { display: block; }
}
@media (min-width: 769px) {
  .baz { display: block; }
}

To:

@media (min-width: 769px) {
  .foo { display: block; }
  .bar { display: block; }
  .baz { display: block; }
}

4. その他策定事項

全体

例 候補
パッケージマネージャー Yarn、npm
タスクランナー Gulp、npm scripts
コードの命名規則 BEMの命名規則を利用する ケバブケース(ab-cd)
スネークケース(ab_cd)
キャメルケース(abCd)
パスカルケース(AbCd)
ファイルの命名規則 小文字のアルファベット、数字、ハイフンで構成する
インデント 半角スペース2つ
Retina対応 モバイルデバイスのみ対応する
アクセシビリティ方針 WCAG 2.0のレベルAに準拠する
参考情報：
アクセシビリティ指針 ｜ ソフトバンク
ウェブアクセシビリティ方針 - 企業情報 - ヤフー株式会社
Web Content Accessibility Guidelines - Wikipedia
WCAG 2.0 達成方法集

CSS

例 候補
メタ言語 Sass(SCSS)
LESS
Stylus
CSS設計 OOCSSとSMACSSを組み合わせて使用する BEM
OOCSS
SMACSS
FLOCSS
スタイルガイドジェネレーター Fractal
kss-node
SC5 Style Guide Generator
Linter Stylelint
CSSLint(古い)
コードフォーマッター Prettier
CSScomb
CSSリセット ベースにNormalize.cssを使用し、部分的に手動でリセットする
参考記事：
最近のWebページ用にCSSリセットの効果的な使い方、Normalize CSSとReset CSSそれぞれの利点を取り入れる ｜ コリス 		Normalize.css
Eric Meyer’s CSS Reset
Reboot.css
sanitize.css
値の単位 emとremを使用し、pxは使用しない。また、0には単位をつけない。
NG：margin: 0px
OK：margin: 0
ベンダープレフィックス 手動では付与せず、autoprefixerを使用する
IDセレクタ 詳細度が上がるため使用しない
!important 原則禁止とするが、mb-10 などのユーティリティクラスにおいては許可する
ネスト 極力浅くする。3回までは許容する
NG：.foo .bar .baz .qux { ... }
OK：.foo .bar .baz { ... }
メディアクエリ モバイルファーストとし、min-widthのみを利用する
NG：@media (max-width: 768px) { モバイル用にスタイルを打ち消しor定義 }
OK：@media (min-width: 769px) { デスクトップ用にスタイルを打ち消しor定義 }

HTML

例 候補
パス 相対パス
絶対パス
ルート相対パス
JSのフック 出来るだけIDを用い、js- プレフィックスを含める。また、ケバブケース(ab-cd)で命名する
NG：<p class="modalWindow">...
OK：<p id="js-modal-window">...
空要素の閉じスラッシュ 閉じない
NG：<br />
OK：<br>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-12T00:45:46+09:00

HTML＆CSS（SCSS）のアンチパターンとかよくある話

前に勉強になった書き方みたいな記事書いたのですが、
明確にしてなかったので再掲
自分用メモに書いておくことにします。
※新米なので、あしからず.....

アンチパターンとは？？

やっていけないわけではないけど、やらない方がいいもの。
古い技術のままトレンドに混ざっているものが多く、もっといい書き方があるやーつ

id属性にスタイルが当てられている

style.css
#teat {
  color: #fff;
  padding: 1rem;
  margin: 2rem;
}

基本的にidセレクタに当てるものはjsの処理などのみ。
勉強したてに本などを読んでいると、平気でidにスタイルを当てているがよくないと思います。
ここはclassを付与してスタイルを当てるだけでいいです。
結局レビューとかで指摘されあいとわからないけど、なんでidはダメなのかが書いてない。

これはidセレクタに当てたスタイルに対して後からスタイルを上書きできず、
当てたいスタイルが当たらなくなってしまうからです。
逆にjsではidで要素を取りに行く方がいいです。

話が若干それますが、document.getElementsByClassName('test')より、
document.getElementsById('test')の方が取得速度がはやくSEOにつながります。

！importantが使用されている

必殺技ですね。
!importantは一番優先度が高く、上に書かれたものからブラウザは解釈していくので、
急な仕様変更などが重なった際に!importantで指定した箇所の上書きにまた!importantを使用しなければならなくなります。
これが重なるともう手がつけられなくなり、記述内に本来一つの制限がある!importantが複数出現します。

style.css
div {
  color: green!important;
}
.test {
  color: blue!important;
}
.test__hoge {
  color: red!important;
}
.test__moge {
  color: blue;
}
.test__foo {
  color: yellow!important;
}
.test__bar {
  color: black!important;
}

そもそも!importantを使用しないCSS設計が望ましいです。

CSSバラバラ殺人事件

これよく見る気がします。
簡単な例として

index.html
<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div class="header"></div>
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
  <div class="footer"></div>
</body>
</html>
style.css
.center{
  font-size: 1.5rem;
}
.right {
  padding: 1rem;
}
.header{
  background-color: black;
}
.footer{
  margin: auto;
}
.left{
  display: flex;
}

流石にこんな分かりやすくはないですが、割とこんなのあります。
グルーピングしましょう。

style.css
/* css mainStyle */
/*  */
/*  */
/*  */
/* header */
/*  */
/*  */
.header{
    background-color: black;
}

/* left */
/*  */
/*  */
.left{
    display: flex;
}

/* center */
/*  */
/*  */
.center{
    font-size: 1.5rem;
}

/* right */
/*  */
/*  */
.right {
    padding: 1rem;
}

/* footer */
/*  */
/*  */
.footer{
    margin: auto;
}

基板の時点でグルーピングしておくと、可読性が上がるので
どこを修正したいのか、どこに書くのかが明確になります。
※適当に書いてるのでそもそもみたいな話は聞きたくないです.....

キラキラ命名

まずはキラキラ命名について。
要約しましたが、かっこいい命名になっちゃったやつとか、タグ名であるものを命名しているものですね。

style.css
/* かっこいいやつ */
.anotherSky{
  font-size: 1.5rem;
}
/* タグ名にしちゃった */
.section{
  padding: 1rem;
}

これに関してはケースバイケースなのですが、
リファクタした時や修正時、レビューや他人が見たときに分かりやすいものが良いかと思います。
かっこいい命名にしたくてそれっぽいのをつけたけど、もっとシンプルで良いし、
class="section"とかにしてしまうと、<section></section>が使い辛くなってしまうし、
理解できなくなってしまいます。

統一性のないもの

style.css
.mainBnr{
  background-color: white;
  font-size: 32px;
}
.main_Secondbnr{
  background-color: #fff;
  font-size: 2rem;
}

簡単に記載しましたが、ポイントとしては2点

・カラーネームとカラーコード等が入り混じっている
・命名規則が異なる

になります。

では1つ目、
カラーネームとカラーコード等が入り混じっているについて

※cssよりscssだから変数化しとるやろというツッコミは一旦Stay
ここはカラーだけではなく、フォントサイズの指定も含みますが、

・px > remに統一
↑主にレスポンシブ対応として。

・white > #fffに統一
↑なんでも良いけどcolor: #fff;の方がバイト数が少ない

こんな感じになります。

では2つ目、
命名規則が異なるについて

命名記法には以下の3つがあります。

記法名 例 備考
スネークケース example_case すべて小文字で複合語のスペースをアンダースコアで区切る。
キャメルケース exampleCase 先頭を小文字で書き始め、複合語のスペースをなくし要素の先頭は大文字にする。
パスカルケース ExampleCase 先頭を大文字で書き始め、複合語のスペースをなくし要素の先頭は大文字にする。

一般的なのは、キャメルケースなのかなと思います。
また、BEM設計などとかぶってスネークケースが混同しがちなので
_は2個付ける派です。

例
sample_exampleCase > sample__exampleCase

最後に

長くなりましたが、いかがでしたでしょうか。
まだまだ拙い部分もありますが、参考にしていただければ幸いです。
※あとなんかあったかなぁ...色々書きたいけど紆余曲折するので、
また今度書きたいと思います。

ほな！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧