What's New Qiita

20201112のCSSに関する記事は9件です。

  • 投稿日：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: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-12T16:23:31+09:00

業務でBEMを使うことになったのでCSS設計完全ガイド読んだメモ。

BEMについて

BEMのルール

  • Block
    • それがなんなのかを表すもの、見た目ではなくなんのために使用されるのか
    • BlockのなかにBlockを配置しても良い
  • Element
    • Blockを構成し、Blockの外では独立して使用できないもの
    • なくてもよい。Blockを構成するオプションという位置付けのため
  • Modifier
    • BlockまたはElementの見た目や状態、振る舞いを定義するもの(オプション)
    • 2つ目以降のクラス名としてModifierをつける(block__element block__element--modifierkey_modifiervalue)
    • キーと値を設定できるが、キーはなくても良い

Mixとは

Blockのなかに複数Blockを配置するとき、なかにあるブロックにもう一つクラス名を追加して子として扱ってスタイルを決定する

<div class="親ブロック名">
    <div class="子ブロック名 親ブロック名__子ブロック名"></div>
</div>

ModifierとMixの使い分け

  • Modifier---ブロックで完結できるとき。color,borderを追加するときなど
  • Mix---レイアウトに絡むもの。margin,paddingなど

※Modifierでめっちゃ使ってるならhelperクラスを使用する(後述)

CSSについて

・詳細度は把握しておくこと

・セレクターの種類、案件で使用しないほうがよいなどのルールは守る

使いまわすことを前提としたモジュールに対する名前の付け方

  • コンテキストではなく、見た目・機能・役割をベースに
  • media/accodion/sliderなど一般的な呼称を使用する

※コンテキスト＝＝場所・状況　のこと

CSS設計の実践と８つのポイント

  1. 特性に応じてCSSを分類
  2. コンテンツとスタイリングが疎結合(独立性が高くなっていること)
  3. 影響範囲がみだりに広すぎない
  4. 特定のコンテキストにみだりに依存していない
  5. 詳細度がみだりに高くない
  6. クラス名から影響範囲が想像できる
  7. クラス名から見た目・機能・役割が想像できる
  8. 拡張しやすさ

設計時の考え方

最小モジュールと複合モジュール

  • 最小モジュールはボタンやラベルなどの小さいもの（分子）
  • 複合モジュールは最小モジュールとテキストなどを組み合わせているモジュール（有機体）

カラムをつくるとき、カラムモジュールのなかにカードモジュールがある という感覚

モジュールの命名規則に迷ったら、bootstrapを参考にするとよい

モジュールには指定しないほうがいいスタイルがある

top
left
right
bottom
position
z-index
width
margin

ただし例外として、margin-bottomやmargin-topなどは指定して良い。
あくまでモジュール自体がどこに配置されるかどのようなサイズなのかについては、使われるコンテキストに任せるべき

シングルクラスとマルチクラスの違いについて

  • シングルクラス

    • HTMLはシンプルに、CSSは複雑になりやすい
    • スタイルの分だけクラスを用意する

  • マルチクラス（ヘルパークラスを追加）

    • HTMLは複雑に、CSSはシンプルになりやすい

マルチクラスを採用するとよい

上書きするクラスのことをModifierという

その上書きする項目が一つの場合、ヘルパークラスまたはユーテリティクラスと言う

<!-- （例） -->
.hp_textBlack{
  color: #000;
}
.mb30{
  margin-bottom: 30px
}

Modifierを作成するとき

  • Modifier名から影響範囲予想できる(複数なのか、ひとつの要素なのか)
  • ひとつのModifierはひとつの機能と過不足なく紐づいている。例外もあるが基本はひとつ。

Modifierの使いすぎには注意

  • ヘルパークラスで代用できないのか
  • ヘルパークラス毎回つかってんなら新しいモジュールつくって使えば良い場合がある

まとめ・感想

今回上司にCSS設計完全ガイドを借りたのですが、とても読みやすくわかりやすかったです。
全体の3分の1（BEMについて）までしか読んでないので、続きもまた読みます。

参考文献

CSS設計完全ガイド

  • このエントリーをはてなブックマークに追加
  • 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で続きを読む
  • 投稿日：2020-11-12T00:42:35+09:00

「CSS Arrow Please」 からのコピペでできる吹き出しツールチップを作ってみました

「fa-stack」をボタンにするとツールチップとの相性がよくない

前回「100vhだけ・一番下まで進む・戻る」ボタンというのを作ったのですが、

ボタンの機能自体は問題なさげなんですが、
どうにもボタンの反応が悪くてですね……。

たぶん「fa-stack」が元々位置調整してるのを、強引に位置調整してるせいじゃないかなー？、
と思ったんですが、やっぱりそこだったっぽい。

それで、ボタンの背景側を

かんたんなback-ground形式の図形用CSS

.gem-square-full {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin: 0;
    padding: 0;
    border-radius: 0;
}

にして、「position: relative;」の親に、
「進む・戻る」の記号だけを「font-awesome」で「position: absolute;」の子にしたら、わりかし軽快になりましたー。

See the Pen Tooltip with "CSS Arrow Please" by sarap422 (@sarap422) on CodePen.

「CSS Arrow Please!」をそのままコピペでツールチップにできるようにする

ついでに「CSS Arrow Please!」さんが、
操作がかんたん＋アロー付きでborderも付けてくれるので、

[CSS]アロー付きの吹き出しのスタイルシートが簡単に作成できるオンラインツール -CSS Arrow Please!
https://coliss.com/articles/build-websites/operation/css/online-css-arrow-please.html

これをコピペでツールチップできるようにするのが汎用的で楽じゃないかなー？
と思ったので、そういう形に

/* .hinttip > figcaption（動き・透明度・文字色）
------------------------------------------------------------------- */

.hinttip>figcaption {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translate(-1.5rem, -50%);
    opacity: 0;
    transition: all 0.2s ease-out;
    width: 6.5rem;
}

.hinttip:hover>figcaption {
    transform: translate(-0.5rem, -50%);
    opacity: 1;
}

/* arrow-box 文字色、他 */

.ctip-arrowbox {
    font-size: 1rem;
    color: #fff;
    text-align: center;
    padding: 0.25rem 0.25rem;
    border-radius: 0.25rem;
}

/* ここから、arrow-box（コピペ後、リネーム）
------------------------------------------------------------------- */
.ctip-arrowbox {
    position: relative;
    background: #333333;
    border: 1px solid #999999;
}

.ctip-arrowbox:after, .ctip-arrowbox:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.ctip-arrowbox:after {
    border-color: rgba(51, 51, 51, 0);
    border-left-color: #333333;
    border-width: 4px;
    margin-top: -4px;
}

.ctip-arrowbox:before {
    border-color: rgba(153, 153, 153, 0);
    border-left-color: #999999;
    border-width: 5px;
    margin-top: -5px;
}

figureボタンとfigcaptionツールチップ

あとタグももう少し見やすくしたいなー、ということで考えたのですが、

図形を＜figure＞、
ツールチップを＜figcaption＞ にするのが文法的にも問題ないですし、
ブラウザの互換性でもそんなに大きく問題出ないんじゃないかなー？

figure: 任意のキャプション付きの図要素
https://developer.mozilla.org/ja/docs/Web/HTML/Element/figure

ということでそういう形に。

<!-- .js関係（scriptの手前に書く） -->
<div class="gae-grupa fxd-CCC"><!--
--><figure class="gaeBolg_0A hinttip"><em class="ptip gem-square-full gem-2x"><em class="gem-square-full gem-2x mbm-hvr-ex"></em><i class="fa-1x"></i></em><figcaption class="ctip-arrowbox">TOPへ戻る</figcaption></figure><!--
--><figure class="gaeBolg_0B hinttip"><em class="ptip gem-square-full gem-2x"><em class="gem-square-full gem-2x mbm-hvr-ex"></em><i class="fa-1x"></i></em><figcaption class="ctip-arrowbox">上へ</figcaption></figure><!--
--><figure class="gaeBolg_0C hinttip"><em class="ptip gem-square-full gem-2x"><em class="gem-square-full gem-2x mbm-hvr-ex"></em><i class="fa-1x"></i></em><figcaption class="ctip-arrowbox">下へ</figcaption></figure><!--
--><figure class="gaeBolg_0D hinttip"><em class="ptip gem-square-full gem-2x"><em class="gem-square-full gem-2x mbm-hvr-ex"></em><i class="fa-1x"></i></em><figcaption class="ctip-arrowbox">一番下へ</figcaption></figure>
</div>
<!--ƒ /.gae-grupa -->

調べてたら「HINT.css」というのもシンプルで使いやすそうだったのですが、
「arrow-box」の方でできるようになったのと、「arrow-box」の方がデザイン的な汎用性がありそうということで、とりあえずツールチップはこれで完成ということで。

cssオンリーで導入出来るtooltipプラグイン「HINT.css」
https://co.bsnws.net/article/44

class名を「.tooltip」にすると「Bootstrap」と競合する

ちなみに「.tooltip」じゃなくて「.hinttip」にしてるのは、
「.tooltip」にすると、どうも「Bootstrap」さんと競合するぽかったからです。

今回は以上です。

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

日付別

タグ一覧