この記事について

HTMLのCanvasで「どんなことができるのか？」「どんな作品ができるのか」というところを重点的にまとめた記事になります。技術的な内容にはあまり触れていないです。

対象者

• Canvasを知らない人や触ったことがない人

Canvasとは？

HTML5から導入された図形を描くための技術仕様です。
JavascriptとHTMLの<canvas>を使用して図形を描くことができます。

Canvasを使った作品例だと以下のようなものがあります。

• ホムンクルスのコーポレートサイト
• ぷるぷるスパークリングゼリーの商品紹介のサイト
• 雲の上を飛んでるような作品
• トランプがひたすら落ちてくる作品

できること

基本的に2Dの図形を対象としていますが、3Dの図形も描けるので、アイディア次第では様々なことが表現できそうです
3Dの図形を描くときは Canvas APIではなくWebGL APIを使用して描きます。

2Dでできることは以下です。

• 円や四角などの色々な形の図形の作成
• それらを変形させる
• グラデーションをつける
• 画像との合成やクリッピング
• アニメーションをつける（CSSのアニメーションではなくCanvasAPIで用意されてるアニメーション）

基本的な描画の流れ

1. HTMLで<canvas>要素のwidthとheightとidを指定する
2. getElementByIdメソッドで要素を取得して、getContextメソッドの引数に2Dを渡すと2Dの図形を描画するのに必要なメソッドやプロパティを持つオブジェクトが取得できます
3. canvasAPIの機能を使用して図形を描く

• widthとheightを指定しないとデフォルトでwidth:300pxのheight:150pxとして設定されます。この枠の中がキャンバスとなって図形を描くスペースとなります。
• 引数に webglを渡すと3Dの図形を描画できるオブジェクトが取得できます。

index.html

<canvas id="canvas"></canvas>

main.js

// DOMの中からcanvas要素を取得
const canvas = document.getElementById('canvas');
// 2Dの図形を描画するメソッドやプロパティを持ったオブジェクトを取得
const ctx = canvas.getContext('2d');
// 色を緑色に指定
ctx.fillStyle = 'green';
// 四角を描画(x, y, 幅, 縦)
ctx.fillRect(10, 10, 150, 100);

See the Pen eYdawGg by kena-nk (@kena-nk) on CodePen.

Canvasの基本的なアニメーション

CSSのアニメーション（@keyframesとか）とはちょっと異なります。
Canvasでのアニメーションは以下のように描画されます。

1. 要素を削除
2. 要素を描画
3. 要素を動かす
4. 終了でなければ1.に戻る

イメージとしてはパラパラ漫画のように画面が挿し変わっていく感じです。

再描画を行うループメソッドは以下3つを状況に応じて使い分けるみたいです↓

• setInterval()：一定時間ごとに特定の処理を繰り返す
• setTimeout()：一定時間後に特定の処理をおこなう
• requestAnimationFrame()：ブラウザ描画単位で呼びだされて、次の描画がされる前にアニメーションを実行する関数を呼び出す

See the Pen mdrZbQX by kena-nk (@kena-nk) on CodePen.

試しに作った作品

• カーブを描く直線が描けるプロパティで作ったプリン
  

  
  See the Pen
  OJRYYBw by kena-nk (@kena-nk)
  on CodePen.
  

  
  

• 円と直線を組み合わせて作ったドラえもん
  

  
  See the Pen
  WNGBBYP by kena-nk (@kena-nk)
  on CodePen.
  

  
  

おわりに

Canvasを初めて触ってみたの感想としては、アニメーション付けなければお絵かきしているような感覚で使えて楽しいな〜と思いました

でも、ただ普通の丸を描くだけでも、x座標やy座標の指定だったり、Mathオブジェクトが頻繁に登場したりで数学が苦手な私的には辛みを感じたのですが。。。図形が完成していく過程は面白かったです！

今回は触っていないのですが、調べてみるとライブラリも充実していました！
実務で使うとしたらやはりライブラリを使用するんですかね？

以下MDNがまとめてくれているライブラリ一覧です?
https://developer.mozilla.org/ja/docs/Web/API/Canvas_API#libraries

興味がある方はぜひCanvasチュートリアルやってみてください！！では！！

おまけ

CanvasがHTML5に導入された経緯

Mac OS X v10.4の内部でWebKitコンポーネントとして、DashboardウィジェットやSafariでのアプリケーションを強化するために、2004年にアップルが最初に導入した。後に、Mozilla FirefoxやOperaでも採用され、WHATWGで、新しい標準規格として標準化された。

2009年の夏頃に、文字列描画のAPIとピクセル操作のAPIが追加になり、ウェブブラウザに実装された。

その後、HTML Canvas 2D Context, Level 2 が作られ、2012年12月17日に最初の W3C Working Draft が発表になった。

ソース：Wikipedia

要約すると、Appleが最初にDashboardウィジェットやSafariを良くしたくて取り入れたら、その良さに気づいた他のみんなも導入し始めて、最終的にHTML5入れちゃうか！って感じで追加されたのかなと思う

WHATWG(ワットダブルジー)とは？

HTMLと関連技術の開発をするためのコミュニティです！
元々はWeb技術の標準化を行う、World Wide Web(略称:W3C)の対抗組織だったみたいです。

HTML5の策定にあたってW3CとWHATWGは協力関係となり、WHATWGが提唱したものを元にW3Cが策定しました。
2019年からはWHATWGが随時更新していく「HTML Living Standard」をHTML標準と認め、W3Cが独自に規格を策定しないことなどが合意されました。

MDNが公式ドキュメントだと思ってたけどHTML Living Standardが公式ドキュメントみたいです。

参考サイト

Canvasアニメーションの要点
https://qiita.com/nekoneko-wanwan/items/33afa5d20264c83b2bd1

Canvasのイベント操作まとめ
https://qiita.com/nekoneko-wanwan/items/9af7fb34d0fb7f9fc870

Canvasチュートリアル
https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial

どうも7noteです。画像が画面いっぱいに入っているファーストビューを作ります。

画面いっぱいに画像が入っているサイトって、オシャレじゃないですか？
ただ綺麗に作るためには画像の選別からCSSの書き方までちょっとした工夫や知恵が必要です。
そのような細かいところを解説できればと。

画像を画面幅と高さいっぱいにする方法

index.html

<div class="first_view"><img src="image.jpg"></div>

style.css

.first_view {
  width: 100vw;     /* 画面幅いっぱい */
  height: 100vh;    /* 画面高さいっぱい */
}
.first_view img {
  object-fit: cover;/* 要素いっぱいに画像を表示（はみ出た部分は削除） */
  width: 100%;      /* 親要素の幅いっぱい */
  height: 100%      /* 親要素の高さいっぱい */
}

※ IE非対応です。対応させるにはjsを導入するとOK。
過去に書いた関連記事

気を付けるべきポイント

・人がメインの写真はトリミングされることを前提に考える
・元画像に切れてもいい余裕がない

これが一番あるあるです。この画像使ってくださいと言われた画像が、人物メインの写真だったり、淵の背景部分（切れてもいい部分）が短いとトリミングした時に上手く見れません。
特にPCとスマホで同じ画像の場合、PCは横長ですがスマホは縦長になってしまいます。

うまくいかない例

PC

スマホ

これではスマホで見たときに顔の部分が切れてしまうかもしれません。
このようにPCで綺麗に見えていても、スマホでは悲惨なことになる場合も・・・
スマホだけは違う画像を使う等の対策が必要です。

他にも以下の点についても気をつけたいところです。

※画像サイズが極端に小さい
※綺麗に見せるポイント

うまく見せるコツ

いろいろコツがあります。

・トリミングの中心位置を指定する
object-fitにはpositionの指定ができます。これで切れさせたくない位置を中心にトリミングができます。

・荒い画像は、画像の上に半透明のフィルターをかます
荒い画像をわざと荒く見せて、画像そのものの粗さを軽減させる手法です。

・背景色を入れて切れても大丈夫なようにする
切れてもいい場所は背景色として、画像の部分が切れないような加工した画像を使うといいですね。

・画面いっぱいをあきらめて、画像の縦横比を固定する
どうしてもこの写真で！ということがあるのであれば、全画面は諦めて縦横比を固定した要素を作って、その中に画像を入れましょう。

まとめ

コーディングのときに気をつけたいポイントは、どこまで想定して作り込めるかだと思います。
パット見で製作環境のPCで見ていて綺麗にできていても、他の環境ではどうにもうまく見えていないなんてことにならないように、実機で確認したり、シミュレーションツールを使って細かく様々なパターンを検証して作り込んで行きましょう。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ

概要

Web開発に興味が出てきたのでとりあえず一通り必要そうなものを触ってみることにしました。
ただ触るだけだと忘れてしまいそうなのでメモとして学んだことを書いてみます。
ここにあるコードはほぼ全てProgateで出てきたものです。

フッターの構造

フッターの左側にロゴ、右側にリストがある。
ProgateでHTML,CSSを学んでみた（3日目）で<li>にCSSで要素を追加した。
なので、このままではフッターにも上記と同じCSSが適用されてしまう。
これを回避するには以下のように書く。

hoge.css

    .header-list li{
        float: left;
        padding: 33px 20px;
    }

mainの構造

文中の一部にCSSを適用させる

一部にCSSを適用させるには以下のようにspan要素で囲む

hoge.html

    <h1>
        ようこそ<span>Progate</span>へ
    <\h1>

hoge.css

    span{
        color:#ff0000;
    }

ブロック要素、インライン要素について

HTMLには改行される要素と改行されない要素がある。
改行が入って、幅いっぱいに広がる要素をブロック要素という。
改行されない要素をインライン要素という。

枠線をつける

枠線をつけるには以下のようにborder要素を追加する。
border: [太さ]　[種類]　[色];
hoge.css
.hoge1{
border:5px solid red;
}

下にのみ線をつけたい場合はborder-bottmoのように書く。
つけたい方向によってboder-top、border-right、border-leftが使える。

hoge.css

    .hoge2{
        border-bottom: 1px solid #333;
    }

paddingとmargin

paddingはborderの内側に空白を作る。
marginはborderの外側に空白を作る。
marginもboderの書き方と同様。

静的htmlをwordpress化する方法※編集中

固定ページ

phpファイルの記載内容

<?php get_header(); ?>
<!--header-->
～中略､ここにhtmlを記載する～

<?php get_footer(); ?>

ドメイン直下

wp-content/themes/使用しているテーマ/index.php

ショートコードを埋め込みたい

■元ファイル(固定ページや投稿)
[ショートコード]

■方法
○○.phpに以下記載
<?php echo do_shortcode( '[ショートコード]' ); ?>

今回は、HTMLとCSSを用いて
クリック時にボタンが立体的かつ凹む（押している実感）仕様をまとめます。

ここでポイントとなるのが、
:active,box-shadow,cursorの3つのプロパティになるかと思います。

完成品

下記の流れで完成させます。
あくまで学習した事を詰め込んだので、
必要がないCSSもあるため、そこは各々で取捨選択をお願いいたします。

作成する手順

No.	操作 ファイル	手順
1	HTML＆CSS	Boxを作成する
2	HTML＆CSS	Box内に文字を作成する
3	CSS	Boxの角を丸める
4	CSS	Boxを立体にする
5	CSS	クリック時に凹ませる
6	CSS	カーソル表示を変更する
7	ー	完成です。

それぞれ説明していきます。

1.box作成する （+色をつけます。）(HTML+CSS)

HTMLで、divタブを用いてボックスを作成します。

CSSでは、ボックスのサイズと色を反映させます。
なお、色は、background-colorでできます。

[コード]

box.html

 <div class="box">
 </div>

box.css

 .box {
    width:200px;
    height: 50p;
    background-color: limegreen;
  }

[確認]

2.Box内に文字を入れる。（HTML+CSS）

HTMLで、先ほど作ったボックスの中に
divタブとpタブを用いて文字を入れます。

CSSでは、入れた文字の色や大きさを決めます。

[コード]

index

.html
 <div class="box">
   <div class="box-text">
    <p>登録はこちら</p>
   </div>
 </div>

box.css

.box { ... }  /*略します。*/
.box-text {
  color: white;
  text-align:center;
  line-height: 50px;
  font-size: 16px;
}

[確認]

3.角を丸める (CSS)

手順1で作成したボックスの角を丸めるために、
CSSで、border-radiusを使用します。

[コード]

box.css

.box { 
  width:200px;
  height: 50p;
  background-color: limegreen;
  border-radius: 5px;       
}
.box-text { ... }

[確認]

4.Boxを立体にする（CSS）

ボックスを立体的にするために、
CSSで、box-shadowを使用します。

box-shadowの使い方

box-shadow: 水平方向 垂直方向 色;

コードでは、垂直方向のみですので、
下側にgreenの影ができています。

[コード]

box.css

.box { 
  width:200px;
  height: 50p;
  background-color: limegreen;
  border-radius: 5px;
  box-shadow: 0 7px green; 

}
.box-text { ... }

[確認]

5.クリック時に凹ませる(CSS)

ここで、:activeを使います。

:activeの使い方

.box:active { }
変化させたいセレクタの横につけます。

プロパティは、下記の通りです。

プロパティ	値	意味
position	relative	ボックスと位置関係の紐付け
top	__px	上から下にどのぐらいおろすのか
box-shadow	none	効果を無くす

[コード]

box.css

.box { 
  width:200px;
  height: 50p;
  background-color: limegreen;
  border-radius: 5px;
  box-shadow: 0 7px green; 
}
.box:active {
 position: relative;
 top: 7px;
 box-shadow: none;
}
.box-text { ... }

[確認]

6.カーソル表示を変更する(CSS)

ボックスに、カーソルを合わせた時にカーソルを変化させます。
CSSで、cursorを使用します。

[コード]

box.css

.box { 
  width:200px;
  height: 50p;
  background-color: limegreen;
  border-radius: 5px;
  box-shadow: 0 7px green; 
  cursor: pointer;
}
.box:active { ... }
.box-text { ... }

[確認]

7.完成

完成コードになります。

box.html

box.html

<link rel="stylesheet" href="box.css">

<div class="box">
  <div class="box-text">
   <p>登録はこちら</p>
  </div>
</div>

box.css

box.css

.box {
  width:200px;
  height: 50px;
  background-color: limegreen;
  border-radius: 5px;
  box-shadow: 0 7px green;
  cursor: pointer;
}

.box-text {
  color: white;
  text-align:center;
  line-height: 50px;;
  font-size: 16px;
}

.box:active {
  position: relative;
  top: 7px;
  box-shadow: none;
 }

以上、たにーでした。

サーバ側で何かしらの処理を実行し、その結果に基づいてクライアント側に画像を返したい場合、Codeigniterに用意されている出力クラスを使うと便利です。
※画像以外にも任意のファイル形式を返す場合に有効です

imgタグのsrc属性に直接URLを指定したり、JavaScriptのImageクラスを動的に生成したりするときに使用することで、画像を簡単に表示することができます。
画像のURLのみを返すような処理であれば、画像そのものを返してしまった方が実装コストが低くて済むと思います。

コントローラーのサンプル

※画像（$file_path）は適当に用意してパスを合わせてください。

Image_responder.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Image_responder extends CI_Controller {

    public function get_image()
    {
        $file_path = '/work/sample.png';
        $this->output
        ->set_content_type('jpeg')
        ->set_output(file_get_contents($file_path));
    }
}

HTMLのサンプル

※URLの部分は環境に合わせてください

TEST.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Codeigniter Test</title>
    <style>
        #request {
            display: block;
            padding: 10px;
            margin: auto;
            margin-top: 10px;
        }
        #results {
            display: flex;
            justify-content: center;
            background-color: rgba(0,0,0,.5);
            margin-top: 10px;
            min-height: 64px;
        }
        #results > img {
            width: 64px;
            box-sizing: border-box;
            padding: 5px;
        }
    </style>

    <script type="text/javascript">

        function getImage() {
            const img = new Image();
            img.onload = function (e) {
                document.getElementById('results').appendChild(img);
            };
            img.src = 'http://xxxxx.yyyy.zzz/index.php/Image_responder/get_image';
        }
    </script>

  </head>
  <body>
      <input type="button" value="request" id="request" onclick="getImage();">
      <div id="results"></div>
  </body>
</html>

実行結果イメージ

HTML/CSS復習②からの続きです。

floatの解除

通常、親要素の高さは子要素を包む高さになる。
しかし、子要素が全てfloatの時には、親要素の高さは0になる。
子要素が全てfloatでも親要素が高さを持つように設定する
float: leftは、

CSSファイル

clear: left;

で解除できる。

htmlファイルには、CSSを適用する(clear: left)ための空のタグを用意する。

htmlファイル

<div class="clear"></div> #空のタグ

CSSファイル

.clear {
       clear: left;
}
以上のように設定すると、floatを解除できる。

max-widthの設定

巨大なサイズの画面の時、要素の幅が広がりすぎないように、max-widthを指定する。

CSSファイル

.container {
           max-width: 〇〇px; #画面幅の上限を指定
           width: 100%; その上限内で幅を最大まで広げる
}

要素の表示/非表示

CSSファイル

display: none; #要素を非表示にする
display: block; #非表示にした要素を表示する

display: flex

CSSファイル

display: flex; #指定した要素の子要素が横並びになる

flexbox

CSSファイル

flex: auto; #指定した要素の幅を親要素に合わせて伸縮させることができる
flex-wrap: wrap; #子要素のサイズに応じて折り返すことができる
flex-direction: column; #子要素を上から下に並べる

faviconの設定

favicon・・・ページタイトルのアイコン

htmlファイル

<head>
.
.
<link rel="icon" href="ファイルの場所">
.
.
</head>

文書の説明の記述

インターネットに公開した時に検索エンジンが説明用の文章として使うための文書を記述する

htmlファイル

<head>
.
.
<meta name="description" content="サイトの説明">
.
.
</head>

sectionタグ

sectionタグは汎用的に使えるタグである。

リンクを同じタグではなく、別のタグに開きたい時

aタグ内に target="_blank"を記述する

MDNのサイト

MDNのサイトではHTMLの仕様を確認することができる

デフォルトの余白を確認する

Chromeのデベロッパーツールからボックスモデルを調べることで確認できる

CSS 半角空白と>の違い

CSSファイル

.works h1 {
          #worksクラス内の全てのh1にCSSが適用される
}

.works > h1 {
            #worksクラス内の直下の階層のh1にのみCSSは適用される
}

HTML/CSS復習以上

HTML/CSS復習①からの続きです。

アニメーションを付ける

CSSファイル

transition: 変化の対象(allだと全てのプロパティを指定) 変化の時間(例： 1s = 1秒);

hoverと組み合わせて使うことが多い

CSSファイル

#変化の対象となるところにカーソルを乗せると背景が1秒間赤色に変化する
div {
   transition: 変化の対象(allだと全てのプロパティを指定) 変化の時間(例： 1s = 1秒);
}
div: hover {
          background-color:red;
}

行間の指定

CSSファイル

line-height: 〇〇px;

position: absolute

CSSファイル

position: absolute; #要素同士を重ねて表示できる

CSSファイル

#サイト全体の左上部分を基準に、top, left, right, bottomで位置を指定できる
position: absolute;
top: 〇〇px;
left: 〇〇px;

基準としたい親要素に

CSSファイル

position: relative;

と指定すると、その要素の左上部分が基準となる
(デフォルトはブラウザ全体の左上部分が基準となる)

ボックスに影を付ける

CSSファイル

box-shadow: 〇〇px(水平方向) 〇〇px(垂直方向) 影の色;

cursorプロパティ

CSSファイル

cursor: カーソルの形; #マウスのカーソルが要素に乗った時、カーソルの形を変える

active

CSSファイル

div: active {
            background-color: red;  #セレクタにactiveを用いると、要素がクリックされている間のCSSを適用できる
}

CSSの打ち消し

CSSファイル

.btn-active {
            box-shadow: none; #影を消すことができる
}

ボタンをへこませる

CSSファイル

.btn: active {
             position: relative;
             top: 6px;
             box-shadow: none;
}

ヘッダーを画面上に固定する

CSSファイル

#top, left, right, bottom で位置を指定する
position: fixed;
top: 〇〇px;
left: 〇〇px;
right: 〇〇px;
bottom: 〇〇px;

要素の重なり順を指定する

z-indexプロパティを用いる
整数で指定する。値が大きいほど、上に表示される
*必ず、positionプロパティと併用しないといけない

メディアクエリ

メディアクエリ・・・ ブラウザの画面サイズに応じたCSSスタイルを設定する

メディアクエリ用のCSSファイル

@media(条件: 例えばmax-width: 1000px, min-width: 670px など) {
#ここに、その画面サイズに適用したいCSSを記述する
}

ブレイクポイント

スマートフォン・・・ 670px以下
タブレット・・・ 671px ~ 1000px
PC・・・　1001px以上

box-sizing

CSSファイル

box-sizing: border-box; #要素の幅(width)の合計にpadding, borderが含まれるように指定される

全要素にCSSを適用する

CSSファイル

* {
  box-sizing: border-box; # *(アスタリスク)に対して指定すると全要素にCSSを適用できる
}

レスポンシブデザインの適用準備

＜head＞タグ内にviewportを設定する

htmlファイル

<head>
.
.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
.
.
</head>

メディアクエリ用のCSSファイルを用意する

メディアクエリ用のCSSファイルを用意する(responsive.css)

htmlファイル

<head>
.
.
<link rel="stylesheet" href="responsive.css"> #viewportよりも下の行に記述することに注意
.
.
</head>

続きはHTML/CSS復習③へ

ポートフォリオ作成に向けて、1月中に基礎学習を終わらせます。
まずは、2日ほどで、HTML/CSSの復習をProgate、ドットインストールを用いて行っていきます。
なお、記述する内容は自分は忘れがちな所、苦手な所です。
自分用の備忘録的に投稿していくので(箇条書きで)、読みづらいor間違えていることを書いている可能性もあるので、
悪しからず。
(できるだけ他の方が見てもためになれば良いなとは思って投稿しますが・・・)
箇条書きで書いたことに関して、新たな発見、学び、気づき等あれば、
それぞれ個々に詳細を記述していこうと思います。

フォントの種類を変える

CSSファイル

font-family: フォント名;

フォント名を変えることができる。
フォント名にスペースがある場合はダブルクォーテーションで囲む必要がある。

＜head＞要素の中に記載する主な内容

htmlファイル

<head>
<meta charset="UTF-8"> #文字コード
<title>ページタイトル</title> #ページタイトル
<link rel ="stylesheet" href="stylesheet.css"> #CSSの読み込み
</head>

リストのマークをなくす

CSSファイル

li {
    list-style: none;
}

要素を左から横並びにする

CSSファイル

float: left;

ブロック要素とインライン要素の違い

ブロック要素は、改行される要素であり、親要素の幅一杯に広がる要素である。
(例)div, h1, p

インライン要素は、改行されない要素である。
(例)span, a

要素にボーダー(枠線)を付ける

CSSファイル

border: 線の太さ 線の種類 線の色; #要素が枠線で囲まれる
border-bottom: 線の太さ 線の種類 線の色; #下部に枠線が付く

ボックスモデル

内側からcontent→padding→border→margin
margin, paddingはよくごっちゃになる・・・

input, textarea

＜input＞要素・・・ 1行のテキスト入力(終了タグ不要)
＜textarea＞要素・・・ 複数行のテキスト入力

htmlファイル

<input type="submit"> #送信ボタン(日本語でデフォルトでボタンに表示されるテキストは「送信」)
<input type="submit" value="保存"> #valueを指定するとボタンに表示されるテキストを変更できる

複数のセレクタに同じCSSを適用する

CSSファイル

#セレクタをコンマで区切る
h1, p {
      color: ##ff0000;
}

背景画像を指定する

CSSファイル

div {
    background-image: url(画像のURL);
    background-size: cover; ←#背景画像の表示範囲を1枚の画像で埋め尽くす記述
}

要素を透化する(透明にする)

CSSファイル

opacity: 数値(0.0~1.0);

文字の間隔の指定

CSSファイル

letter-spacing: 〇〇px;

ブロック要素、インライン要素、インラインブロック要素

displayプロパティ

CSSファイル

display: block; #ブロック要素に指定できる
display: inline-block; #インラインブロック要素に指定できる
display: inline; #インライン要素に指定できる

複数クラスの指定

htmlファイル

<div class="クラス名1 クラス名2"> #クラス名を半角スペースで区切って指定する

hover

hover・・・ カーソルが乗った時の状態

CSSファイル

h1: hover {
          background-color: red; #h1要素にカーソルを乗せた時に背景が赤色になる
}

border-radius

CSSファイル

border-radius: 〇〇px; #数値が大きいほど、角は丸くなる

中央寄せについて(margin: 0 auto と text-align: center の使い分け)

CSSファイル

margin: 0 auto; #ブロック要素を中央に配置できる

text-align: center; #テキスト等のインライン要素やインラインブロック要素を中央に配置できる

Font Awesome(アイコンの使用)

①htmlファイルのheadタグ内にFont AwesomeのCSSファイルを読み込むための記述を書く
②spanタグに[faクラス]と [fa-アイコン名 クラス]を指定する

続きはHTML/CSS復習②へ

リンク

怪しさしかありませんねwww

適当な質問

プログレスバーを使って回答を送信、在庫情報の受信をしているように見せかけて

結局リストは１つしかないという

ついさっき実在の人物がコメントしたかのよう

これらすべてがフロントにスタティックに書かれているのが面白いです。

はじめに

前回の続きです。

第4章

URI(Uniform Resource Identifier)について

直訳すると、「統一リソース識別子」
URIを使うことでweb上に存在する全てのリソース(名前を持ったあらゆる情報)を一意に示すことができる

URIの例

http://yohei:pass@blog.example.jp:8000/search?q=test&debug=true#n10

• URIスキーム : http
  URIの始まりであることを示す
  また、そのURIが利用するプロトコルを示すのが一般的
  後ろに続く部分は「://」で区切られる

• ユーザ情報 : yohei:pass
  リソースにアクセスする際のユーザ名とパスワード
  間が「：」で区切られる。また、ない場合もある

• ホスト名 : blog.example.jp
  DNSで名前が解決できるドメイン名かIPアドレスが出現する。
  また、インターネット上で必ず一意である

• ポート番号 : 8000
  ホストにアクセスするときのプロトコルで用いるTCPのポート番号を表す。
  ポート番号が省略されている場合は、各プロトコルのデフォルト値が使われる(HTTPの場合、80番)

• パス : /search
  ディレクトリ階層を表す。ホストの中でリソースを一位に指し示す

• クエリパラメータ : q=test&debug=true
  「?」が付き、"名前=値"形式のクエリ(処理要求を文字列で表したもの)が続く
  複数ある場合、「&」で連結される
  1つ以上のクエリの集合を、「クエリパラメータ」と呼ぶ。検索サービスに検索キーワードを渡す時など、クライアントから動的にURIを生成するときに利用する

• URIフラグメント : #n10
  その前までの文字列で表現するURIが指し示すソース内部の、さらに細かい部分を特定するときに利用する
  「#10」の場合、HTMLでid="n10"である要素までページが移動する

URIは「インターネット上で必ず一意になるホスト名の仕組み」と、「ホスト内で必ず一意になる階層的なパスを組み合わせる」ことで、リソースのURIが世界中のどのリソースのURIとも重複しないような仕組みとなっている

絶対URI,相対URI

絶対パス、相対パスとも呼ぶ
以下の例のように、/(ルート)から記述したパスのことを絶対パスと呼ぶ

/foo/bar/baz

例

現在いるディレクトリ -> /foo/bar/

      ↓現在地↓
[foo]--[bar]--[hoge]--[huga]
     ｜
      ∟[hoge]

相対パス　　　　　絶対パス
hoge　　　　　　 /foo/bar/hoge
hoge/huga      /foo/bar/hoge/huga
./hoge　　　　　 /foo/bar/hoge
../　　　　　　　 /foo
../hoge　　　　　/foo/hoge

ベースURI

相対URIは単体ではどの位置にあるのか解釈することができないので、相対URIの起点となるベースURIを指定する必要がある
上記の場合、ベースURIを「http://example.jp/foo/bar」とすると相対URIの意味が理解できるようになる

URIに利用できる文字

アルファベット(A-Za-z) , 数字(0-9) , 記号 - ~ : @ ! $ & ' )(

%エンコーディング

URI使用が許可している文字以外を、URIに入れることができる
http://ja/wikipedia.org/wiki/あ => http://ja/wikipedia.org/wiki/%E3%81%82
(日本語はURIに入れることができないが、%直後につけることでエンコードしてサーバに転送する)

URIの長さ制限

仕様上は存在しないが、実装上は存在する
IEだと2038バイト程度まで

URIの実装で気をつけること

• 相対URI
  クライアントで相対URIを理解しようと思ったら、面倒な処理が必要となる
  WebサービスやWeb APIを実装する場合は指定がない限りは絶対URIを利用した方がよい

• %エンコーディング
  URIにエンコードされた文字列が複数並ぶと可読性が低下し、非常に分かりづらい
  混乱を避けるため、なるべくUTF-8に対応した文字列を用いた方がよい

第5章

良いURI(クールURI)とは

基本的に「変わらないこと」が好ましい

クールURIを設計するためには

以下の3つを意識する

• 言語に依存した拡張子やパスを含めない
• メソッドやセッションIDを含めない
• リソースを表現する名詞であることを心がける

要するに、シンプルであることが大事

URIのユーザビリティ

シンプルなURIは、ユーザビリティ(使いやすさ、使い勝手)も良い

・複雑なURI
http://example.jp/servlet/LoginServlet

・シンプルなURI
http://example.jp/login

シンプルである方が覚えやすく、開発者ではない普通の人にも使いやすい

URIを変更したい場合

リダイレクト(古いURIから新しいURIに転送させること)処理を記載しておくと、ユーザに配慮が利く

URIのテクニック

・ 拡張子で表現を指定する
「.cgi」「.pl」といった、基本的に実装に依存した拡張子は好ましくない
しかしながら、「日本語か英語かどちらかのページを表示する」といったようなリソースの表現を特定できるような拡張子は、可読性が上がったりと良い作用が起こる

・日本語ページ
http://example.njp/2010/05/01/press.ja

・英語ページ
http://example.njp/2010/05/01/press.en

URIの不透明性

上記のような、言語コードが拡張子でついたページのフランス語版(.fr)のページが欲しい場合
->http://example.njp/2010/05/01/press.frというようなURIではないかと推測できる

しかしながら、用意されているとは限らない
URIをクライアント側で組み立てたり、拡張子からリソースの内容を推測したりすることができないこと = 「URIがクライアントにとって不透明であること」と呼ばれる
設計したクライアントアプリケーションを作る際は不透明性を意識することも大事

終わりに

第2部、URIについてのメモでした。
大変ではありますが、前回同様に文字に起こすことで知識が定着するということはかなり実感できました。

次の第3部はHTTPなんですけど、多分これが一番大変そう・・・

前置き

※ 本記事は「HTML&CSS速習教室」のトップページの内容を抜粋したものになります。

「HTML&CSS速習教室」のトップページ内では、

• HTML&CSS速習教室とは何か
• HTML&CSS速習教室ではどのように学習を進めるか

というのを動画で説明もしております。

HTML&CSS速習教室について、より詳細な情報を知りたい場合は、ぜひ「HTML&CSS速習教室」のトップページもご覧いただけたらと思います^^

• HTML&CSS速習教室

「HTML&CSS 速習教室」について

HTML&CSS 速習教室を運営している「つよぽん（@tsuyopon_xyz）」と申します^^

当サイトはトップ画像にも書いてあるとおり、最短７日で HTML と CSS の「基礎力」と「自走力」を身につけることをコンセプトにした「HTML と CSS の学習サイト」になります。

今まで HTML と CSS を使ったこと無い方でも、最初から順番に学習を進めることで、HTML と CSS を読み書きできるようになります。

学習途中でつまづいてしまい、全く先に進められなくなったとしても、「LINEを使った学習サポート」もしているので、お気軽に質問していただけたらと思います^^

LINE を使った質問の流れは「質問したい場合」のページをご確認ください。

なぜ HTML と CSS を学ぶのか？

HTML と CSS のスキルが身につくことで、次のようなことができるようになります。

• ホームページ制作
• Web アプリ開発
• WordPress のカスタマイズ
• 「アメブロ」「はてなブログ」などのブログサービスのカスタマイズ

逆に言えば、「個人の Web サービスを作りたい」「ホームページ制作の仕事をしたい」「Web アプリ開発の仕事をしたい」と言った人は、HTML と CSS のスキルが必須ということを意味します。

また、Web ページ作りをしない人でも、広告の運用に携わる仕事をしている場合は「数値計測用のタグを HTML に埋め込む」「広告タグを HTML に埋め込む」という作業が出てきます。（例: Google Analytics、Google AdSense などのタグ埋め込み）

つまり、Web サービスの運営に関わる場合、広い範囲で HTML の知識が必要になるということです。

そして、Web サービスの開発をする場合は、さらに CSS の知識も欠かせないことになります。

「自走力」が必要な理由

当サイトでは、HTML と CSS の基礎を学ぶのはもちろん、「自走力」を伸ばしていただくことも重要視しております。

ここで出てきた「自走力」とは、「どうやって実装するかわからないとしても、自分で調べて自分で解決する力」を意味します。

この「自走力」がなぜ必要かというと、実際の開発の仕事では「初めて利用する技術」「新しい概念」を学ぶ場面が頻繁に出てくるからです。

厳しい言い方になるかもしれませんが、「自走力が全くない＝開発でわからないことが出てきても、自分で解決する能力がない」ということを意味します。

学習の段階から「自走力」を鍛えてもらうために、当サイトの後半では細かい解説はせず、自己学習のヒントに繋がる「キーワード」「調べ方」「学習の参考になるサイト」を提示します。

それらの参考資料を元に、「調べる → 実際にコードを書く → 動作を確認する」を繰り返して「自走力」を鍛えていただけたらと思います。

この試行錯誤を繰り返すことで「自走力」が少しずつ鍛えられます。

色々と調べた結果、それでもわからず全く先に進められなくなった場合は、先ほども紹介した「LINEを使った学習サポート」をご利用いただけたらと思います^^

LINE を使った質問の流れは「質問したい場合」のページをご確認ください。

学習の流れ

当サイトでは、次の流れで学習を進めていくことになります。

• 下準備: コーディングを始めるために最低限必要な準備を行う
• １日目: 自分で書いた HTML を Web ブラウザに表示させる体験をする
• ２日目: 最初に抑えておくべき HTML の概念を学ぶ
• ３日目: HTML と CSS を連携させてデザインを変更する体験をする
• ４日目: 最初に抑えておくべき CSS の概念を学ぶ
• ５日目: Amazon の商品一覧のように、一覧表示する方法を学ぶ
• ６日目: パソコン画面とスマホ画面で見た目を切り替える方法を学ぶ
• ７日目: 自分でゼロから CSS を書かなくても、キレイな見た目の Web ページを作ることができる「Bootstrap」の使い方を学ぶ

上記項目を大きく分けると「① コーディング環境の準備」「②HTML の学習」「③CSS の学習」「④ パソコンとスマホに対応した Web ページの作り方」の 4 つのパートで構成されます。

最初から最後まで学習を終えた後は次のいずれか学習に入ると良いでしょう。

• フロントエンドの学習（Web アプリ開発の仕事につながる）
• バックエンドの学習（Web アプリ開発の仕事につながる）
• WordPress の学習（Web 制作の仕事につながる）

「フロントエンドの学習」「バックエンドの学習」「WordPress の学習」で、それぞれ具体的にどんなことを学習すれば良いかわからない場合は、LINEで質問していただけたらと思います^^

LINE を使った質問の流れは「質問したい場合」のページをご確認ください。

【動画】当サイトの紹介

このページにiframeでYouTube動画を埋め込めないため、動画で「HTML&CSS速習教室」の全体像や活用方法を確認したい場合は、「HTML&CSS速習教室」のトップページをご確認いただけたら幸いです^^

• HTML&CSS速習教室

tableの列幅変更を実装したところ、chromeではうまくいくが、
edgeで効かない。。

.customtable thead td{
    resize: horizontal;
    overflow: hidden;
}

<table class="customtable">
<thead >
    <tr>
        <td>HOGE</td>
        <td>FUGA</td>
    </tr>
</thead>
<tbody>
<tr>
    <td>
        <textarea>ほげ</textarea>
    </td>
    <td>
        <textarea>ふが</textarea>
    </td>
</tr>
</tbody>
</table>

chromeだと、サイズ変更用のマークが表示されるが、edgeだとこれが表示されず、
幅変更もできない。
【chromeで確認】

こちらにedgenのバージョン79以降だとOKと書いてある。
https://developer.mozilla.org/ja/docs/Web/CSS/resize

で、自分の環境を調べてみると。ver44だった。。

edgeのバージョンを上げて確認
https://answers.microsoft.com/ja-jp/microsoftedge/forum/msedge_other-msedge_win10/%E3%82%AA%E3%83%95%E3%83%A9%E3%82%A4%E3%83%B3/30cde173-deec-4bc0-a03c-9e1b86f95abe

結果：edgeでもchromeと同様サイズ変更できた。

プログラミング勉強日記

2021年1月25日
数値の桁数の取得方法に困ったので、備忘録として書く。

JavaScriptで数値の桁数を取得する

let number = 12345;
let numberDigit = String(nuber).length;
console.log(numberDigit);   // 5

Javaで数値の桁数を取得する

int number = 12345;
int numberDigit = String.valueOf(number).length();   
System.out.println(numberDigit);  // 5

入力した整数値の桁数を出力するプログラム

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>sample</title>

  <script type="text/javascript">
    //数値から桁数を取得する
    function getNumber() {
        // フォームから数値を取得する
        let inputNumber = document.getElementById("number").value; 
        // 取得した数値から整数部分の桁数を取得する
        let integerDigit = parseInt(inputNumber).toString().length; 
        //　桁数を出力する
        let output = "";
        if (inputNumber > 0) {
            output = integerDigit + "桁";
        }
    document.getElementById("digit").innerHTML = output;
    }
</script>
</head>

<body>
    <form>
        <input type="text" id="number"  onKeyUp="getNumber()">
    </form>
    <p id="digit"></p>
 </body>
</html>

実行結果