20191021のHTMLに関する記事は5件です。

投稿日：2019-10-21T23:43:59+09:00

どこかとは言わないが1日目

とある教室に通い始めたので、授業中にメモしたものを"そのまま"書いていく。
ただのきったないノートを書いただけ(ﾟ∀ﾟ)

●clearfix
floatは左右に詰めるだけでなく、要素を浮かせる副作用もあり、子要素にfloatをかけると親要素が消えてしまう
例）子がheight:300px; ,height:400px; で親要素がheight:700px; 相当になるものが、子要素にfloatをかけると親のheight:700pxが消えてしまう。
その為、hedaerのすぐ真下にフッターがやってきてしまい、コンテンツの子要素とかぶる形になってしまう。

.clearfix::after {
content: "";
clear: both;
display: block;
}

のクラスを親要素につけると解決！やったぁ！

●display: flex
⇛親要素にdisplay: flex;　を指定することで、直下の子要素が横並びになる。
その子要素の配置を決めるのが、「justify-content」でオプション指定すると配置の仕方が選べる。
例）space-between　は両端を端に寄せて、そこから等間隔で横に並べるオプション
例）center　は中央寄せで横に並べるオプション

じゃあ縦並びは？
display:flex;　を指定した上で、
flex-direction: column;　をやると縦に並ぶよ！
なんかこっちのほうが拡張性が高くて、横並びとか縦並びのものを順番入れ替えたりできるから
display:flex使うのが最近はモダンなんだって！へぇー！！
●flex-direction: columnについて
display:flex;
flex-direction: column;
で縦並びになるゥ！？

●display:block;
でも面倒ならこれでいいよ(ﾟ∀ﾟ)

●position: relative; と、position: absolute; について
基本的に、position:obsolute; のみを指定すると画面の左上が基準となる。それを、left:20px や、bottom:15px 等で位置をずらすことができる。
また、position:relativeに関しては私が基準だ、となる。この位置も上記のようにずらすことができるが、
何よりも、親要素がrelativeの位置を指定していれば、子要素はそこを基準にposition:absolute;の指定ができる。

●line-heightとは
高さを指定した上で勝手に左右の中央に配置してくれる便利なやつじゃー！
⇛なかったーーー！！！
⇛⇛heightを指定した上で同じ値でline-heightを指定すれば上下が中央になるってやつだった。。。
⇛⇛複数文字列がある系だと、それ全部にline-heightが適応されて、100pxだと100pxごとに縦に並んじゃうの〜！

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-21T21:26:32+09:00

【JavaScript】2人プレイのディフェンスゲームを作ってみた

はじめに

JavaScriptでcanvasを使って、2人プレイのディフェンスゲームを作ってみました。

プレイはこちらから→ディフェンスゲーム

環境

Windows 10 home
Google Chrome

ルール

2人プレイのゲームになります。
黄色の玉が画面右から左へ移動します。
画面左まで移動したときに、HPが減っていき、HPが0になるとゲーム終了です。
プレイヤー1と2は黄色の玉が画面の左へ移動するのを阻止する必要があります。
プレイヤー1は赤色の玉、プレイヤー2は青色の玉をそれぞれ操作し、黄色の玉に当たることで、黄色の玉を消すことができます。
このようにして、黄色の玉の移動を阻止していきましょう！
また、それぞれ黄色の玉に当たると得点も付くようにしているので、協力し合うことも、対戦で遊ぶこともできます。

操作方法

1P	矢印キーでの移動
↑	上に移動
↓	下に移動
→	右に移動
←	左に移動

2P	WASDキーでの移動
W	上に移動
S	下に移動
A	右に移動
D	左に移動

プログラム

index.html

<style>body{margin:0;}</style>
<canvas class="canvas">
<script>
"use strict";
{
const WIDTH = 1200; //キャンバスの横軸
const HEIGHT = 600; //キャンバスの縦軸
const HTML_CVS = document.querySelector(".canvas"); //キャンバスの領域の取得
const CANVAS = HTML_CVS.getContext("2d"); //キャンバスの描画機能を有効

class Circle{ //円クラス
  constructor(canvas,x,y,r,color){
    this.canvas = canvas;
    this.x = x;
    this.y = y;
    this.r = r;
    this.color = color;
  }

  draw(){ //描画
    this.canvas.beginPath(); //パスの初期化
    this.canvas.fillStyle = this.color;
    this.canvas.arc(this.x,this.y,this.r,0*Math.PI,2*Math.PI,true);
    this.canvas.closePath(); //パスを閉じる
    this.canvas.fill();
  }
}

class Player extends Circle{ //プレイヤークラス
  constructor(canvas,x,y,r,color){
    super(canvas,x,y,r,color);

    this.speed = 20; //プレイヤーの移動の速さ
    this.score = 0; //プレイヤーの得点

    this.up = false;
    this.down = false;
    this.right = false;
    this.left = false;
  }

  move(){ //キー操作での動き
    if(this.up && this.y-(this.r+this.speed)>=0){this.y -= this.speed;}
    if(this.down && this.y+(this.r+this.speed)<=HEIGHT){this.y += this.speed;}
    if(this.right && this.x+(this.r+this.speed)<=WIDTH){this.x += this.speed;}
    if(this.left && this.x-(this.r+this.speed)>=0){this.x -= this.speed;}
  }

  toEnemyDistance(enemy){ //敵との距離を算出
    return Math.sqrt((enemy.x-this.x)**2+(enemy.y-this.y)**2);
  }
}

class Enemy extends Circle{ //敵クラス
  constructor(canvas,x,y,r,color){
    super(canvas,x,y,r,color);
    this.y = Math.floor(Math.random()*(HEIGHT-this.r*2))+this.r;
    this.speed = 12;
  }

  move(){ //右から左への動き
    if(this.x > 0+this.r){
      this.x -= this.speed;
    }
  }
}

class ScoreLabel{
  constructor(canvas){
    this.canvas = canvas;
    this.x = 10;
    this.y = 40;
    this.hp = 20;
  }

  draw(p1,p2){
    this.canvas.fillStyle = "white";
    this.canvas.font = "30px Arial";
    this.canvas.fillText("hp : "+this.hp +" / P1 : "+p1.score+" / P2 : "+p2.score,this.x,this.y);
  }
}

class Game{
  constructor(){
    HTML_CVS.width = WIDTH;
    HTML_CVS.height = HEIGHT;

    this.PlayerRadius = 60; //プレイヤーの玉の半径
    this.EnemyRadius = 10; //敵の玉の半径
    this.frameRate = 50; //フレーム数
    this.timeCounter = 0; //タイムカウンタ
    this.intervalTime = 0.2; //敵の生成間隔時間
    this.gameflag = true;

    this.player1 = new Player(CANVAS,this.PlayerRadius,this.PlayerRadius,this.PlayerRadius,"red"); //1P
    this.player2 = new Player(CANVAS,this.PlayerRadius,HEIGHT-this.PlayerRadius,this.PlayerRadius,"blue"); //2P
    this.enemy = [];
    this.scoreLabel = new ScoreLabel(CANVAS);

    window.setInterval(()=>{ //ループ処理(フレーム数はFRAME_RATE)
      CANVAS.fillStyle = "black";
      CANVAS.fillRect(0,0,WIDTH,HEIGHT) //キャンバスを描画

      if(this.gameflag){
        this.player1.draw(); //プレイヤー1の描画
        this.player1.move(); //プレイヤー1の動き

        this.player2.draw(); //プレイヤー2の描画
        this.player2.move(); //プレイヤー2動き


        for(let i=0;i<this.enemy.length;i++){
          this.enemy[i].draw(); //敵の描画
          this.enemy[i].move(); //敵の動き
          if(this.enemy[i].x <= 0+this.enemy[i].r){
            this.enemy.splice(i,1);
            this.scoreLabel.hp--;
          }
          if(this.player1.toEnemyDistance(this.enemy[i])<=this.player1.r+this.enemy[i].r){ //距離による当たり判定
            this.enemy.splice(i,1);
            this.player1.score++;
            continue;
          }
          if(this.player2.toEnemyDistance(this.enemy[i])<=this.player2.r+this.enemy[i].r){ //距離による当たり判定
            this.enemy.splice(i,1);
            this.player2.score++;
            continue;
          }
        }
        this.timeCounter++;

        if(this.timeCounter % (this.frameRate*this.intervalTime) == 0){
          this.enemy.push(new Enemy(CANVAS,WIDTH-this.EnemyRadius,HEIGHT/2,this.EnemyRadius,"yellow"));
        }

        this.scoreLabel.draw(this.player1,this.player2);
        if(this.scoreLabel.hp <= 0){this.gameflag=false;}
        }else{alert("ゲームオーバー！");} //アラートでゲームオーバーを表示

    },1000/this.frameRate);

    window.addEventListener("keydown",()=>{ //キーボードのキーを押したときに処理
      if(event.keyCode==38){this.player1.up=true;} //上矢印キー
      if(event.keyCode==40){this.player1.down=true;} //下矢印キー
      if(event.keyCode==39){this.player1.right=true;} //右矢印キー
      if(event.keyCode==37){this.player1.left=true;} //左矢印キー

      if(event.keyCode==87){this.player2.up=true;} //Wキー
      if(event.keyCode==83){this.player2.down=true;} //Sキー
      if(event.keyCode==68){this.player2.right=true;} //Dキー
      if(event.keyCode==65){this.player2.left=true;} //A印キー
    });

    window.addEventListener("keyup",()=>{ //キーボードのキーを離したときに処理
      if(event.keyCode==38){this.player1.up=false;} //上矢印キー
      if(event.keyCode==40){this.player1.down=false;} //下矢印キー
      if(event.keyCode==39){this.player1.right=false;} //右矢印キー
      if(event.keyCode==37){this.player1.left=false;} //左矢印キー

      if(event.keyCode==87){this.player2.up=false;} //Wキー
      if(event.keyCode==83){this.player2.down=false;} //Sキー
      if(event.keyCode==68){this.player2.right=false;} //Dキー
      if(event.keyCode==65){this.player2.left=false;} //Aキー
    });
  }
}

new Game(); //ゲーム開始
}
</script>

以上で終了です！
ここまで読んでいただき、ありがとうございました。

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-21T17:15:33+09:00

9行のhtmlでスネークゲームを作った(Qiitaで遊べるよ!!)

はじめに

「200行のVue.jsでスネークゲームを作った」、「たった7行でテトリスを実装「七行プログラミング」とは」の影響を受けて「23行のhtmlでマインスイーパーを作った(Qiitaで遊べるよ!!)」という記事を書いたのだが、トレンド入りしたり影響を受けた記事が作られたりするなど個人的には反響が大きかったように思える。
そこで今回はショートコーディング第二弾として、スネークゲームを可能な限り小さいhtmlで制作した。
最終的に行数はたった1桁の9行、サイズは1KBを切るスネークゲームの完成に成功した。

さあ、スネークゲームで遊ぶのだ!

See the Pen HTML_Snake_Min by T.D (@td12734) on CodePen.

大きい画面で遊びたい人はこちら
Qiitaだと上下移動でスクロールされてしまうので大画面推奨です。

ゲームルール

ヘビ(緑色)を動かしてエサ(赤色)を取得するゲームです。

矢印キーを押すとヘビの体を操作できます。

一度上の枠内をクリックしてからでないと矢印キーが反応しないかもしれません。

最初に矢印キーを押した後、ヘビが動き始めます。

ヘビは止まらずに動き続けます。

エサを取るとヘビの体が伸びます。

ヘビの頭が胴体に衝突する、盤外に行くとゲームオーバーです。

Resetボタンを押せばゲームをやり直せます。

プログラム

コード

ゲームは以下のコードで実装した。七行プログラミングのルールに従い、1行は79文字以下としている。
<!doctype html><body onKeyDown=K=event.keyCode-36 onload='L=f=>{i=t;while(i--)f
(C(i))};C=c=>T.rows[c/w|0].cells[c%w];D=_=>L(c=>c.style.background=!c.v?0:!~c.v
?"red":c.v-s?"tan":"lime");F=_=>(c=C(M())).v?F():c.v--;M=_=>Math.random()*t|0;R
=_=>{L(c=>c.v=P[I="innerHTML"]=0);C(p=M()).v=s=1;D(F(p++))};for(i=K=0;i<(t=400)
;i++){i%(w=20)?0:r=T.insertRow(0);r.insertCell(0).style="width:24px;height:8px"
+";border:solid"}R(setInterval(_=>{if(+P[I]>=P[I]&&K){if((K>3&&(p+=w)?p<=t:K>2
&&p++?p%w-1:K>1&&(p-=w)?p>0:p--&&p%w)&&C(p-1).v<1){C(p-1).v&&!F(P[I]=s++)?0:L(
c=>c.v>0&&c.v--);D(C(p-1).v=s)}else P[I]+=" Gameover"}},200))'><input onclick=
R() type=button value=Reset><p id=P><table id=T style=border-collapse:collapse>
htmlで保存してブラウザで開いても恐らく遊べます。
最終行を始めとするほぼ全ての行が79文字埋まっており、視覚的にも大変美しいと思います。
主な実装はbodyのonloadに書いてあるが、何書いてあるか分からないと思うのでonloadを書き下したコードを以下に貼る。
onload
L=f=>{i=t;while(i--)f(C(i))};
C=c=>T.rows[c/w|0].cells[c%w];
D=_=>L(c=>c.style.background=!c.v?0:!~c.v?"red":c.v-s?"tan":"lime");
F=_=>(c=C(M())).v?F():c.v--;
M=_=>Math.random()*t|0;
R=_=>{
  L(c=>c.v=P[I="innerHTML"]=0);
  C(p=M()).v=s=1;
  D(F(p++))
};
for(i=K=0;i<(t=400);i++){
  i%(w=20)?0:r=T.insertRow(0);
  r.insertCell(0).style="width:24px;height:8px;border:solid"
}
R(setInterval(_=>{
  if(+P[I]>=P[I]&&K){
    if((K>3&&(p+=w)?p<=t:K>2&&p++?p%w-1:K>1&&(p-=w)?p>0:p--&&p%w)&&C(p-1).v<1){
      C(p-1).v&&!F(P[I]=s++)?0:L(c=>c.v>0&&c.v--);
      D(C(p-1).v=s)
    }
    else P[I]+=" Gameover"
  }
},200))
改行しても23行しかない。
ただ、見やすくなったもののコードの解読は困難だと思うので以下で説明を行う。

変数、関数の説明

コード圧縮の都合上、全ての変数名と関数名は1文字になっている。
その結果、可読性が大幅に失われたのでここでは変数名、関数名について説明する。

変数、関数名

1文字に圧縮する前に付けたであろう名前

この行以降は動作説明など

グローバル変数

i

特に無し

ループ調整変数

p

player

ヘビの頭の座標+1

r

tableRow

テーブルの行

t

tableSize

テーブルのマスの数、及びsetTimeoutのインターバル

w

width

テーブルの横サイズ

I

innerHTML

定数"innerHTML"

K

keyCode

入力したkeyCodeから36を引いたもの

P

pElement

スコアとGameOverを表示するテキストエリア

T

tableElement

ゲームの盤面

ローカル変数

c

cell

テーブルのセル

f

function

Lで実行する関数

v

cellValue

そのセルの数値

0：何もない

1以上：ヘビの体

-1：エサ

_

特に無し

アロー関数の()を省略するために定義したダミー変数

関数

C

GetCell

テーブルのセルを取得する

D

DrawCell

ゲームの盤面のマスに色を塗る

F

FoodSet

盤面にエサを設置する

L

LoopCell

全てのセルに対して引数の関数を実行する

M

Math_random

エサとヘビの位置をランダムに決める

R

ResetGame

ゲームの盤面を初期化する

動作、工夫点の説明

説明を見る前に最低限知っておきたい知識

変数宣言のvarやletは省略可能

変数宣言や計算などは文中でも可能

場所によってはカッコで括る必要がある

if-else文より三項演算子を使った方が短くなる場合がほとんど

if(条件) 処理1 else 処理2 → 条件?処理1:処理2

0はfalse、0以外はtrueと判断される

-1をビット反転させれば0になる(~-1=0)

関数宣言はfunctionよりもアロー関数を使った方が短い

function func(a){}→func=a=>{}

function (){}→_=>{}(「_」はダミー変数)

if,while,アロー関数などの{}の中の処理が1つの時、{}を省略可能

html部分
<!doctype html>
<body onKeyDown=K=event.keyCode-36 onload='省略'>
<input onclick=R() type=button value=Reset>
<p id=P>
<table id=T style=border-collapse:collapse>
html5ではp,tableなどの閉じタグが無くても動作するのでこれらを削除する。
ただ、環境によってはhtml5と認識されずにエラーが出るので<!doctype html>を書く必要がある。

キーボードのキーが押された時、bodyのonKeyDownが呼ばれて変数Kにキーコード-36が代入される。
(←,↑,→,↓)のキーコードは(37,38,39,40)なので、あらかじめ36を引けばKには(1,2,3,4)が代入されてKの比較時などに文字数を削減可能。

JavaScriptはscriptタグではなくbodyのonloadに全て突っ込む。
こうすれば<script>と</script>の文字列を省略可能で、全てがload時に実行されるのでwindow.onloadも省略可能で文字数を大幅に削減できる。
ちなみに</script>は省略できない。

inputタグではResetボタンを定義し、押した時に関数Rを呼び出すようにしている。

pタグでは点数とGameoverの文字を表示する。
idをPにし、他にP変数や関数を定義しなければgetElementById()をしなくてもP.~の形でpタグにアクセス可能。
同様の事をtableでもやっている。

ゲームの盤面はtableタグで表示している。
styleのborder-collapseをcollapseにしなければ枠線が表示されず、ゲームの難易度が跳ね上がる。

ゲームの盤面を設定する
for(i=K=0;i<(t=400);i++){
  i%(w=20)?0:r=T.insertRow(0);
  r.insertCell(0).style="width:24px;height:8px;border:solid"
}
真ん中よりやや下にある部分だがここが最初に実行される。
1行目はfor文で0～399まで回し、ついでにKに0、tに400を代入している。
2行目ではiを20で割った余りが0のとき、insertRowして行を追加している。
本来は以下に示すif文だが、三項演算子を用いる事で文字を削減できる。
また0がfalse扱いされることを利用して!==0も省略している。
if(!(i%(w=20)!==0))r=T.insertRow(0);
3行目ではテーブルのセルのスタイルを設定している。
セルを横長な長方形にし、境界線を1本だけ引くようにして盤面を見やすくしている。

ゲームテーブルの特定のセルを取得する
C=c=>T.rows[c/w|0].cells[c%w];
座標が引数cであるセルを返している。
分かりやすく書くと以下と同様の処理をしている。
function C(c) {
  return T.rows[Math.floor(c/w)].cells[c%w];
}
小数点以下の切り捨てはMath.floor()を使うよりもビット演算して|0する方が断然短い。

ゲームテーブルの全てのセルに対し、セルを引数とする関数を実行させる
L=f=>{i=t;while(i--)f(C(i))};
テーブルの全てのセルに対し、セルを引数とする関数fを実行させている。
全てのセルの呼び出しはforよりもwhileの方が短く書ける。

ゲームテーブルに色を塗る
D=_=>L(c=>c.style.background=!c.v?0:!~c.v?"red":c.v-s?"tan":"lime");
この1行で色塗り処理を行っている。
読みやすく書き直すと以下のようになる。
function D() {
  L(function (c) {
    if (c.v===0) {
      c.style.background="white";
    }
    else if (c.v===-1) {
      c.style.background="red";
    }
    else if (c.v-s!==0) {
      c.style.background="tan";
    }
    else {
      c.style.background="lime";
    }
  });
}
if文は三項演算子で簡略化し、条件式は0がfalse、0以外がtrue、-1のビット反転が0でfalseである事を利用して文字数を減らしている。
色について、whiteは0で代用可能なので0を代入している。
エサは通常は赤色で示し、redは3文字しかないのでredにした。
ヘビの頭は通常は緑色で示されるが、greenは5文字で長いので4文字のlimeで代用した。
ヘビの胴体は3文字の色であるtanにした。

プレイヤーやエサを配置するセルの座標をランダムに決める
M=_=>Math.random()*t|0;
ランダムな座標、つまり0から399までのランダムな整数を返している。
切り捨てはビット演算で行っている。

何も無いランダムな座標にエサを配置する
F=_=>(c=C(M())).v?F():c.v--;
分かりやすく書くとこうなる。
function F() {
  c = C(M());
  if (c.v!==0) {
    F();
  } else {
    c.v--;
  }
}
まず、セルcをランダム決めている。
次にセルcの値が0ではない、つまりエサかヘビの頭か胴体ならFを再度呼び出し、0ならセルの値から1を引いて-1にしてセルをエサ扱いする。

ゲームを初期化する
R=_=>{
  L(c=>c.v=P[I="innerHTML"]=0);
  C(p=M()).v=s=1;
  D(F(p++))
};
関数Rで全てのセルのリセット、スコアのリセット、プレイヤーのランダム配置、エサのランダム配置を行っている。
分かりやすく書くと以下のようになる。
function R() {
  L(function (c) {
    c.v=0;
    P[I="innerHTML"]=0
  });
  C(p=M()).v=s=1;
  p++;
  F();
  D();
}
最後のD(F(p++))について、関数FとDは引数を参照しないのでどのような引数を入れても処理に支障はない。
そこでFの引数でp++を行い、Dの引数で関数F(p++)を呼び出してセミコロンを減らしている。

200ミリ秒ごとに行う処理を記述し、ゲームの初期化を行う
R(setInterval(_=>{
  if(+P[I]>=P[I]&&K){
    if((K>3&&(p+=w)?p<=t:K>2&&p++?p%w-1:K>1&&(p-=w)?p>0:p--&&p%w)&&C(p-1).v<1){
      C(p-1).v&&!F(P[I]=s++)?0:L(c=>c.v>0&&c.v--);
      D(C(p-1).v=s)
    }
    else P[I]+=" Gameover"
  }
},200))
恐らくこのソースコードで最も難解な場所である。
分かりやすく書くと以下のようになる。
setInterval(function (){
  if(Number(P[I])>=P[I]&&K!==0){ //pタグ内の文字列を数字に変換可能で、Kが0ではない時
    var notSnakeCollided; //ヘビが衝突していなければtrue、説明用変数
    if (K>3) { //下に移動
      p+=w;
      notSnakeCollided=p<=t;
    }
    else if (K>2) { //右に移動
      p++;
      notSnakeCollided=p%w-1;
    }
    else if (K>1) { //上に移動
      p-=w;
      notSnakeCollided=p>0;
    }
    else { //左に移動
      p--;
      notSnakeCollided=p%w;
    }
    if (notSnakeCollided&&C(p-1).v<1) { //ヘビが壁に衝突しておらず、移動先がヘビの胴体ではない時
      if (C(p-1).v!==0) { //セルの値が0ではない、つまりエサの時
        s++;
        P[I]=s;
        F();
      } else {
        L(function (c) {
          if (c.v>0) {
            c.v--;
          }
        });
      }
      C(p-1).v=s;
      D();
    } else { //敗北条件を満たした時はpタグの文字列にGameoverを追加する
      P[I]+=" Gameover";
    }
  }
},200);
R();
setIntervalでは200ミリ秒ごとに以下の処理をやらせている。

ゲームオーバーでは無く、ゲームがスタートしているなら次に進む

Kの値によってヘビを移動させ、壁やヘビに衝突していないか確認する

衝突していないとき、以下の処理を行う

移動先がエサのとき、スコアを1増やしてエサを再配置する。

移動先がエサではないとき、ヘビのセルの値を1減らす。

移動先の座標をヘビの頭にする

テーブルに現在の状態を反映させる

衝突していたとき、pタグの文字列にGameoverを追加する

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-21T16:40:52+09:00

HTML CSS 【Font Awesome】を使ってみる

はじめは使い方が分からなくて苦労したのに一日経ってやってみたらあっさり出来たので、忘れない内にまとめます。
[参考サイト]https://webdesign-trends.net/entry/8351
Font AwesomeをHTMLとCSSで読み込む方法でやってみました。

①＜head＞タグ内に入れる
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Font Awesomeを使ってみる</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
  </head>
</html>
＜link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"＞を＜head＞内に入れる

②使うアイコンを選ぶ

[アイコンを探す]https://fontawesome.com/icons?d=gallery
リンク先から使いたいアイコンを探す（当然英語で！）

[日本語で入力すると検索してくれるサイト]https://search-fa.com/

③アイコンを表示させる

使いたいアイコンを選んだら＜i class=＞というのがあるのでクリックしてコピーして、HTML内で使うところにペースト
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Font Awesomeを使ってみる</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
  </head>

  <div class="icon-test">
    <i class="fab fa-facebook-square" style="color:#305097;"></i>
  </div>
</html>
次にCSSで疑似要素に下記のように追加
styles.css
.fab fa-facebook-square::before {
    content:'\f082';
    font-family:'Font Awesome 5 Free';
    font-weight:900;
}
contentにアイコンのUnicode(ユニコード)をコピペ　頭に￥(スラッシュ)を忘れずに！

ブラウザ上では

このように表示されました。
では色とサイズを変えてみましょう。

④色を変える
index.html
  <div class="icon-test">
    <i class="fab fa-facebook-square" style="color:#305097;></i>
  </div>
colorプロパティを指定することで色を変更できます。

色が変わりました。

⑤サイズを変える
index.html
  <div class="icon-test">
    <i class="fab fa-facebook-square fa-xs" style="color:#305097;"></i>
    <i class="fab fa-facebook-square fa-sm" style="color:#305097;"></i>
    <i class="fab fa-facebook-square fa-lg" style="color:#305097;"></i>
    <i class="fab fa-facebook-square fa-5x" style="color:#305097;"></i>
    <i class="fab fa-facebook-square fa-10x" style="color:#305097;"></i>
  </div>
class名にサイズを加えることで変更出来ます。

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-21T13:38:36+09:00

Emmet / Pug / Sass 雑記メモ

Pug / Emmet / Sass の相性が良く頻繁に利用するため同じ記事に纏めました。

参考

Emmet

Official

cheetsheet : https://docs.emmet.io/cheat-sheet/

keybinding : https://docs.emmet.io/actions/

※ Emmet の keybinding(ショートカット) は Editorによって変わり上記公式どおりにいかないケースが多く自分でショートカットを見つけるか設定する必要があり厄介です。
  pd      //padding:;
  pd1rem  //padding: 1rem;
  bd:n    //border: none;
  bdb1    //
  jcsb    //justify-content: space-between;
  pos     //position: relative; 
  posa    //position: absolute;
  maw     //max-width:;
  mih     //min-height:;
  tdn     //text-decoration: none;
  fx      //flex:;
  op.9    //opacity: 0.9 ;
  tov     //text-overflow: ellipsis;
  of      //overflow: hidden;
  lis     //list-style:;
  list    //list-style-type: disc;
  z       //z-index:;
  trsde   //transition-delay: time; - 変化開始までの時間
  trsdu   //transition-duration: time; - 変化開始から終了まで時間
  trf     //transform:;
  trfr    //transform: rotate(angle);
Pug

Official

Attributes

GitHub - pugjs/pug

GitHub - Jade 日本語解説

Qiita

PugでHTMLコーディングを効率化・メリットと使い方を知る @qrac

Pugと仲良くする方法 @garakuta

Jadeの記法について（あまりまとまっていない）@sasaplus1

Pug(Jade)の基本記法について @cotolier_risa

Pug(Jade)の応用記法について @cotolier_risa

PUG(was JADE)使い倒しメモ @ichimonji_haji

Pug(Jade)記法でHTMLのテンプレート的なの @soarflat

Pugの改行<br>のはなし - @nanarya

話題のPugを使ってみた / カルチャーアカデミア広島

HTML
emmet
        li*2>a.nav_a[href="#work$"]{Work}
pug
        li: a.nav_a(href="#work1") work
        li: a.nav_a(href="#work2") work
html
        <li><a class="nav_a" href="#work3">Work Ⅰ</a></li>
        <li><a class="nav_a" href="#work4">Work Ⅱ</a></li>
Pug

インラインタグ
html出力結果
<p><b>HTML形式タグ</b>をテキスト内に入力</p>
1.　HTML形式タグをテキスト内に入力
pug
p <b>HTML形式タグ</b>をテキスト内に直接入力
2.　インターポレーション #[] で囲う
pug
p #[b HTML形式タグ]をテキスト内に直接入力
3.　パイプライン | を使って改行する
pug
p 
  b HTML形式タグ
  | をテキスト内に直接入力
コメント

HTML出力(コンパイル)する
pug
//  ハイフン(-)なしコメントアウトはコンパイルされる<br>
    インデントネスト箇所も自動的にコメントアウトされる
html

HTML出力(コンパイル)しない
pug
//- ハイフン(-)付きコメントアウトはコンパイルされない
htmlに出力されない
※ Pugは１行全てがコメントアウトされる。文末にコメントを残せない。

テキスト化

タグ直後に . ドット。下層インデントを | なしで
pug
p.
  Pug is a terse and simple templating language 
html
<p>Pug is a terse and simple templating language</p>
変数

var 変数名 = "値" で定義
#{変数名} で利用
pug
- var day = "水曜"
p 今日は#{day}です
html
<p>今日は水曜です</p>
Mixin

Mixins – Pug
https://pugjs.org/language/mixins.html

Mixin 1 - 単純なタグ/テキスト代入
mixin list
  ul
    li foo
    li bar
+list
+list
html
<ul>
  <li>foo</li>
  <li>bar</li>
</ul>
<ul>
  <li>foo</li>
  <li>bar</li>
</ul>
Mixin 2 - タグ直後に = で引数をテキスト化

※ pet と = の間にスペース無し。スペース入れると = から後ろがテキスト化してしまう。
pug
mixin pet(name)
  li.pet= name
ul
  +pet('cat')
  +pet('dog')
html
<ul>
  <li class="pet">cat</li>
  <li class="pet">dog</li>
</ul>
Mixin 3 - Block

mixin block = 下層コンテンツ
pug
mixin article(title)
  .article
    h1= title
    if block
      block  
    else     
      p No block text

//blockが無い場合
+article('No Block')

//blockがある場合
+article('Yes Block')
  p This is my
  p Yes block text
html

<div class="article">
  <h1>No Block</h1>
  <p>No block text</p>
</div>

<div class="article">
  <h1>Yes Block</h1>
  <p>This is my</p>
  <p>Yes block text</p>
</div>
Mixin 4 -
pug
mixin article(title='Default Title')
  .article
    h1= title

+article()

+article('Hello world')
<div class="article">
  <h1>Default Title</h1>
</div>
<div class="article">
  <h1>Hello world</h1>
</div>
CSS

テキスト折返し関連
//改行しない
  white-space: nowrap;

//単語単位で改行
  white-space: normal;
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  white-space: break-spaces;

  word-break: normal;
  word-break: keep-all;

  overflow-wrap: normal;
  overflow-wrap: anywhere;

//改行
  word-break: break-all;
  word-break: break-word;

  overflow-wrap: break-word;

　 Tweet
Qiitaで続きを読む

20191021のHTMLに関する記事は5件です。

どこかとは言わないが1日目

【JavaScript】2人プレイのディフェンスゲームを作ってみた

はじめに

環境

ルール

操作方法

プログラム

9行のhtmlでスネークゲームを作った(Qiitaで遊べるよ!!)

はじめに

さあ、スネークゲームで遊ぶのだ!

ゲームルール

プログラム

コード

変数、関数の説明

グローバル変数

ローカル変数

関数

動作、工夫点の説明

説明を見る前に最低限知っておきたい知識

html部分

ゲームの盤面を設定する

ゲームテーブルの特定のセルを取得する

ゲームテーブルの全てのセルに対し、セルを引数とする関数を実行させる

ゲームテーブルに色を塗る

プレイヤーやエサを配置するセルの座標をランダムに決める

何も無いランダムな座標にエサを配置する

ゲームを初期化する

200ミリ秒ごとに行う処理を記述し、ゲームの初期化を行う

HTML CSS 【Font Awesome】を使ってみる

①＜head＞タグ内に入れる

②使うアイコンを選ぶ

③アイコンを表示させる

④色を変える

⑤サイズを変える

Emmet / Pug / Sass 雑記メモ

参考

Emmet

Pug

HTML

Pug

インラインタグ

1. HTML形式タグをテキスト内に入力

2. インターポレーション #[] で囲う

3. パイプライン | を使って改行する

コメント

HTML出力(コンパイル)する

HTML出力(コンパイル)しない

テキスト化

タグ直後に . ドット。下層インデントを | なしで

変数

Mixin

Mixin 1 - 単純なタグ/テキスト代入

Mixin 2 - タグ直後に = で 引数をテキスト化

Mixin 3 - Block

Mixin 4 -

CSS

テキスト折返し関連

日付別

タグ一覧

1.　HTML形式タグをテキスト内に入力

2.　インターポレーション #[] で囲う

3.　パイプライン | を使って改行する

Mixin 2 - タグ直後に = で引数をテキスト化