CSS の display:none と visibility:hidden について



カテゴリー Programming

はじめに

display, visibility プロパティについて簡単に整理した。

TL;DR

  • display: none;display: block;(flex, etc…) で要素の 表示/非表示
    • 表示に影響が出る(他要素の位置が変わったりする)
  • visibility: hidden;visibility: visible; で要素の 表示/非表示
    • 表示に影響が出ない(他要素の位置は不変)
  • display: none;visibility: hidden; も、アクセシビリティ(読み上げ)に影響が出る
    • アクセシビリティを保つにはここを参考(試してない)
続きを読む

はじめに

OSS の CSS Framework Bulma を使って、メルカリ風のレスポンシブなデザインを構築する方法について整理した。

「メルカリ風のレスポンシブなデザイン」というのは、

  • デスクトップなどでは「サイドバー」+「コンテンツ」
  • モバイルでは「サイドバー」が非表示になり、クリック(タップ)で表示される

というような構成を意味している。

TL;DR

  • モバイル表示時には隠したい部分に is-hidden-mobile クラスを付与する
  • モバイル表示時に隠した要素を表示するためのボタンなどに is-hidden-tablet クラスを付与する
  • 上記ボタンをクリックした時に is-hidden-mobile をトグル(On/Off)する
  • 全体のデザインは columns + column + is-<n>-<device> で調整する
続きを読む

はじめに

Vue.js を使って Chrome 拡張機能を開発できるテンプレートを探して、Kocal/vue-web-extension を見つけたので、簡単な使い方のメモ。

追記: 続編として Vue.js を使ってメインページ側で動作する Chrome 拡張機能を開発する方法 という記事も書いた。

TL;DR

  • vue init kocal/vue-web-extension my-extension で初期化
  • npm run builddist 配下にリリースファイル作成
  • npm run watch でファイル変更を検知してビルド
    • src 配下を編集して拡張機能を開発
続きを読む
  • page 1 of 1

r17n


Softwear Engineer


Fukuoka