わたるの備忘録

エンジニア志望の文系大学生の備忘録

フォームのスタイリングPart2

テキストエリアの右下の//を消す

textarea {
　　resize: none;
}

フォームパーツのデフォルトのスタイル変更

ラジオボタンの丸い部分や、ドロップダウンリストの下矢印などのデフォルトのスタイルを消す方法は以下。

select {
　　appearance: none;
}

ドロップダウンリストの矢印を新しく作りたいときは、backgroundプロパティを使って矢印の画像を配置する。
例えばこんな感じ。

select {
　　appearance: none;
　　background-image: url(../img/yajirushi.png);
　　background-size: 20px;
　　background-repeat: no-repeat;
　　background-position: 90% center;
}

フォームの枠線の削除

borderあててもフォーカスしたとき黒枠でてきたりするので、とりあえず以下を当てておこう。

input {
　　outline: none;
}

borderもoutlineも枠線に関するプロパティだけど、共存できてしまうっぽい。そしてフォームのデフォルトのスタイルはoutlineで指定されているので上のスタイルを当てれば問題ない。
間違いがあったらご指摘お願いします～

【CSS】検索フォームのスタイリングのあれこれ

アクティブ状態の枠線、影を変更したいとき

疑似要素:focusで指定。

input:focus {
  border: 1px solid red;
  box-shadow: 3px 3px 5px red;
}

カーソルの縦棒の色（チカチカしてるやつ）を変更したいとき

input {
  caret-color: red;
}

プレースホルダーの色を変更したいとき

プレースホルダーとは、”名前を入力して下さい”みたいなやつ。フォームに元から入っている文言のこと。
入力された文字色は変えなくて良いけど、このプレースホルダーの文字色だけを薄くしたいといった場合は以下

input {
   color: 濃い色;
   &::placeholder  {
     color: 薄い色;
   }
}

caret-colorやplaceholder疑似要素を恥ずかしながら初めて知ったので綴りました。

Vagrantが遅すぎるときの解決方法。

１．フォルダ共有形式を変える。

nfsプラグインのインストール

vagrant plugin install vagrant-winnfsd

また、立ち上げるときに、

vagrant up --provision

とする。

２．ネットワークドライバの変更

vagrantfileに以下を記述

config.vm.provider "virtualbox" do |vb|
  vb.customize ["modifyvm", :id, "--natdnsproxy1", "on"]
  vb.customize ["modifyvm", :id, "--natdnshostresolver1", "on"]
end

【追記】
vb.customize１、２行目を追加すると

An error occurred in the underlying SSH library that Vagrant uses.
The error message is shown below. In many cases, errors from this
library are caused by ssh-agent issues. Try disabling your SSH
agent or removing some keys and try again.

と吐かれたので、そういう場合は代わりに"on"の部分を"off"にしてみる。それでも無理なら

vb.customize ["modifyvm", :id, "--nictype1",  "virtio"]
vb.customize ["modifyvm", :id, "--nictype2",  "virtio"]

を代わりに書く。
最適解は個々の環境によって違うみたい。
参照：
https://www.webnoha.work/blog/20190504-vagrant-speed-up/
https://stackoverflow.com/questions/50614748/laravel-homestead-vagrant-virtualbox-is-slow-on-windows
https://akamist.com/blog/archives/520
https://hacknote.jp/archives/17915/

Windows10にDocker環境を構築する。

今回はWindow10にDocker環境を構築していこうと思う。

Windows10 Proであれば、Docker for Windowsというデスクトップアプリを使用することが出来るが、それ以下のバージョンだと、基本的には下記の手順で環境構築するのがおすすめ。

手順は以下

  1. VirtualBox　＋　Vagrant　をインストール
  2. 1．の環境内にCentOS7をインストールする
  3. CentOS7にDockerをインストールする
【追記】2020/7/31現在は、ただのWindows10でもDocker for Windowsが利用できるとのこと。

1．VirtualBox　＋　Vagrant　をインストール

参照記事：https://qiita.com/yasshcy/items/8079c0cf4a96e461863b

2．CentOS7のインストール

インストールが出来たら、今回はCentOS7をインストールしていく。

まず、ディレクトリを用意する。（場所任意）

 mkdir MyVagrant

ディレクトリを作ったものへ移動

cd MyVagrant

ここで仮想マシンにCentOS7を追加する

 vagrant box add viniciusfs/centos7 https://atlas.hashicorp.com/viniciusfs/boxes/centos7/

viniciusfs/centos7　がOSの名前、その後に続くのがネット上にあるboxのインストール先。

参照：http://www.vagrantbox.es/

途中、2のvirtualboxを選択してEnter

Successfully added box 'viniciusfs/centos7' (v1.0.1) for 'virtualbox'!　と出たら成功。

vagrant init viniciusfs/centos7

と打つ。

A `Vagrantfile` has been placed in this directory. You are now ready to `vagrant up` your first virtual environment! Please read the comments in the Vagrantfile as well as documentation on `vagrantup.com` for more information on using Vagrant.

と表示されれば成功。

ここで、vagrantfileを書き換え。（46行目あたり）

config.vm.synced_folder "./dev", "/home/vagrant/dev"

とする。

ここの一つ目のパスはローカルのパス、二つ目のパスは仮想マシン内のパスであることに注意。

（上の例は、MyVagrantディレクトリ直下にあるdevディレクトリを仮想マシンと共有するときの書き換え例。）

これが終わったらvagrant を立ち上げる。

vagrant up

vagrantが起動しているかどうかをチェックする場合は

vagrant status

で確認できる。（running と出てれば起動できている） 

マシンを停止するときは

vagrant suspend

でおけ。

 vagrant が立ち上がったら

vagrant ssh

で仮想マシン内に入る。

lsコマンドを打つとdevディレクトリがあることを確認。

[vagrant@localhost ~]$ ls
dev

3．DockerをCentOS7にインストール

参照：https://qiita.com/ymasaoka/items/b6c3ffea060bcd237478

ほぼこの記事だけでいけるｗ
まず、OSの更新

sudo yum update
sudo yum upgrade

旧バージョンのアンスト

sudo yum remove docker docker-client docker-client-latest docker-common docker-latest docker-latest-logrotate docker-logrotate docker-engine

公式リポジトリのインストール

sudo yum install -y yum-utils device-mapper-persistent-data lvm2
sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

Docker ce のインストール

sudo yum install -y docker-ce docker-ce-cli containerd.io

起動

sudo systemctl start docker

OS起動時のDocker自動起動設定

sudo systemctl enable docker

docker-compose も入れる。

参考記事：https://qiita.com/ymasaoka/items/4e6deca0ad2b4cae87b8

パス内にあるバージョンは任意で最新のものに置き換える。↓

sudo curl -L "https://github.com/docker/compose/releases/download/1.26.1/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

ダウンロードしたバイナリとDockerに、実行可能権限を付与

sudo chmod +x /usr/local/bin/docker-compose
sudo usermod -aG docker $USER

以上。
docker-compose コマンドを使うときは一旦マシンを抜けてから使うこと。（最後の実行権限付与が反映されない）