プログラミング学習ログ

WEBアプリケーション個人開発を目指す32歳公務員

近況報告(まちの情報冊子のWEB版作ります!)

お久しぶりです。シンヤです。 最近、学習の進捗報告が滞っているな、、、 そんな風に思っておられた方。(もし、いらっしゃったら)ありがとうございます。 最近、新しい動きが個人的にございましたので、本日は近況報告です。 結論から申し上げると、「ま…

#25 ここまでの復習(WEB版タスク管理ツールの作成)

前回、ターミナル上で動作するタスク管理ツールを作成しました。 shinya-tech.com 今回はこれまで(#12〜#24)の復習を兼ねて、WEB版のタスク管理ツールの作成を行いました。 実装した内容はタスクの登録とタスク一覧の表示のみ。 削除及び修正は実装してい…

#24 Web版読書ログサービスの作成 ~ 読書ログの一覧表示(デザイン化)~

前回作成した読書ログ一覧ページにBootstrapでデザインをあてました。 ↓デザインをあてた後のページ 参照したサイト一覧 Cards 文字の装飾 関連の過去記事 書いたコード 参照したサイト一覧 Cards getbootstrap.jp 文字の装飾 v4.bootstrap-guide.com 関連の…

#23 Web版読書ログサービスの作成 ~ 読書ログの一覧表示(XSS対策含む) ~

前回、登録ページと一覧ページのHTMLに共通する箇所を共通化させました。 その際、HTMLをベタ打ちで書いていた箇所をPHPでデータベースからデータを取得し、一覧表示できるようにしました。 テーブルにデータがない状態を再現する方法とXSS(クロスサイトス…

独学エンジニアで1カ月学習してみた感想

R4.2.6から山浦清透さんが運営されている学習サービス「独学エンジニア」にて、学習を始めて1カ月が経過しました。 結論から申し上げますと、 こんな良質で、良心的な価格のサービスを利用させていただいていることに感謝しております。 まだコンテンツが全…

#22 Web版読書ログサービスの作成 ~ HTMLのレイアウト部分を共通化させる ~

前回までで、読書ログの登録ページを作成しました。 次に、読書ログの一覧ページを作成するにあたり、HTMLのhead部分が共通するため、レイアウトの共通化を行いました。 なぜ どのように 書いたコード views/layout.php views/index.php index.php なぜ DRY…

#21 Web版読書ログサービスの作成 ~ Bootstrapを使ってデザイン ~

前回#21にて、Bootstrapくささを取る下処理を行ったので、今回はBootstrapで定義されているクラスをHTMLにあててデザインを行いました。 shinya-tech.com 参照した公式ドキュメントのページ一覧 margin, padding navbar shadow h1, h2 ... text-reset contai…

#21 Sassを用いてBootstrapをカスタマイズ ~ Bootstrapのくさみを下ごしらえする ~

Bootstrapをデフォルト設定のまま使用すると、いかにも"Bootstrapを使って作成した"感が出てしまうので、今回はBootstrapをカスタマイズする方法を学びました。 gyazo.com カスタマイズの流れ 1. Sassのコンパイラをインストールする ライブラリを選ぶポイン…

#20 Sassの概要を把握した

Bootstrapをカスタマイズしていくにあたり、Sassを用いると簡単にできるため、今回はSassの概要を把握しました。 Sassとは 背景 メリット Sassの基本的な使い方 Sassの特徴 ①ネスト CSSの書き方 Sassの書き方 ②変数 CSSの書き方 Sassの書き方 ③親セレクタの…

#19 Bootstrapの概要、インストール方法、必読ドキュメント

CSSでスタイルを整えるにあたり、Bootstrapを活用していこうと思います。 Bootstrapとは Bootstrapを使っても独自性のあるオシャレなサイトは作れる。 Bootstrapのインストール bootstrap.cssとbootstrap.min.cssの違いについて HTMLのヘッダーにリンクを書…