EmotionをNext.js x TypeScriptの環境にインストールする手順
Emotionは比較的最近できたCSS in JSライブラリです。後発ということもあり多機能で使い勝手がよいと評判です。 今回はNext.js with TypeScriptの環境にEmotionをインストールする手順に…
JavaScriptJavaScriptプログラミング
JavaScript
HTML/CSS【CSS】コンテンツ(テキスト)の天地中央揃え方法まとめ
コンテンツ(テキスト)の天地中央揃え方法 以下ではそれぞれの方法について紹介します。 relative/absoluteを利用する方法 親要素で囲み、親要素をposition: relative・コンテンツの要素をpos…
HTML/CSS【CSS】画像(アイコン)とテキストを上下中央よせ横並びする方法まとめ
画像（アイコン）とテキストを中央よせ横並びにする方法 以下ではそれぞれの方法について紹介します。 background-positionを利用する方法 テキストの要素を横幅と高さがあるテキストエリアにし、画像をテキストエ…
HTML/CSSレイアウトの余白をpaddingにするかmarginにするか決める際の考え方
結論: レイアウトの余白をpaddingで作成するかmarginで作成するかの決め方 レイアウトから『大きい四角の中に小さい四角』という部分を探す。 大きい四角と小さい四角のクラス名が同じでも違和感がなければpaddin…
HTML/CSS【CSS】Flexboxによるページネーション(ページャ)作成方法
ページネーションの作成手順 今回は以下の手順で作成します。 リストを作成する ページネーションの元となるリストを作成します。 <ol class=”pagination”> <li class=”pag…
HTML/CSS【CSS】リスト(liタグ)の左余白をなくす方法
liタグの左にはlist-style-typeのアイテムを配置するための場所が確保されています。 ですので、list-style-type: none適用したリストの場合、左に余白ができた状態になります。 <ol …
HTML/CSS【CSS】overflowとFlexboxで横スクロール可能な横並びアイテムを実装する
【CSS】overflowの概要と具体例でoverflowの概要について紹介しました。 今回はoverflowの応用例として、スクロール可能な横並びアイテムの実装方法について紹介します。 スクロール追加対象のサンプルコー…
HTML/CSS【CSS】テキスト中央よせボタンパーツの実装パターン集
『text-align: center』と『上下padding』を利用する方法 CSS設計完全ガイド ～詳細解説＋実践的モジュール集のボタンパーツ実装で紹介されている方法です。 widthで横幅を指定し、text-ali…
HTML/CSS【CSS】relative/absoluteの作成方法
方法1: 親要素をrelative、子要素をabsoluteにする 親要素のpositionにrelative、子要素のpositionにabsoluteを指定する方法です。 具体的な作成手順は以下の通りです。 この方法…
HTML/CSSインライン要素のテキストを上下中央よせする方法
aタグで実装されたボタンなど、高さのあるインライン要素でテキスト（コンテンツ）を上下中央よせする方法について紹介します。 Flexbox化し、『align-items: center』を適用する インライン要素にdisp…
HTML/CSS擬似要素before/afterを利用したパンくずリスト実装例
MDN Web Docsのパンくずナビゲーションで紹介されている実装をベースに、擬似要素before/afterを利用したパンくずリストの実装方法について紹介します。 なお、わかりやすさのため境界線や背景色つきでパンくず…
HTML/CSS擬似要素before/afterの概要と具体例
before/afterの使い方 before/afterの擬似要素は、要素やクラスに対して::beforeあるいは::afterを追加して定義します。 擬似要素で表示する内容はcontentプロパティに記述します。 b…
HTML/CSS『position: absolute』を適用した要素の表示特性まとめ
【CSS】ブロック/インライン/インラインブロックの違いについてで紹介したように、HTMLタグにはデフォルトの表示形式が存在します。 しかし、position: absoluteを適用することで表示の特性が変化します。今…
HTML/CSSabsoluteとrelativeを利用した上下左右の中央よせ方法
absoluteとrelativeを利用して要素を中央よせにする方法は以下の2つがあります。 今回は「上下」「左右」「上下左右」の中央よせについて、上記の手法を適用した例を紹介します。 左右中央よせ marginプロパテ…
HTML/CSSabsoluteとrelativeの利用方法と、中央寄せ・隣接・重ね合わせの具体例
absoluteとrelativeを利用して要素の位置を変更する方法 要素の位置はleft, top, bottom, rightで指定します。insetを利用すると一括指定もできます。 たとえば、top: 10px、l…
HTML/CSSFlexbox/inline-block/floatの横並び実装の比較と使い分け
Flexbox、インラインブロック、フロート、による横並びデザインの実装方法の比較を紹介します。 また、それぞれの手法の使い分けについて説明します。 Flexboxを利用した横並びの実装方法 FlexboxとはCSS3か…
HTML/CSS【CSS】インラインブロック/インラインで勝手にできる余白の削除方法
インラインブロックやインライン要素を利用することで簡単に要素を横並びにできます。 しかし、要素同士の間に意図していない余白が勝手に生まれる問題があります。 今回はインラインブロックやインライン要素で勝手にできてしまう余白…
HTML/CSSlast-childのmarginを0にして再利用しやすいCSS設計をする
『レイアウト』と『UIパーツ』を意識してCSS設計をするとデザインの再利用がしやすくなります。 UIパーツに関するCSSには再利用性の観点からUIパーツの外側の余白(margin)を含めないのが原則です。 今回はリストア…
HTML/CSSFlexboxの概要と使いどころ
Flexboxについて FlexboxとはCSS3から導入されたレイアウトに関する機能です。Flexboxを利用することで行あるいは列の1次元レイアウトを簡単に実現できます。 Flexboxの適用範囲であるレイアウト全体…
HTML/CSSfloat解除(overflow: hidden/clear: both/clearfix)の比較と具体的な使い方
floatプロパティを利用することでブロックレベル要素の横並びを実現できます。floatを利用する際はfloatの解除をおこなう必要があります。 今回はfloatの解除方法としていくつかパターンを紹介します。 今回利用す…
HTML/CSS【CSS】overflowの概要と具体例
overflowプロパティについて overflowとは要素からはみ出したコンテンツの扱いを記述するプロパティです。overflowはoverflow-xプロパティとoverflow-yプロパティを一括指定します。 ov…
HTML/CSS【CSS】ブロック/インライン/インラインブロックの違いについて
要素の表示形式であるブロック・インライン・インラインブロックの違いについて紹介します。 基礎知識について HTMLタグごとにデフォルトの表示形式が決まっている HTMLタグごとにデフォルトの表示形式が決まっており、ブロッ…
Ruby【Rails】JWTを利用したログインAPIと認証付きAPIの実装
今回のゴール 実装の仕様について バックエンド関連 JWT関連 API関連 下準備 ユーザーの作成 認証対象のユーザーを作成します。ActiveModel::SecurePassword::ClassMethodsのドキ…
Ruby【Ruby】jwt gemの使い方とJWTのエンコード・デコード方法の具体例
前回、JWTの概要と構成要素(ヘッダ/ペイロード/署名)を理解するでJWTの概要について紹介しました。 今回はruby-jwt（jwt gem）を利用してペイロードをJWTにエンコード、JWTをペイロードにデコードする方…
バックエンドJWTの概要と構成要素(ヘッダ/ペイロード/署名)を理解する
JWTについて JWTはJSON Web Tokenの略で、署名されたJSON形式のクレーム（Claim、情報、内容、属性情報）をURLセーフな形で表現する際のトークンの仕様です。JWTの仕様はRFC 7519で定義され…
Ruby【Ruby】OpenSSL::PKey::RSAを利用した秘密鍵・公開鍵の生成方法
OpenSSL::PKey::RSAクラスを利用してRSA暗号の秘密鍵と公開鍵の作成方法について、今回は以下の2つの方法を紹介します。 乱数を利用する方法 OpenSSL::PKey::RSAのgenerateメソッドを…
バックエンドサブドメイン間のCookie送受信の可否とDomain属性の対応
サーバサイドで作成したCookieをサブドメイン間で送受信するケースにおいて、Cookie作成時のドメインオプションがCookie送受信へ与える影響について紹介します。 ドメインオプションと作成されるCookieのDom…
バックエンドrack-corsとfetch APIを利用したCookieの送受信方法
オリジン間リソース共有 (Cross-Origin Resource Sharing, CORS)において、Rails APIとフロントのfetch API間でCookieを送受信できるようにする方法について紹介します。…
インフラnginxとDockerでローカル環境のWebアプリとHTTPS通信をする
前回、独自ドメインとローカルのWebアプリをつなげるプロキシサーバをnginxとDcokerで構築するでローカル環境用のプロキシサーバをnginxとDockerで構築する方法について紹介しました。 今回は前回の記事で紹介…
インフラローカル環境のSSL対応(HTTPS通信)をmkcertで実現する
mkcertというライブラリを使うとローカル環境でもHTTPS通信ができます。今回はmkcertを利用したローカル環境のSSL化手順について紹介します。なお、開発環境はMacです。 mkcertのインストール mkcer…
シェル『sed -e :loop -e ‘N; $!b loop’ -e ‘s/\n/ /g’』を読み解く
『sed -e :loop -e ‘N; $!b loop’ -e ‘s/\n/ /g’』の実行結果について sed -e :loop -e ‘N; $!b loop’ -…
インフラローカル環境上で起動する異なるDocker間で通信する方法まとめ
フロントエンドとバックエンドが別々のDocker環境で管理されている場合など、異なるDocker環境どうしでアクセスをしたい時があります。 今回は異なるDocker環境のコンテナ間通信を実現する方法について紹介します。 …
インフラサブドメインと複数のWebアプリをつなげるプロキシサーバをnginxとDcokerで構築する
前回、独自ドメインとローカルのWebアプリをつなげるプロキシサーバをnginxとDcokerで構築するでnginxを利用して独自ドメインでコンテナに接続する方法について紹介しました。 前回は接続対象のアプリケーションが1…
インフラ独自ドメインとローカルのWebアプリをつなげるプロキシサーバをnginxとDcokerで構築する
「任意のドメインに接続したリクエストをローカル環境で起動しているWebアプリケーションへプロキシする」というnginxを、Docker環境に構築する方法について紹介します。 なお、http://localhost:300…
インフラ「nginx + Webアプリ」のDocker環境にローカルから独自ドメインでアクセスする方法
ローカル環境において、ドメイン名でWebアプリケーションに接続できる「nginx + Webアプリ」のDocker環境構築手順について紹介します。 なお、Docker ComposeでWebアプリケーションが起動できる前…
インフラローカル環境の異なるDocker Compose間の通信をhost.docker.internalで解決する
externalなDockerネットワークを共有することで、異なるDokcer環境でもコンテナ間の通信ができます。 Dockerネットワークを利用したコンテナの通信方法の詳細はDockerネットワークとコンテナ名で実現す…
インフラ/etc/hostsの書き換え不要。127.0.0.1をサブドメインに割り当ててローカル開発用ホスト名として利用する
localhost以外のホスト名でローカル環境に接続する一般的な方法は『/etc/hostsで任意のホスト名を127.0.0.1に割り当てる』です。 ですが、サービスのドメインを既に取得しており、開発環境用にドメインを用…
インフラlocalhost以外のホスト名でローカル環境に接続する方法
http://localhostで接続するローカル環境のアプリケーションへ、localhost以外のホスト名でアクセスできるようにする方法について紹介します。 方法1: ローカル環境の『/etc/hosts』で任意のホス…
インフラDockerネットワークとコンテナ名で実現する複数Docker Compose間の接続方法
フロントエンドとバックエンドが別々のDocker環境で管理されている場合など、異なるDocker環境どうしでアクセスをしたい時があります。 Dockerのネットワーク機能を利用することでコンテナ間の通信をカスタマイズでき…
インフラDocker Desktop for Macのコンテナからローカル環境に接続する方法
Docker環境上のアプリケーションが指すlocalhostはローカル環境ではなくコンテナ自身を指しています。 今回はコンテナからローカル環境に接続する方法について紹介します。 なお、Docker Desktop for…
