パソコンで1行4列表示、スマートフォン2行2列

HTMLを書いてみると

<div class="row">
  <div class="col-6 col-lg-3 bg-primary">
    １個目
  </div>
  <div class="col-6 col-lg-3 bg-secondary">
    ２個目
  </div>
  <div class="col-6 col-lg-3 bg-success">
    ３個目
  </div>
  <div class="col-6 col-lg-3 bg-info">
    ４個目
  </div>
</div>

パソコンでの表示イメージは

ブラウザで表示すると

スマートフォンでの表示イメージは

ブラウザで表示すると

要素を横に４個並べて表示する場合「col-3」を指定します。

要素を横に2個並べて表示する場合「col-6」を指定します。

　※colは横に最大12等分あります。

　　例）4等分にしたい場合「12÷4」して、１個分は「3」となる。

①はじめに全体を２等分にする指定をします。

「col-6」を指定することで、すべての表示が横に2個表示されます。

②次にパソコン表示の部分を指定します。

「lg」を付けると、パソコンでの表示操作ができます。

よって、パソコン表示の時に要素を4個横に並べて表示させたい場合「col-lg-3」となります。

　※lg・・・画面横サイズが992px以上の場合、操作したい時に追加します。

まとめ

1. row・colを使用し、行・列を指定
2. colに数字を指定し、横に表示する要素数を指定
3. スマートフォン（小さい画面サイズ）を意識したスタイルを指定（全体のスタイルを指定）
4. パソコン表示を意識したスタイルを指定（条件下で全体の指定を上書き）

（Bootstrap v5を使用しています。）

１行３列表示

HTMLを書いてみると

<div class="row">
  <div class="col bg-primary">
    １個目
  </div>
  <div class="col bg-secondary">
    ２個目
  </div>
  <div class="col bg-success">
    ３個目
  </div>
</div>

イメージは

ブラウザで表示すると

２行３列表示

HTMLを書いてみると

<div class="row">
  <div class="col bg-primary">
    １個目
  </div>
  <div class="col bg-secondary">
    ２個目
  </div>
  <div class="col bg-success">
    ３個目
  </div>
</div>
<div class="row">
  <div class="col bg-danger">
    ４個目
  </div>
  <div class="col bg-warning">
    ５個目
  </div>
  <div class="col bg-info">
    ６個目
  </div>
</div>

イメージは

ブラウザで表示すると

まとめ

行を追加したい場合「row」、列を追加したい場合「col」をclassに追加する。

「row」「col」を使用した情報を追加しました。

【Bootstrap】表示する画面に合わせて、横に並べる要素数を変える(row、col）

表示する画面（パソコン・スマートフォン）に合わせて、横に並べる要素数を変える方法を説明します。

himatoto.com

2023.04.08

シートカットキーを使用することにより作業効率が良くなることもあります。

基本操作

画面操作

システム

画像の上に文字を重ねて表示

HTML

<div class="parent">
    <img src="./images/sample.png" />
    <p>サンプル</p>
</div>

CSS

.parent {
    position: relative;
}

.parent p {
    position: absolute;
    color: #ffffff;
    top: 0;
    left: 0;
}

結果

画像に重ねた文字を中央に表示

HTML

<div class="parent">
    <img src="./images/sample.png" />
    <p>サンプル</p>
</div>

CSS

.parent {
    position: relative;
    width: 300px;
}

.parent img {
    width: 100%;
}

.parent p {
    position: absolute;
    color: #ffffff;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
}

結果

（Bootstrap4を使用しています。）

スタイルを適用していない状態

<table>
  <thead>
    <tr>
      <th>No</th>
      <th>名前</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>テスト太郎</td>
    </tr>
  </tbody>
</table>

ベースを整える

<table>
  <thead class="table">
    <tr>
      <th>No</th>
      <th>名前</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>テスト太郎</td>
    </tr>
  </tbody>
</table>

線を表示する

<table>
  <thead class="table table-bordered">
    <tr>
      <th>No</th>
      <th>名前</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>テスト太郎</td>
    </tr>
  </tbody>
</table>

行の背景色を1行飛びで表示する

<table>
  <thead class="table table-bordered table-striped">
    <tr>
      <th>No</th>
      <th>名前</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>テスト太郎</td>
    </tr>
    <tr>
      <td>1</td>
      <td>テスト次郎</td>
    </tr>
    <tr>
      <td>1</td>
      <td>テスト三郎</td>
    </tr>
  </tbody>
</table>

マウスオーバーした時に行の背景色を表示する

<table>
  <thead class="table table-bordered table-striped table-hover">
    <tr>
      <th>No</th>
      <th>名前</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>テスト太郎</td>
    </tr>
    <tr>
      <td>1</td>
      <td>テスト次郎</td>
    </tr>
    <tr>
      <td>1</td>
      <td>テスト三郎</td>
    </tr>
  </tbody>
</table>

行の高さを狭くする

<table>
  <thead class="table table-bordered table-striped table-hover table-sm">
    <tr>
      <th>No</th>
      <th>名前</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>テスト太郎</td>
    </tr>
    <tr>
      <td>1</td>
      <td>テスト次郎</td>
    </tr>
    <tr>
      <td>1</td>
      <td>テスト三郎</td>
    </tr>
  </tbody>
</table>

Googleアドセンスって？

ここではGoogleアドセンスについては簡単に説明します。

Googleアドセンスとは、Webサービス（ホームページ、ブログなど）に広告を貼り付けることのできるサービスです。

広告を掲載し宣伝したい方は、Googleに広告掲載依頼をし費用を払う。

広告収入が欲しい方は、自分のWebページを作りGoogleに申請する。審査に合格すると自分のWebページに広告を掲載することができるようになります。

Googleアドセンスの詳細については下記ページをご確認ください。

Google AdSense - ウェブサイトを収益化

Google AdSense を使用してウェブサイトを収益化しましょう。広告のサイズは自動的に最適化され、表示とクリックが促進されます。

www.google.co.jp

行ったコト

行ったことを時系列に記載していきます。

2020年5月中旬

twitterを開始。Webページ開始までの手順などをつぶやきながらサーバーの設定。

この時に行ったことは以前記載した記事に書いていますので、そちらを確認してください。

ブログ未経験者がブログをはじめる

ブログを開始時に悩んだこと、行ったことを書いています。ブログ開始時の予備知識についても分かりやすく説明しています。

himatoto.com

2020年5月下旬～2020年6月

googleアドセンスのことを調べながら、書きたい記事につてtwitterでつぶやく。

twitterは将来記事にしたいこと思いついた時にメモとして利用。

2020年7月

下記ページを作成し、初めての投稿。

• Webページの紹介ページ
• お問い合わせページ
• プライベートポリシーページ
• 免責事項ページ

2020年7月に投稿した記事は4記事

2020年8月

間違った内容・情報は訂正することを心がけながら過去投稿した記事をチェック。過去に投稿した内容に誤字などがあったので編集。

2020年8月に投稿した記事は2記事

Googleアドセンスに合格するまでに、少しでも収入が得られることを期待しA8.netの導入。

A8.netの収益：数十円

2020年9月

GoogleSearchConsoleでカバレッジなどをみて、エラーがあるページをすべて修正しGoogleアドセンスへ申請。

申請後、２～3日で申請結果がメールで届きました。

メールには「新型コロナウイルスの影響で審査できない」旨のメッセージが記載されていました。

問題を解消して再度申請してくださいと記載されていたので、3日後に再度申請しましたが、同じ結果でした。（数回同じ繰り返しをし、結果も同じ）

2020年9月に投稿した記事は1記事

A8.netの収益：数十円

2020年10月

前回Googleアドセスへ申請し結果がでてから約2週間程度おいてから再度申請したた合格しました。

まとめ

下記内容に気をつけながらWebページの作成をしました。

• Webサイトの紹介ページの作成
• プライベートポリシーページの作成
• お問い合わせページの作成
• 1記事にの文字を1500文字以上を心がける
• 投稿した後に気付いた誤りは訂正し、新鮮な情報にする
• GoogleSearchConsoleのエラーは０にする

Googleアドセンスに申請した時の状況は下記の通りです。

準備するもの

1. Windows 10がインストールされているパソコン
2. Visual Studio Code（※テキストファイルを編集できるものであれば何でもOKです。）

環境構築の流れ

Node.jsのインストール

Node.jsのインストール方法を記述します。

ここではNode.jsの詳細な説明については省略します。

インストール

インストール所要時間：約3分

１．下記URLにアクセスする。

Node.js — Download Node.js®

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

２．「Windows Installer」をクリックする。クリックするとダウンロードが開始されます。

「node-v12.18.3-x64.msi」がダウンロードされます。

３．２でダウンロードしたファイルを実行する。

４．「Welcome to The Node.js Setup Wizard」が表示されたら、「Next」ボタンを押す。

５．ライセンスを確認し、「I accept the terms in the License Agreement」のチェックを入れ「Next」ボタンを押す。

６．今回は変更せず、初期値の状態で「Next」ボタンを押す。

インストール先を自分で決めたい場合、ここで変更してください。

７．「Custom Setup」ページでは、「Next」ボタンを押す。

カスタムしたい内容があればカスタムしてください。

８．「Tools for Native Modules」では何も変更せず「Next」ボタンを押す。

９．「Ready to install Node.js」では、「Install」ボタンを押す。

１０．「Completed the Node.js Setup Wizard」では、「Finish」ボタンを押す。

インストール確認

１．「コマンドプロンプト」または「Windows PowerShell」を起動する。

※今回は「コマンドプロンプト」を使用します。

２．「node –version」を入力する。

３．バージョンが表示されたらOKです。

ここでは「v12.18.3」がバージョンです。

Type Scriptのインストール

TypeScriptのインストール手順を記述します。

インストール所要時間：約1分

インストール

１．コマンドプロンプトを起動する。

２．「npm install -g typescript」を入力し、実行する。

インストール確認

１．コマンドプロンプトに「tsc -v」を入力し、実行する。

２．バージョンが表示されたらOKです。

Type Scriptの動作確認

１．Type Scriptを保存するフォルダを作成する。

ここでは「typescript」フォルダを作成します。

２．コマンドプロンプトで「１．」で作成したフォルダに移動する。

３．TypeScriptの初期設定をします。コマンドプロンプトで初期設定コマンドを実行する。

tsc –init

「tsconfig.json」というファイルが作成されます。

４．テスト用のTypeScriptファイルを作成する。TypeScriptファイルの作成場所は、「１．」で作成したフォルダの直下に作成します。ここでは「sample.ts」というファイル名で作成します。

※TypeScriptのファイル拡張子は「.ts」です

５．「４．」で作成したファイルに簡単なプログラムを書きます。

console.log("Hello, Test");

６．TypeScriptファイルをコンパイルします。

※コンパイル・・・実行可能なファイルにすること。

コマンドプロンプトでTypeScriptファイルがある場所まで移動し、コンパイルのコマンドを実行する。

tsc

コンパイルが成功するとJavaScriptファイルが作成されます。

※JavaScriptのファイル拡張子は「.js」です

７．コンパイルされたファイルを実行します。

node sample.js

TypeScriptファイルに記述した「Hello, Test」が表示されればOKです。

インデントをつける

プログラムコードを書く時にインデントをつけることをオススメします。

インデントをつけることで、プログラムを作った人以外がみてもプログラムが読みやすくなります。

インデントについては、プログラム言語・プロジェクトにより規定がありますのでプログラミングをする前に確認が必要です。

よく使われるインデントは「タブ」「半角スペース４つ」「半角スペース２つ」が使われます。

インデントがない場合の例

int point = 10;
if(point >= 70){
System.out.print("pointは70以上です。");
}else{
System.out.print("pointは70未満です。");
}

インデントをつけた例

int point = 10;
if(point >= 70){
    System.out.print("pointは70以上です。");
}else{
    System.out.print("pointは70未満です。");
}

比較文は少なくする

比較文は可能な限り少なくコーディングすることをオススメします。

通常通り比較文をコーディングした例

if (70 <= sum) {
  passFg = 1;
} else {
  passFg = 0;
}

比較文を減らすことを意識した例

passFg = 0;
if (70 <= sum) {
  passFg = 1;
}

コメントをつける

プログラミングをする時にコメントをつけることをオススメします。

プログラム中にコメントがあると、コーディングした人以外が見た時にその処理は何のためにあるのか？などプログラムの内容が分かりやすくなります。

コメントを記載した例

passFg = 0;

// 合計値が70以降の時にフラグをONにする
if (70 <= sum) {
  passFg = 1;
}

困った時に参考にして頂ければと思います。

（Bootstrapの逆引きとして参考にして頂ければと思います。）

※Bootstrap4での記述となります。

要素と要素の間隔をあける

HTMLでWebページを作成していると要素と要素の間隔をあけたい！ってことがあるかと思います。

下記図のように要素と要素の間隔をあける方法を説明します。

要素同士の間隔をあける場合、色んな方法がります。

今回は要素の外側に余白を設定し間隔をあける方法を説明します。

余白を設定したい要素のclsssに「m方向-余白のサイズ」を設定する。

<img src="./images/item1.png" class="mr-3" />
<img src="./images/item2.png" />

<img src="./images/item1.png" />
<img src="./images/item2.png" class="ml-3" />

そのテキストファイルに対して同じ繰り返しの変更処理をするようなことがあるかと思います。

そんな時、1行ずつ変更をしますか？

1行ずつ変更をしていると何時間あっても時間が足りません。

そんな時に使えるテキストファイルの変更方法を説明します。

プログラミングなどの知識がなくても簡単に処理する方法です。

経験談

テキストエディタは何を使っても同じ！と思い無知だった新人時の話です。

ログファイルの分析をするから、旧フォーマットで出力されているログファイルを新しいフォーマットに整形してほしい。

やり方は任せるから〇時までにお願い。

単純作業だから、このくらい手作業で処理しよう！と決め1行ずつ整形処理をしていた。

1時間・・・2時間・・・時間はたつけど、全然進まない。

更に途中で間違えてることに気づき、処理したところを訂正…。

何とか予定の時間までには終わったのですが、その日は他の作業ができず残業…。

後日、“簡単に・早く・正確に”できないか？と調べ見つけたのがテキストエディタの”キーマクロ”です。疑似的に同じようなことをやってみたら、圧倒的に早く・正確に処理ができた。

準備

キーマクロを使用できるテキストエディタを使用します。

今回はエディタを例に説明します。

• サクラエディタ

Sakura Editor

Japanese text editor for MS Windows

sakura-editor.github.io

一定の文字数で改行する

5文字目の後に改行を入れる方法について説明します。

完成イメージは下記の通りです。

【変更前】のテキストファイル

【変更後】のテキストファイル

この変更処理をする場合、前提条件があります。

テキストファイルの内容に一定の規則性があること

手順

1．サクラエディタで対象のファイルを開く。

2．左上にカーソルをあわせる。

3．キーマクロの設定を行うために、「ctil」＋「shift」＋「M」を押すしてキーマクロを開始する。

　　※ツールバーの「ツール＞キーマクロの記録開始」でもOK

4．キーボードで改行を挿入する手順を入力する。

　　4-1．カーソルを右矢印で5個移動させる。

　4-2．改行を入力する。

　4-3．4-1～4-2を5回繰り返す。

　4-4．次の行の先頭にカーソルを合わせる。

　4-5．入力した内容を保存するため、「ctil」＋「shift」＋「M」を押してキーマクロを終了する。

　　※ツールバーの「ツール＞キーマクロの記録終了」でもOK

　4-6．「ctil」＋「shift」＋「M」を押してキーマクロを実行する。

　　※ツールバーの「ツール＞キーマクロの実行」でもOK

　4-7．最後の行が処理されるまで4-6を実行する。

一定の文字数で句読点を入力する

5文字目の後に句読点を入れる方法について説明します。

【変更前】のテキストファイル

【変更後】のテキストファイル

手順

「一定文字数で改行する」の時手順と同じです。

この時「改行」の部分を「句読点」に置き換えてキーマクロを保存することで今回やりたいことができます。

まとめ

• テキストファイルの規則性を見つける。
• キーボードで操作できることは、キーマクロとして保存して実行できる。
• 処理する行数が多い程時間短縮ができる。

単純な作業をどれだけ早く、正確に処理することが仕事においてとても大切です。