カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

コンテンツを中央寄せする便利な方法

コンテンツをテキストは左揃えで中央寄せしたいとき、これまでラッパーとしてdiv等で囲み、flexを使ったり、幅を決めてmargin: 0 auto;を使ったりしていました。
しかし、もう少し簡単にできる方法があったのでご紹介します。

これまでのやり方例

<div>
    <ul>
        <li>Sea sit et duo</li>
        <li>Labore velit enim gubergren</li>
        <li>Duo kasd amet clita</li>
        <li>Eirmod takimata est possim</li>
        <li>Nobis sed sed justo</li>
        <li>Clita sit erat iriure</li>
    </ul>
</div>

ラッピングしたdivflexを設定

div {
    display: flex;
    justify-content: center;
}

gridでも同じようなレイアウトにできます。

div {
    display: grid;
    justify-content: center;
}

div等でラッピングせずにやる方法

<ul>
    <li>Sea sit et duo</li>
    <li>Labore velit enim gubergren</li>
    <li>Duo kasd amet clita</li>
    <li>Eirmod takimata est possim</li>
    <li>Nobis sed sed justo</li>
    <li>Clita sit erat iriure</li>
</ul>

ulをコンテンツの幅で表示するようにし、中央寄せにする

ul {
    max-inline-size: max-content;
    margin-inline: auto;
}

表示結果

IE以外のブラウザは対応しているようなので問題なく使用できると思います。

justify-content – CSS: カスケーディングスタイルシート | MDN

上下左右中央揃え

上下左右共に中央揃えしたいときはplace-contentを使います。

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
div {
    display: grid;
    place-content: center;
    height: 100%;
}

表示結果

place-content – CSS: カスケーディングスタイルシート | MDN

454 views

非推奨になったsubstr。代わりにsubstringを使おう

substrは文字列から指定した部分を取り出せるメソッドです。
指定した位置から指定した長さの文字列を返します。

const str = 'Mozilla';

console.log(str.substr(1, 2));
// expected output: "oz"

console.log(str.substr(2));
// expected output: "zilla"

しかしsubstrはECMAScriptとしては古い機能とされていて、将来的に削除される可能性があるため、出来れば使用しないようにしましょう。

substrの代わりにsubstringメソッドを使いましょう。

substring

const str = 'Mozilla';

console.log(str.substring(1, 3));
// expected output: "oz"

console.log(str.substring(2));
// expected output: "zilla"

substrの引数は開始位置と返される文字列の文字数でしたが、substringは開始位置と終了位置となりますので注意が必要です。

構文
str.substring(indexStart[, indexEnd])
引数

indexStart: 返される部分文字列の、最初の文字を含んだ位置
indexEnd: 返される部分文字列から外される最初の文字の位置

戻り値

与えられた文字列から抽出された区間を含む新しい文字列

indexEndが省略された場合は文字列の最後までの文字を取り出します。
indexStartindexEndと等しい場合は空の文字列を返します。
indexStartindexEndより大きかった場合は2つの引数が交換されたものとして実行されます。

11,091 views

VSCodeのHTMLユーザースニペットを日本語に

VSCodeでHTMLファイルを作成するとき、!+Tabキーで挿入されるユーザースニペットは非常に便利です。
しかしながら、デフォルトでは言語が英語になっています。

デフォルトの言語設定を日本語にしたいときは、Emmetの設定を変更しましょう。

VSCodeの設定を開き、検索ボックスにemmetと入力します。
おそらく一番下にあるEmmet: Variablesを探します。

[項目の追加]ボタンを押します。

すると、値が追加できるようになり、初期状態で項目がlangとなっていると思います。
そこで値の欄に初期値がenになっているので、jaと打ち変えて[OK]ボタンを押せば設定完了です。

また、settiings.jsonに直接書き込む場合は以下を追加しましょう。

"emmet.variables": {
    "lang": "ja"
},

これでデフォルトの言語が日本語になってくれます。

640 views

Reactアプリを本場環境にデプロイする

Reactアプリを本場環境にデプロイするための覚書です。

※デプロイとは、開発したアプリケーション(機能やサービス)をサーバー上に展開・配置して利用できるようにすること。

ファイルの読み込みを相対パスにしたい場合、package.jsonに"homepage": ".",を追加。

プロジェクトのディレクトリでコマンドを実行しビルドします。

yarn build

ビルド中に等価演算子についての警告が発生することがあります。
==ではなく===を使えとのことらしいです。
型の判定までしなくても良い場合はとりあえず無視してもいいでしょう。

Compiled with warnings.

src/...js
  Line 7:9:    Expected '===' and instead saw '=='  eqeqeq

これで本番環境へのデプロイの準備が整いました。

buildディレクトリ以下にファイルが構成されますので、配下のファイルをリモートサーバーにアップロードします。

ちなみに、別途作成したファイル等でビルドの際に含まれて欲しいものがあれば、publicディレクトリに配置しておくとbuildディレクトリにも配置されます。

参考URL:
初めてReactをプロダクションで採用した時に役立ったこと、情報収集についての思い出 | Crudzoo
サーバーにReactアプリをデプロイする方法
【初心者】Reactアプリケーションを作ってデプロイする方法【歓迎】 – Qiita

2,888 views

null合体演算子

PHPでもPHP7からnull合体演算子がサポートされるようになりました。
よく使う場面としては、nullの場合は空の文字列を返したい等です。

$val = null;
echo $val ?? "default";

出力結果

default

その他、C#やSwiftでも使えます。
JavaScriptはES2020からサポートされるようになったようです。
※Swiftの場合は「nil合体演算子」と呼ばれます。

なお、Perl(5.10以降)ではnull合体演算子は//だったりするので、言語によって違いがあります。
各言語仕様をご確認ください。

ちなみにVisualBasicだとNz関数がそれに当たるんでしょうか。
CSVエクスポートでのテキストデータのNull値について ACCESS

473 views