C# SQLite 接続

CSSメモ

数年前の記事をベースに色々追加しているので内容が古い。

position

static:
位置指定できない(top/bottom/left/rightが使えない)static以外は基準となれる。
relative:
top/bottom/left/rightが使える。
abusolute:
祖先の左上基準。なければbodyの左上から。
fixed:
スクロールしても固定。

abusolute,fixedはfloat:noneになってしまう。
relativeはtop/bottom/left/rightとfloatを流用できるが、通常はstatic + floatとおぼえておく。

floatクリア

floatの親要素に以下。

センタリング

margin: 0 auto
widthは必要。

margin相殺

marginは重なると相殺される。
大きい値が優先。

ネストして親と子が同じ方向にmarginがあった場合も
相殺される。(親にborderがあったりpaddingがあるとおきない。)

高さ100%

Chromeなどでキャッシュの影響で直ぐに反映されない場合、デベロッパーツールを表示し、リロードボタンの上で右クリックするとキャッシュをクリアできる。

作り方

上から、
<header><main><footer>
が基本。

<section>にabcのようなID/Class名を付けた場合、
その中の<div>などはabc-xxxのような形で統一する。

・1カラムの幅100%作り方

①<section>
width 100%
の中に
②<div id=”xxx-inner”>
max-width: 000px;
margin: 0 auto;
を入れる
②の中で調整する場合、
さらにその中に③<div>を入れる。

テキストの位置は、②か③の中で<h1~>や<p>として入れる。

①<section>が画像の場合、
background-image: url(‘1.jpg’);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 000px;

横並びにしたい場合、
<ul>の場合、
<ul>に
display: flex;
flex-wrap: wrap;
<li>に
display: block;
width: x%;

<div>の場合も同じ、
親<div>に
display: flex;
flex-wrap: wrap;
子<div>に
width: x%;

・余白調整

それぞれの<section>の上下にpaddingを入れる。
あとは上の要素からmargin-bottomで調整する。

・スマホの向きに合わせた文字サイズの自動調整をしない

・フェードイン

・iOSのinputリセット

 

Vue.js 入門

jsというとフレームワークが色々あるので、今回はVue.jsを少しさわってみた。

適当に色々書いてみたもの。

json展開、axiosでpost

フロント開発環境色々

HTML/CSS/JSなどフロントは数年前にちょっと勉強しただけでだいぶ忘れてしまったので復習をする。
まずは環境構築から。

エディタ

使うエディタはVSCodeとした。補完が効くので助かる。
Vim拡張機能を入れてしばらく使ったがやめた。そのままでも不便がないぐらいのショーットカットがあるので、設定は少しだけ。

VSCode設定

ショートカット追加
{“key”: “ctrl+i”,”command”: “editor.action.jumpToBracket”}

ユーザー設定
minimapは1.10から

VSCodeショートカット

Ctrl + Shift + L
選択中の箇所を同時編集(マルチカーソル)

Ctrl + i
対応括弧に移動。

Ctrl + /
コメントトグル

Ctrl + P
ファイル検索して開く

Alt + Up/Down
行を上下移動

Alt + Shift + Up/Down
行を上下コピー

Alt + Shift + ドラッグ
矩形選択

Alt + クリック
マルチカーソル

Ctrl + Shift + k
行の削除

Ctrl + Shift + \
対応する括弧

Ctrl + ]
行にインデントを追加

Ctrl + [
行のインデントを削除

sass(scss)

$で変数。#{}で変数展開。変数には型もある。

組み込みの関数もあり、自作もできる。
@function name($arg) {
@return returnValue
}

ループ処理
@for $i from 0 to 10 {
}

条件分岐
@if $arg == 0 {
}

などなど便利な機能がある。以下適当に記述してみたもの。

VSCodeタスクでsass(scss)コンパイル

Rubyは入っているので、
gem install sass
とする。

バージョン確認。
sass -v

タスク作成は、
Ctrl + Shift + P

でパレットを開き、
Configure Task Runner
と入力し、othersを選ぶ。

そうすると、task.jsonができるので、
“version”: “0.1.0”,
“command”: “sass”,
“isShellCommand”: true,
“args”: [“test.scss”,”test.css”],
“showOutput”: “always”
のように記述する。

タスクランナーの実行は、
Ctrl + Shift + B
と入力する。

tasks.jsonはプロジェクトフォルダの中にある.vscodeの中にできる。
プロジェクトとは、サイドバーで開いているフォルダのこと。

タスクランナーで複数コマンドを渡したい場合

上記はscssコマンドだけだが、他にも色々したい場合。
ここではpowershell。(UTF-8で日本語入ると動かないので注意)

自動でサーバーに転送したい、chromeで開きたい等。
https://github.com/PowerShell/Win32-OpenSSH/releases
からWin版のSSHを落とし、フォルダの中から
ssh.exe, scp.exe
をコピーしておく。
鍵ファイルもコピーして、ps1と同じ場所に置く。

以下のようにすると、sassをコンパイルして、htmlとともにサーバーに転送し、そのURLを開く。
(Chromeのタブは増えてしまうが)

c.ps1

tasks.json

Emmet

VSCodeだと標準で入っている。
Tabキーで展開できる。

マークダウン

マークダウンを使う場合、
Ctrl+Shift+V
でプレビューできる。

Debugger for Chorme

拡張機能でChromeと検索すると出て来るのでインスト。
サイトバーのデバッグを開き、再生すると、launch.jsonができるので接続設定を記述する。

Chrome拡張機能 manifest.jsonメモ

manifest_version, name, versionは必須。

・manifest_version
2, 3を指定。

・name
任意の名前。

・version
任意のバージョン。

***

・content_scripts / background

・content_scripts

特定のページで動作。DOMを操作できる。

content_scripts > matches
スクリプトを動作させたいURL。

content_scripts  > js
動作させるスクリプト。

・background

常にバックグラウンドで動いている。
v3からbackgroundはservice_workerを指定する。

background > scripts
バックグラウンドで動作するスクリプト。

background > persistent
persistent:falseにするとEvent-Pageとなり、必要になったら動く。
バックグラウンドは非推奨。

***

・browser_action  / page_action

browser_action:全てのページでアイコン表示。
page_action:特定のページでアイコン表示。
v3からactionに統合される。

***

・id
IDを指定。

・description
説明。

・icons
アイコンを指定。

・short_name
短縮名。

・default_locale
デフォルト言語を指定。

***

・permissions
ChromeAPIを使う場合指定。

・permissions > contextMenus
右クリックメニューの拡張。

***

・commands
ショートカット定義。

・options_page
オプションページを使う場合指定。

・minimum_chrome_version
Chromeの最低バージョンを指定。

・homepage_url
ホームページを指定。

・author
作成者。

・override pages
新規タブ、ブックマークマネージャ、履歴の差し替え。

・omnibox
検索ボックスの拡張。

Chrome拡張機能 Google検索にfavicon

最新版あり。

Chrome拡張機能 Google検索にfavicon2

即席で作ったけどかなり活躍していて、検索結果にfaviconがないと気持ち悪くなってしまった。

script.js

manifest.json

検索結果の構造が変わった模様。

script.js

jquery-3.1.1.min.js、manifest.json、script.jsの3つのまとめてフォルダに入れ、Chrome拡張へドラッグする。

PHP Javascript 工程管理

以前作っていた工程管理。お蔵入り版。

PHP Javascript 在庫管理

以前作っていた在庫管理。お蔵入り版。
1つのファイルにHTML,CSS,JS,PHPを全て書き込んでいた。

C# VBA 在庫管理

以前作ったプログラムお蔵入り版

Form1.cs

Util.cs

アップロードVBA

AccessVBA テーブル作成、他