20210118のCSSに関する記事は6件です。

「lazyload 対応」スムーズスクロールの書き方

どうも7noteです。lazyloadを入れていてもスムーズにページ内リンクできる方法

以前表示速度が少し心配なサイトがあり、lazyload属性を使いつつもでもページ内リンクをさせたい場面がありました。

もし対策せずにどちらも入れてしまうと、画像が読み込まれていないかページ内リンクの高さ取得が上手くできず
画像が後から読み込まれることで高さが変わってしまい、本来の位置よりも上の方に移動してしまいます。

ですがjQueryのwhenを使うことでこの問題を解決することができます。

lazyload対応スムーズスクロールの書き方

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

$(function () {
    $('a[href^=#]').click(function(e) {
        var headerHight = 50;   /* ヘッダーの高さ(50px) */
        var href = $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top - headerHight;

        $.when(
            $("html, body").animate({
                scrollTop: position
            }, 400, "swing"),
            e.preventDefault(),
        ).done(function() {
            var diff = target.offset().top - headerHight;
            if (diff === position) {
            } else {
                $("html, body").animate({
                    scrollTop: diff
                }, 10, "swing");
            }
        });
    });
});

詳しい動きの解説は参考にさせていただいたページの書き方に載っていますので省略させていただきます。

参考:https://kaiteki-chokin.com/anchor-link-lazy-loading/

whenについて簡単に解説

whenを使うことで、複数の非同期処理が全部終わったら、続く処理を行うことができます。
今回の処理ではこれを利用し、画像がlazyloadでちゃんと読み込まれた後に正しい位置までのスクロール処理を行なっています。

まとめ

jsは様々な便利なライブラリやソースがネットにあるので1つのページに様々な種類のソースを書くことは珍しくありません。
ただ、その動き方やソースの内容や特性をしっかり理解できないと相性が悪く上手く動かない事もあります。

なので自分がソースを書くことも大事ですが、他人のソースを読めることも大事だと思います。

おそまつ

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

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

position: sticky;で固定ヘッダをらくらく実装

実装

  1. 固定させたい要素にposition: sticky;を付与する
  2. 固定させる位置top: 0;を指定する

footerの場合はbottom: 0;とすれば下に固定されます。

HTML
<body>
  <header class="ly_header">ヘッダ</header>
  <main class="ly_main">メインコンテンツ</main>
  <footer class="ly_footer">フッタ</footer>
</body>
CSS
.ly_header {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

See the Pen fixed-header by heeroo-ymsw (@heeroo-ymsw) on CodePen.

実装時のポイント

stickyの機能の仕方

stickyを指定した要素は、それを内包するコンテナ内でのみ固定されます。
つまり、前述の例でいえば、body内で固定されていることになります。

以下の例を見れば分かりやすいかと思います。

HTML
<div class="bl_contents">
  <div class="bl_contents_item bl_contents_item__sticky">スティッキーアイテム</div>
  <div class="bl_contents_item">普通のアイテム</div>
</div>
<div class="bl_contents">
  <p>hogehoge fugafuga</p>
</div>
CSS
.bl_contents_item__sticky {
  position: sticky;
  top: 0;
}

See the Pen sticky-sample1 by heeroo-ymsw (@heeroo-ymsw) on CodePen.

bl_contents_item__stickyクラスを指定した要素は、それを内包するbl_contents内でのみスティッキーを発揮することがお分かりいただけたと思います。

要素1つのみを内包する場合はstickyが機能しない

前述の内容を理解すれば当たり前だろと言いたくなるかもしれませんが、以下のような場合はstickyが機能しません。

HTML
<div class="bl_contents">
  <div class="bl_contents_item bl_contents_item__sticky">スティッキーアイテム</div>
</div>

この場合、stickyアイテムには兄弟要素がないため、stickyしたくてもする場所がありません。
よって、うまく機能しないということになります。

対応ブラウザ

Can I useによると、ほぼ全ての主要ブラウザは対応しています。
Safariではベンダープレフィックスを加える必要がありますので、以下のように記述します。

prefix
.stickyItem {
  position: -webkit-sticky;
  position: sticky;
}

position: fixed;との違い

position: fixed;でもヘッダ固定はできますが、大きな違いとしては、ページレイアウト内にその要素のための空白を用意してくれないということです。

実際に見れば違いは一目瞭然です。
一番最初の例を用いて、position: fixed;にするとこうなります。

スクリーンショット 2021-01-18 19.40.05.png

fixedを使うと、固定したい要素のwidthを指定したり、メインコンテンツにかぶらないようにmarginとったりなど、いろいろと気をつかわなければいけないことが発生します。
そのような点でstickyは簡素に記述ができ、便利です。

まとめ

stickyの動きをテキストで説明するならば、以下の特徴を持っているといえます。

  • relativestaticのように、ページレイアウト内にその要素のための空間が作られる
  • fixedのようにビューポートの同じ場所にぴたっとくっつく
  • relativeな親要素を持つabsoluteのようにそれを内包する親要素にとどまる

参考文献

CSS Position Sticky - How It Really Works! | by Elad Shechter
position - CSS: カスケーディングスタイルシート | MDN

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

ヘッダーも内容も高さが決めれない場合の2カラム

【忘備録】

ヘッダーも内容、どちらの高さも決めれない場合のフレキシブな2カラム。

【経緯】

システム系の開発していると、ユーザの入力内容によって要素の量が異なるため、
ヘッダーやメインのwidth(幅)やheight(高さ)を固定値で決め打ちするのが難しい。

これではヘッダー固定値にしてその固定値から計算して高さを出すやり方が使えなかったりする。

js使ったら現在値取得して簡単にできると思うけど、そんなのいちいち作りたくないし、
なんとかならないものかと考えに考えた挙句、これならどうだ!的なのを閃いた。

【結果】

html
<div class="wrapper">

 <!--- 高さが可変なヘッダー -->
 <header>
  <div>ロゴマークなど</div>
  <p>この要素は2行にも3行にもなるため高さ可変なると仮定</p>
 </header>

 <!--- 高さが可変な中身 -->
 <main>
  <menu>
   <ul>
    <li><a>menu1</a></li>
    <li><a>menu2</a></li>
    <li><a>menu3</a></li>
    <!--- このあと4,5,6...と永遠に可変(ここはスクロールにしたい) -->
   </ul>
  </menu>
 </main>

</div>
sass
.wrapper {
 display: flex;
 flex-direction: column;
 height: 100%;
 overflow-y: auto;
}

header {
 position:sticky;
 top: 0;
 pointer-events: unset;
 z-index: 1;
}

main {
 flex: 1 0 auto;
}

【説明】

とりあえずwrapperはflexにして、子要素のmainにflex:1 0 auto;を指定する。
これで内容はとりあえずウインドウの下まで伸びる。
※headerにはheightは指定しない。

あとはheaderにstickyをsetし、上部に固定する。
これだと内容(menu)はどれだけ増えてもスクロールでいける。

【ポイント】

maenuがstickyの下に隠れた時に、menuがクリックできてしまう。
これを防ぐためにpointer-events: none;を入れたが、なぜか効かない(クリックできてしまう)
pointer-events: unset;をいれたら効いたの(クリックできなくなった)でこれにしている。
なんでだろ。

とりあえず忘備録で走り書き。
また使う時が来ると思うので、その時にまたこの記事をバージョンアップ予定。

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

初心者でも簡単にCSSだけでローディングを作る方法

背景

  • シンプルなローディングで良い
  • メンテナビリティーを確保したい
  • ローディング要素が負荷にならないようにしたい

CSS だけでローディングを作成する

ローディング要素の要件

  • 円状の要素が回転しているもの
  • 画像や JavaScript は使用しない

完成イメージ

タイトルなし.gif

実装

完成イメージのようなローディングであれば CSS だけで実装するのは容易である。

大まかに重要な定義は以下の通り。

  1. 見た目を定義する
  2. 回転させる

見た目を定義する

まずは、適当な要素を用意し、上部のみアクシブなカラーになるような border のスタイルを当てていく。

image.png

<div class="loading"></div>
.loading {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: 0.25em solid #ccc;
  border-top-color: #333;
}

丸くする

先述のままだと単なる四角い要素で一般的なローディング要素とは掛け離れている。

これにboder-radius: 50%を指定して丸くする。

image.png

.loading {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: 0.25em solid #ccc;
  border-top-color: #333;
}

回転させる

回転させたら完成。丸くなった要素を回転させるローディング要素にしか見えなくなる。

spinnerアニメーションを定義して.loadingに追加する。ローディング要素は延々と回転し続けて欲しいので、infiniteの指定を入れる。

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

.loading {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: 0.25em solid #ccc;
  border-top-color: #333;
  animation: spinner 1.5s linear infinite;
}

完成デモ

上記をブラッシュアップした完成でもを置いておく。


See the Pen
Pure CSS Loading Image
by hiro (@hiro0218)
on CodePen.

ローディング要素が表示されているときに「アクションすることが出来ない」ことを伝えられるようなあしらいは必要だと思う。(例: cursor: progress;など)

まとめ

CSSですべて実装しているのでサイズや色の変更が容易である。アニメーションGIFやSVGなどを使って実装してきたが、これならデザイナーとのやりとり(修正と書き出し依頼)を省けるので局所的だが工数も下がるだろう。

リッチなアニメーションをしたい場合は当然 Lottie などのライブラリを利用して視覚的に楽しめるUIが良いだろう。ブランディング的な文脈はあるかもしれないが、ローディング要素はできるだけ人の目にふらさせる時間は短くしたいので簡素な見た目の要素でも良いのではないかと思う。

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

1つのdivとCSSだけでローディングを作る方法

背景

  • シンプルなローディングで良い
  • メンテナビリティーを確保したい
  • ローディング要素が負荷にならないようにしたい

CSS だけでローディングを作成する

ローディング要素の要件

  • 円状の要素が回転しているもの
  • 画像や JavaScript は使用しない

完成イメージ

タイトルなし.gif

実装

完成イメージのようなローディングであれば CSS だけで実装するのは容易である。

大まかに重要な定義は以下の通り。

  1. 見た目を定義する
  2. 回転させる

見た目を定義する

まずは、適当な要素を用意し、上部のみアクシブなカラーになるような border のスタイルを当てていく。

image.png

<div class="loading"></div>
.loading {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: 0.25em solid #ccc;
  border-top-color: #333;
}

丸くする

先述のままだと単なる四角い要素で一般的なローディング要素とは掛け離れている。

これにboder-radius: 50%を指定して丸くする。

image.png

.loading {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: 0.25em solid #ccc;
  border-top-color: #333;
}

回転させる

回転させたら完成。丸くなった要素を回転させるローディング要素にしか見えなくなる。

spinnerアニメーションを定義して.loadingに追加する。ローディング要素は延々と回転し続けて欲しいので、infiniteの指定を入れる。

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

.loading {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: 0.25em solid #ccc;
  border-top-color: #333;
  animation: spinner 1.5s linear infinite;
}

完成デモ

上記をブラッシュアップした完成でもを置いておく。

See the Pen Pure CSS Loading Image by hiro (@hiro0218) on CodePen.

ローディング要素が表示されているときに「アクションすることが出来ない」ことを伝えられるようなあしらいは必要だと思う。(例: cursor: progress;など)

まとめ

CSSですべて実装しているのでサイズや色の変更が容易である。アニメーションGIFやSVGなどを使って実装してきたが、これならデザイナーとのやりとり(修正と書き出し依頼)を省けるので局所的だが工数も下がるだろう。

リッチなアニメーションをしたい場合は当然 Lottie などのライブラリを利用して視覚的に楽しめるUIが良いだろう。ブランディング的な文脈はあるかもしれないが、ローディング要素はできるだけ人の目にふらさせる時間は短くしたいので簡素な見た目の要素でも良いのではないかと思う。

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

【命名規則】BEMを使った書き方についてまとめてみた【CSS】

実務でCSSをガッツリ書くことになったので、復習の意を込めて自分用のチートシートを作成しました。
今回は現場でよく使われているBEMの書き方について調べたことのまとめです。

BEMとは

BEMはBlock Element Modifierの略で、CSSを設計・命名していく手法です。

  • Block: 大枠となる独立した要素
  • Element: Block中の要素
  • Modifier: BlockやElementのスタイル

保守性の高さから1番多く使われている命名規則だと思います。

BEMを使う目的

BEMは名前の衝突を避けるために考案されたCSS設計です。

保守性の高さを解決するための手法は他にもあり、HTMLはシンプルがな書き方が求められますが、まだまだ決定打に欠けています。
BEMは見た目が汚いですが、シンプルを求めて面倒な目にあうよりは、少々汚くても扱いやすいBEMが多くの現場で採用されています。

命名規則の考え方

class名の命名規則にはいくつか種類がありますが、どの命名規則を採用するにしても、前提として考えることは以下です。

  • 明確に決まっている
  • わかりやすい
  • 保守性が高い(管理しやすい)

BEM以外のOOCSSやSMACSS等の命名規則を使うとしても、上記はそもそも命名規則を考える目的になります。
手段を好き嫌いで選ばずに、その時々で最適だと思われる命名規則を採用しましょう。

BEMの命名の仕方

class名であれば以下のように命名します。

class="block__element–-modifier"

最初にBEMは以下の3つの略だと説明しました。

  • Block: 大枠となる独立した要素
  • Element: Block中の要素
  • Modifier: BlockやElementのスタイル

これらの要素を以下のルールに基づいて命名します。

  • blockとelementはアンダースコア2つで区切る
  • Elementとmodifierはハイフン2つで区切る
  • ハイフンとアンダースコアは2つ
  • block, element, modifierが複数単語になる場合、単語と単語の間はハイフン1つで区切る
  • ハイフン1つの場合はElementとModifierの区切りではなく、ただの単語の区切りとして使用

サンプルコード

以下ははBEM記法でclassを付けたサンプルです。

<section class="about">
  <div class="about__item">
    <h2 class="about__item-ttl">ここにタイトルが入る</h2>
    <p class="about__item-txt">テキストが入る。テキストが入る。</p>
    <a href="#" class="about__item-link about__item-link--red">MORE</a>
  </div>
</section>

クラス命名でよく使われる単語

以下はクラス作成時に頻出するクラス名です。
ここにないような単語はcodicなどで調べて組み合わせを考えてみましょう。

Block

単語 意味
section 区分・区画
content 文書の内容
article 記事
post 投稿
top 頂上・上部
home トップページ
sidebar 補足記事
wrapper 内包する
wrap wrapperの略語
container wrapperの類語容器・入れ物wrapperはレイアウト的に、containerは意味的に使うことが多い
group 集まり
area 特定の場所・範囲
emphasis 強調・重視
catch 興味を惹く・関心をつかむ
note 注釈
description 概要
desc descriptionの略語
introduction 前置き・導入
intro introductionの略語
announce お知らせ
information 情報
info informationの略語
action Call To Action重要度の高い
more もっと多くの
feature 主要なもの
detail 詳細・細部
summary 概要・要約

Element

BEMのElementで使われるような名詞や形容詞など。

単語 意味
inner 内側の
outer 外側の
body 主要部分
head 上部
foot 下部
heading 見出し・表題
title 表題・題名
lead 見出しの補足・記事の要約
list 一覧・表
menu 一覧・表
item (表やデータなどの)項目
unit 1つの単位・1セット
column 縦列
col columnの略語
text 本文
caption 画像・図表の補足文
thumbnail 縮小した画像
thumb thumbnailの略語
avatar 人の顔を示す画像
feature 特徴を補足する画像
tel 電話番号
address 住所
date 日付
time 日時
category 分類・部類
cat categoryの略語
tag 識別子
next 次の
previous 前の
prev previousの略語
mask 覆い隠す
overlay かぶせる・上書きする
delimiter アイテムの範囲や境界線を示すインターフェイス
separator delimiterの類語で混ぜないように分離する目的で使います
divider delimiterの類語でグルーピングするように分割する目的で使います

Modifier

単語 意味
success 成功
alert 注意・警戒
attention 配慮・気配り
error 間違い・失敗
caution 用心・警告
warning 警告・予告
danger 危険・驚異
tiny とても小さい
xs tinyの類語でExtra small(smallよりさらに小さい)こと
small 小さい
medium 中間
large 大きい
huge とても大きい
xl hugeの類語でExtra large(特大・超大型)のこと
reverse 反転する
push 前方に押す
pull 自分の方に引く
offset 相殺する・埋めあわせる
left 左側の
center 真ん中
right 右側の
top 上部
middle 真ん中
bottom 下部
round 角丸
circle 円形

分類

単語 意味
about 〜について
work 仕事・任務
product 製品
service サービス
news お知らせ・近況
event 行事・出来事
history 歴史・沿革
archive 保存・保管・記録
concept 構想・概念・考え
recommend おすすめ・推奨
table of contents 目次
toc Table of contentsの略語
index 索引・指標
contact 問い合わせ・連絡
inquiry 問い合わせ・質問・調査
access 交通手段
shop 店舗
related 関連のある
privacy 個人情報の利用・保護の方針
faq Frequently asked questionsquestions(よくある質問)の略
qanda Question and answer・Q&A・質問と回答
input フォームの入力画面
confirm フォームの確認画面
finish フォームの完了画面
search 検索する
result 検索結果画面
cart 購入するアイテムを一時的に保存する画面
checkout 保存していたアイテムを購入する画面

形容詞

名詞の性質や状態を修飾する品詞。「〜の」「〜な」。

単語 意味
main 主要な
primary 主要な
secondary 補助的な・第二の
tertiary 第三の
quaternary 第四の
common 共通の
global 全体的な
local 局所的な
general 一般的な
brand ブランドの
site サイトの

ステータス

状態を示す動詞や形容詞など。

単語 意味
show 見せる
hide 隠す
open 開く
close 閉じる
current 現在の
active 活動中・有効な
disabled 無効になっている

文字を扱う要素

単語 意味
link アンカーテキスト
label 分類する・項目名
tag 符号・識別子
badge 残数を示す数値
copyright 著作権表示
tooltip マウスオーバー時に補足情報を表示するインターフェイス
button オン・オフの選択に使うインターフェイス
btn buttonの略語

イメージ

単語 意味
image 画像
img imageの略語
icon 対象の内容や機能などを小さな絵柄で表したもの
loading 読み込み中であることを示すインターフェイス
logo 社名や製品名などを図案化・装飾化した文字・文字列
map 地図
chart 理解しやすいような方法で情報を示すリストやグラフのこと
graph chartの類語で視覚表現のための手段のこと
hero キービジュアルになる大型の画像
banner (主に宣伝用の)画像をともなうリンク
carousel 画像などのコンテンツを上下左右にスライドさせて切り替えるインターフェイス
slider carouselの類語
ticker carouselの類語で自動でアイテムを左右に流しながら表示する。ユーザーは基本的にコントロールできない
lightbox carouselの類語で、モーダルのjQueryプラグインのこと。主な用途はサムネイル画像をクリックしてモーダルを開き画像を大きく見せること

ナビゲーション

単語 意味
navigation 情報へ誘導するリンク
nav navigationの略語。
global navigation - ほとんどの画面で表示されている主要なナビゲーション
local navigation - あるカテゴリ内専用のナビゲーション。グローバルナビゲーションの中や下に配置する場合や、サイドバーに配置する場合がある
mega menu - 深い階層のカテゴリやページへのナビゲーション。ドロップダウン(クリックやマウスオーバー)で階層を表示していく。カテゴリやページ数の多いサイトのグローバルナビゲーションに使われることが多い
breadcrumb パンくずリスト。トップページから現在ページまでの階層構造を示したリンク
topicpath breadcrumbの類語
springboard 同じサイズのリンクを2×2や3×3のように配置した同じ重要度を持つ並列なナビゲーション
list menu - 縦に並んだリスト型のリンクで、階層構造をもったナビゲーション
dashboard グラフやステータスなどを一つの画面にまとめたインターフェイス
pagination 昇順にしたページ番号付きのナビゲーション
linear navigation - その画面の前後に移動するためのナビゲーション。paginationとの違いはページ指定ができないこと
back to-top - ページトップに戻るためのページ内リンク
tab 書類などのインデックスタブを模した、画面内のコンテンツ表示を切り替えるインターフェイス
tabbar おもに画面下部に固定されたタブで、画面全体を切り替えるインターフェイス
segmented control - 機能的にはtabと同じで、見た目がタブではなくボタンである点が違う
off canvas - 表示領域外から画面の大半を覆い隠したり(オーバーレイ)、ずらすようにスライドしながら表示するナビゲーション
side drawer - off-canvasの類語。drawerは「引き出し」の意味
toggle menu - 同一の操作で二つの状態を交互に切り換えるインターフェイスで、操作対象になるボタンを基準にナビゲーションを表示することが多い
sitemap サイト内のすべてのページへのリンクをリスト化したもの
sns ソーシャルネットワーキングサービス

フォーム

単語 意味
form 送信フォーム。
login ユーザー認証をするためのフォーム
signin loginの類語
logout signout - ユーザー認証を解除すること
registration ユーザー登録をするためのフォーム
signup registrationの類語
step navigation - 複数画面にわたるフォームの順序や、現在地を示したナビゲーション
search box - キーワード検索するためのフォームエリア
text field - input[type="text"]のような利用者が編集する改行なしのテキストフィールド
textarea textareaのような利用者が編集する複数行のテキストフィールド
checkbox input[type="checkbox"]のような1つ以上の項目を選択するインターフェイス
radio input[type="radio"]のような1つの項目を選択するインターフェイス
select selectのような1つの項目を選択するインターフェイス。ラジオボタンと違い、(dropdownのように)項目が最初は隠れているのが特徴
submit 送信ボタン
reset リセット(取り消し)ボタン
modify 修正ボタン

その他

単語 意味
cards トランプのような積み重なったカードのメタファーをもつインターフェイス。
dropdown 複数の項目を表示して、1つの項目を選択するインターフェイス。
pulldown dropdownの類語。
accordion 折りたたまれたコンテンツを選択することで表示させるインターフェイス。
scroll tab - 表示領域よりも横に長いナビゲーションで、左右にスクロールすることで非表示部分を見ることができるインターフェイス。
dialog (主に)注意や警告を知らせるために使用されるメッセージで、ユーザーに操作を要求するのが特徴。
toast dialogの類語で、dialogとの違いは時間が経つと自動的に消えること。
popup window - dialogの類語で、リンク先を別の小さなウィンドウで表示するインターフェイス。
toolbar ユーザーが利用できるツールやアクションをまとめたインターフェイス。
comment 記事に対する反応。
table テーブル・図表。
timeline チャットや年表のように時系列に並べたリスト。

まとめ

今回はBEMについて書きましたが、自分は割と独学で適当にやっちゃってたので、自分用のチートシートとして作成しました。

命名規則などについては他のブログやQiitaで良質な記事が大量にあるので、さらにわかりやすい記事を求める人はそちらに飛んで見ることをおすすめします!

お疲れさまでした!

参考させていただいた記事

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