WEB開発

AWSの解約方法(停止)について

AWSの画像

先月くらいからAWSの1年の無料枠が期限切れとなり、サービスを利用しないのに課金が発生したので解約(停止)することになりました。

今回はそのAWSの解約手順について画像付きで紹介していきたいと思います。

また解約せずに料金の発生だけを防ぐリソースの削除(データ削除)の方法についても少し触れていきます。

料金を発生させたくないだけならリソースの削除だけでOK

AWSのアカウントを解約することなく、料金の発生だけを停止させるのであれば、リソースを削除することでOKです。

リソースの削除に関しては、こちらのページ(https://docs.aws.amazon.com/ja_jp/workmail/latest/adminguide/remove_resource.html)で詳しく書かれています。

AWSの解約方法(停止)の手順

AWS自体を利用する予定もない場合は、アカウントごと解約するのも手です。

まずはAWSのサイト(https://aws.amazon.com/jp/)にログインします。

AWS解約方法②

画面上部のメニューにある自分のアカウント名をクリックし、更にそこからプルダウンされた項目の中にある「マイアカウント」をクリックします。

AWS解約方法②

マイアカウント画面に移ったら画面を下にスクロールさせ、「アカウントの解約」の項目で各欄チェックを入れて、下にある「アカウントの解約」のボタンをクリックします。

AWS解約方法③

「アカウントの解約」画面がポップアップされるので、「アカウントの解約」のボタンをクリックします。

以上でAWSのアカウントが解約されます。

AWSアカウント解約時の注意点

AWSアカウントを解約したら、そのアカウントにはログインできず課金も停止されますが、サーバーはしばらく動作することがあるので、WEBサイトにはアクセス可能だったりします。

そのためセキュリティ上の問題から、解約前にEC2などを削除しておくと良いでしょう。

アカウント解約したらもう二度と再開できないのか?

アカウント解約(停止)してから90日以内であれば、AWSサポートの方に連絡をすることでアカウントを再開させることができます。

なおアカウント再開の詳しい手順については、こちらのページ(https://aws.amazon.com/jp/premiumsupport/knowledge-center/reopen-aws-account/)にて記載されています。

おわりに

無料枠の有効期限が切れる前からやらなければならないと思っていた請求引き落とし手続き。

しかし課金の発生を防ぐ方法について調べてみてもイマイチ良く分からず、結局手つかずのまま先延ばしにしていました。

そのうち「そもそも何もしなければ料金は発生しないのではないか?」と思い始めて放置してはや3ヶ月程度・・・

クレジットカード引き落としの請求を見てみたら、思いきりAWSによる課金が発生してしまってました(*_*;

金額にしては微々たるものですが、何もサービスを利用していないのに課金が発生するのは避けたいので、急遽AWSのアカウント解約に踏み切った次第です。

 

AWSの無料利用枠を利用している場合で、課金発生時期である1年後は使わないので料金の引き落としは避けたいというのであれば、早めにAWSアカウントの解約をしておくと良いでしょう。

解約手続きは上記手順のように簡単にできるので、忘れないうちにサクッとやっておきたいですね!

 

bootstrap4のダウンロード方法や使い方【初心者向け】

bootstrap トップ画像

CSSのフレームワークである「bootstrap」。
今回はBootstrap4のダウンロード・導入方法についてや、その使い方(グリッドシステム・ナビゲーションバー・テンプレート・テーブル・ボタン・フォーム)について初心者の方向けにご紹介していきたいと思います。

bootstrapとは?

bootstrapというのはTwitter社が開発したCSSのフレームワークです。

フレームワークでは使う機会が多いプログラムが既に書かれているので、WEBサイトなどを効率的に作ることができるようになります。

つまりbootstrapを使うことで、無駄な手間を省いて素早くWEBサイトを作ることができるようになるんですね。

bootstrapのメリット

bootstrapというのはCSSのフレームワークであり、あらかじめよく使われるようなCSSが定義されているので、少しCSSをいじることでドロップダウン付きのメニューを作れたり、レスポンシブ対応にすることが可能になります。

ドロップダウン付きのメニュー作成にしろレスポンシブ対応にしろ、通常こうしたものはCSSで記述するとなると大変ですし時間がかかります。

しかしbootstrapを使えば、簡単な記述をするだけですぐにこれらを実装できるので大変効率的です。

bootstrapのダウンロード方法

bootstrapをダウンロードするには

  • 普通にダウンロードする
  • CDNを使う(お手軽)

この2つの方法があります。

bootstrapを普通にダウンロードする場合

bootstrap ダウンロード

 

まずはbootstrapのトップサイトにアクセスし、「Download」をクリックします。

bootstrap ダウンロード②

ダウンロードページへ移るので、その中の「Compiled CSS and JS」の項目の、「Download」をクリックするとダウンロードされます。

bootstrap ダウンロード 開く

ダウンロード終了後ファイルを開くと、「css」「js」の2つのフォルダがあります。

bootstrapフォルダの中にhtmlファイルを入れる

次にHTMLファイルを用意して、bootstrapのフォルダの中に入れます。
(HTMLのファイル名はとりあえずbootstrapの練習ということで「bootstrap_practice」としています。)

HTMLファイルの中身は、とりあえず下記の内容をコピペして作成すると良いでしょう。

HTMLのheadタグ内には、「bootstrap.min.css」ファイルと、「bootstrap.min.js」を読み込ませる必要がありますが、それ以外にもjQueryを読み込ませるための記述も必要になります。

このときjQueryを読み込ませるための記述は、bootstrapのjsを読み込ませる記述よりも先に書いておかなければ、bootstrapのJavaScriptが動作しないので、jQueryの読み込みの記述は先に書いておく必要があります。

ちなみにHTMLの中身はBootstrapのページにある「Starter template」からコピペするのも手です。

bootstrapをCDNを使って導入する方法

CDNを使って導入する場合は、ダウンロードする場合と違って、わざわざダウンロードしたファイルを用意しなくても、HTML上にbootstrapを読み込ませるための記述を直接書くことで使えるのでお手軽です。

CDNとはコンテンツ・デリバリー・ネットワーク「Content Delivery Network」の略で、同一のコンテンツを、 多くの配布先、例えば多くのユーザーの端末に効率的に配布するために使われる仕組みです。

しかもCDNの場合は、WEBサイトの高速化も期待されるうえに、これといったデメリットもありません。

ブートストラップCDN

ブートストラップCDNは、bootstrap4トップページのページ下部にあるので、それをコピーしてCSSならHTMLファイルの中のheadタグ内、JS・Popper.js・iQueryはbodyタグ内にそれぞれ貼り付けします。

ファイルは必要ないので、下記のHTMLを用意するだけでOKです。

 

bootstrapの使い方【初心者向け】

ここからは初心者の方向けに簡単なbootstrapの使い方についてご紹介していきたいと思います。

ここでは基本的な使い方として主に下記のことについてご紹介していきたいと思います。

  • グリッドシステム
  • テンプレート
  • メニュー
  • テーブル
  • ボタン
  • フォーム

bootstrapのグリッドシステムの使い方

グリッドシステムというのは、レスポンシブWEBデザインに対応させるための仕組みです。
このグリッドシステムを上手く活用することで、複雑なレイアウトでも簡単にパソコンなら3カラム、スマホなら1カラムといった具合にレスポンシブさせることができます。

グリッドシステムを実際に使うには、下記の3つのクラスを用います。

  • .containerまたは.container-fluid
  • .row
  • .col

イメージ的にはこんな感じです。

bootstrap グリッドシステム

出典:WEBSAE

.colでは「.col-{prefix(画面幅)}-{columns(グリッド数)}」の形式で書きます。
prefix(画面幅)は下記の通りです。

prefix(画面幅) Extra small(auto) Small(576px) Medium(720px) Large(940px) Extra large(1140px)
クラスの表記 xs sm md lg xl

columns(グリッド数)に関しては、合計が12になるように指定します。

サンプルコードは下記のようになります。用意しておいたhtmlファイルの<body>タグの中に書き足します。

ブラウザ上でhtmlファイルを確認してみると、576px以上では横並びに表示されますが、576px以下だと縦並びに表示されており、レスポンシブ化されているのが分かります。

bootstrap グリッドシステム 576px以上

画面幅576px以上

bootstrap グリッドシステム 576px以下

画面幅576px以下

上の例では.colの{columns(グリッド数)}の部分を6:6(合計12)にしていますが、2カラムのサイトを作る場合は、下記のような感じにすると良いでしょう。

bootstrap グリッドシステム コード記入後 2カラムサイト
.colの{columns(グリッド数)}の部分を4:8(合計12)にすることで、左側がカテゴリーなどを記載したサイドメニュー、右側がメインの記事というような2カラムサイトを作ることができます。

もちろん画面幅が576px以下になれば下記のように縦並びとなり、スマホなどの端末でも見やすくなります。

bootstrap グリッドシステム 576px以下

 

グリッドシステムの使い方は以上になります。
これを使えばWEBサイトを簡単にレスポンシブ対応にすることができるので大変便利ですね。

 

bootstrapのテンプレートの使い方

bootstrapのテンプレートは無料のものも沢山存在します。
bootsrapの無料のテンプレートがダウンロードできるサイトとしては色々ありますが、代表的なところの一つとしてStart Bootstrapというサイトがあります。

startbootstrap Freelancer 選択

今回はこのサイトの中にある「Freelancer」というテンプレートをダウンロードしていきたいと思います。

startbootstrap Freelancer ダウンロード

テンプレートを選択したあとに、「Free Download」ボタンを押してダウンロードを行います。

startbootstrap Freelancer ダウンロード 解凍

zipファイルでダウンロードされるので、右クリックして「すべて展開」をクリックして解凍します。

startbootstrap Freelancer ダウンロード 解凍 ファイル一覧

すると様々なファイルがあるのが確認できます。

startbootstrap Freelancer 確認

上記ファイルの中にある「index.html」をダブルクリックで開いてブラウザで確認すると、このように初心者が一から作るとなると難しそうな洗練されたデザインのサイトを、ダウンロードするだけでいとも簡単に作成できました。

あとはこの「index.html」ファイルの中身をいじったりすることで、おしゃれなポートフォリオサイトが作れそうですね。

ちなみにデザインをカスタマイズしたい場合には、CSSフォルダの中にある「freelancer.css」をいじったり、画像を変更・追加したい場合は、imgフォルダにある画像を変更・追加すると良いでしょう。

bootstrapのNavbar(メニュー・ナビゲーションバー)の使い方

サイトのメニュー欄(ナビゲーションメニュー)に関しては、レスポンシブ対応したりドロップダウンメニューを作るとなるとかなり面倒ですが、bootstrapを使えばこれらなどが簡単に実装できてしまうので非常に便利です。

シンプルなナビゲーションメニューの作り方

bootstrapでのシンプルで簡単なナビゲーションメニューの作り方は、基本的に下記のクラスを使います。

  • navbar(nav要素)
  • navbar-expand-{sm/md/lg/xl}(nav要素)
  • navbar-{色名}(nav要素)
  • bg-{色名}(nav要素)
  • navbar-nav(ul要素)
  • nav-item(li要素)
  • nav-link(a要素)

サンプルコードは以下の通りです。


navbar-{色名}で文字色、bg-{色名}で背景色を指定できます。
色名に関しては「dark」の他、bootstrapだと下記のような色も使うことができます。

コード
ブラック dark
ブルー primary
グレー secondary
グリーン success
レッド danger
イエロー warning
スカイブルー info
ホワイト light

 

※.never-darkの場合は文字色が白色になります。bootstrap メニューバー 背景色変更

bg-darkをbg-primaryに変えることで、ナビゲーションメニューの背景が青系の色になりました。

navbarにドロップダウンリストを表示させる方法

ドロップダウンを表示させるためには、下記のクラスを使います。

  • dropdown(li要素)
  • dropdown-toggle(a要素)
  • dropdown-menu(div要素)(divタグはドロップダウン表示させたいliの中のaタグのあとに追加)
  • dropdown-item(上記div要素の中のa要素)

更にaタグ内に「data-toggle=”dropdown”」「aria-haspopup=”true”」「aria-expanded=”false”」を書き出すとOKです。

サンプルコードは以下の通りです。

bootstrap メニューバー ドロップダウン

ナビゲーションメニューを上部に固定させる方法

navタグに「sticky-top」というクラスを追加すれば、ナビゲーションメニューを上部に固定させることができます。

その他ナビゲーションバーのカスタマイズ方法は、Bootstrapの公式サイトで確認することができます。

ブランド名やブランドロゴを入れる

ナビゲーションバーの初めにブランド名やブロンドロゴを入れる場合は、例えばaタグに「navbar-brand」というクラスを追加すると良いです。

bootstrapのナビゲーションバーでブランド名挿入
ハンバーガーメニューを表示させる方法

画面を狭めるとハンバーガーメニューを表示させるようにするには、aタグの下に指定のボタンタグを入れて置き、ulタグを囲ったdivタグを作って、ハンバーガーアイコンと各グローバルメニューを紐づけさせるためのクラスをしてします。
コードは下記の通りです。

なおボタンタグのコードに関しては、bootstrap公式サイトの上部にあるメニューの中の「ドキュメンテーション」から「コンポーネント」>「Navbar」のページへ行き、そのページの下の方にある「トグラー」の項目にて、確認することができます。

bootstrapのナビゲーションバーのトグルコード

上記ボタンタグで囲われた赤枠部分のコードが、ハンバーガーアイコンを表示させるためのコードになります。

またハンバーガーアイコンと各メニューとを紐づけさせるために、ulタグを囲ったdivタグを作って、divタグで指定したidをボタンタグの「data-target」「aria-controls」と一致させる必要があります。

結果は下記の通りです。
bootstrapのナビゲーションバーでハンバーガーアイコン表示

こんな感じで画面幅をある程度狭めると、ハンバーガーメニューが表示されます。

bootstrapのナビゲーションバーでハンバーガーアイコンクリック

そしてハンバーガーアイコンをクリックすることで、グローバルメニューが表示されるようになります。
スマホなどの小さな画面で見るときは、非常に見やすくなりますね。

モバイルフレンドリーを意識するのであれば、ぜひ実装させておくと良いでしょう。

メニューを右寄せに表示させる

これはメニューのulタグに、「ml-auto」というクラスを追加させるだけでできます。
ちなみにml-autoというのは、「margin-left: auto」のことで、bootstrapならばml-autoと書けばそうした指定をすることができます。

ちなみにmr-autoと書けば「margin-right: auto」となります。

ソースコード

結果

bootstrapのナビゲーションバーのメニューを右に寄せる

 

bootstrapのテーブルの使い方

bootstrapの基本的なテーブルの使い方は、基本的には下記の2つのクラスを使います。

  • .container
  • .table-~

最も基本的なテーブルの記述方法は下記のようになります。

bootstrapte テーブルの使い方 基本

テーブルに枠線をつける

テーブルに枠線を付けたい場合は、table要素のclassに「table-bordered」のクラスを追加するだけでOKです。

bootstrapte テーブルの使い方 枠線を入れる

テーブルの偶数行の背景色を灰色(ストライプ)にする

テーブルを見やすくするためによく使われるこのCSS装飾ですが、bootstrapを用いると「table-striped」のクラスを追加するだけで実装できます。

サンプルコードは下記の通りです。

bootstrapte テーブルの使い方 偶数行だけ背景色を灰色にする

テーブルをレスポンシブ対応させる

テーブルをレスポンシブ対応させる場合は、<div class=”container”>と<table>タグの間に<div class=”table-responsive”>を書き足すことで可能になります。

こうすればテーブル内にスクロールバーが付くので、スマホなどで画面の幅が小さい場合でもはみ出すことなくテーブル内すべてを確認することができます。

サンプルコードは下記の通りです。

bootstrapte テーブルの使い方 レスポンシブ対応

こんな感じで画面が狭まった時にスクロールバーが出てくるので、画面をはみ出すことなくテーブル内のすべてを見ることができます。

その他テーブルのカスタマイズ方法は、Bootstrapの公式サイトで確認することができます。

 

bootstrapのボタンの使い方

buttonタグ、aタグに「btn btn-{プロパティ名}」のクラスを付けるだけで、背景色がついたボタンを作成することができます。

プロパティ名 表示
背景色 文字色
default 黒文字
primary 白文字
success 白文字
info 白文字
warning 白文字
danger 白文字

 

サンプルコードは以下の通りです。

 

bootstrap ボタン 背景色変更

アウトラインボタンの作り方

背景色のあるボタンではなく、アウトラインボタンを作成する場合は、buttonタグ、aタグに「btn btn-outline-{プロパティ名}」クラスを付けるだけでOKです。

サンプルコードは以下の通りです。

bootstrap アウトラインボタン

ボタンのサイズ変更方法

ボタンのサイズを変更する場合は、buttonタグ、aタグに「btn-lg」クラスを追加すると大きくすることができ、「 btn-sm」を追加することで小さくすることができます。

サンプルコードは以下の通りです。

bootstrap ボタンサイズ変更

画面いっぱいにまたがるボタンの作り方

画面の横幅いっぱいにまたがるようなブロックレベルのボタンを作るには、buttonタグに「btn-block」クラスを追加するだけで作れます。

bootstrap ブロックレベルのボタン

その他ボタンのカスタマイズ方法に関しては、Bootstrapの公式サイトで確認すると良いでしょう。

bootstrapのフォームの使い方

formタグの中に「form-group」クラスを付けたdivタグを用意し、更にその中に「form-control」クラスを付けたinputタグを書きます。

サンプルコードは以下の通りです。

bootstrap フォームの作り方もちろんレスポンシブ対応されています。素晴らしいですね。

以上は基本のフォームの作り方ですが、その他カスタマイズ方法に関しては、Bootstrapの公式サイトで確認すると良いでしょう。

まとめ

このようにBootstrapを使えば、レスポンシブ対応など複雑なコードの記述も必要なく、難しいプログラムでも簡単に実装できます。

WEBサイトの作成を効率化させたい場合は、是非Bootstrapを導入してみると良いでしょう。

Bootstrap4移行ガイド

 

FTPソフト「FFFTP」のインストール方法と使い方

FFFTP イメージ画像

ワードプレスサイトなどWEBサイトを公開する時に必要となる「FTPソフト」。
今回はそんなFTPソフトの中でもWindowsで無料で使える「FFFTP」のインストール方法と簡単な使い方についてご紹介していきます。

※MacではFFFTPは使えません。

FFFTPのインストール方法

FFFTP ダウンロード①

まずはFFFTPのダウンロードページから最新版のものをダウンロードし、手順に沿ってFFFTPのインストールを行います。

FFFTP ダウンロード②

デスクトップやファイルを保存した場所から「FFFTP.exe」を開きます。
パソコン画面左下にあるウインドウズアイコンからアルファベットのFのところからでも開けます。

FFFTP セットアップ

FFFTP.exeを開いたらまずは「新規ホスト」をクリックします。

FFFTP セットアップ①

ホスト設定の画面では下記の4つの項目を記入します。

  • ホスト設定名
  • ホスト名(アドレス)
  • ユーザー名
  • パスワード/パスフレーズ

これらは契約しているサーバーの公式サイト上で確認することができます。

下記は主要なレンタルサーバーにおけるFFFTPの設定方法です。

エックスサーバー(XSERVER)
  • ホスト設定名⇒適当な名前でOK
  • ホスト名(アドレス)⇒FTPサーバー(ホスト)名
  • ユーザー名⇒ユーザー名(アカウント名)
  • パスワード/パスフレーズ⇒サーバーパネルのパスワード
「サーバーパネル」内「FTPアカウント設定」の「FTPソフト設定」で確認可能
ロリポップ
  • ホスト設定名⇒適当な名前でOK
  • ホスト名(アドレス)⇒FTPSサーバー
  • ユーザー名⇒FTP・WebDAVアカウント
  • パスワード/パスフレーズ⇒FTP・WebDAVパスワード
ユーザー専用ページの「アカウント情報/パスワード変更」で確認可能
スターサーバー
  • ホスト設定名⇒適当な名前でOK
  • ホスト名(アドレス)⇒ホスト名
  • ユーザー名⇒ドメイン名
  • パスワード/パスフレーズ⇒完了画面に記載のパスワード
ホスト名は「サーバー管理ツール」の「サーバー情報」から、ユーザー名とパスワードはドメイン追加完了画面から確認可能

これらの設定が完了したら下にある「OK」をクリックします。

FFFTP セットアップ③

設定した項目を選択して下にある「接続」をクリックします。

あとは「この証明書を信頼し、通信を続行するには「はい」を選択してください」と表示される画面で「はい」をクリック。

そして「暗号化の状態の保存」の画面で「はい」をクリックします。

以上でFFFTPの導入は完了です。

無料FTPソフト「FFFTP」の簡単な使い方

FFFTP セットアップ 編集②

まず画面の基本の見方としては、左側にあるファイル・フォルダ群がローカル側(自分のパソコン側)のデータ、右側がサーバー側のデータになります。

ローカル側(パソコン側)からサーバー側へのファイルのアップロード方法

FFFTP アップロード

またはFFFTP アップロード②

ローカル側からサーバー側へのファイルのアップロード方法としては

  • ローカル側のファイルやフォルダを選択後ドラッグ→サーバー側にドロップ
  • 画面上部にある上矢印アイコンをクリックする
  • アップロードするファイルを右クリック>「アップロード」を選択

といった方法でそれぞれサーバー側へファイルをアップロードすることができます。

ドロップ&ドロップに関しては、ウインドウ外からでもアップロードすることができます。

 

まとめ

FFFTPなどFTPソフトは、ワードプレスなどでサイトのデザインをカスタマイズしたり、子テーマを作るときなんかにあると何かと便利なので、そうしたサイトを運営しているのであれば是非インストールしておきたいところです。

 

 

cssが反映されない原因は?サーバー側のキャッシュ?

CSSが反映されない原因と対策

サイトでCSSを変更してブラウザ上で確認したけれども、何故かそれが反映しないなんてことありませんか?

折角記述したコードが確認できなければ意味がありませんよね。

ということでここでは文法ミスやサーバー側のキャッシュによる問題など、初心者の方に良くありがちなCSSが反映されない原因をその対策についてご紹介していきたいと思います。

cssが反映されない原因は?

初心者の方にありがちなCSSが反映されない原因としては下記のようなことが考えられます。

  • 文法ミスによるもの
  • サーバー側のキャッシュによる問題
  • CSSの指定の優先順位による問題

文法ミスによるもの

CSSの記述に慣れていないような場合だと、文法ミスによることが原因であることも少なからずあったりします。

初心者の方の文法ミスとしてありがちなのは

  • セレクタやプロパティなどのスペルの間違い
  • セミコロン「;」の書き間違え
  • 波括弧の閉じ忘れ
  • セレクタの書き間違え

以上のようなものがあります。

ちなみにセレクタの書き間違えというのは、通常idで指定しているのであれば「#」、classで指定しているのであれば「.」としなければならないところを、間違ってidで指定しているのに「.」を使っていたり、逆にclassで指定しているのに「#」を使っていたりするとった間違いです。

これらは初心者の場合に良くありがちなので、CSSが反映されないときにはまず、こう言った文法ミスがあるかどうかチェックしてみると良いでしょう。

文法ミスをチェックする方法

文法ミスをチェックするには、チェックツールを利用すると良いでしょう。

dirty-markup
CSSのチェックツールはいくつかありますが、「Dirty Markup」というツールならばデザイン的に使いやすい上に、HTMLとJavascriptのコードのエラーチェックもできるのでおすすめです!

Dirty Markupサイト(https://www.10bestdesign.com/dirtymarkup/)

サーバー側のキャッシュによる問題

WEBサーバー側のキャッシュ(依然開いたウェブページを素早く開くために、その時のページのデータをブラウザに保存するというようなもの)により、古いキャッシュがそのまま残ってしまっている場合は、例えCSSを変更したとしてもそれが反映されなかったりします。

キャッシュが原因であれば、このキャッシュを削除することによってCSSが反映されるようになります。

キャッシュを削除する方法は、大体ブラウザの右上にあるアイコンから履歴を選択し、そこで履歴の削除・クリアなどを行えばキャッシュを削除することができます。

CSSの指定の優先順位による問題

CSSは下記のコードが優先的に適用されるというルールがあります。

  • セレクタを詳しく指定した方
  • CSSファイルの後の方の行に書いた方

つまりCSSが反映されない場合は、他に詳しく指定したセレクタがある場合や、反映されないCSSコードの後の行に同じ要素が指定されていることが原因だと考えられます。

なので対処方法としては、反映させたい部分のセレクタをより詳しく指定したり、なるべくCSSファイルの後の方の行にコードを記述するようにすると良いでしょう。

反映させたい部分のセレクタを詳しく指定
例:「h2」→「.main h2」→「.container.main h2」など

その他問題がなければ、優先してスタイル適用されている方のコードを削除するのも手です。

CSSが反映されない場合の対策奥義「!important」

どうしてもCSSが反映されない場合は、奥の手としてセミコロンの前に「!important」を書き足すと良いです。

こうするとその部分が優先的に適用されるので、CSSが反映されない場合の対策として手っ取り早いです。

ただし「!important」を付けてしまうと、それが優先されることから他の部分のCSSをいじるときにこれが原因でスタイルが反映されなくなったりするので、あくまでも!importantは奥の手になります。

まとめ

ということで今回はCSSが反映されない場合の簡単な対策についてご紹介していきました。
「CSSを変更したけれども何故だか変わらない!」という方は、上記の対策について一度試してみてはいかがでしょうか?

AWS登録からcloud9導入までの流れ 使い方 【初心者向け】

サイト作成の一環でCloud9を使うことになったのですが、なぜかCloud9での新規登録ができませんでした。

この理由はCloud9はつい最近AWSによって買収されていたためであるらしく、AWSで新規登録をしていなければCloud9が利用できないのだそうです。

というわけでAWS登録からCloud9の環境構築までを行おうとしたのですが、これが割と時間がかかったので、その手順について初心者の方でもなるべく分かりやすいように記載してみることにしました。

AWSのアカウント作成方法

Cloud9を使えるようにするためにも、まずはAWSのアカウント作成を行っておきます。(AWSサイトトップ:https://aws.amazon.com/jp/)

このアカウント作成自体はさほど難しくはありませんが、つまずきそうな・実際に自分が躓いた点は以下のとおりです。

  • 連絡先情報入力での「アカウントの種類」では「パーソナルを選択」
  • AWSサポートプランでは「無料」プランを選択
  • AWSへの初回コンソールログイン時に入力するのは、アカウント名ではなくメールアドレスを入力する

IAMユーザーの設定

続いてIAMを設定していきます。
このユーザー設定を行うことで権限が制限されるので安全に利用することができます。
逆にこのユーザ設定をしておらず初期のアカウントのままで利用すると危険なので、AWSを登録した後はすぐにIAMユーザーの設定をしておくと良いでしょう。

AWSでIAMを設定 ①

まずトップ画面にある検索窓から「IAM」と入力します。

AWS Cloud9 IAM設定 ②
更に「ユーザー」をクリックします。

AWSでのIAM設定 ③

「ユーザーを追加」をクリック。

AWSでのIAM設定 ④

 

「ユーザー名」のところで任意のユーザ名を入力し、あとは上記画像のようにチェックを入れて画面下の「次のステップ:アクセス権限」をクリックします。

AWS Cloud9 IAM設定 ⑤

 

「ユーザーをグループに追加」を選択した後、「グループの作成」をクリックします。

AWSでのIAM設定 ⑥

「グループ名」に任意のグループ名を記入し、ポリシー名のところには「AdministratorAccess」の部分にチェックを入れて、下の「グループの作成」をクリックするとグループが作成されます。

その後下にある「次のステップ:確認」をクリックします。

AWSでのIAM設定 ⑦

確認後下にある「ユーザーの作成」をクリックします。

 

AWS Cloud9 IAM設定

.csvのダウンロードクリック後、ダウンロードしたファイルをエクセルなどの表計算ソフトやAtomなどのテキストエディターで開きます。

するとそこにユーザー名やパスワードが記載されています。

パスワードはユーザー名後のカンマの後から3つのカンマの前までの部分になります。

その後上記のリンク先をクリックしてサインインします。

AWSでの IAM設定 ⑧

古いパスワードに先程ダウンロードしてから、エクセルやテキストエディターなどで開いたところに書いてあるパスワード(ユーザー名後のカンマの後から3つのカンマの前までの部分)を入力します。

新しいパスワードにはこれから使用していきたい任意のパスワードを入力します。

各種パスワード入力後、下にある「パスワード変更の確認」をクリックしたら、IAMの設定は完了です。

Cloud9のセットアップ

続いてCloud9のセットアップを行っていきます。

Cloud9のセットアップ方法①

まずトップ画面上部にある検索窓に「Cloud9」と打ち込んで検索します。

Cloud9のセットアップ方法②

「Create environment」をクリックします。

Cloud9のセットアップ方法 ③

「Name」の部分にワークスペースの名前を入力します。名前は開発したいものや用途に合わせて分かりやすいように名付けると良いでしょう。

下の箇所はその説明文の入力欄ですが、これは入力しなくても構いません。

名前の入力を終えれば、下にある「Next step」をクリックします。

Cloud9のセットアップ方法 ④

「Configure settings」では初心者の方だと上記のようにデフォルトの設定で良いです。

画面下にある「Next step」をクリックします。

Cloud9のセットアップ方法 ⑤

画面下にある「Create environment」をクリック後2~3分経ったら、ワークスペースが完了となりCloud9のセットアップは完了です。

お疲れ様でした!