こんにちは！ 今回はREST APIについてまとめます。 REST APIはRESTの原則に則ったWeb APIのことです。 では、それぞれの用語についてみていきましょう。 APIとは Application Programming Interfaceの略 プログラム同士が情報をやり取りするためのインターフ…

こんにちは！ 今回は「達人に学ぶDB設計 徹底指南書」を読んだ感想についてまとめます。 達人に学ぶDB設計徹底指南書: 初級者で終わりたくないあなたへ作者:ミック翔泳社Amazon 良かったところ DB設計について論理設計と物理設計の両側面から学べる 「勘どこ…

こんにちは！ 今回はスッキリわかるSQL入門を読んだ感想をまとめます。 スッキリわかるSQL入門 第3版 ドリル256問付き! (スッキリわかる入門シリーズ)作者:中山 清喬,飯田 理恵子インプレスAmazon 良かったところ 最初の1冊に最適 図解が豊富 キャラクターと…

こんにちは！ 今回はRubyのoptparseの使い方についてまとめます。 optparseとは コマンドラインのオプションを取り扱うライブラリ opt -> オプション parse -> 解析 使用例 require 'optparse' # optparseの読み込み opt = OptionParse.new # OptionParserオ…

こんにちは！ 今回は「プロを目指す人のためのRuby入門」を読んだ感想をまとめます。 プロを目指す人のためのRuby入門[改訂2版] 言語仕様からテスト駆動開発・デバッグ技法まで (Software Design plus)作者:伊藤 淳一技術評論社Amazon 良かったところ 内容が…

こんにちは！ 今回はRailsをDockerで構築した際に引っかかったエラーについてまとめます。 環境 ruby 3.2.2 rails 7.0.6 Docker Desktop 4.28.0 WSL2 postgresql 12 エラー① ActiveRecord::ConnectionNotEstablished エラー発生タイミング docker compose up…

こんにちは！ 今回はGithub PagesでWebサイトを公開する方法についてまとめます。 目次 目次 Github Pagesとは Github PagesでWebサイトを公開するには 前提 手順 1. リポジトリの作成 2. ファイルのアップロード a. 直接アップロードする方法 b. git pushす…

こんにちは！ 今回は最近覚えたEmmetについてまとめます。 HTML タグ名.class名 クラス名を自動で付ける タグ名.class名|c 閉じタグの後に、というコメントを付ける CSS m20 margin: 20px emmet CSS m margin: ; mt margin-top: ; mr margin-right: ; mb mar…

こんにちは！ 今回はPRECSSの書き方を簡単にまとめてみました。 PRECSSとは PRESCSS（プレックス）とは、prefixed CSS（接頭辞付きのCSS）の略 CSS設計完全ガイドの著者が開発 CSSを次の6グループに分ける ベース レイアウト モジュール ブロックモジュール …

こんにちは！ 今回はCSSの疑似要素でリストのマークを作る方法についてまとめます。 今回作るリスト サンプルコード <ul> <li>list1</li> <li>list2</li> <li>list3</li> </ul> CSSの疑似要素で実装 ul li { position: relative } ul li::before { content: ""; width: 10px; height: 10px; borde…

こんにちは！ 今回はCSSのdisplay: inline-flexについてまとめます。 display: inline-flexとは？ flexコンテナを定義するが、コンテナ自体はinline要素のように横に要素を並べられる 見出しなどで便利 やりたいこと タイトルの前に正方形、中央揃えで数字を…

こんにちは！ 今回はposition: absolute時に中央揃えをする方法についてまとめます。 やりたいこと position: absoluteで親要素に対して中央揃えをしたい コード例 <div class="parent"> <div class="child">Lorem</div> </div> .parent { background-color: khaki; height: 300px; width: 500px; position: rela…

こんにちは！ 今回はCSSでmax-width: 100%を指定する理由についてまとめます。 コード na-ah.hatenablog.com コードは前回と同様 ウインドウ幅を狭めた場合の挙動を比較 min-width: 300pxの場合 最小でも300pxという指定をしているため、ウィンドウ幅が300px…

こんにちは！ 今回はCSSのmin-widthとwidth、max-widthの違いについてまとめます。 ボタン例 <a href="#" class="btn">Lorem...</a> .btn { display: inline-block padding: 20px 10px; /* width: 300px or min-width: 300px or max-width: 300px */ } inline-block要素の場合 min-width:…

こんにちは！ 今回はCSSでボタンをinline-blockにする理由についてまとめます。 ボタン例 <a class="btn" href="#">ボタン</a> .btn { width: 300px; padding: 20px 10px; /* display: inline or block or inline-block? */ } inline要素の場合 width: 300pxの指定が効かない padding: 20…

こんにちは！ 今回はCSSのcalcが便利だったことについてまとめます。 やりたいこと 画像のように、メインのコンテナからは離れた場所にボタンなどのサイドバーを設置したい 今回の方法 今回はposition: absoluteで指定することにした ただ、leftで位置を指定…

こんにちは！ 今回はCSSは階層が深い方の優先度が高くなるということについてまとめます。 問題 レスポンシブなページを作っているときに、メディアクエリで正しくクラスを指定しても反映されない 解決方法 メディアクエリを使用していない箇所と同じ階層構…

こんにちは！ 今回はChrome DevToolsの基本操作についてまとめます。 Chrome DevToolsとは Google Chromeに付属しているWeb開発に役に立つツール DeveloperTool、デベロッパーツール、開発者ツールとも呼ばれる HTML、CSS、JavaScriptの動作を詳細に検討でき…