東京発、雲に乗って

2021年6月8日2023年10月3日

CSSで三角形を作る（基本）

CSSで簡単に三角形を作れます。

上向き

下向き

左向き

右向き

<style>
.triangle {
  width: 100px;
  height: 85px;
}
.triangle1 {
  border-bottom: 85px solid #808080;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
}
.triangle2 {
  border-top: 85px solid #808080;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
}
.triangle3 {
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 85px solid #808080;
}
.triangle4 {
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 85px solid #808080;
}
</style>

<div class="triangle triangle1"></div>
上向き

<div class="triangle triangle2"></div>
下向き

<div class="triangle triangle3"></div>
左向き

<div class="triangle triangle4"></div>
右向き

<style>

.triangle {

width: 100px;

height: 85px;

}

.triangle1 {

border-bottom: 85px solid #808080;

border-right: 50px solid transparent;

border-left: 50px solid transparent;

}

.triangle2 {

border-top: 85px solid #808080;

border-right: 50px solid transparent;

border-left: 50px solid transparent;

}

.triangle3 {

border-top: 50px solid transparent;

border-bottom: 50px solid transparent;

border-right: 85px solid #808080;

}

.triangle4 {

border-top: 50px solid transparent;

border-bottom: 50px solid transparent;

border-left: 85px solid #808080;

}

</style>

上向き

下向き

左向き

右向き

これを応用して六角形を作って遊んでみました。
CSSで三角形を作る（応用）

2021年5月13日2023年2月7日

VSCodeでVim（viのキーマップ）を使う

Linuxサーバー管理歴が長かったりすると
いわゆるviエディタのキーマップを指が覚えてしまいますよね。

vi（Vim）はコードを書いたりするときに非常に便利で
効率が何倍もアップすると思います。

よくビジネス書で時短について書かれてたりしますが、
ビジネス書を読むような層にあえてviを勧めるのも面白いと思いませんか。

本題ですが、
Vimは専用のエディターでもありますが、
使い慣れたエディターで「viのキーマップ」を使えれば
とても便利ですよね。
現在広く使われているVSCode（Visual Studio Code）には
Vimプラグインというものがあり、
これをインストールするだけで
VSCodeでviのキーマップを使えるようになります。

導入方法は拡張機能を「Vim」で検索するだけなので説明不要ですが、
注意点としてはVimの設定は
setting.json
に記載することくらいでしょうか。

2021年4月30日2023年2月7日

ImageMagick

サーバーにImageMagickをインストールすれば
convertコマンドによって簡単にPDFを画像に変換できます。

convert -alpha remove (PDFファイル) (画像ファイル)

1	convert -alpha remove (PDFファイル) (画像ファイル)

複数ページある場合は自動で画像ファイルに番号が振られます。

2021年3月5日2023年2月7日

ffmpegで動作のサムネイル生成

サーバーにffmpegをインストールすれば
簡単に動画のサムネイルが生成できます。

ffmpeg -i (動画ファイル) -f image2 -ss 00:00:01 -vframes 1 -s 640x480 (出力ファイル)

1	ffmpeg -i (動画ファイル) -f image2 -ss 00:00:01 -vframes 1 -s 640x480 (出力ファイル)

-ss で任意の場面のサムネイルが生成できます。

2021年2月11日2023年2月7日

preタグを使わずに改行やスペースを反映させる

preタグを使うと改行やスペースがそのまま反映されるので
ピンポイントで便利なケースがありますが、
HTMLタグもそのまま出てきてしまうので、使いどころは限られます。

preタグを使わずに改行やスペースをそのまま反映させることもできます。

スタイルシートの

white-space: pre;

1	white-space: pre;

を指定するだけです。