2021-01-01から1ヶ月間の記事一覧

レイアウトを組む

レイアウトを組む 書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座でWebデザインを勉強中。 レイアウトとはコンテンツをどこに、どう配置するか設計すること。 (P152) Flexbox 複雑なレイアウトも簡単に組める。Flexコンテナーとなる親要素の中に、…

色を扱う

書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座でWebデザインの学習を進める。 カラーピッカー Googleで「カラーピッカー」と検索するとツールが表示される (P107)。 配色 配色により雰囲気が変わる。 (P110) 色相 : 色の違いのこと。色相環の反対…

文字や文章の扱い

文字や文章の扱い 文字サイズ 14pxから18px程度が一般的 (P98)。 サイズバリエーション 2から5種類程度にとどめる。 本文で使う文字サイズを決めた後、これを基準に見出しや注釈などの文字サイズを決める。 ジャンプ率 見出しと本文の文字サイズ比率をジャン…

CSSの基本

コードの中の文節・文章は、書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座のテキスト原稿を改変している。 CSS を適用させるには、3つの方法がる。 (P89) 拡張子 css ファイルを作成し、 HTML ファイルに読み込ませる HTML ファイルの <head> 内に <style> タ</style></head>…

HTMLファイルの骨組み

引き続き書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座で学習です。 HTML のタグの中からいくつかをピックアップ。 metaタグ 文書のメタ情報をを記述し、ブラウザや検索エンジンに情報を知らせるタグ。 <meta name="description" content="hogehoge"> (P55) 説明文を書く。どのようなサイトな</meta>…

5つの重要ポイント

書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座より、Webデザインの5つの重要ポイントをメモ! 実際には、他にも重要ポイントが書かれている。私が、重要と考えた5つを紹介する。 デザインは伝えるための手段、美しく装飾することではない (P14) デ…

1冊ですべて身につけよう HTML&CSS

書籍「ハンズオン Node.js」は、ユニットテスト、デプロイなど数章が残っている。 Node.js を使った Web アプリケーション の実装を通して HTML と CSS の知識不足を実感。頭に浮かんだ Web アプリケーション を実現するために改めて HTML と CSS を勉強しま…

NoSQL LevelDB

NoSQL は SQL を使わずにデータを操作するデータベース。次のように分類できる。 KVS ドキュメントストア ワイドカラムストア グラフデータベース 書籍「ハンズオン Node.js」では、環境構築が容易な LevelDB を取り組む。 level Fast & simple storage. A N…

リレーショナルデータベース

リレーショナルデータベースは、環境構築が容易な SQLite を利用する。 SQLite そのものを別途インストールする必要はなく $ npm i sqlite3@4.2.0 と入力したら大量のメッセージが! $ npm i > leveldown@5.6.0 install /path/to/todo-data-storage/node_modu…

データストレージ

この章からはデータストレージを用いてデータの永続化する方法を学んでいく。 最初は JSON 形式のテキストファイルをデータストレージとして利用。特に難しいところはない。 id の生成に UUID を使うことも想定の範囲内。 UUID のドキュメント uuid For the …

リアルタイム Web アプリケーション

ユーザ操作に依存せず、クライアントサイドにサーバサイドの最新情報を動悸させる Web アプリケーション リアルタイム Web アプリケーション の実装方法 ポーリング 最もシンプルな方法。一定間隔で WebAPI 呼び出しを繰り返し、定期的にサーバと同期する。 …

ユニバーサル Web アプリケーション

ユニバーサル Web アプリケーション の構築へと進む。 怒涛のごとく専門用語とその定義が紹介されている。 今時の Web アプリケーション のことでしょとゆるふわな理解で先に進むぞ。 技術選定として、 UI ライブラリに React 。アプリケーションフレームワ…

POST リクエストの処理

POSTリクエストの処理を行う。 "use strict"; const express = require("express"); const app = express(); let todos = [ { id: 1, title: "ネーム", completed: true }, { id: 2, title: "下書き", completed: false }, { id: 3, title: "フルーツグラノ…

nodemon

nodemon の公式サイトは Github で OK??? nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected. まじかよ!神ツール nodemon は開発時の…