Linuxのvmstatコマンドで表示される情報の意味

2020-04-07 By naka

Linuxのvmstatコマンドで表示される情報の意味についてまとめました。

procs : アクティブなプロセスに関する情報

r：実行待ちのプロセス数
b：何らかの理由によってスリープしているプロセス数

memory : メモリーの使用量に関する情報

swpd：仮想メモリーの使用量
free：空きメモリー容量量
buff：バッファとして利用されているメモリー容量量

swap : スワップに関する情報

si：ステップイン容量。スワップ領域に待避していたデータを物理メモリに書き戻した容量
so：スワップアウト容量。物理メモリーからスワップ領域に書き込みした容量

iO : デバイスとの転送量に関する情報

bi：ブロックデバイス（HDD等）から読み取ったロック数
bo：ブロックデバイスへの書き込みブロック数

system : マルチタスク関連に情報

in：毎秒の割り込み回数
cs：毎秒のコンテキスト・スイッチ回数

※ コンテキストスイッチ

cpu : CPUの使用量に関する情報

us：カーネルコード（OS）以外の実行でCPUが使用された時間の割合
sy：カーネルコード（OS）の実行でCPUが使用された時間の割合
id：アイドル時間（何もしない時間）の割合
wa：IO(ディスク・ネットワーク）による待ち時間の割合

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

スクリーンショットを撮る方法(Snipping Tool-Windows8)

2020-04-03 By プログラミング入門ナビ編集部

スクリーンショットとは

スクリーンショットはブラウザの画面を写した画像のことです。
自分の現在見ているサイトの情報、ブラウザの状態など自分の視覚的情報を画像に残すことができる非常に便利な機能です。
幅広く使える機能なのでこの記事でやり方をマスターし日常生活などに幅広く活用しましょう。

スクリーンショットの撮りかた(Snipping Tool使用)

この記事ではWindows8の標準機能となっているSnipping Toolを使ってスクリーンショットを撮ります。(Windows10ユーザの方は画面領域切り取り機能でも撮ることができます。)

Snipping Toolとは？

Snipping Toolは画面内の自由な範囲をスクリーンショットとして保存するWindowsの機能です。
自分のパソコン上に映っている情報を相手にわかりやすく伝える為に非常に優れたツールです。
地図などを撮り相手に情報を共有する際や覚えておきたい情報、残しておきたい情報をイメージとして保存しておく場合にも使えます。

Snipping Toolの使い方

Snipping Toolの起動

「スタート」=>「全てのプログラム」=>「Snipping Tool」で起動します。

Snipping Toolが起動すると次のようなウィンドウが表示されます。

切り取り領域の設定

このボタンで切り取り領域を選択できます。

切り取り領域は以下の4つがあります。
① 自由形式(マウスで自由にドラッグした部分を切り取ります。)
② 四角形(四角形で囲んだ範囲を切り取ります。)
③ ウィンドウ領域(ウィンドウ内を切り取ります。)
④ 全画面領域(画面の全てを切り取ります。)

切り取り

実際に画面範囲を選択しスクリーンショットを撮ります。(ここでは四角形に領域を設定し切り取ります。)

領域の設定をしたらSnipping Toolのロゴをクリックしましょう。すると画面の色が変わります。

次に範囲を選択肢します。

保存・編集

選択した領域を切り取るとクリップボードにコピーされます。(※この時点では保存されていません)
下の画面に移るので任意の処理をした後②のボタンで必ず保存しましょう。

① 撮り直したい場合はもう一度ロゴのマークを押しましょう。
② 名前をつけて任意の場所にファイルとして保存できます。(その際にファイル形式も選択できます。)
③ メールでスクリーンショットを送ることができます。
④ ペンを使って画像に印をつけるなど編集が行えます。

以上がSnipping Toolでスクリーンショットを撮る方法でした。保存したファイルを選択しチャットやメールに貼るなどしてぜひ活用してください。

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

CSSのclearプロパティとは？そもそも必要ないのでは？疑問を徹底解説！

2020-03-31 By プログラミング入門ナビ編集部

はじめに

CSSで左寄せや右寄せのレイアウトを行いたい時は、floatプロパティを使ったフロートレイアウトが便利ですよね。

これに関連したプロパティの一つに、clearがあります。

フロートレイアウトにおける回り込みを解除するためのものですが、clearをしてもしなくてもレイアウトが変わって見えないことがあり、混乱してしまうケースが多いようです。

ここでは、フロートレイアウトの基本とclearプロパティの使用有無による違いを解説します。

フロートレイアウトとは

まず、フロートレイアウトについておさらいしていきましょう。

CSSではfloatプロパティに適切な値を指定することで左寄せや右寄せを行い、後に続く要素を反対側に回り込ませることができます。これをフロートレイアウトと呼び、例えば左側に画像を掲載して、右側にそのコメントや説明のテキスト文を並べたい時などに便利です。

フロートレイアウトをしないとき

理解のために、まずフロートレイアウトをしない場合の例を見てみましょう。まず、下記のようなHTMLファイルを作成します。

[test.html]

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>float test</title>
        <link rel="stylesheet" href="css/no-float.css">
    </head>
    <body>
        <h1>フロートの練習</h1>
        <div id="wrap">
            <div id="box1">BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト/BOX1のテスト</div>
            <div id="box2">BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト/BOX2のテスト</div>
            <div id="box3">BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト/BOX3のテスト</div>
        </div>
    </body>
</html>

次に、上記HTMLファイルと同じ階層に”css”ディレクトリを作成し、その中に下記のようなCSSファイルを作成します。

[no-float.css]

/* no-float.css */
#wrap {
    width:  100%;
    background-color:   gray;
}
#box1 {
    background-color: purple;
    color:  white;
    width:  50%;
}
#box2 {
    background-color: green;
    color:  white;
    width:  50%;
}
#box3 {
    background-color: blue;
    color:  white;
}

HTMLファイルをブラウザで見ると下記のようになり、上からbox1・box2・box3の順でレイアウトされます。

フロートレイアウトをするとき

それでは、CSSでfloatレイアウトの指定をするとどうなるでしょうか。”css”ディレクトリに新たに下記ファイルを作成します。

[float-noclear.css]

/* float-noclear.css */
#wrap {
    width:  100%;
    background-color:   gray;
}
#box1 {
    background-color: purple;
    color:  white;
    width:  50%;
    float:  left;
}
#box2 {
    background-color: green;
    color:  white;
    width:  50%;
    float:  right;
}
#box3 {
    background-color: blue;
    color:  white;
}

box1ではfloat: leftを、box2ではfloat:rightを指定していることに注目してください。これはそれぞれ左寄せ・右寄せを意味し、その後に続く要素を逆側に回り込ませるようレイアウトします。

HTMLファイル（test.html）の6行目で指定するcssファイルを下記のように変更してブラウザで開いてみてください。

<link rel="stylesheet" href="css/float-noclear.css">

下記のように表示されるはずです。box1が左寄せされ、後に続くbox2はbox1の右側に回り込む形で右寄せされ、box3はその逆側である左側に回り込んでいますね。

clearプロパティとは

floatプロパティの関連プロパティとして、clearがあります。

通常、直前の要素がfloatで左寄せもしくは右寄せされている場合、その逆に回り込む形でレイアウトされるのですが、何らかの理由で回り込みを解除したい場合に使用されます。

clear: left　左寄せされた要素に対する回り込みを解除する
clear: right　右寄せされた要素に対する回り込みを解除する
clear: both　左寄せまたは右寄せされた全ての要素に対する回り込みを解除する
clear: none　回り込みを解除しない（デフォルト値）

clearしてもしなくても同じに見える？

clearの効果を確認するため、”css”ディレクトリにさらに下記ファイルを作成してみます。21行目、box3でclear:bothが指定されていることに注目してください。

[float.css]

/* float.css */
#wrap {
    width:  100%;
    background-color:   gray;
}
#box1 {
    background-color: purple;
    color:  white;
    width:  50%;
    float:  left;
}
#box2 {
    background-color: green;
    color:  white;
    width:  50%;
    float:  right;
}
#box3 {
    background-color: blue;
    color:  white;
    clear:  both;
}

HTMLファイル（test.html）の6行目で指定するcssファイルを下記のように変更してブラウザで開いてみてください。

<link rel="stylesheet" href="css/float.css">

box1とbox2の高さが同じ場合

ウィンドウ幅によっては、box1とbox2の高さが同じになります。この時、clearを指定しても、表示結果はclearを指定しなかった場合と全く同じです。

[float.cssを指定した場合の表示]

box1の方がbox2より高い場合

しかし、文字数はbox1の方が多いため、ウィンドウ幅を広くしたり狭くしたりするとbox1の方がbox2より高さが高くなることがあります。

clear有無による違いはこの時明確になります。HTMLファイル(test.html)の6行目で指定するcssファイルを変更してウィンドウサイズを調整してみてください。

[float.cssを指定した場合の表示]

[float-noclear.cssを指定した場合の表示]

このように、一見clearの有無によって見え方が同じでも、ウィンドウサイズが変わると見え方は大きく変わります。

このことを意識してclearを明確に指定しないと、意図と異なる表示になることがあるので注意が必要です。

clearの設定は必要

上記のケースで、例えばbox1にバラの写真、box2にバラの説明、box3にまた別の花の写真を載せるのであれば、box3からは別の話題になるのでclearして新しい行から始めるべきですね。

また、余白にはwrapで指定した背景を見せたい場合でも、clearなしでは余白が生まれないので背景を表示することができません。

回り込みの解除をしたい場合は、プレビューでの表示に差がなかったとしても必ずclearの設定を行いましょう。

まとめ

フロートレイアウトの基本ルールとclearプロパティの使用有無による違いについて解説しました。

clearは指定してもしなくても表示が変わらないので、そもそも必要ないのでは？と思われることも多いですが、どんなサイズで表示されても意図通りのレイアウトとなるように、必要な場合は必ず使用しましょう。

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する