常連

注目の的

自己紹介

ChatGPTに「日時取得関数を作ってくれ」とお願いしたところ、`getCurrentUTCDate()` という名前の関数を生成してくれました。

`Utc` でなく `UTC` で、ふと疑問に思いました。

JavaScript はキャメルケースが習慣とばかり思っていましたけれど、そういえば `HTMLElement` など例外があったりもしますよね？今回の `UTC` も例外なのかと思います。

HTMLElement
[https://developer.mozilla.org/ja/docs/Web/API/HTMLElement](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement)

なのでこういった例外となる記述を網羅的に知っておきたいと思いました。

どんなものが思い浮かびますでしょうか？
ご意見いただければ幸いです。

### 補足
あと、そうなった歴史的な経緯というか、なんで例外になったのかという豆知識的な理由も併せてご存じでしたらよろしくお願い致します。

【解決済】キャメルケースが慣習のJavaScriptにおいて、'UTC' や 'HTML' のような大文字表記を網羅的に知りたい

### 質問
URLに検索パラメータを付与する際に、

https://example.com/search?q=cat%20dog
https://example.com/search?q=cat+dog

という２パターンがあるようでして（他にもある？）、このユースケースを知りたいです。

参考までにTwitterは「%20」でした。
https://twitter.com/search?q=cat%20dog

そしてYahoo! は「+」でした。
https://search.yahoo.co.jp/search?p=cat+dog

どういうときに「%20」を使い、「+」を使うのでしょうか？

尚、今回特に知りたいのは、
➀JavaScriptでpushStateする際にはどちらがいいのか？
②ajaxでPHPへ送る際にはどちらがいいのか？
という点ですが、

もし汎用的にユースケースを整理されている方がいらっしゃればぜひお聞かせください。
宜しくお願い致します。

### 補足
こんな情報がありました。

> クエリストリングには「+」か「%20」、それ以外は「%20」
> https://www.suzukikenichi.com/blog/which-shold-you-use-space-20-or-plus-in-urls-containing-space/

ですが、ならばTwitterがなぜ「%20」なのか疑問が残りますので、やや納得感が低いです。

### 補足２
またはこんなご意見もあります。

> ていうかもともとの形にそって、半角スペースは%20に置換してもいいと思う。
> https://uragou.hatenablog.com/entry/2018/03/16/144355

私も今回、この **「+」だとデコードができない** という問題に躓き質問しました。
（pushStateの件でいえば、pushStateした後にそこからパラメータ（q）の値を取得すると、「+」はデコードできないために正規表現で置換しなければならない）

なので、こちらのご意見に頷くところがございます。

### 補足３
こちらも「%20」派でした。

> x-www-form-urlencodedの仕様的には+の方が正しいのかもしれないが、現実的には%20にした方が安全と思う。
> https://qiita.com/aosho235/items/0581fc82f8ce2c5ac055

URLのスペースは「%20」か「+」か？

### 前提・実現したいこと
顧客ID,購入日,購入回数,商品コード,枝番,商品名という項目で構成された購入回数テーブルがあります。
この購入回数というのは、同じ顧客IDで複数回購入した場合のN回目という値が入っています。

|行数|顧客ID|購入日|購入回数|商品名|
|:--|:--:|--:|
|1|001|2020/1/1|1|AAA|
|2|001|2020/1/2|2|CCC|
|3|001|2020/1/3|3|DDD|
|4|002|2020/1/1|1|BBB|
|5|002|2020/1/2|2|CCC|
|6|003|2020/1/1|1|DDD|
|7|003|2020/1/2|2|EEE|


このテーブルから購入回数１回目にAAAまたはBBBという特定の2種類の商品を買った人が２回目以降にどの商品を購入しているかを求めるSQLを書きたいのですが、うまくいきません。

### 試したこと
```
select 顧客ID,購入日,商品名,購入回数
from 購入回数テーブル
where 購入回数 not in(
select 購入回数 from 購入回数テーブル 
where
購入回数=1 and 商品名 like 'AAA%'
and
購入回数=1 and 商品名 like 'BBB%'
) 
```
上記のSQLを実施したところ、なかなか値が返ってきません。
limit 100 をつけると1秒程度
limit 1000 だと 10秒くらい
limit 10000 だと 120秒くらい
で返ってきます。
購入回数テーブルのレコード数は118万ほどです。

書き方によるパフォーマンスの問題なのか、そもそも上記サブクエリ付きのSQLで求めたい結果が得られるのかの判断がつかないのですが、目的としては上述の通り「購入回数１回目にAAAまたはBBBという特定の2種類の商品を買った人が２回目以降にどの商品を購入しているかを求める」です。
どなたかご教示いただけませんでしょうか。
よろしくお願いします。

### 環境
Macローカルpostgresql（pgadmin）

特定の商品を買った人が２回目以降にどの商品を購入しているかを求めたい

中学校でコンピュータ部に所属している者です。

複雑なC++にあきてきたのでプログラム言語を自作しようとしているのですが,
わかりやすく解説してくれているサイトが少なく困っています。

字句解析は力技で完成させましが, 構文解析がイマイチわかりません。
どなたか回答よろしくお願いします。

やりたいこと
---
・コンパイラ型/インタープリタ型どちらでもよい
・C/C++でつくりたい(Javaは許容範囲)
・Windowsで作りたい

持っている知識
---
字句解析(完成済み)
構文解析 - 構文木をつくる
中間コード作成(インタープリタならバイトコード作成)
(コンパイラ型は)アセンブリへ変換 - アセンブル

プログラム言語を自作したい

初心者です。
超基本的な部分の質問ですが、いつも悩む部分なのでアドバイス頂けると幸いです。

---

ヘッダー-----------------

ロゴ←

大見出し(サイトの名前など)

ヘッダー-----------------

こういった場合のロゴに、なんのタグを当てればよいのか、いつも迷います。

ヘッダーのロゴはh1でも構わないという記述をいくつかのサイトで参考にさせていただきました。
[参考サイト](https://www.seo-pro.jp/seo/heading)
[参考サイト](https://lpeg.info/seo/seo_h1_logo.html#m8)

---

しかし、感覚的に、大見出しをh1にしたいので、
なんとなく、存在感があまり強くないヘッダーロゴにh1を使うのは気が引けます。

とすると、
テキストの場合は、<h2>を頭から使うわけにもいかないだろうし、
<p>タグだろうかと
思ってしまい今は<p>タグをあてているのですが、間違っていますか？

画像のロゴの場合は
<div>タグ…？

実際の現役の方はどうしていらっしゃるのかなと思い、質問させて頂きました。

どうぞ宜しくお願いします。

[追記]
当方、ローカル環境で、課題をこなしている勉強中の者です。
この質問に、SEO的な観点や、どういった効果をもたらすのかなど、細かい指定の無い質問でした。
いつもなんとなく<p>タグで囲っていたので、調べたところ、
意見が様々あり、また参考にした記事の更新日も気になったので、
現役の方や、詳しい方の今のご意見をお聞きしたく質問した次第でした。

ヘッダーロゴはどのタグで囲えばよいのか？<h1>?<p>?<div>?

#C++ なぜ int main()と書くのか?

C++の勉強を最近始めました。
ふと思ったのですが書籍等では、main関数の宣言時に戻り値の指定を基本的にintと書いてあります。

こんな感じです

```C++
#include<iostream>
using namespace std;

int main()
{
...

return 0;
}
```

これを書いていて思ったのですが、戻り値にintを指定して、
return 0；を返すことに意味はあるのでしょうか？

初学者の私はJavaみたいにvoidで戻り値を指定しておけば良くない??
と思ってしまったのですが、
このことについて何かしらのアドバイスをいただけたらと思います。

初歩的な質問で申し訳ございませんが、よろしくお願いいたします。

C++ なぜ int main()と書くのか?

[質問]
**電気信号は「0」「1」の２つしか認識できないのに、どうしてCPUの命令セットや機械語、アセンブラ、C言語、HTMLなどの文字を認識させることができてのですか？どうしたらそんなことができるようになるのですか？**


[私のベストアンサー]
CPUは「認識」なんかしていませんよ。
より原始的な自動機械であるオルゴール、あれは、音楽を認識しているわけでもなく、さらには「音」を認識しているわけでもなく、単に特定の位置に突起のある原盤(っていうのかな?)に板が引っかかって弾かれて音が出る、それだけの機械です。結果として音楽を奏でているわけですが、しかしそれは「演奏」とは言い難いのでは。
CPUも一緒。ある電気的なレベルの組み合わせが与えられたら決まった動作をすることになっている機械でしかないのです。決まった入力を与えると決まった結果が得られるとしても、機械は認識も理解もしていません。

*****

CPUは、なぜ命令を認識できるのか？

### 質問

最近 C# の勉強を始めたのですが、他の言語 (主に Java や Swift など) との違いに戸惑っております。
特に気になるのが、コードブロック (クラスやメソッド、if や for など) を開始する `{` の前で Visual Studio が自動的に改行することで、これによって少々間延びした印象を受けます。

Visual Studio の自動フォーマット機能については設定で変更できるようですが、普通はデフォルトの設定で使うものなのでしょうか？ 設定方法の質問ではなく、一般的なコーディング規約はどうなっていて、どこまでそれに従っているのかをお聞きしたいです。

### 追記

今は個人で勉強中なので好きなスタイルでもいいのですが、今後他の人と共同作業する際のことを考えて一般的なスタイルを確認したくて質問しました。一貫性が重要ということは理解しているつもりで、だからこそ学習の初期段階で一般的なスタイルに慣れておきたいと思っています。

「一般的」と言っても、統計的なことを知りたいというよりは (もちろんそれも重要ですが)、いろんな現場での経験談を聞かせていただけるとありがたいです。

### 該当のソースコード

比較のために C# と Swift で同等のコードを書いてみましたが、`{ get; set; }` だけなら 1 行で済むのに、set に条件をつけるだけでこんなに行数が増えるなんて、と驚いています。

```c#
class Item
{
    private int _quantity;

    public int Quantity
    {
        get
        {
            return _quantity;
        }

        set
        {
            if (value >= 0)
            {
                _quantity = value;
            }
        }
    }
}
```

```swift
class Item {
    private var _quantity: Int = 0

    var quantity: Int {
        get {
            return _quantity
        }
        set(value) {
            if value >= 0 {
                _quantity = value
            }
        }
    }
}
```

### 試したこと

「C# コーディング規約」で検索して、以下のドキュメントを参照しました。サンプルコードを見る限り `{` の前で改行しているようですが、改行位置のような細かいことは明示的には書いてありませんでした。

- [C# のコーディング規則 - C# プログラミング ガイド | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/csharp/programming-guide/inside-a-program/coding-conventions)
- [C# CODING GUIDELINES - Qiita](https://qiita.com/Ted-HM/items/67eddbe36b88bf2d441d)

### 補足情報（FW/ツールのバージョンなど）

Windows 10
Visual Studio 2019

C# のコーディング規約 (改行位置) について

Youtube Data APIを利用して、「複数のチャンネルのライブ配信状況をチェックし、ライブ配信中だった場合は処理をする」という動作を実装しようと思い、ネット上の記事を参考に下記のコードを書きました

その結果、処理を実装することはできたのですが、YouTube Data APIにはクォータの制限があり、現状その消費量が馬鹿にならないので、もっと無駄を省けないかと思い質問致しました

---
以下は現在のコードです

```ここに言語を入力
define('YOUTUBE_API_KEY', '###'); // APIキー
function json_get($url, $query = array(), $assoc = false) { 
    if ($query) $url .= ('?' . http_build_query($query, '', '&', PHP_QUERY_RFC3986));
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false); 
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, 10); 
    $responseString = curl_exec($curl);
    curl_close($curl);
    return ($responseString !== false) ? json_decode($responseString, $assoc) : false;
}
function h($value, $encoding = 'UTF-8') {
    return htmlspecialchars($value, ENT_QUOTES, $encoding); 
} 
function eh($value, $encoding = 'UTF-8'){
    echo h($value, $encoding); 
} 
foreach($streamers as $streamer){ //streamers配列には複数の動画配信者の情報(チャンネルID等)が含まれる
    $response = json_get('https://www.googleapis.com/youtube/v3/search', array(
        'key' => YOUTUBE_API_KEY,
        'channelId' => $streamer['channelID'], 
        'part' => 'snippet', 
        'eventType' => 'live', 
        'type' => 'video', 
    ), true);
    if($response["items"]!=null){ //ライブ中かどうかの判定(配列の内"item"の中身が空かどうかで判断)
        //ライブ中だった場合の処理
    }
}
```

Youtube Data APIから受け取る情報の内、必要なものは「ライブ配信中かどうか」という情報だけであり、それ以外については利用しておりません

もしコードの中に無駄な記述等があればご教授いただけると嬉しいです

Youtube Data APIを利用してチャンネルのライブ配信状況を取得する方法

下記の図のようにカード全体のリンクをJavaScriptでexample.com/post/1にした場合に一部を除外したい場合はどのようにしたらいいのでしょうか。
（<div class="text">の部分のリンクを無効）

```HTML
<div class="post-card">
<a herf="example.com/user/user_id">
 <div claas="user">
  <img src="user-icon.png" class="user-icon">
  <p class="username">ユーザーネーム</p>
  <p class="user_id">@User_id</p>
 </div>
</a>
 <a href="example.com/post/1" class="link"></a>
 <div class="text">
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
 </div>
</div>
```

```JavaScrip

$('.post-card').click(function() {
location.href = $(this).find('.link').attr('href');
});
```
![イメージ説明](77a045082925bc842c4189d8e025d33a.png)

div全体をリンクにしたときに一部を除外したい

お世話になります、他人が作ったJavaScriptを見ていると
唐突に謎の書き方が出てきますが言語化が難しく調べるのが難しいものがあります

その一つが以下のソースなのですが

```ここに言語を入力
TextEditor.prototype.createElements = function () {
  this.TEXTAREA = document.createElement('TEXTAREA');
  this.TEXTAREA.tabIndex = -1;
  (0, _element.addClass)(this.TEXTAREA, 'handsontableInput');
  this.textareaStyle = this.TEXTAREA.style;
  this.textareaStyle.width = 0;
  this.textareaStyle.height = 0;
  this.TEXTAREA_PARENT = document.createElement('DIV');
  (0, _element.addClass)(this.TEXTAREA_PARENT, 'handsontableInputHolder');
  this.textareaParentStyle = this.TEXTAREA_PARENT.style;
  this.textareaParentStyle.zIndex = '-1';
  this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);
  this.instance.rootElement.appendChild(this.TEXTAREA_PARENT);
};
```

お行儀のよい右辺左辺の読みやすいコードだなと思っていたら、、
この途中ででてくる二つの括弧はなにを意味しているのでしょうか


```ここに言語を入力
(0, _element.addClass)(this.TEXTAREA, 'handsontableInput');
```

代入なの？関数なの？まったく意味が分かりません
関係ないですが、JavaScriptってトリッキーな書き方がかっこいいみたいな風潮ないですかね？

すみません、それは置いといて
それは即時関数だよとか可変変数だよとか調べるためのヒントだけでも構いません
ベテランの方お教えいただけますと幸いです

JavaScriptを読んでいてたまに出てくる唐突な二つの括弧の意味

### 発生している問題

前任者から引き継いだウェブサイトが Chrome のみの対応で、これを Edge にも対応させようとしていますが、未解決の問題があり、質問させていただきます。

CSS のカスタムプロパティに `url()` を相対パスで指定しましたが、これを別の階層から呼び出したときに取得される絶対パスがブラウザによって異なるため困っています。

具体的には、以下のように `./index.html` のインライン CSS でカスタムプロパティ `--icon` を設定し、それを外部 CSS `./css/test.css` で呼び出すという流れになっています。Chrome では `./css/icon.png` が参照されますが、Edge (EdgeHTML) では `./icon.png` が呼ばれてしまいます。


```html
<link rel=”stylesheet” type=”text/css” href=”css/test.css”>
...
<p style="--icon: url(icon.png);">見出しです</h1>
...
```

```css
p {
  background-image: var(--icon);
}
```

CSS の `url()` は相対パスを指定すると当該 CSS をベースURLとして使いますから、Chrome のように `./css/test.css` と同じ階層にある `./css/icon.png` を取ってきてほしいのですが、Edge では `./index.html` をベースURLとして使っているようです。

カスタムプロパティを使わずに CSS を以下のように書けば、Edge でも `./css/icon.png` を探してくれます。Edge ではカスタムプロパティ設定の段階で計算が行われ絶対パスに解決されてしまうのか？　あるいは謎の最適化が悪さをしているのか？　よくわかりません。

```css
p {
  background-image: url(icon.png);
}
```

どちらの挙動が仕様書に則ったものなのか調べてみましたが、`url()` の相対パスが絶対化されるタイミング（指定値→算出値？）とカスタムプロパティを `var()` で呼ぶタイミングがどう関連しているのかわかりませんでした。

### 知りたいこと
Chrome (Chromium) の挙動と Edge (EdgeHTML) の挙動のどちらが仕様書に則っているのか、またどうすれば２つのブラウザで同じ場所を参照できるのか、ご教授いただければ幸いです。

CSS で url() 相対パスの解決がうまくいかない

[https://www.nintendo.co.jp/](https://www.nintendo.co.jp/)
任天堂の公式ホームページのマークアップについて質問です。
このサイトに見出しで使用する`hタグ`が1つも使用されていないのは、何故でしょうか。
また、ヘッダーでリストが横並びになっているレイアウトは、通常`navタグ` が使用されることが多いですが、`navタグ`が使われていないのも何か理由があるからなのでしょうか。

`navタグ`の使用に限って大手企業のサイトを比較してみると、

navタグ使用
    - Google
    - Apple
    - マイクロソフト

navタグ未使用
    - 任天堂
    - Sony
    - Amazon

となるのですが、何かしらのルールにより、使用を制限しているのでしょうか。
勿論マークアップの解釈は人それぞれ違いますし、絶対的な正解がないのも理解しているつもりなのですが、何か特別な意図やルールの上にやっているのであれば、教えて頂ければ幸いです。

（やたら滅多に外部サイトのリンクを貼ると運営にスパム扱いされそうなのでリンクは付けていませんが、Google除きトップページを参考にしています。すみません。。）

任天堂のHPにhタグが使用されていないのは何故でしょうか。

###htmlでimportみたいなことってできるの？
例えば、あるサイトを作ろうとしたときに、phpやhtmlファイルを複数作ったとして、bodyのheaderとfooterは全ページ共通の場合、それぞれのファイルにそれをいちいち書くのは面倒だし、変更も一括でしたいですよね？
そういうときってどのような解決方法がありますか？
phpを使ってechoする方法も考えましたが、なんともスマートでない気がする…

追記：たくさんのご回答ありがとうございます。一ヶ月前ほどにhtmlやcss,phpを学び始めたばかりで何ができて何ができないのか全然わからず、曖昧な質問の仕方になってしまいました、すみません。
html単体でも他の言語のように簡単にimportできるものかと思っていましたが、どうやら難しそうなので、phpのincludeで利用するのが一番自分の想定していた使い方に近かったのでベストアンサーとさせていただきます。

htmlでimportみたいなことってできるんですか？

###発生している問題・エラーメッセージ

![](2ee8ef8a5a223fd071fa15b7600e2244.png)

- （左側）問題なく画像が表示されるコード
```
<img src="../assets/logo.png">
```

- （右側）画像が404になるコード
```
<img v-bind:src="'../assets/characters/icon/' + character.id + '.png'">
```


エラーコード、エラーメッセージが無く、
webpack + Vue.js を初めて10時間前後な事もあり、どのようにすれば解決するか分かりません。

### 試したこと
- 画像があるはずのURLに直接アクセスする
→ 404になった

- 問題なく画像が表示されている方のURLがどうなっているかを確認した
→ URLではなく、base64エンコードされた画像が指定されていた
（HTMLでは上記のように相対パスしているが、WEBブラウザで確認するとbase64に自動的に変換されていた）

- `my-project-name/src/assets/characters/icon/1.png` にファイルが有るかどうかのチェック
→ 間違いなくある。
![](7829873bc160479726a639f457aa8081.png)

### 開発環境
- Windows 10 64bit
- webpack 3.3.0
- Vue.js 2.8.2
- 開発環境インストール方法
```
$ npm install -g vue-cli
$ vue init webpack my-project-name
$ cd my-project-name
$ npm run dev
```

webpack + Vue.jsで画像が表示できない

例えばdevise等の認証系ライブラリではパスワードを登録した際にその文字列がハッシュ化されDBに格納していると思います。
例えばログインする際、暗号化であれば例えばBASE64などは一定の法則があって復号化が可能で、DBに入っている文字列を復号化し入力した値を照らし合わせるということが出来ると思うのですが、非可逆なハッシュ文字列を用いて認証を出来る意味が良く分かりません。
同じ文字列をハッシュ化しても同じハッシュ化された文字列にはなりませんよね？
よろしくお願い致します。

なぜdevise等の認証（パスワード）は非可逆なハッシュ化をしているのにログインが出来るのかが分からない

### 前提・実現したいこと

現在のソースだと、IF文が大量にあるので、見栄えが悪く、ソースの修正があった場合、修正行が多くなることがあると思うので、星座判別の規則性を使ってソースを改変したいのですが、規則がわからず苦戦中
星座の判別について、javaのコマンドライン引数を使って星座を判別します。
コマンドライン引数は、
例）1201
   1003

Case文も使用せずにソースの改変を行いたい

### 発生している問題・エラーメッセージ

```
エラーは現在ありません。
```

### 該当のソースコード

```Java
public class Constellation {
    public static void main(String[] args) {
        // 入力値MMDD(想定)
        String myDay = args[0];
        try {
            int month = Integer.parseInt(myDay.substring(0, 2));
            int day = Integer.parseInt(myDay.substring(2, 4));
            // 星座名取得.
            String seizaName = getSeiza(month, day);
            if (seizaName == null) {
                System.out.println("日付が正しくない");
            }
            System.out.println(seizaName);

        } catch (Exception e) {
            System.out.println("日付が正しくない");
        }
    }

    /**
     * 星座名取得.
     *
     * @param month 月
     * @param day   日
     * @return seizaName 星座名
     */
    public static String getSeiza(int month, int day) {
        String seizaName = null;
        if (month < 13) {
            if (month == 3 && day >= 21 || month == 4 && day <= 19) {
                return seizaName = "牡羊座";
            } else if (month == 4 && day >= 20 || month == 5 && day <= 20) {
                return seizaName = "牡牛座";
            } else if (month == 5 && day >= 21 || month == 6 && day <= 21) {
                return seizaName = "双子座";
            } else if (month == 6 && day >= 22 || month == 7 && day <= 22) {
                return seizaName = "蟹座";
            } else if (month == 7 && day >= 23 || month == 8 && day <= 22) {
                return seizaName = "しし座";
            } else if (month == 8 && day >= 23 || month == 9 && day <= 22) {
                return seizaName = "乙女座";
            } else if (month == 9 && day >= 23 || month == 10 && day <= 23) {
                return seizaName = "てんびん座";
            } else if (month == 10 && day >= 24 || month == 11 && day <= 22) {
                return seizaName = "蠍座";
            } else if (month == 11 && day >= 23 || month == 12 && day <= 21) {
                return seizaName = "射手座";
            } else if (month == 12 && day >= 22 || month == 1 && day <= 19) {
                return seizaName = "山羊座";
            } else if (month == 1 && day >= 20 || month == 2 && day <= 18) {
                return seizaName = "水瓶座";
            } else {
                return seizaName = "魚座";
            }
        } else {
            return seizaName;
        }
    }
}
```

### 補足情報（FW/ツールのバージョンなど）

星座の判別をIF文を大量に使わずに判別する方法

世のネットゲームの中にはサーバーを介さずにプレイヤーの端末だけで通信してプレイするものもあると思います。
ソケットでそれぞれのIPに接続しているのだと思うのですが、どのようにすればそれが実現できるのですか？
Pythonのsocketを使ってみてもやり方がわかりませんでした。調べてみても同じネットワーク内もしくは同じ端末内でのソケット通信の方法しか見つかりませんでした。ルーターのポート開放が必要なのかもしれませんが、基本的に世のネットゲームはそのような面倒な手続きなしに普通に接続ができています。これはどのように実現しているのですか？TCP/IPやネットワークセキュリティなどについての知識はほぼありません。

ネットゲームの通信について

### 前提・実現したいこと

このように、ページ内のコンテンツを区切る十字の線を引きたいです。
![イメージ説明](6af27a21c58a3c0ffbc5557a0f2447be.png)

現在はこのようになっています。
![イメージ説明](e1fe3f66f073da5e4ea981dbc6de9d35.png)


お手数おかけしますが、回答お待ちしております。（ ;  ; ）


### 該当のソースコード

```html
<div class="features">
				<ul class="col col_sp_full">
					<li>
						<div class="features-inner">
							<img width="250px" src="<?php bloginfo('template_directory'); ?>/images/about/about-ico01.png">
							<p class="features-number">01</p>
							<h3></h3>
							<p class="features-text"></p>
						</div>
					</li>
					<li>
						<div class="features-inner">
							<img width="200px" src="<?php bloginfo('template_directory'); ?>/images/about/about-ico02.png">
							<p class="features-number">02</p>
							<h3></h3>
							<p class="features-text"></p>
						</div>
					</li>
					<li>
						<div class="features-inner">
							<img width="250px" src="<?php bloginfo('template_directory'); ?>/images/about/about-ico03.png">
							<p class="features-number">03</p>
							<h3></h3>
							<p class="features-text"></p>
						</div>
					</li>
					<li>
						<div class="features-inner">
							<img width="150px" src="<?php bloginfo('template_directory'); ?>/images/about/about-ico04.png">
							<p class="features-number">04</p>
							<h3></h3>
							<p class="features-text"></p>
						</div>
					</li>
				</ul>
			</div>
```


```css

ul.col {
  display: flex;
  flex-flow: row wrap; }
  ul.col > li {
    flex: 0 0 50%;
    width: 50%;
    /* before Android4.3 iOS6:Safari */
    max-width: 50%;
    /* IE11*/
    height: auto; }


.features .features-inner {
  text-align: center;
  padding: 20px;
  max-width: 450px;
  margin: 0 auto; }

.features .features-inner .features-number {
    font-weight: bold;
    text-align: center;
    font-size: 2.6rem;
    margin-top: 45px; }

.features .features-inner h3 {
    font-size: 2.6rem;
    color: #0088c4;
    text-align: center;
    margin-bottom: 20px;
    line-height: 3.6rem; }

.features .features-inner .features-text {
    text-align: left; }

li:nth-child(1){
    border-right: solid 1px #888;
    border-bottom: solid 1px #888;}
		
li:nth-child(2){
    border-bottom: solid 1px #888;}

li:nth-child(3){
    border-right: solid 1px #888;}
```

CSSでコンテンツを区切る十字の線を引きたい。

base64で例えば`teratail`という文字列を変換すると`dGVyYXRhaWw=`
という文字列に変換できると思います。

この最後のイコールは変換後の文字列を4文字ずつ処理し4文字に満たなけれな付け加えるというルールというのは分かるのですが
そもそも何故こういうルールがあるかが分かりません。

base64は電子メール等で添付ファイルは画像等そのまま扱えない為バイナリ化、文字列化するということで使われたりしているということですが、別にイコールをわざわざ付け加えなくても扱えるのではないかと感じました。
=を付け加えなければならない理由が分かる方はいらっしゃいますでしょうか？よろしくお願い致します。