Bootstrap4 学習開始メモ

BootstrapBootstrap4,Brackets,MAMP,環境構築

AWSでのWordPressの構築・運用が一通りわかったところで、次はWebアプリの開発を勉強すべくBootstrap4を勉強し始めました。

何年か前にちらっと勉強しようとしてそれきりだったんですけども、公式のドキュメントを読んでサンプルコードをいじってみるだけで勉強になります。

ひとまずBootstrapを勉強するにあたってのメモです。

開発環境の構築

Webサーバーをローカルに簡単に立てたいので、開発環境としては『MAMP』をインストールすることにしました。なんとこれだけでMySQLとPHPの開発環境が整うというすぐれもの。

エディタはこれまで秀丸が好きで使ってきたんですけど、Macにはないので、評判の良かった『Brackets』を選択。

MAMPのインストール

  1. 公式サイト からOSにあうインストーラーを選択
  2. ダウンロードされたインストーラーを実行
  3. すべてデフォルトでインストール
  4. アプリケーションの中から「MAMP」を選択
    • /アプリケーション/MAMP/MAPM
    • MAMP PRO も同時にインストールされるが使用しない(有料なので)
  5. 「Start Servers」のアイコンをクリック
  6. しばらく待つとWebサーバーとDBサーバーが起動する
    • Apache
    • MySQL
お手軽すぎるMAMPの開発環境構築
お手軽すぎるMAMPの開発環境構築
localhostでサーバーが簡単に建てられる
localhostでサーバーが簡単に建てられる
  • HTMLの配置場所
    • /アプリケーション/MAMP/htdocs

Bracketsのインストール

  1. 公式サイト からインストーラーをダウンロードする
  2. 解凍されたアプリをアプリケーションフォルダに入れる
Brackets。コード補完がとても便利
  • 環境設定はJSONファイルに定義することで行う
    • Cmd + , で環境設定ファイルが開く
    • brackets.json ……カスタム定義を記載するJSON
    • defaulPreferences.json……デフォルト値が記載されているJSON
      • 必要に応じてbrackets.jsonにコピって定義値を変更する
  • コード補完、ファイル名補完がものすごく便利
  • 動作も軽い
  • まだ使いこなせていないが多機能

Bootstrap4

公式マニュアルへのリンク

よく参照する機能のマニュアルへのリンクをとりあえず。

自分でスタイルシートをあれこれ弄り回さなくても、レスポンシブ対応のCSSがクラス指定でできるというのはめちゃくちゃ便利ですね。

BootstrapBootstrap4,Brackets,MAMP,環境構築

Posted by ケイ