【CSS】font-size に使われる rem とは

2022年3月28日

HTML/CSS

今回は、font-size によく使われる rem という単位について紹介します。
レスポンシブル対応には欠かせない単位になりますので、ぜひ理解して使いましょう。
　

rem とは

rem というのは root em の略になります。
すなわち、root のフォントサイズを 1rem とする単位です。
root とは html のことですので、html 要素のフォントサイズが 1rem になります。
　
例えば、html 要素のフォントサイズが「16px」のときは、1rem = 16px, 2rem = 32px, 3rem = 48px … となります。
　
html 要素のフォントサイズから相対的にサイズ指定できるのが rem になります。
　

rem を使うときは

主要なブラウザのデフォルトの文字サイズは 16px なので、そのまま rem を利用すると、
10px = 10 / 16 rem = 0.625 rem
12px = 12 / 16 rem = 0.75 rem
24px = 24 / 16 rem – 1.5 rem
と、キリの悪い数字で設定しにくいので、
　
あらかじめ

html {
  font-size: 62.5%;
}

と、ルート要素（html要素）のフォントサイズを10pxにしておきます。
　
これで、
10px = 16 / 10 rem = 1.6 rem
12px = 12 / 10 rem = 1.2 rem
24px = 24 / 10 rem – 2.4 rem
と、わかりやすくなります。

rem の使いかた（レスポンシブル対応）

rem は、レスポンシブル対応にとても適しています。
例えば、
720pxのスマートフォンなどの　720px では 62.5%
それ以上のサイズの時は 1.2 倍に拡大したいときは

html {
        font-size: 62.5%;
}
@media screen and (max-width: 720px) {
    html {
        font-size: 75%;
    }
}

とすれば良いのです。

この記事を読む

【JavaScript】手書き風グラフⅡ③

2022年3月21日

JavaScript

今回は、前回に続く”jsライブラリ「rawViz.js」の紹介の続きです。
前回は、基本的な記述法について説明しましたが、今回から、個々のフラフの種類の記述方法について紹介していきます。
　
今回は
　・円グラフ（ドーナツ状）
　・円グラフ（パイ状）
の２つについて、紹介していきます。
　
　

円グラフ（ドーナツ状）

new roughViz.Donut({
   element: '.viz',
   data: {labels: ['a', 'b'], values: [10, 20]}
})

ラベルとデータは必須で上記のように記述します。
下記のとおりオプションがありますので、使いかたによってオプションを設定します。
　

円グラフ（パイ状）

new roughViz.BarH({
   element: '.viz',
   data: {labels: ['a', 'b'], values: [10, 20]}
})

ラベルとデータは必須で上記のように記述します。
下記のとおりオプションがありますので、使いかたによってオプションを設定します。
　

この記事を読む

【JavaScript】手書き風グラフⅡ②

2022年3月14日

JavaScript

今回は、前回に続く”jsライブラリ「rawViz.js」の紹介の続きです。
前回は、基本的な記述法について説明しましたが、今回から、個々のフラフの種類の記述方法について紹介していきます。
　
今回は
　・棒グラフ（縦）
　・棒グラフ（横）
の２つについて、紹介していきます。
　
　

棒グラフ（縦）

new roughViz.Bar({
   element: '.viz',
   data: {labels: ['a', 'b'], values: [10, 20]}
})

ラベルとデータは必須で上記のように記述します。
下記のとおりオプションがありますので、使いかたによってオプションを設定します。
　

棒グラフ（横）

new roughViz.BarH({
   element: '.viz',
   data: {labels: ['a', 'b'], values: [10, 20]}
})

ラベルとデータは必須で上記のように記述します。
下記のとおりオプションがありますので、使いかたによってオプションを設定します。
　

この記事を読む

【JavaScript】手書き風グラフⅡ①

2022年3月7日

JavaScript

今回は、”色々な種類”の手書き風のグラフを作成するjsライブラリ「rawViz.js」を紹介します。
手書きで可愛いグラフが描画できますので、ちょっとしたアクセントに良いと思います。
　
　

ライブラリの読込

　　　<script src="https://unpkg.com/rough-viz@1.0.6"></script>

HTMLの記述

DIVタグを準備

　　　<div id="viz"></div>

JSの記述

new roughViz.Donut({
  element: "#viz",
  data: {
    labels: ["a", "b", "c"],
    values: [20, 10, 5]
  },
  colors: ["#0bd", "#fc2", "#f99"]
});

手書きグラフ

この記事を読む

【JavaScript】手書き風マーカや強調、囲いなど

2022年2月28日

JavaScript

今回は、手書き風のマーカや強調、囲いなどを作成するjsライブラリ「Rough Notation」（WEBサイト、GitHub）を紹介します。
サイトの中で、ワンポイントのアクセントに使用するとイイ感じになると思います。
　
　

jsの実装

「annotation注釈を付ける要素」と「注釈スタイルを記述する構成」を渡してオブジェクトを作成します。
注釈オブジェクトを取得したら、それを呼び出しshow()て注釈を表示できます。
　

　<script type="module">
　　import { annotate } from "https://unpkg.com/rough-notation?module";

　　const e = document.querySelector('#myElement');
　　const annotation = annotate(e, { type: 'underline' });
　　annotation.show();
　</script>

　
OPTIONのプロパティ
　
　type
　　装飾の種類を指定
　　・underline: アンダーライン
　　・box: ボックスで囲う
　　・circle: 円で囲う
　　・highlight: 蛍光ペンでマークされてようにマーカを引く
　　・strike-through: 取り消し線を引く
　　・crossed-off: ×マークを書く
　　・bracket: 周りに角かっこを描画　デフォルトでは右側にありますが、左、右、上、下のいずれかまたはすべてに構成できます
　
　animate
　　アニメーション効果をつけるかどうかを指定
　　デフォルトは true
　
　animationDuration
　　アニメーションする時間を指定
　　デフォルトは 800ms
　
　color
　　装飾の色を指定
　　デフォルトは currentColor
　
　strokeWidth
　　装飾の線幅を指定
　　デフォルトは 1
　
　padding
　　要素と装飾の隙間の幅を指定
　　上下左右を個別に、[top,right,bottom,left] [top & bottom, left & right] と指定することもできます。
　　デフォルトは 5px
　
　multiline
　　インライン要素のみ有効
　　複数行に装飾するときに true に設定します
　
　iterations
　　装飾を描画する際の繰り返し数を設定します
　　デフォルトは 2
　
　brackets
　　角かっこを装飾する位置を設定します（left, right, top, bottom）
　　デフォルトは right
　
　rtl
　　左から右へ記載する文章のときに、true を設定します。
　
　
Annotation Group
装飾するオブジェクトをグループ化することにより、描画順を指定することができます。

　<script type="module">
　　import { annotate, annotationGroup } from 'rough-notation';

　　const a1 = annotate(document.querySelector('#e1'), { type: 'underline' });
　　const a2 = annotate(document.querySelector('#e3'), { type: 'box' });
　　const a3 = annotate(document.querySelector('#e3'), { type: 'circle' });

　　const ag = annotationGroup([a3, a1, a2]);
　　ag.show();
　</script>

サンプル

この記事を読む

【JavaScript】手書き風グラフ

2022年2月21日

JavaScript

今回は、手書き風のグラフを作成するjsライブラリ「CHART.XKCD」を紹介します。
手書きで可愛いグラフが描画できますので、ちょっとしたアクセントに良いと思います。
　
　

ライブラリの読込

　　　<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1/dist/chart.xkcd.min.js"></script>

HTMLの記述

SVGタグを準備

　　　<svg class="line-chart"></svg>

JSの記述

titleでグラフのタイトル、xLabelとyLabelでそれぞれX軸・Y軸のラベル、datasetsでそれぞれのデータをセットします。

const svg = document.querySelector(".line-chart"); 
new chartXkcd.Line(svg, {
  title: "デベロッパーの月収",
  xLabel: "月",
  yLabel: "$ ドル",
  data: {
    labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
    datasets: [
      {
        label: "計画",
        data: [30, 70, 200, 300, 500, 800, 1500, 2900, 5000, 8000]
      },
      {
        label: "現実",
        data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150]
      }
    ]
  },
  options: {}
});

フォントの変更

デフォルトでは英文のフォントなので、optionでフォントを日本語の適当なフォントを当てる

　options: {
     fontFamily:'Yomogi',
  }

手書きグラフ

この記事を読む

【WordPress】＄wpdbに自作データベースを追加で読み込む方法

2022年2月14日

WordPress

今回は、Wordpressで自作のデータベースを読み込むようにしている時、
ある日突然、動かなくなったことがありませんか？
そんな時の確認方法と修正方法について紹介していきます。
　
Wordpressで自作のデータベースを読み込むようにする場合には、
Wordpressの独自関数「$wpdb」に、自作のデータベースを事前に登録する必要があります。
この登録方法は、「wp-includes」フォルダ内にある「wp-db.php」ファイルの中身を下記のとおり書き換える必要があります。
　
例）自作のデータベーステーブル「wp_mytable」を利用するとき

　public $tables = array(
		'posts',
		'comments',
		'links',
		'options',
		'postmeta',
		'terms',
		'term_taxonomy',
		'term_relationships',
		'termmeta',
		'commentmeta',
		'mytable',
	);

「$tables」の配列に自分で作成したデータベーステーブル「mytable」を追加します。
※接頭辞「wp_」は省略します。
　
これで、自作の「wp_mytable」を「$wpdb」を使用して呼び出すことができるようになります。
　
　
★★しかしながら、上記の方法では WordPress がバージョンアップなどで更新したときに、「wp-includes」フォルダ内にある「wp-db.php」ファイルも勝手に更新されます。
これによって、上記で追記した「mytable」が削除されてしまい、利用できなくなってしまいます。
これを防ぐために、「wp-content」フォルダ内に「db.php」ファイルを新しく作成してその中で「$tables」をリライドさせます。

　<?php
          require_once(ABSPATH.WPINC.'/wp-db.php');

          class my_wpdb extends wpdb {
         　　　public $tables = array(
		          'posts',
		          'comments',
		          'links',
		          'options',
		          'postmeta',
		          'terms',
		          'term_taxonomy',
		          'term_relationships',
		          'termmeta',
		          'commentmeta',
		          'mytable',
	          );
          };

          if( !isset($wpdb) ) {
                    $wpdb = new my_wpdb( DB_USER, DB_PASSWORD, DB_NAME, DB_HOST );
          }

　
これで、wordpressが自動で更新されても、$wpdbは書き換えられないので安心です。
　

　

この記事を読む

【GAS】文字列で扱う

2022年2月3日

その他（WEB）

GAS で、スプレッドシートに入力しているデーに、文字列検索をかけても検索に引っかからないときの解決法

GAS で、スプレッドシートで文字列を検索するとき、スプレッドシート側が数字の場合は、indexOf等を利用して検索しても検索にひっかからない。
スプレッドシートの方を文字列にしておく必要があるので、その方法をメモしておく。
　

      const sp = SpreadsheetApp.openById("********");
      const itemList = sp.getSheetByName("********");

      var values = itemList.getRange(1, 3, itemList.getLastRow()).getDisplayValues().flat();
      var r = values.indexOf(yubin)+1;
      var address = itemList.getRange(r, 7).getValues() + itemList.getRange(r, 8).getValues() + itemList.getRange(r, 9).getValues()

この記事を読む

新年のご挨拶

2022年1月4日

お知らせ

　
新年あけましておめでとうございます。
　
旧年中は格別のご愛顧を賜り、厚く御礼申し上げます。
本年も社員一同事業所様はもちろんご利用者様のお役に立ちたい！を胸に、
より一層のサービス向上を目指し、誠心誠意努力させていただく所存でございます。
　
今後ともご指導ご鞭撻のほど、どうぞ宜しくお願い申し上げます。
末筆ながら皆さまのご健康とご多幸を心よりお祈りし、新年のご挨拶とさせていただきます。
　
プラスワン　スタッフ一同

この記事を読む

【WordPress】現在時刻取得・表示するには

2021年12月28日

PHP　WordPress

PHPで現在時刻を取得するには
date()関数　を使用するが
WordPressでは、時間がずれてしまう。

Wordpressでは、内部的な時刻がUTC (世界標準時) が
利用されているので、date()関数を使用すると、時刻がずれてしますようです。

そのため、WordPressには「date_i18n()」関数が用意されており、
これを使用すると、正確に現在時刻が取得できます。
=========

$date = date_i18n(‘Y-m-d H:i:s’);

==========

その他の方法として「date_default_timezone_set()」で、
標準となる時刻を設定する方法もある。
=========

date_default_timezone_set(‘Asia/Tokyo’);
$date = date(‘Y-m-d H:i:s’);

==========

【date()関数】
=========

date(フォーマット形式 [, タイムスタンプ]（[ ]は省略可）);

==========
※タイムスタンプを省略した場合は、現在の日付時刻を返します。

■フォーマット形式
●年
　Y　西暦（4桁）　2015
　y　西暦（2桁）　15
　L　うるう年→1、普通の年→0
●月
　m　月（2桁）　07
　n　月（先頭の0なし）　7
　M　英語（略語）　jul
　F　英語　july
●日
　d　日（2桁）　09
　j　日（先頭の0なし）　9
　t　その月の日数　31
　z　その年の経過日数　121
●曜日・週
　D　英語（略語）　Tue
　l　英語　Tuesday
　w　曜日（日曜0→土6） 2
　W　その年の経過週（月曜開始）　28
●時間
　H　24時間単位　09
　G　24時間単位（先頭の0なし）　9
　h　12時間単位　09
　g　12時間単位（先頭の0なし）　9
　a　午前/午後（小文字）　am
　A　午前/午後（大文字）　AM
●分　
　i　分（2桁）　09
●秒
　s　秒（2桁）　09

この記事を読む

サンタクロースになりませんか？

2021年12月22日

日常

今年もクリスマスが近づいてきました。
　
と言っても、子どもも大きくなってプレゼントをあれこれと悩んで枕元に置くということはなくなり、なんだか寂しい今日この頃ですｗ
　
先日、twitterのフォロワーさんの投稿に、「Amazonが全国の児童施設の欲しいものリストがまとめられていてお手軽にサンタクロースになれるよ」というものがありました。
早速、紹介があった下記URLにアクセスしてみると、全国の児童施設が一覧がありクリックするとその施設の欲しいものリストが表示されました。
https://www.amazon.co.jp/b?ie=UTF8&node=10217438051

　
リストの中には、液体せっけんや洗剤などの生活必需品や子どものおもちゃなど、普通の家庭だとごく当たり前にあるものが多数ありました。
　
今年は、サンタになってこのリストの中からいくつかをポチろうと思います。
みなさんもお手軽にサンタクロースになれるので、ぜひいかがでしょうか？
　
　

　

この記事を読む

【WordPress】管理画面に独自のstyle/scriptを当てる方法

2021年12月22日

WordPress

前回、wordpressの管理画面（ダッシュボード）に独自のメニュー・サブメニューを追加する方法を説明しましたが、
・管理画面に独自メニューを作る方法①
・管理画面に独自メニューを作る方法②
　
今回は、その作成した管理画面に独自の style や script を当てる方法を説明します。
　

管理画面に独自のstyle/scriptを当てる

functions.php に下記を追加します。
　
■CSS ファイルを読み込む

　 function my_admin_style(){
    　 //CSSを追加
    　 wp_enqueue_style( 'my_admin_style', get_template_directory_uri().'/css/my_admin_style.css' );

    }
    add_action( 'admin_enqueue_scripts', 'my_admin_style' );

■JavaScript ファイルを読み込む

　 function my_admin_script(){
    　 wp_enqueue_script( 'my_admin_script', get_template_directory_uri().'/js/my_admin_script.js' );
     
    　 // jQuery のコードだった場合
    　 wp_enqueue_script( 'my_admin_script', get_template_directory_uri().'/js/my_admin_script.js', array('jquery'));
     
    　 // body 終了タグ直前で読み込みたい場合（読み込み位置をフッターにするには第4引数を true にします）
    　 wp_enqueue_script( 'my_admin_script', get_template_directory_uri().'/js/my_admin_script.js', '', '', true);
     
    　 // body 終了タグ直前で jQuery のファイルを読み込みたい場合
    　 wp_enqueue_script( 'my_admin_script', get_template_directory_uri().'/js/my_admin_script.js', array('jquery'), '', true);
　 }
　 add_action( 'admin_enqueue_scripts', 'my_admin_script' );

管理画面の特定したページのみに独自のstyle/scriptを当てる

※前回の「wordpressの管理画面（ダッシュボード）に独自のメニュー・サブメニューを追加する方法」では、追加する画面の HTML(PHP) を直接 function.php に書き込んでいたが、
管理画面の特定したページのみに独自のstyle/scriptを当てるには、直接書き込むのではなく、include で PHP ファイルを読み込む必要があります。まず、その方法について説明します。
　
functions.php に下記を追加します。
　

　add_action( 'admin_menu', 'menu_page' );
　function menu_page(){
   　add_menu_page( 'お知らせ・ブログ記載方法', 'お知らせ・ブログ記載方法',
   　'edit_posts', 'info_menu', 'banner_options_page', 'dashicons-info', 3 );
　}
　function banner_options_page() {
　　//別に用意した PHP ファイルを読み込ませる
　　//ファイル名は、上記関数の引数のスラッグ名と同じにする
    include 'info_menu.php';
　}

　
これで追加したページのみに、CSS/JavaScript を当てます。
functions.php に下記を追加します。
　

　function my_admin_style(){
    wp_enqueue_style( 'my_admin_style', get_template_directory_uri().'/css/my_admin_style.css' );
　}
　add_action( 'admin_head-toplevel_page_info_menu', 'my_admin_style' );

　function my_admin_script(){
    wp_enqueue_script( 'my_admin_script', get_template_directory_uri().'/js/my_admin_script.js' );
　}
　add_action( 'admin_head-toplevel_page_info_menu', 'my_admin_script' );

add_action の引数の admin_head-toplevel_ の後に、追加したページのスラッグ名（画面の名前）を付ける。
　
■追加したページのスラッグ名（画面の名前）が分からない場合は、次のように「wp_die()」を使用して確認することができます。

　function my_admin_style($custom){
    wp_die( '<pre>' . var_export( $custom, true ) . '</pre>' );
　}
　add_action( 'admin_enqueue_scripts', 'my_admin_style' );

この記事を読む

PlusOne Blog

記事一覧

【CSS】font-size に使われる rem とは

rem とは

rem を使うときは

rem の使いかた（レスポンシブル対応）

【JavaScript】手書き風グラフⅡ③

円グラフ（ドーナツ状）

円グラフ（パイ状）

【JavaScript】手書き風グラフⅡ②

棒グラフ（縦）

棒グラフ（横）

【JavaScript】手書き風グラフⅡ①

ライブラリの読込

HTMLの記述

JSの記述

手書きグラフ

【JavaScript】手書き風マーカや強調、囲いなど

jsの実装

サンプル

【JavaScript】手書き風グラフ

ライブラリの読込

HTMLの記述

JSの記述

フォントの変更

手書きグラフ

【WordPress】＄wpdbに自作データベースを追加で読み込む方法

【GAS】文字列で扱う

新年のご挨拶

【WordPress】現在時刻取得・表示するには

サンタクロースになりませんか？

【WordPress】管理画面に独自のstyle/scriptを当てる方法

管理画面に独自のstyle/scriptを当てる

管理画面の特定したページのみに独自のstyle/scriptを当てる

最近の投稿

カテゴリー

アーカイブ