投稿日：2020-08-11T20:57:22+09:00

【Google HTML / CSSスタイルガイド】を初めて読んだので、一言で分かるようにまとめてみた -CSS編-

どうも7noteです。前回の続きです。

HTML編はこちらから

4.CSS

4.1 CSSスタイルルール

4.1.1 CSSの妥当性

『文法通りの正しい書き方で書きましょう』

文法チェックはこちらからできますとのこと。
→https://jigsaw.w3.org/css-validator/

4.1.2 IDとクラスの命名

『id名とclass名は内容や意味を表す名前を付けましょう』
/* 非推奨 */
#yee-1901 {}
/* 推奨 */
#gallery {}
#login {}
.video {}
用はデタラメな名前は付けるなってことですね。

4.1.3 IDとクラス名のスタイル

『id名とclass名は理解しやすく、かつ短く書きましょう』
/* 非推奨 */
#navigation {}
.atr {}

/* 推奨 */
#nav {}
.author {}
これだけでもメンテナンス性が上がりますね。

4.1.4タイプセレクター

『どうしても必要でない場合以外は、要素名＆class名を組み合わせて使用しないでください。』
/* 非推奨 */
ul#example {}
div.error {}

/* 推奨 */
#example {}
.error {}
たとえばp要素にtextというクラス名を付けている時に、p.text{～}と書かず、要素名は省略して.text{～}と書いてください。という話みたいです。

4.1.5略記プロパティ

『ショートハンドで記述が可能なプロパティはショートハンドで書きましょう』
/* 非推奨 */
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

/* 推奨 */
padding: 0 1em 2em;
ショートハンドで書くと効率や理解しやすさなどが向上するので、ショートハンドで書きましょう。
ショートハンドが書けるプロパティ一覧はこちら↓
【初心者でもわかる】cssで使えるショートハンドの書き方と、ショートハンドかロングハンドのどちらを使うべきかについての考察

4.1.6 0と単位

『プロパティの値で、数値が0の時は単位を省略しましょう』
/* 非推奨 */
margin: 0px;
padding: 0px;

/* 推奨 */
margin: 0;
padding: 0;
marginやpaddingで0pxを指定するときは、単位を省略してmargin: 0;という風に書きましょう。

4.1.7 値の先頭の0

『小数点以下(1以下)の場合、0は省略して「.」から書き始めましょう』
/* 非推奨 */
font-size: 0.8em;
/* 推奨 */
font-size: .8em;
プロパティの値で、「0.5s」などのように1以下の場合、先頭の0は省略できます。

4.1.8 16進表記

『16進数で3桁に省略できる場合は省略して書きましょう。』
/* 非推奨 */
color: #eebbcc;
/* 推奨 */
color: #ebc;
4.1.9プレフィックス

『略称のid名やclass名には、コメントで略前の名称を入れておきましょう』
/* 推奨 */
.adw-help {} /* AdWords */
#maia-note {} /* Maia */
他の人がソースを見たときに、なんの略か伝わるようメモを書いておきましょう。

4.1.10 IDおよびクラス名の区切り文字

『複数の単語を連結してclass名などを書く場合はハイフン(-)を使いなさい』
/* 非推奨 */
.error_status {}
/* 推奨 */
.error-status {}
アンダースコア(_)や頭文字を大文字にしてつなげるのは非推奨です。

4.1.11ハック

『ユーザーのデバイスやブラウザごとにCSSを書き分けて対処するのはすばらしい！』

的なことが書いてます。ユーザーエージェントや各ブラウザごとにCSSを書くようにしましょう。

4.2 CSSのフォーマットルール

4.2.1宣言の順序

『プロパティはアルファベット順など統一のルールで書きなさい』
/* 推奨 */
div {
  border-radius: 4px;
  color: black;
  text-align: center;
}
アルファベット順でなくてもいいでしょうが、ソースを書く度書く度バラバラの順番なのはよろしくないですね。

4.2.2コンテンツのインデントをブロックする

『CSSもインデントを付けて見やすく書きましょう』
/* 推奨 */
html {
  background: #fff;
  color: #444;
}
クローラーうんぬんの話より、開発者が見やすいかどうかの話が多くなってきました。

4.2.3宣言の停止

『プロパティの宣言後はセミコロン（;）を忘れず書きましょう』
/* 非推奨 */
height: 100px
/* 推奨 */
height: 100px;
4.2.4プロパティ名の停止

『プロパティと値の間のコロン（:）の後ろは半角スペースを入れましょう』
/* 非推奨 */
font-weight:bold;
/* 推奨 */
font-weight: bold;
4.2.5宣言ブロックの分離

『セレクタ指定後のかっこ({)の前には半角スペースを入れましょう』
/* 非推奨 */
#video{
  margin-top: 1em;
}
/* 推奨 */
#video {
  margin-top: 1em;
}
4.2.6セレクタと宣言の分離

『複数のセレクタに指定する場合は、カンマ（,）の後に改行を入れましょう』
/* 非推奨 */
a:focus, a:active {
  position: relative; top: 1px;
}
/* 推奨 */
a:focus,
a:active {
  position: relative; top: 1px;
}
4.2.7ルールの分離

『セレクタ{}とセレクタ{}の間は改行を入れてを1行分空けましょう』
/* 推奨 */
html {
  background: #fff;
}
    /*←←←←←1行開ける*/
body {
  margin: auto;
  width: 50%;
}
4.2.8 CSS引用符

『属性セレクターとプロパティ値にはシングルクォーテーション(')をつかいましょう』
『urlにはシングルクォーテーション(')もダブルクォーテーション(")も不要です』
/* 非推奨 */
html {
  font-family: "open sans", arial, sans-serif;
}
/* 推奨 */
html {
  font-family: 'open sans', arial, sans-serif;
}
※例外として@charsetを使用する場合は、ダブルクォーテーションを使ってください

4.3 CSSメタルール

4.3.1セクションのコメント

『必要があればセクションごとにセクションコメントを入れてグループ分けしてください。』
/* 推奨 */

/* Header */

#adw-header {}

/* Footer */

#adw-footer {}

/* Gallery */

.adw-gallery {}
まとめ

CSSの書き方とかはなんとなくで書いてしまっていることが多いので、今一度改めてソースを見直して
綺麗なソースを意識して書くようにしたいですね。
とくに今回のような書き方の部分は最初の頃に身につけておかないと癖がついてしまうので、早い目に直しておきたいところです！

おそまつ！

（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-11T15:53:12+09:00

LP模写 - Write(随時更新)

1. できなかったこと

1.1 profile-widgetとfooterのSNSボタン

謎のmargin-rightが解除できない

2. AI

classつけ方

VScode拡張機能

devツール使い方

ポートフォリオGoogle Drive & サーバー

DentalClinic - レスポンシブ

Write - レスポンシブ

Progate - jQuery

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-11T05:31:34+09:00

二度と忘れるな。swiperで見切れさせる方法はこれだって言ってんだろ！！

俺は、バカなのか...

swiperでのカルーセル案件、今までに何度もやってきただろ...
なんで見切れさせるのに毎回苦戦しているんだよ...！

二度とこいつに時間をかけなくてもいいように、ここに私の奮闘記を残します。

やりたいのはこういうカルーセル。

端っこのコンテンツがちょっと見切れちゃってるようなのを実装したい時のお話です。

slidesPerViewは小数が使えるんだ！！

つまりこう。
var myswiper = new Swiper ('.swiper-container', {
  centeredSlides: true,
  slidesPerView: 2.2,
  spaceBetween: 16,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
この小数が使えるってことと、
「centeredSlides: true」で中央寄せにしてあげるってことがわかってれば一瞬。
なんてことはない。

なんだこれはぁぁっぁあ！

中央寄せじゃなくなったとき（偶数個見せたいとき）。
これが微妙にめんどくさかった。

こうしなさい。
var myswiper = new Swiper ('.swiper-container', {
  slidesPerView: 2.2,
  spaceBetween: 16,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
js側ではやることはあまりない。
さっきのと比べると中央寄せの「centeredSlides: true」を消したくらい。

大事なのはcssで、「.swiper-container」に対してpadding-leftを当ててあげること。
.swiper-container {
  padding-left: 125px;
}
みたいに。
ちゃんとそれっぽい位置になるように微調整が必要だったり、
SPとかだとpx→vwにして、、とか必要になるけど、
やり方を検討するとこはもう終わってるから簡単だよね☆

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-11T05:30:55+09:00

swiperの雛形にはこれを使え！！

※公式のフォーマットとは異なります！
※使えなくなるオプションがあるかもしれません！

完全に個人用です。
よくあれこれどうやったっけと忘れて、その度時間けかちゃってるのでメモ残しておきます。

これを、使え！！
<div class="mycontainer">

  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="item swiper-slide">1</div>
      <div class="item swiper-slide">2</div>
      <div class="item swiper-slide">3</div>
      <div class="item swiper-slide">4</div>
      <div class="item swiper-slide">5</div>
    </div>
  </div>

  
  <div class="swiper-pagination"></div>

  
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

</div>
公式と違うところは、
マルポチやボタンが「.swiper-container」の外に出てることです。

ここから下では、その理由とか経緯を説明していきます。

なんでそんなことを

swiperで次へ/戻るボタンや、マルポチを公式通りの方法でhtmlを書くと、
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="item swiper-slide">1</div>
    <div class="item swiper-slide">2</div>
    <div class="item swiper-slide">3</div>
    <div class="item swiper-slide">4</div>
    <div class="item swiper-slide">5</div>
  </div>

  
  <div class="swiper-pagination"></div>

  
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
ですね。

ただ、僕の扱う案件で多いのは、こんなデザイン。

緑で囲った部分が赤枠のカルーセルエリアから飛び出していることがお分かりいただけるかと思います。
これ、公式のフォーマット通りの形で実現しようとするとかなりめんどくさい。

なぜか。

理由はswiperの一番外側のクラスにあたる「.swiper-container」に対して公式cssでoverflow: hiddenが当たってしまっているからです。
なので素直にフォーマットに従いつつcssでマルポチなんかのbottomを下げたとしてもこうなっちゃうわけです。

いやん！

だから俺は外に出した

cssで公式のoverflow:hiddenを上書きして、、
とかもありかもしれませんが一番外に出しちゃうのが楽かなという結論に至りました。

つまりこうです。
<div class="mycontainer">

  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="item swiper-slide">1</div>
      <div class="item swiper-slide">2</div>
      <div class="item swiper-slide">3</div>
      <div class="item swiper-slide">4</div>
      <div class="item swiper-slide">5</div>
    </div>
  </div>

  
  <div class="swiper-pagination"></div>

  
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

</div>
これで公式cssのoverflow:hiddenから解き放たれました。
代償として、マルポチのスタイルが死んでしまうようですが...

ただ、案件でswiper公式のスタイルをそのまま使うことなんてないでしょう。
どうせ何かしらで上書きするのだからこんなの屁でもありません。

一応、それっぽくする修正css置いてはおきますが。
.swiper-pagination {
  left: 50%;
  bottom: -40px !important;
  transform: translateX(-50%);
}
.swiper-pagination-bullet {
  margin: 0 4px;
}
完璧ですね☆

※使用したswiperのバージョンは5.4.5でした。

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-11T05:18:27+09:00

addClassで追加したクラスのstyleが反映されない件についての質問

jQueryのaddClass,removeClassを利用して、クリックしたらプロフィールが右からスライドしてくるアニメーションを作っています。
ハンバーガーメニューをクリックした際にtranslateX(100vw)が0%となってほしいのですが、デベロッパーツールで確認したところcssが上書きされていないようです。(クラスの付与は行われています)
!importantを使用しても同じ結果でした。

よろしくお願い致します。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="stylesheet.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha256-UzFD2WYH2U1dQpKDjjZK72VtPeWP50NoJjd26rnAdUI=" crossorigin="anonymous" />
  <title></title>
</head>
<body>
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script>
    $(document).ready(function() {
      $('.menu').on('click', function() {
        if ($('.profile').hasClass('.is-active')) {
          $('.profile').removeClass('.is-active');
        } else {
          $('.profile').addClass('.is-active');
        }
      });
    });
  </script>
  <header>
    <div class="menu">
      <i class="fas fa-bars"></i>
    </div>
    <div class="profile">
      <p>texttexttexttext</p>
      <p>texttexttexttext</p>
      <div class="mail">
        <p><i class="far fa-envelope"></i></p>
      </div>
    </div>
  </header>
</body>
</html>

.menu {
  display: block;
  cursor: pointer;
}
/* アニメーション前の状態 */
.profile {
  transform: translateX(100vw);
  transition: all 0.3s linear;
  z-index: 2;
  top: 0;
  right: 0;
}
/* アニメーション後の状態 */
.profile.is-active {
  transform: translateX(0%);
}

　 Tweet
Qiitaで続きを読む

20200811のCSSに関する記事は5件です。

【Google HTML / CSSスタイルガイド】を初めて読んだので、一言で分かるようにまとめてみた -CSS編-

どうも7noteです。前回の続きです。

4.CSS

4.1 CSSスタイルルール

4.1.1 CSSの妥当性

4.1.2 IDとクラスの命名

4.1.3 IDとクラス名のスタイル

4.1.4タイプセレクター

4.1.5略記プロパティ

4.1.6 0と単位

4.1.7 値の先頭の0

4.1.8 16進表記

4.1.9プレフィックス

4.1.10 IDおよびクラス名の区切り文字

4.1.11ハック

4.2 CSSのフォーマットルール

4.2.1宣言の順序

4.2.2コンテンツのインデントをブロックする

4.2.3宣言の停止

4.2.4プロパティ名の停止

4.2.5宣言ブロックの分離

4.2.6セレクタと宣言の分離

4.2.7ルールの分離

4.2.8 CSS引用符

4.3 CSSメタルール

4.3.1セクションのコメント

まとめ

おそまつ！

LP模写 - Write(随時更新)

1. できなかったこと

1.1 profile-widgetとfooterのSNSボタン

2. AI

二度と忘れるな。swiperで見切れさせる方法はこれだって言ってんだろ！！

俺は、バカなのか...

slidesPerViewは小数が使えるんだ！！

なんだこれはぁぁっぁあ！

swiperの雛形にはこれを使え！！

これを、使え！！

なんでそんなことを

だから俺は外に出した

addClassで追加したクラスのstyleが反映されない件についての質問

日付別

タグ一覧