VBAの勉強を始めてみた

タイトルの通りVBAの勉強を始めました。効率化と暇つぶしを兼ねています。VBA以外の話題もあるよ(笑)

「PageTopへ戻る」ボタンを1ステップで実装してみる

皆さんのブログ記事を見ていて、よく目にする「PageTopへ戻る」ボタン
あれ、いいなぁ~と思いながら、いつも指をくわえて見ていたので、今回は自分のブログにも実装してみたいと思います。
最速かもしれない(←ぇ)1ステップで、実装までを実現してみます。

目次

 

 Step.1 HTMLへの記載(jQuery読込み、JavaScript記述、ボタン用画像の設定とCSSの設定)

 

下記をHTML編集モードの本文にコピペします。(HTML内の<body>~</body>にあたります) 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(function () {
    var topBtn = $('#page-top');
    topBtn.hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 500) {    //ボタンを出現させるスクロール位置をpxで指定
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 300);	//完了までの時間をミリ秒単位で指定
        return false;
    });
});
</script>

<p id="page-top" style="position: fixed;bottom: 5px;right: 10px;cursor : pointer;z-index: 99;" hidden>
<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/k/kouten0430/20171208/20171208181157.png">
</p>

これで実装完了!(このページの「PageTop」ボタンが、上記で実装したものです)

 

赤字の箇所は、お好みで変更して下さい。上から順に説明します。

  • 「1.12.4」:jQueryのバージョンです
  • 「500」:ページ上端からスクロールしていって、PageTopボタンが出現するまでのピクセル数です
  • 「300」:PageTopボタンを押してページ上端に到達するまでの時間(ミリ秒)です
  • 「5px」:bottom 画面下からの距離を指定する
  • 「10px」:right 画面右からの距離を指定する
  • 「HTTP://~」:ボタンに使用する画像のURLです(上記は、はてなフォトライフのURLです)

 

なお、<body>~</body>内へのコピペであれば、記事ごとにPageTopボタンが配置されます。

<head>要素にコピペすると、はてなブログの場合、全記事(過去記事含む)にPageTopボタンが配置されます。

 

 

補足説明

コードの上から順に補足説明します。

  • <script src="">:jQueryをロードしている部分です。
  • <script>:メインプログラムのJavaScriptjQueryの文法で)を記述している部分です。
  • id="":JavaScriptが制御する要素を指定しています。id名は任意。
  • style="":ボタン位置もろもろを指定するCSSです。1Stepで実装するために、あえてインラインスタイルにしました。
  • position:要素の位置を指定します(fixedでは画面を基準にし、下からの位置、右からの位置などを指定します)
  • pointer:画像を選択した時に、カーソルが指の形になるようにしています。
  • z-index:重なり順序を指定しています。値が大きい要素ほど前面にきます。
  • hidden:JavaScriptが読み込まれて実行されるまでの画像のチラ映りを防止します。
  • <img src="">:文字の代わりに画像を指定しています。 

はてなフォトライフにアップロードした画像は、画像を右クリックでURLを取得できます。

 

なお、jQueryjQueryを使ったJavaScriptの記述については、専門書や専門のサイトを参照してくださいませ(;^_^A
ではでは。

 

Milkさんの記事を参考にさせていただきました!

www.milkmemo.com

 

Illustrated by 霜山 シモンさま

f:id:kouten0430:20171209140506p:plain

Gistを貼り付ける

ソースコードの表示を見やすくカスタマイズシリーズ(番外編)です。

今回は、Gist貼り付けをやってみます。

Github.Gistのアカウントの作成から、ブログへの貼り付けまで10分ほどで出来ます。
考えるな、感じろの精神でとりあえずやってみましょう。


Github.Gistにアクセスし、アカウント作成します。 

f:id:kouten0430:20171205233016j:plain

をクリックし、

  • Username
  • Email address
  • Password

をそれぞれ入力して、次へすすみ

認証メールを受信してユーザー認証を行います。

 

ログインした状態で再度、Github.Gistにアクセスし

Gistを作成します。(注:GitHubに行かない) 

f:id:kouten0430:20171205233554j:plain

  1. 登録するGistのコメント(てきとう)を入力します。
  2. Gistの名称を入力します。(ピリオドの後に言語名を記入すると、シンタックス・ハイライトされます〔VBAなら.vbまたは.vba〕)
  3. コードを貼り付けします。(Google Chromeではうまく貼り付けできますが、IEではうまくいきませんでした)
  4. 「Create public qist」をクリックして登録します。(Gistを追加するときは、「Add file」をクリック)

 

はてなブログの記事に貼り付けします。

f:id:kouten0430:20171205233731j:plain

  5.サイドバーの「Gist貼り付け」をクリック(無ければ+ボタンから追加する)

  6.Github.GistのユーザーIDを入力して、連携する

  7,登録済みのGistを選択し、

  8.「選択したアイテムを貼り付け」をクリック

 


こんな感じで貼り付けされました。では('ω')ノ

ブログを書くこと自体がプログラミングのようなもの?(雑記-5)

こんばんにゃ。とりとめのない雑記です。

 

ブログを書くこと自体がプログラミングのようなもの?
最近ブログを書いていて思うのですが、ブログを書くこと自体がプログラミングのようなものではないか・・・と思うのです。日本語という言語を使って、考え・思いなどを文章のかたちにする。その文章にアクセスした読者または未来の自分は、その内容を順番に読み込んでいって咀嚼(コンパイル)する。
文章が簡潔で適切な表現なら、コンパイルに失敗しないし、メモリも少なくてすむ。
ただし、大きな違いは、プログラムを読み込むのはコンピューターではなく人間なので、実行に移すかどうかは心を動かされるかどうか、です。
そんな、心を動かすようなものを書ける人ってすごいと思います。

 

ツイッターとブログの違い
私はツイッターもやってますが、正直、ツイッターは何を書いていいかさっぱり思いつきません・・・。ブログだと書きたいことはたくさんあるんですケド。(更新速度は遅めですがね)
ツイッターとブログの違いは何だろう?と考えた結果、ツイッターに必要なのは「ノリ」や「テンポ」のようなもので・・・言葉は消耗品となり、流れて消えていく傾向にあります。
ブログはツイッターと比べ、言葉の前後を入れ替えたり、表現を変えたりしながら、試行錯誤して作る、プログラミングに似ていると思います。
現実の世界であえて、ツイッターが好きか、ブログが好きか、両方好きか、の3タイプにわけるとこうでしょうか?
ツイッター好き:お調子もの(他愛のない雑談が好き)
ブログ好き:真面目(じっくり考えるのが好き)
両方好き:器用

注:好天の偏見が入っております


趣味>仕事であってはならない
じっくり考えて、書いていくブログですが(もう勝手に決め付けてます)、これはあくまでも趣味あり、趣味>仕事であってはならないと常々考えています。本業のほうが上手くいっているからこそ、趣味が楽しめるという図式が成り立っているのであり、本業のパフォーマンスが落ちるような趣味のやり方はすべきではないと断言します。あなたが趣味のやりすぎでヘロヘロになって出社して、実力の半分も出せないのであれば、その不足分は必ず回りまわって他の誰かが補完しています。(たぶん)
仕事人間は面白くない、といわれそうですが、そうではなく力分配を間違えないように、ということを言いたいのです。


最後に
ってなことを、えらそうに書きましたが、これらは全て自分に向けて言い聞かせているのであり、自分を正しく制御するための一種のプログラミングなのです。はい。

では。また('ω')ノ

 

f:id:kouten0430:20171203234335p:plain

ブログを見やすくする:ソースコードを見やすくカスタマイズ ~JavaScriptの利用~

前回は、はてな記法Markdown記法を使ってソースコードの表示をカスタマイズしてみましたが、今回はJavaScriptを使ってカスタマイズしてみたいと思います。といっても、自分でJavaScriptを書くわけではなく、シンタックス・ハイライト用に配信されている既存のサービスを利用します。
何個か有名そうなのを実際に試してみたので、お付き合い下さい。

 

highlight.js

「設定」→「詳細設定」→「headに要素を追加」に以下を追記します。(はてなブログ以外ではHTML文書の<head>~</head>の部分に該当します)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/far.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

 

このブログは当たり前のことをドヤ顔で書くブログなので、ひとつひとつ解説してみます。まず、1行目でデザインの元になる外部CSSファイルをロードし、2行目で外部JavaScriptファイルをロードします。3行目でロードしたJavaScriptの関数を実行しています。

<script>タグは、<head>~</head>および<body>~</body>のどちらでも記述できますが、<link>タグは<head>~</head>にしか記述できません。

バージョン(9.12.0など)とCSSファイル(far.min.cssなど)は適宜変更します。

 

<link>タグ:

外部リソースを指定する。(rel〔リレイション〕属性:現在の文書からみた外部リソースの位置づけを表す。href〔ハイパーリファレンス〕属性:外部リソースのURLを指定する)

<script>タグ:

JavaScriptなどのスクリプトを組み込む。(src〔ソース〕属性:指定したURLにある外部jsファイルをロードする)

 .minの意味:

highlight.min.jsやfar.min.cssなどファイル名に.minがついているものは、一般的にminifiedファイルと呼ばれ、コード内のコメントや改行・インデントを削除しファイル容量を小さくしたバージョンになります。(highlight.js→コメントや改行・インデントがそのままの開発者向けファイル、highlight.min.js→コメントや改行・インデントを削除し容量を小さくした配布用ファイル)

 

さて、ここまで準備したら実際にシンタックス・ハイライトさせて見てみましょー。<pre><code>~</code></pre>に記述されたコードが、ロードしたJavaScriptCSSによってハイライト処理されます。(プログラミング言語の種類は自動判別されます)

用意されたデザインがたくさんあるので、いくつか代表で見てみます。

 

far.min.css

f:id:kouten0430:20171203123152j:plain

 

docco.min.css

f:id:kouten0430:20171203123241j:plain

 

brown-paper.min.css

f:id:kouten0430:20171203123310j:plain

 

school-book.min.css

f:id:kouten0430:20171203123330j:plain

 

tomorrow-night-blue.min.css

f:id:kouten0430:20171203123348j:plain


これ以外のデザインは公式にデモがあるので、こちらを参照して下さい。

 


google-code-prettify

「設定」→「詳細設定」→「headに要素を追加」に以下を追記します。

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

 

このようにオートローダーを読み込むだけでOKです。(オートローダーとは:src属性で読み込んだJavaScriptが、関連するCSSなどのファイルの読み込み、関数の実行までを一括で行います)

さて、オートローダーの設定ができたら、<pre class="prettyprint">~</pre>にコードを記述します。(class属性にprettyprintを指定したものが、シンタックス・ハイライトの対象になります。 言語を指定する場合は、"prettyprint lang-言語名"とします)
<code>タグは不要です。

読み込むCSSを変更する場合は、下記のようにURLの末尾にリクエストパラメータを付記します。(リクエストパラメータとは:URLの末尾に「?」マークを付け、続けて「名前=値」の形式で記述します。クライアントからサーバにパラメータを渡すのに使われます)

*/run_prettify.js?skin=desert(デザイン「desert」を読み込む場合)


default(パラメータ無し)

f:id:kouten0430:20171203123837j:plain

 

desert

f:id:kouten0430:20171203123858j:plain

 

doxy

f:id:kouten0430:20171203123914j:plain

 

sunburst

f:id:kouten0430:20171203123935j:plain


個人的には「doxy」が、昔のアーケードゲームのスコアランク画面のようで好みです。

 

 

prism.js

必要なjsファイルとcssファイルをダウンロードして使います。公式ページの右上「DOWNLOAD」から入り、ダウンロードするファイルにチェックを入れます。

 

「Core」・・・必須
「Themes」・・・CSSの種類です。お好みのものにチェックします。
「Languages」・・・使用するプログラミング言語にチェックします。
「Plugins」・・・お好みでチェックを入れる

 

最後に、一番下の「DOWNLOAD JS」と「DOWNLOAD CSS」をそれぞれ押して、prism.jsとprism.cssをダウンロードします。

ダウンロードしただけでは、ローカルでしか使えないので、オンライン上からアクセスできる場所に保存します(例えば、契約しているプロバイダーの無料HPスペースなど、権限がなくてもアクセスできる場所ならどこでも)

んで、「設定」→「詳細設定」→「headに要素を追加」に以下のように書きます。(*/の箇所は保存した場所のURLにします)

<link rel="stylesheet" href="*/prism.css">
<script src="*/prism.js"></script>

 

やっていることは、CDN(コンテンツ・デリバリー・ネットワーク:コンテンツ配信網)を利用しているか、自前で保存したファイルを利用しているかの違いだけです。

<pre><code class="language-言語名">~</code></pre>に記述されたコードが、シンタックス・ハイライトされます。

CSSを変更する際は、公式ページから「Themes」のチェックを入れ替えて再度、prism.cssをダウンロードし、保存してあるprism.cssと入れ替える必要があるようです。

 

Default

f:id:kouten0430:20171203124351j:plain

 

Dark

f:id:kouten0430:20171203124409j:plain

 

Coy

f:id:kouten0430:20171203124430j:plain

 

Okaidia

f:id:kouten0430:20171203124447j:plain

 

Solarized Light

f:id:kouten0430:20171203124506j:plain

 

Twilight

f:id:kouten0430:20171203124522j:plain

 

公式かどうかわかりませんが、CDN版もあります。こちら

 

 

最後に

ここまでやってきてアレですが、VBはうまく言語判別されないようです・・・。唯一、prism.jsがまともかなぁと思ったのですが、よくみると少しヘンです・・・。

 

追記:

さっそく、thomさんにprism.js不具合修正について教えていただきました。

thom.hateblo.jp

Coyを例に修正後のスクリーンショットを掲載します。さあ、間違い探しです。どこが変わったでしょうか?

f:id:kouten0430:20171203174524j:plain

ブログを見やすくする:ソースコードを見やすくカスタマイズ ~はてな記法、Markdown記法~

今回は、「はてな記法」と「Markdown記法」を使ってソースコードの表示を見やすくカスタマイズしてみたいと思います。

 

はてな記法とは?

はてな記法を使うと、HTMLの知識がなくても、見出しやリストといった、ブログを書く上で便利な表現を簡単に行うことができます。(はてなダイアリーヘルプより)

例えば、「はてな記法」編集モードでは

 

<h3>はてな記法とは</h3>

 

 

*はてな記法とは

 

と書くことができます。

こう書くと「各HTMLごとにはてな記法があるのか・・・覚えるの大変そうだなぁ」と思ってしまいそうですが、意外とはてな記法はそんなに多くなく、必要最低限のものに凝縮されているようです。下記は、はてなダイアリーヘルプ内の、はてな記法一覧へのリンクです。

はてな記法一覧 - はてなダイアリーのヘルプ

これくらいなら、一覧を参照しながら記述できそうです。

 

で今回の目的である、ソースコードの表示を見やすくするためのはてな記法は・・・

 

>||
ここにソースコードを記載する
||<

 

シンタックス・ハイライト(プログラムコードなどの構文を色付けする)させる場合は

 

>|ファイルタイプ|
ここにソースコードを記載する
||<

 

となります。ファイルタイプは、はてなダイアリーヘルプに網羅されていますので参照下さい。
試しにVBAのコードをはてな記法で表示してみます。(VBAのファイルタイプはvbです)

Sub 乱数を生成()
    '10未満1以上の乱数を5000個生成する
    Dim i As Integer
    Randomize
    For i = 2 To 5001
        Cells(i, 2).Value = Rnd
    Next i
    Randomize
    For i = 2 To 5001
        Cells(i, 2).Value = Cells(i, 2).Value + Int((9 - 1 + 1) * Rnd + 1)
    Next i
End Sub

こんな感じで、表示されます。ちなみに背景色・文字色(ハイライトされない文字)は外部CSSで指定した色になるようです。

 

 

Markdown記法とは?

書きやすくて読みやすいプレーンテキストとして記述した文書を、HTML文書へと変換できるフォーマットとして、開発された記法だそうです。・・・要するにHTMLタグをいちいち記述するのは大変なので、簡単に書く方法を考えてみたよ!ということですね。しかし、Markdown記法で書いたものをそのままブラウザで表示することはできないので、Markdown記法→HTMLに変換するスクリプトMarkdown.pl)を実装している必要があります。
はてなブログは、Markdown記法で書いたものをHTMLへ変換するスクリプトを実装したブログということになります。

例えば、「Markdown記法」編集モードでは

 

<h3>Markdown記法とは</h3>

 

 

### Markdown記法とは

 

と書くことができます。はてな記法Markdown記法は、HTMLへの変換スクリプトが違うだけで、目的は同じものであるといえます。はてな記法に比べて、Markdown記法のほうが汎用的なので覚える価値はあると思います。

下記は、Markdown記法の一覧(サンプル)を掲載したページへのリンクです。

Markdown記法 サンプル集 - Qiita

 

で、ソースコードの表示を見やすくするためのMarkdown記法は・・・

 

```
ここにソースコードを記載する
```

 

シンタックス・ハイライトさせる場合は

 

```言語名
ここにソースコードを記載する
```

 

となります。(VBAの言語名はvbです)

表示結果は、はてな記法の時と同じなので割愛します。

 

「見たまま」編集モードをメインに使っている方は、はてな記法Markdown記法には無縁か・・・というとそんなことはないかもしれません。考え方を変え、はてな記法Markdown記法をHTML生成のためのツールとして利用するというのもアリです。
例えば、「見たまま」編集モードには標準でシンタックス・ハイライト機能が無いので、シンタックス・ハイライトされたHTMLを「はてな記法」編集モードまたは「Markdown記法」編集モードに生成してもらいましょう。

 

Google Chromeを使った方法です。

  1. はてな記法またはMarkdown記法でシンタックス・ハイライトしたソースコードをプレビューに表示します。
  2. プレビューの該当する要素(ここではpre)の上で右クリックし、検証をクリックします。
  3. するとページのHTML構造が表示され、pre要素が選択された状態になっていると思います。(選択されていなければ矢印マークを押して、該当の要素を選択しませう)

    f:id:kouten0430:20171125145742j:plain

  4. 該当のpre要素が選択された状態で右クリックし、「Copy」-「Copy outerHTML」で、HTMLをクリップボードに取得できます。

 

取得した、シンタックス・ハイライト済みのHTMLはこんな感じ

<pre class="code lang-vb" data-lang="vb" data-unlink=""><span class="synStatement">Sub</span> 乱数を生成<span class="synStatement">()</span>
   <span class="synComment"> '10未満1以上の乱数を5000個生成する</span>
    <span class="synStatement">Dim</span> i <span class="synStatement">As</span> <span class="synType">Integer</span>
    <span class="synStatement">Randomize</span>
    <span class="synStatement">For</span> i <span class="synStatement">=</span> <span class="synConstant">2</span> <span class="synStatement">To</span> <span class="synConstant">5001</span>
        Cells<span class="synStatement">(</span>i<span class="synStatement">,</span> <span class="synConstant">2</span><span class="synStatement">).</span><span class="synPreProc">Value</span> <span class="synStatement">=</span> <span class="synIdentifier">Rnd</span>
    <span class="synStatement">Next</span> i
    <span class="synStatement">Randomize</span>
    <span class="synStatement">For</span> i <span class="synStatement">=</span> <span class="synConstant">2</span> <span class="synStatement">To</span> <span class="synConstant">5001</span>
        Cells<span class="synStatement">(</span>i<span class="synStatement">,</span> <span class="synConstant">2</span><span class="synStatement">).</span><span class="synPreProc">Value</span> <span class="synStatement">=</span> Cells<span class="synStatement">(</span>i<span class="synStatement">,</span> <span class="synConstant">2</span><span class="synStatement">).</span><span class="synPreProc">Value</span> <span class="synStatement">+</span> <span class="synIdentifier">Int</span><span class="synStatement">((</span><span class="synConstant">9</span> <span class="synStatement">-</span> <span class="synConstant">1</span> <span class="synStatement">+</span> <span class="synConstant">1</span><span class="synStatement">)</span> <span class="synStatement">*</span> <span class="synIdentifier">Rnd</span> <span class="synStatement">+</span> <span class="synConstant">1</span><span class="synStatement">)</span>
    <span class="synStatement">Next</span> i
<span class="synStatement">End</span> <span class="synStatement">Sub</span>
</pre>

これを「見たまま」 編集モードのHTML編集に貼り付けましょう。ただし、見たまま・はてな記法Markdown記法の各モードは記事内容を保持したまま切り替えできないので、HTML生成作業は別途済ませましょう。

 

次回は、JSライブラリを利用した、ソース・コード表示のカスタマイズについて記載したいと思います。

ブログを見やすくする:ソースコードを見やすくカスタマイズ ~<pre><code>タグ~

これまでブログの見た目には無頓着だった私ですが、ブログの見やすさにも少し気を配ったほうが良いという声が聞こえた(気がした)ので、今回からちょっとずつカスタマイズしてみたいと思います。

まず、今更ですが、ブログに掲載するソースコードを見やすくしてみようということで<pre><code>タグを使ってみます。

やり方は簡単。HTML編集モードで、ソースコードを<pre><code>タグの中に記載するだけです。

 

<pre><code>ここにソースコードを記載する</pre></code>

 

<code>:プログラムのソースコードであることを示す。<code>タグで囲まれた部分は等幅フォントで表示される。
<pre>:インデントや改行をそのまま再現して表示する。

 

ただし、このままでは、ブログのテーマで設定された背景色・文字色になってしまうので、それが気に入らなければ、<pre>タグのスタイルを変更しましょう。

例えばこんな感じ

<pre style="font-size: 130%; color: #666699; background-color: #fcf4fe;"><code></code></pre>

font-size:フォントの大きさを変更します。
color:文字色を変更します。
background-color:背景色を変更します。

 

色の値が分からない場合は、前回、エクセルで色を確認しつつ16進数を取得するプログラムを作ってみたので参考にして下さい。 

kouten0430.hatenablog.com

 

上記のようにHTML内のタグごとにCSSを書いていく方法を、「インラインスタイル」と呼びます。

 

打って変わって、ブログ内のすべての<pre>タグに同じCSSを適用したい場合は、デザイン→カスタマイズ→デザインCSSを選択し、適用したいCSSを追記します。

外部スタイルシートの書き方はこんな感じ

pre {
 font-size: 130%;
  color: #2F4F4F;
  background-color: #F5F5F5;
}

ここで注意するのは最初から書いてあるコード(下の画像では1行目~7行目)は消さずに、8行目以降に追記していきます。最初から書いてあるコードはテーマごとのスタイルを反映するものです。

f:id:kouten0430:20171123145059j:plain

 

このように同じ要素すべてに一括でCSSを適用する方法を、「外部スタイルシート」と呼びます。

CSSは後に書かれた記述が優先されるため、この場合はテーマCSSよりも、追記されたCSSのほうが優先されます。さらにインラインスタイルが記述されている場合は、インラインスタイルが優先されます。

優先順位
1:インラインスタイル
2:外部スタイルシート
3:テーマで設定されたスタイル(厳密にはこれも外部スタイルシート

この考え方は、はてなブログでなくとも共通だと思います。

 

さて、<pre><code>タグについて紹介しましたが、
これだけでも、ソースコードを無造作に貼り付けるよりは見やすくなりますね。(自分で書いていて耳が痛い・・・)

次回、次々回あたり、ソースコードの分類によってシンタックスハイライトする方法についてやってみたいと思います。

セルの背景色および文字色の16進数を取得(CSS用に)

CSSで文字色や背景色の指定を行う際は、RGB値や16進数で色を指定することになるかと思います。

 

p {
  color: #2F4F4F; ←こーゆうヤツ
}

 

色のRGB値や16進数は、色見本を一覧表にしているHPなどで調べるか、ペイントの色の編集などで調べられますが、ちょっとだけ手間です。
なので、エクセルの背景色と文字色から色の16進数を吸い取る簡単なマクロを作ってみました。

まず、エクセルで背景色と文字色のイメージを確認します。マクロで色を吸い取るのは1セル分だけですが、1セルだけではイメージがつかみにくいので、ドバーっと背景色を塗りつぶして文字を撒き散らしましょう。

f:id:kouten0430:20171115223656j:plain

 

背景色と文字色のイメージが確認できたら、どこでもいいので1セルを選択してマクロを実行します。背景色または文字色のどちらから色を吸い取るか選択したら、メッセージボックスにRGB値と16進数が表示され、さらに16進数がクリップボードに転送されます。

f:id:kouten0430:20171115223758j:plain

 

あとは、CSSにそのままペーストするだけです。

 

p {
  color: #CC3399;
  background-color: #FFFF99;
}

 

電卓でも16進数変換できるじゃん、とか言わないでね( ・∇・)あくまでもVBAの勉強なのですよ☆ 

 

Sub 背景色および文字色の16進数を取得()
    'CSS用にアクティブセル背景色および文字色から16進数を取得します
    'Hex関数で取得した値はBGRの順なので並び替えが必要(CSSはRGBの順)
    Dim mb As Integer
    Dim cc As Long
    Dim hx As String
    Dim bl As String
    Dim gr As String
    Dim re As String
    Dim V As String
    Dim blue As Integer
    Dim green As Integer
    Dim red As Integer
    Dim myLib As Object
    Set myLib = CreateObject("new:{1C3B4210-F441-11CE-B9EA-00AA006B1A69}")
    
    mb = MsgBox("OK:背景色を取得" & vbCrLf & "キャンセル:文字色を取得", vbOKCancel)
        If mb = 1 Then
            cc = ActiveCell.Interior.Color
        Else
            cc = ActiveCell.Font.Color
        End If
        
    hx = Right("00000" & Hex(cc), 6)
    bl = Mid(hx, 1, 2)
    gr = Mid(hx, 3, 2)
    re = Mid(hx, 5, 2)
    V = re & gr & bl
    blue = CInt("&H" & bl)
    green = CInt("&H" & gr)
    red = CInt("&H" & re)
    MsgBox "RGB値:" & red & "," & green & "," & blue & vbCrLf & "16進数:" & V
    
    myLib.SetText V  '変数の値をDataObjectに格納する
    myLib.PutInClipboard 'DataObjectのデータをクリップボードに格納する
    MsgBox "16進数:" & V & vbCrLf & "をクリップボードに転送しました!"
End Sub

※SubからEnd Subまでをコピーし、標準モジュール等に貼り付けて使用して下さい。なお、マクロで実行した処理は「元に戻す」ことができません。実行前に一旦保存しやり直しのできる状態にしておいて下さい。標準モジュールにコードを貼り付けてマクロを使用する方法はこちら