Ikeda's Blog

背景にグラデーションをかけるCSS

最終目標

こんな感じなことがしたい。

 

方法

CSSには、linear-gradient()という便利なものが存在します。
これは、2色以上を指定し、直線的にグラデーションした画像を生成してくれるもの。
放射状にグラデーションするradial-gradient()なんかもあります。

ただし、IE9以下は対応していません。

書き方

基本的な書き方は、background: linear-gradient(方向(最終的に到達する箇所), 開始地点の色, 終了地点の色);です。

方向の指定は、例えば「下へ向かう」ならto bottom、「右上へ向かう」ならto right topとなります。
開始地点の色は、to bottomの場合だと、上側の色です。
終了地点の色は、開始地点の逆ですね。

例えば、右上から左下に向けて、白から黒へと変化していく場合は以下のようになります。

background: linear-gradient(to left bottom, rgba(255, 255, 255, 1), rgba(0, 0, 0, 1));

※透過させたい場合に備えて、rgbaで指定しています。別に、#fffとかでも構いません。

▼ 描画例

 

応用：グラデーションに緩急をつける

background: linear-gradient(to left bottom, rgba(255, 255, 255, 1) 90%, rgba(0, 0, 0, 1));

▼ 描画例

 

上記のように、色に対してパーセンテージを指定することで、変化する場所を変えることができます。
イメージとしては、上の例でいくと、「90%の地点までは白で塗ってから、グラデーション変化していく」という指示になります。

複数色による変化

色の指定をカンマ区切りで増やすことで、増やすことができます。
例として、白→黒→赤→青としてみます。

background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(0, 0, 0, 1), rgba(255, 0, 0, 1), rgba(0, 0, 255, 1));

▼ 描画例

 
続きを読む

エルビス演算子とNull合体演算子で、それぞれの挙動の違い

エルビス演算子（PHP5.3以降）

$val = ($_GET['value']) ?: 'default';
var_dump($_GET['value']) var_dump($val) 備考
NULL string(7) "default" Notice: Undefined index 発生
string(0) "" string(7) "default" -
string(3) "aaa" string(3) "aaa" -

Null合体演算子（PHP7.0以降）

$val = ($_GET['value']) ?? 'default';
var_dump($_GET['value']) var_dump($val) 備考
NULL string(7) "default" -
string(0) "" string(0) "" -
string(3) "aaa" string(3) "aaa" -
続きを読む

MySQLをインストールしようとしたら、「The GPG keys listed～～」と出て失敗した

叩いたコマンド

yum -y localinstall https://dev.mysql.com/get/mysql80-community-release-el7-3.noarch.rpm
yum -y install mysql-community-server

環境

CentOS 7.9

エラーメッセージ

表示されたメッセージは以下の通り。

The GPG keys listed for the "MySQL 8.0 Community Server" repository are already installed but they are not correct for this package.
Check that the correct key URLs are configured for this repository.

Deepl先生に確認してみた結果がこちら。

MySQL 8.0 Community Server」リポジトリにリストされている GPG 鍵はすでにインストールされていますが、このパッケージには正しくありません。
このリポジトリに正しい鍵の URL が設定されていることを確認してください。

解決方法

rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2022
続きを読む

WEB上のソースコードに、シンタックスハイライトを導入(highlight.js)

目的

読みやすさ向上のため、記事内に書くプログラムコード等に、シンタックスハイライトをつけたい。

導入するライブラリ

highlight.jsを導入します。

ダウンロード

TOPページのGet version XX.XX.XXをクリックします。

移動先のページで、

  • CDNを利用する
  • ダウンロードする
  • npmからインストールする

についての説明があります。
今回は、ダウンロードで利用しますので、「Custom package」のところまでスクロールします。

ここで、必要な言語を含めた分でダウンロードできます。
必要最小限に絞ることで、容量を減らすことにも繋がります。
(追加する時は、選択を増やして改めてダウンロードすれば良いので)

チェックできたら、ダウンロードボタンを押して、zipファイルを取得。
解凍後、任意の場所に設置します。

例：Laravelを利用して作った当ブログの場合

+ public
  + js
    + highlight
      + styles
        + atom-one-dark-reasonable.min.css
      + highlight.min.js

テーマの選択

スタイルを選択します。
デモページがあるので、確認して使用するテーマを決めます。

HTML側の対応

HTML側で、jsとテーマCSSを読み込みます。
以下は、このブログにて実装した際の記述です。

    {{-- コードハイライト --}}
    <link rel="stylesheet" href="{{ asset('/js/highlight/styles/atom-one-dark-reasonable.min.css') }}">
    <script type="text/javascript" src="{{ asset('/js/highlight/highlight.min.js') }}" charset="UTF-8"></script>
    <script>hljs.highlightAll();</script>
続きを読む

vagrant upでエラー発生[備忘録]

はじめに

Windows10からWindows11にアップデートしたので、新環境で構築していたらエラーが出た。
その時の備忘録。

環境

Windows11
Virtual Box
vagrant

各インストールについて

インストールについては、過去記事に書いてあることをやっています。

エラーの発生

エラーが発生したタイミングは、Windows10だったころに使用していたVagrantfileをそのまま利用してvagrant upした時。

Vagrantfileの内容

Vagrant.configure("2") do |config|
# Box名
config.vm.box = "CentOS7"

# ここで指定したIPを叩いてブラウザに表示させたりする
config.vm.network "private_network", ip: "192.168.33.10"

# メモリ(数値は自分の環境と相談)
config.vm.provider "virtualbox" do |vb|
vb.customize ["modifyvm", :id, "--memory", "1024"]
end

# Windows側のファイルを、仮想サーバに認識させる
# 直下(".")のファイルを、仮想サーバ内では`/vagrant`として扱う感じ
config.vm.synced_folder ".", "/vagrant", mount_options:['dmode=777','fmode=777']
end

エラーの内容

Progress state: E_FAIL
VBoxManage.exe: error: Failed to create the host-only adapter
VBoxManage.exe: error: Querying NetCfgInstanceId failed (0x00000002)
VBoxManage.exe: error: Details: code E_FAIL (0x80004005), component HostNetworkInterfaceWrap, interface IHostNetworkInterface
VBoxManage.exe: error: Context: "enum RTEXITCODE __cdecl handleCreate(struct HandlerArg *)" at line 95 of file VBoxManageHostonly.cpp

Failed to create the host-only adapter：ホストオンリーアダプターの作成にしました（Deepl翻訳）
とあります。

原因は、ホストオンリーアダプターのIPが違っていたことでした。
スタートボタンを右クリック > 設定 > ネットワークとインターネット > ネットワークの詳細設定 > ネットワークアダプターオプションの詳細 と、順にクリックしていき、アダプターの一覧を表示します。

VirtualBox Host-Only Networkがあるはずなので、こちらを開いて「追加のプロパティ」をクリックします。

IPアドレスが、192.168.56.1になっていました。これに合わせて、VagrantfileのIPを修正してもう一度vagrant upすると、無事起動しました。

続きを読む