投稿日：2020-05-24T22:18:41+09:00

HTMLの細かいスキル

<strong>太文字にする</strong>
<blockquote cite="出典URL"><p>引用する</P></blockquote>

order list 順番が記載される。
<ol>
<li>①</li>
<li>②</li>
<li>③</li>
</ol>

リスト
<dl>全体
<dt>項目A</dt>
<dd>回答A</dd>
<dt>項目B</dt>
<dd>回答B</dd>
<dl>

表を作る
<thead>table hed
<tr>table row（行）
<th>年</th> table hed cell
<th>出来事</th> table hed cell
</tr> 
</thead> 
<tbody>
<tr> table row（行）
<td>1995年</td> table data set
<td>会社設立</td>
</tr>
<tr> table row（行）
<td>2255年</td> table data set
<td>未来へ</td>
</tr>
</tbody> table body

違うタブでサイトを開く
<p>プログラミング学習サービスの「<a href="https://dotinstall.com" target="_blank">ドットインストール</a>」です！</p>

日付や時刻
<time>2020-05-14</time>

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-24T22:13:15+09:00

ヘッダーの固定方法

potision: fixed; を使用　

ヘッダーの親要素にpotision: fixed;を用いてヘッダーを固定。

注意▼

potision: fixed;は宙に浮くイメージ、なのでヘッダー以下の要素が上にあがることがあります。

対処法▼

padding-topやmargin-topでヘッダー分の余白を設定してあげればOK！

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-24T22:13:15+09:00

cssでヘッダーを固定する方法

potision: fixed; を使用　

固定したい要素にpotision: fixed;を用いてヘッダーを固定。

注意▼

potision: fixed;は宙に浮くイメージ、なのでヘッダー以下の要素が上にあがることがあります。

対処法▼

崩れた要素にpadding-topやmargin-topでヘッダー分の余白を設定してあげればOK！

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-24T21:53:09+09:00

HTML構造

HTMLでは、構造化するために、おおよそ以下のような
ものを使って枠組みを作る。

header/nav/aside/footer/main/article/section

特に、ややこしくするのがmain/article/sectionである。

ややこしくしているものを一つ、一つ取り上げていくと
まずmainは、

①ページ内のメインコンテンツに使用する
②1ページに1つのみ
③header/nav/aside/footer/article/sectionの中にでは使わない

article要素の定義

①単独で成り立つもの
②ページ内でmainコンテンツの中で使用
③トップページの新着情報などに使う
④フォーラムの投稿、雑誌や新聞の記事、ブログの記事などで使う

section要素の定義
①ページ内の文章の区切りなどに使用
②レイアウトの目的使用しない。使用する場合は、
を使う
③見出し（Hタグ）が無いを箇所はを使用しない
sectionやairticleタグは、h1を使うことができる。（通常h1はページ内に１つ）

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-24T21:36:31+09:00

Java Scriptの基礎

JavaScriptとは

JavaScriptとは、プログラミング言語の一つで、1990年代中盤に登場しました。
サイトのプルダウンや画面を更新しないでサーバーと通信したい時に使われます。
略称は、JSです。

HTMLへの導入方法

htmlファイルと同じ階層にJSファイルがある場合htmlファイルに以下のように記述するとJSファイルが読み込まれます。
index.html
<head>
  <script src="script.js"></script>
</head>
headタグ内にある、scriptタグのsrc属性にファイル名を記述します。JSの拡張子は.jsです。

window.alert()

ブラウザにアラートを表示させるメソッドです。
表示させたい値を引数にとります。また、変数でも可能です。

console.log()

ブラウザのコンソールにテキストを表示させるメソッドです。
表示させたい値を引数にとります。また、変数でも可能です。

変数での記述方法は以下になります。
script.js
var team = "鹿島アントラーズ";
console.log( team + "の勝利です。");
コンソールが面に鹿島アントラーズの勝利です。が表示されます。

変数宣言について

varはES6バージョンの書き方です。
それ以降の変数宣言の仕方としては。
・let
・const
の二つが用いられます。

letは、後で書き換えられ変数宣言です。
constは、後で書き換えられない変数宣言です。

条件分岐
script.js
let number = 100;
if (number % 15 == 0) {
console.log(number + "は、３と５の倍数です。");
} else if (number % 3 == 0) {
console.log(number + "は、３の倍数です。");
} else if (number % 5 == 0) {
console.log(number + "は、５の倍数です。");
} else {
console.log(number + "は、３の倍数でも、５の倍数でもありません");
}
上記のように記述するとコンソールに、100は、５の倍数です。　と表示されます。
ifの後のカッコ内に条件式を記述します。その条件に当てはまった場合は、波カッコ無いの記述が処理されます。
最初の条件式が偽だった場合は、else if以降に処理が移ります。その条件が真だったら波カッコ内の処理を開始、偽だった場合はさらに次に進みます。elseはどの条件にも当てはまらなかった場合に出力したい処理を記述します。

配列

JSには配列という概念があります。
script.js
let name = ["takuya", "shingo", "tsuyoshi", "masahiro", "GORO"];
console.log(name);

##コンソールでの表示
(5) ["takuya", "shingo", "tsuyoshi", "masahiro", "GORO"]


---------配列の数を取得---------
lengthメソッドを使います。
------------------------------
console.log(name.length);

##コンソールでの表示
5

---------配列の最後に要素を追加---------
pushメソッドを使います。
-------------------------------------
name.push("morikun");
console.log(name);

///"morikun"が追加されます。

##コンソールでの表示
(6) ["takuya", "shingo", "tsuyoshi", "masahiro", "GORO", "morikun"]

---------配列の最後の要素を削除---------
popメソッドを使います。
-------------------------------------
name.pop();
console.log(name);

///"morikun"が削除されます。

##コンソールでの表示
(5) ["takuya", "shingo", "tsuyoshi", "masahiro", "GORO"]

---------配列の最初の要素を削除---------
shiftメソッドを使います。
-------------------------------------
name.shift();
console.log(name);

///"takuya"が削除されます。

##コンソールでの表示
(4) ["shingo", "tsuyoshi", "masahiro", "GORO"]
popメソッドとshiftメソッドに指定して複数の要素を削除することはできません。

オブジェクト

波カッコを使ってオブジェクトを生成します。
{}内に名前と値をセットにして管理します。このセットのことをプロパティと言います。
最初からオブジェクトにプロパティを定義して生成することもできますし、空の波カッコで生成することもできます。
script.js
let takuya = { name: "kimura", age: 40, team: "SMAP" };
console.log(takuya);

###コンソールでの表示
{name: "kimura", age: 40, team: "SMAP"}

///名前がteamにあたる値を取得
console.log(takuya.team);

###コンソールでの表示
SMAP

///名前がageにあたる値を更新
takuya.age = 47;
console.log(takuya.age);

###コンソールでの表示
47
for文

繰り返しの構文です。

for(let i = 0; i < 繰り返す回数; i += 1) {繰り返す処理}と記述します。
script.js
num = 1;
for (let i = 0; i < 10; i += 1) {
console.log(num + "回目の出力になります！");
num += 1;
}

###コンソールでの表示
1回目の出力です。
2回目の出力です。
3回目の出力です。
4回目の出力です。
5回目の出力です。
6回目の出力です。
7回目の出力です。
8回目の出力です。
9回目の出力です。
10回目の出力です。

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-24T20:40:35+09:00

HTML/CSSの自分流基礎

HTMLの基礎

HTMLには、ブロック要素とインライン要素がある。
ブロック要素の中にインライン要素を書くことはできるけど、その逆はできない

ブロック要素同士を連続で書くと縦に並ぶことになります。一方、インライン要素のタグを連続で書くと横に並びます。

属性について

id属性：様々なHTMLタグで使われる。要素に好きな「固有名」を付ける
class属性：様々なHTMLタグで使われる。要素に好きな「分類名」を付ける
src属性：imgタグ（画像を表示するタグ）で使われる。画像ファイルの置き場所を示す
href属性：aタグ（ハイパーリンク）で使われる。リンク先を示す

要素について

コンテンツエリア…内容が表示される部分
padding…要素の中に割り当てられている余白
border…要素の境界
margin…隣接する要素との余白

box-sizing

border-boxは指定したwidth,heightはborder,padding,コンテンツエリアの合計になる。

line-height

高さというよりは、行間を開けるイメージ

vertical-align

text-alignが水平方向で、vertical-alignは垂直方向

letter-spacing

文字の間隔の調整

float

floatを使うと横並びにできる、clear:bothとすればfloatをクリアできる。

flex

flexはfloatより自由に要素の位置を指定できる。
まず、要素の親にdisplay:flexと指定。

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-24T17:56:32+09:00

まあまあ使うtextareaテクニック

概要

個人的なtextareaタグの備忘録を、Qiita記事にまとめてみました。
外部プラグインを使わずカスタマイズする時のちょっとしたテクニック集です。

言語

html5

css3

javascript ( 最後にちょっとだけ使います )

テクニック

textareaタグ

textareaのタグです。これタグをベースに説明していきます。
htmlにタグを記述するとテキストエリアを表示できます。
html
<textarea></textarea>
以下のようにテキストエリアが表示されます。

入力禁止にする(readonlyを指定)

textareaタグにreadonlyを指定します。
ユーザに操作させたくないときに使用します。
html
<textarea readonly></textarea>
タブ遷移でフォーカスを当てないようにする

tabindexは、タブ遷移の順番を決めるときに使用します。
-1を指定すると、tabキーでのフォーカスが当たらないようになります。
html
<textarea tabindex="-1"></textarea>
右下のリサイズのつまみを表示しない

下記画像の赤矢印部分の所です。アプリのUI/UXによっては非表示にしたくなる時もあります。

スタイルシートでresize: noneを指定すると表示を消すことができます。
css
textarea {
    resize: none;
}
html
<textarea></textarea>
以下のように表示が消えます。

placeholderを指定する

入力された情報が、なにも無いときに表示するテキストです。
html
<textarea placeholder="ここに入力してください"></textarea>
placeholderのスタイルを変更する

placeholderのスタイルもこだわりたいときに使用します。
css
textarea::placeholder {
    color: red;
    opacity: .5;
    font-family: sans-serif;
    font-weight: bold;
}
html
<textarea placeholder="ここに入力してください"></textarea>
以下のようにスタイルが適用されます。

文字数制限をする

maxlengthを指定することで入力する文字数を制御できます。
html
<textarea maxlength="80"></textarea>
入力内容のチェックをする

javascriptを使って入力情報のチェックをします。
正しいテキスト「こんにちは」が入力された場合に、枠を緑色にします。
css
textarea.success {
  border: solid 2px green;
}
html
<textarea id="hello_textarea"></textarea>
javascript
var textarea = document.getElementById("hello_textarea");
textarea.addEventListener("input", function() {
    // textareaに入力されたときの処理内容
    if (!textarea.value.match(/こんにちは/)) {
        textarea.classList.remove("success");
    } else {
        textarea.classList.add("success");        
    }
});
こちらはコードと結果画像だけでは分かりにくいので、実際に動くものを用意してみました。

See the Pen textarea data check by ishi720 (@ishi720) on CodePen.

終わり

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-24T16:44:51+09:00

hamlで、ui-viewやng-controllerなどのハイフンのついた属性はどうやって指定するのか

webサイトの検証データを見ていると、定義してる属性の中にハイフンの混ざったものがあるが、これをhamlで定義しようとすると、ハイフンのせいでエラーが出てしまうんですよ〜。

h1 しかし、terarailで質問して30分くらいで解決w

hamlで{ }この括弧をしようしていたんですけど、( )これで指定できました！

お騒がせしてすみません。

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-24T13:17:49+09:00

Day18~22 中間試験~基礎カリキュラム本試験

本試験で学んだことについて

本試験は5/22に突破。

学んだことは詳細は後日まとめる。

CSS上のwidth 100%と100vw、またheight 100%と100vhについて、詳しくまとめておきたい。

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-24T12:39:32+09:00

fontawesomeのプロパティ

fontawesomeを使う時にサイズは位置の調整で
よくハマることがあったので備忘録としてメモしておきます。

スタイルシートであれこれするよりも
タグの中で指定したほうが管理が楽でした・・・

フォントサイズ

タグの中で以下のサイズ指定ができます。

    <i class="fas fa-star fa-xs"></i>.75em<br>
    <i class="fas fa-star fa-sm"></i>.875em<br>
    <i class="fas fa-star fa-lg"></i>1.33em<br>
    <i class="fas fa-star fa-2x"></i>2em<br>
    <i class="fas fa-star fa-3x"></i>3em<br>
    <i class="fas fa-star fa-4x"></i>4em<br>
    <i class="fas fa-star fa-5x"></i>5em<br>
    <i class="fas fa-star fa-6x"></i>6em<br>
    <i class="fas fa-star fa-7x"></i>7em<br>
    <i class="fas fa-star fa-8x"></i>8em<br>
    <i class="fas fa-star fa-9x"></i>9em<br>
    <i class="fas fa-star fa-10x"></i>10em<br>
    <i class="fas fa-star fa-11x"></i>11em<br>

アイコンの回転

これもタグの中で回転を指定できます
twitterアイコンを回転させることはないと思いますが・・・

  <i class="fab fa-twitter"></i>通常<br>
  <i class="fab fa-twitter fa-rotate-90"></i>90度回転<br>
  <i class="fab fa-twitter fa-rotate-180"></i>180度回転<br>
  <i class="fab fa-twitter fa-rotate-270"></i>270度回転<br>
  <i class="fab fa-twitter fa-flip-horizontal"></i>水平反転<br>
  <i class="fab fa-twitter fa-flip-vertical"></i>垂直反転<br>
  <i class="fab fa-twitter fa-flip-both"></i>水平垂直反転<br>

パルスとスピン

アイコンには点滅と回転のアニメーションをつけることができます。
向き不向きはありそうですね。

<div class="fa-2x">
  <i class="fas fa-spinner fa-pulse"></i>パルス<br>
  <p><i class="fa fa-spinner fa-spin"></i>スピン</p>
  <p><i class="fa fa-cog fa-pulse"></i>パルス</p>
  <p><i class="fa fa-cog fa-spin"></i>スピン</p>
</div>

ボーダーで囲む

ボーダーで囲むことができるらしいですが結果が残念すぎました...

<div class="fa-4x">
  <p><i class="fab fa-twitter fa-border"></i></p>
</div>

ここからはJSシートで読み込みが必要です

アイコンを重ねる

デザインによって外枠が欲しかったりする場合は２つのロゴを重ねられます

  <i class="fas fa-square"></i>これと
  <i class="fas fa-star"></i>これを
  <span class="fa-stack fa-2x">
    <i class="fas fa-square fa-stack-2x"></i>
    <i class="fas fa-star fa-stack-1x fa-inverse"></i>
  </span>重ねる

アイコンのサイズを指定

背景の要素を無視してサイズを設定することができます。

  <!-- 全体サイズ指定 -->
  <div class="fa-8x">
    <!-- 縮みを設定 -->
    <i class="fab fa-twitter" data-fa-transform="shrink-5" style="background:gray"></i>
    <!-- 無指定 -->
    <i class="fab fa-twitter" style="background:gray"></i>
    <!-- はみ出しを設定 -->
    <i class="fab fa-twitter" data-fa-transform="grow-8" style="background:gray"></i>
  </div>

アイコンの位置調整

拡大縮小と配置を指定することもできます。

  <div class="fa-6x">
    <!-- 無指定 -->
    <i class="fab fa-twitter" data-fa-transform="shrink-5" style="background:gray"></i>
    <!-- ５縮ませて左に６ずらす -->
    <i class="fab fa-twitter" data-fa-transform="shrink-5 left-6" style="background:gray"></i>
    <!-- ５縮ませて下に６ずらす -->
    <i class="fab fa-twitter" data-fa-transform="shrink-5 down-6" style="background:gray"></i>
    <!-- ５縮ませて右に６ずらす -->
    <i class="fab fa-twitter" data-fa-transform="shrink-5 right-6" style="background:gray"></i>
    <!-- ５縮ませて上に６ずらす -->
    <i class="fab fa-twitter" data-fa-transform="shrink-5 up-6" style="background:gray"></i>
  </div>

元気にはみ出していますね

アイコンを重ねる

マスクを使ってアイコンを重ねることができます

<div class="fa-4x">
    <i class="fab fa-twitter" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment"></i>
</div>

私はTwitter依存症ですというアイコンができました

アイコンにテキストを入れる

少し強引ですがテキストを入れることもできます。

  <span class="fa-layers fa-fw">
    <i class="fas fa-comment"></i>
    <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-13" style="font-weight:900">message</span>
  </span>

メールのカウンターを作る

組み合わせると下のようなメールのカウンターを作ることができます。

   <span class="fa-layers fa-fw" style="background:gray; width:80px;height: 80px;">
    <i class="fa-4x fas fa-envelope"></i>
    <span class="fa-3x fa-layers-counter" style="background:white;color: black;">245</span>
  </span>

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-24T02:25:19+09:00

Firebase で静的Webページを公開する。複数のサイトをホスティングする。

はじめに

個人用のポートフォリオサイトを公開するためにFirebaseを試してみました。
この記事はその記録です！

Firebaseに必要なもの

Googleアカウント

Firebaseの料金について

今回は完全無料のsparkプランを使用します。
sparkじゃない方（Blaze）は無料枠付きですが、無料枠を超えた場合に使用に応じて課金されます。
GCPと連携する場合や、GCPの既存プロジェクトから利用する場合はBlazeを選択する必要があります。

（公式）料金プランについて
https://firebase.google.com/pricing?authuser=0

nodeをインストールする

firebaseを操作するにはnodeが必要です。下記サイトからインストーラーをダウンロードします。
http://nodejs.org/

nodeインストールの確認

nodeをインストールするとnpmをもインストールされます。
下記のコマンドで2つのバージョンを確認しましょう。バージョンが表示されたらインストール成功です。
npm -v
node -v
firebaseプロジェクトの作成

https://firebase.google.com へアクセスしGoogleアカウントでログインします。

「コンソールへ移動」→「プロジェクトを追加」を選択します。

プロジェクトに名前を付けます。

Firebase CLIのインストール

ここからはコマンド操作になります。コマンドプロンプトを起動して下記のコマンドを実行していきます。
まずは、firebase CLI（Firebase管理用コマンド）をnpmでインストールします。
npm install -g firebase-tools
プロジェクトの初期化（init）

firebaseへログイン

下記を実行します。実行後、よく見るGoogleログイン画面がGUIで開くのでログインします。
firebase login

firebase プロジェクト一覧の確認

デプロイ先がカレントになっているかを確認する。
firebase projects:list
上図だと、現在のカレントプロジェクトはtestproject

firebase カレントプロジェクトの移動
firebase use [プロジェクトid]
firebase init

プロジェクトのトップフォルダにcdして下記を実行する
firebase init
矢印キーでhosthingを選択してスペースを押しチェックonする。
# initするフォルダが下記に表示されるので適切か確認する。
You're about to initialize a Firebase project in this directory:

  C:\Users\user\myportfolio
# 続行しますか。
? Are you ready to proceed? (Y/n) y
? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to set up for this folder? Press Space
 to select features, then Enter to confirm your choices. (Press <space> to selec
t, <a> to toggle all, <i> to invert selection)
>( ) Database: Deploy Firebase Realtime Database Rules
 ( ) Firestore: Deploy rules and create indexes for Firestore
 ( ) Functions: Configure and deploy Cloud Functions
 ( ) Hosting: Configure and deploy Firebase Hosting sites
 ( ) Storage: Deploy Cloud Storage security rules
 ( ) Emulators: Set up local emulators for Firebase features
#矢印キーで選択してスペースを押して選択する。今回は”Hosthing”のみ選択します。


# 既存のプロジェクトですか、新規プロジェクトですか:既存
? Please select an option: (Use arrow keys)
> Use an existing project
  Create a new project
  Add Firebase to an existing Google Cloud Platform project
  Dont set up a default project



# どの既存プロジェクトですか
? Select a default Firebase project for this directory: myportfolio-d18e2 (myportfolio)
# 既存プロジェクトを使用する場合はここで既存プロジェクト一覧が表示されるので使用するプロジェクトを選択する。

# どのフォルダを公開（パブリック）しますか
? What do you want to use as your public directory? public

# シングルページアプリですか
? Configure as a single-page app (rewrite all urls to /index.html)? No
+  Deploy complete!

Project Console: https://console.firebase.google.com/project/myportfolio-d18e2/overview
Hosting URL: https://myportfolio-d18e2.web.app
PS C:\Users\user\myportfolio> 
firebase.jsonとfirebasercの確認

initコマンドにより、ディレクトリ直下に下記が作成されます。下記はFirebaseの設定に使用する重要なファイルなので覚えておきます。

fireabse.json

プロジェクトの構成について記述されたファイル

.firebaserc

プロジェクトのエイリアスが保存されるファイル
firebase.json
"hosting": {
  "public": "public",  // the only required attribute for hosting
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ]
}
firebaserc
{
  "projects": {
    "default": "myportfolio-hogehoge"
  }
}
deployする
firebase deploy -m "This is my first deploy!"
firebase deploy --only hosting:<target-name>
（公式）プロジェクトディレクトリからリソースをデプロイするには、firebase.json ファイルが必要です。このファイルは firebase init コマンドによって自動的に作成されます。
デフォルトでは、firebase deploy を実行すると、プロジェクトディレクトリ内にあるデプロイ可能なすべてのリソースについて、リリースが作成されます。特定の Firebase サービスまたは機能をデプロイするには、部分デプロイを使用します。
https://firebase.google.com/docs/cli?hl=ja

サイトの確認

デプロイできたらブラウザでアクセスしてみましょう。deployコマンドが成功したときに表示されるurlをコピーしてブラウザからアクセスしてみます！

表示されました！あとは好きなようにhtmlを改造していくだけですね。

複数のサイトを構成する（フォルダは分ける）

Firebaseではひとつのプロジェクトの中に複数のサイトを構成できます。
もう一個をサイトを作成して、先ほどと同じプロジェクトと紐づけたいと思います。

(公式)マルチサイトデプロイメントのベストプラクティス
https://firebase.google.com/docs/hosting/multisites?authuser=0#set_up_deploy_targets

新規サイトを追加する。

発生したエラー（initできない・deployできない）

何回かプロジェクトを作成していくと、initのときにカレントフォルダとは違うフォルダがinitされてしまう 、違うフォルダがプロジェクトと結びついているといいう不具合が発生しました。このため何度deployしてもdeployコマンド自体はsuccessと表示されるもののWebページにアクセスすると最新のページに更新されていないという状態になりました。

原因は違うフォルダで一度initしてしまい、そのフォルダにfirebase.jsonとfirebase.rcが作成されてしまったことです。このファイルを削除してもう一度initし直したら、正しくdeploy出来ました。

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-24T02:25:19+09:00

Firebase で静的Webページを公開する。

はじめに

個人用のポートフォリオサイトを公開するためにFirebaseを試してみました。
この記事はその記録です！

用意するもの

Googleアカウント

Firebaseの料金について

今回は完全無料のsparkプランを使用します。
sparkじゃない方（Blaze）は無料枠付きですが、無料枠を超えた場合に使用に応じて課金されます。
GCPと連携する場合や、GCPの既存プロジェクトから利用する場合はBlazeを選択する必要があります。

（公式）プランについて
https://firebase.google.com/pricing?authuser=0

nodeをインストールする

firebaseを操作するにはnodeが必要です。下記サイトからインストーラーをダウンロードします。
http://nodejs.org/

インストールの確認

nodeをインストールするとnpmをもインストールされます。
下記のコマンドで2つのバージョンを確認しましょう。バージョンが表示されたらインストール成功です。
npm -v
node -v
firebaseプロジェクトの作成

https://firebase.google.com へアクセスしGoogleアカウントでログインします。

「コンソールへ移動」→「プロジェクトを追加」を選択します。

プロジェクトに名前を付けます。

Firebase CLIのインストール

firebase CLIのインストール
npm install -g firebase-tools
firebaseへログイン
firebase login
firebase プロジェクト一覧の確認

デプロイ先がカレントになっているかを確認する。
firebase projects:list
上図だと、現在のカレントプロジェクトはtestproject

firebase カレントプロジェクトの移動
firebase use [プロジェクトid]
firebase init

プロジェクトのトップフォルダにcdして下記を実行する
firebase init
矢印キーでhosthingを選択してスペースを押しチェックonする。
# initするフォルダが下記に表示されるので適切か確認する。
You're about to initialize a Firebase project in this directory:

  C:\Users\user\myportfolio
# 続行しますか。
? Are you ready to proceed? Yes
# Firebaseのどの機能のセットアップを行いますか：hosthing
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. Hosting: Configure and 
deploy Firebase Hosting sites

# 既存のプロジェクトですか、新規プロジェクトですか:既存
? Please select an option: Use an existing project

# どの既存プロジェクトですか
? Select a default Firebase project for this directory: myportfolio-d18e2 (myportfolio)
i  Using project myportfolio-d18e2 (myportfolio)

# 度のフォルダを公開しますか
? What do you want to use as your public directory? public

# シングルページアプリですか
? Configure as a single-page app (rewrite all urls to /index.html)? No
+  Deploy complete!

Project Console: https://console.firebase.google.com/project/myportfolio-d18e2/overview
Hosting URL: https://myportfolio-d18e2.web.app
PS C:\Users\user\myportfolio> 
firebase deploy
firebase deploy
urlが発行される

ので、ブラウザでアクセスしてみましょう。

表示されました！あとはhtmlを改造していくだけです。おしまい。

発生したエラー（initできない・deployできない）

何回かプロジェクトを作成していくと、initのときにカレントフォルダとは違うフォルダがinitされてしまう 、違うフォルダがプロジェクトと結びついているといいう不具合が発生しました。このため何度deployしてもdeployコマンド自体はsuccessと表示されるもののWebページにアクセスすると最新のページに更新されていないという状態になりました。

原因は違うフォルダで一度initしてしまい、そのフォルダにfirebase.jsonとfirebase.rcが作成されてしまったことです。このファイルを削除してもう一度initし直したら、正しくdeploy出来ました。

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-24T01:35:06+09:00

お絵かきできるSNSを作りたい！8

レイヤーの実装していきます。

↓この部分

まず、ラジオボタンのname属性を同じにします。
<p><label><input type="radio" name="rdoLayer" checked>上レイヤー</label></p>
<p><label><input type="radio" name="rdoLayer">下レイヤー</label></p>
これで両方のラジオボタンにチェックが付く状態から、片方1つにチェックが付く状態になります。
次にレイヤーを作るに辺りcanvasが2枚必要なので増やしました。

↓変更前
<canvas id="canvas" width="800" height="600"></canvas>
↓変更後
<div id="canvasarea">
<canvas id="canvas" width="800" height="600"></canvas>
<canvas id="canvas2" width="800" height="600"></canvas>
</div>
↓スタイルシートはこんな感じ。
#canvasarea{
    width: 800px;
    height: 600px;
    background-color:#FFF;
}
#canvasarea:after, #canvasarea:before {
    content: "";
    clear: both;
    display: block;
}
#canvas{
    z-index:2;
}
#canvas2{
    z-index:1;
}
#canvas2,#canvas {
    width: 800px;
    height: 600px;
    position: absolute;
}
canvas自体を　position:absolute　にして、canvasを入れている#canvasareaは疑似要素で　clear:both　を付けました。
そして、#canvasの方が上に来るようにz-indeを2にしています。(#canvas2は1)

最後にJSです。
今までの処理に下レイヤー用の#canvas2をコピペし、各動作の前にレイヤーの上レイヤーと下レイヤーどちらを選ばれているかを確かめる処理を追加しました。

冗長で長くなるので差分は↓をご覧下さい。

・[github]今回の修正内容はこちら

↓黒で上レイヤー・紫で下レイヤーを使いました。

ちゃんとレイヤーになってますね。
これで右側のカラーパレット・線の太さ・レイヤーが完成です。

次回は下の実装を行います。

最初：お絵かきできるSNSを作りたい！

　 Tweet
Qiitaで続きを読む

20200524のHTMLに関する記事は13件です。

HTMLの細かいスキル

ヘッダーの固定方法

potision: fixed; を使用

注意▼

対処法▼

cssでヘッダーを固定する方法

potision: fixed; を使用

注意▼

対処法▼

HTML構造

Java Scriptの基礎

JavaScriptとは

HTMLへの導入方法

window.alert()

console.log()

変数宣言について

条件分岐

配列

オブジェクト

for文

HTML/CSSの自分流基礎

HTMLの基礎

属性について

要素について

box-sizing

line-height

vertical-align

letter-spacing

float

flex

まあまあ使うtextareaテクニック

概要

言語

テクニック

textareaタグ

入力禁止にする(readonlyを指定)

タブ遷移でフォーカスを当てないようにする

右下のリサイズのつまみを表示しない

placeholderを指定する

placeholderのスタイルを変更する

文字数制限をする

入力内容のチェックをする

終わり

hamlで、ui-viewやng-controllerなどのハイフンのついた属性はどうやって指定するのか

h1 しかし、terarailで質問して30分くらいで解決w

Day18~22 中間試験~基礎カリキュラム本試験

本試験で学んだことについて

fontawesomeのプロパティ

フォントサイズ

アイコンの回転

パルスとスピン

ボーダーで囲む

ここからはJSシートで読み込みが必要です

アイコンを重ねる

アイコンのサイズを指定

アイコンの位置調整

アイコンを重ねる

アイコンにテキストを入れる

メールのカウンターを作る

Firebase で静的Webページを公開する。複数のサイトをホスティングする。

はじめに

Firebaseに必要なもの

Firebaseの料金について

nodeをインストールする

nodeインストールの確認

firebaseプロジェクトの作成

Firebase CLIのインストール

プロジェクトの初期化（init）

firebaseへログイン

firebase プロジェクト一覧の確認

firebase カレントプロジェクトの移動

firebase init

firebase.jsonとfirebasercの確認

deployする

サイトの確認

複数のサイトを構成する（フォルダは分ける）

新規サイトを追加する。

発生したエラー（initできない・deployできない）

Firebase で静的Webページを公開する。

potision: fixed; を使用　

potision: fixed; を使用　