投稿日：2021-01-01T22:08:12+09:00

迎春なので鏡餅をCSSで作った

どうも7noteです。お正月にふさわしいアレをCSSで作りました。

ソース

index.html

<div class="kagamimochi">
  <div class="mikan"></div>
  <div class="mochi1"></div>
  <div class="mochi2"></div>
  <div class="kami"></div>
</div>

style.css

.kagamimochi {
  width: 100px;
  text-align: center;
}
.mikan {
  width: 50px;
  height: 40px;
  background: #e88522;
  border-radius: 50%;
  position: relative;
  z-index: 10;
  display: inline-block;
}
.mikan::after {
  content: "";
  width: 15px;
  height: 5px;
  background: linear-gradient(#4f9c5d 50%, #6cb576 50%);
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  top: 0;
  right: 10px;
  transform: rotate(-20deg);
  display: inline-block;
}
.mochi1 {
  width: 80px;
  height: 40px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 50%;
  display: inline-block;
  margin-top: -15px;
  position: relative;
  z-index: 5;
}
.mochi2 {
  width: 100px;
  height: 50px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 50%;
  display: inline-block;
  margin-top: -20px;
  position: relative;
  z-index: 4;
}
.kami {
  width: 92px;
  height: 92px;
  background: #fff;
  border: 5px solid #f00;
  transform: rotateX(45deg) rotateZ(45deg);
  display: inline-block;
  margin-top: -75px;
  position: relative;
  z-index: 1;
}

まとめ

かんたんなイラストならCSSでなんでもできそうな気がしてきますね。
まぁ流行りはSVGのような気もします。。。
また思いついたら他のものも作ってみたいと思います。

おそまつ！

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

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-01T20:47:55+09:00

Emmetの記法について

説明

Emmetは、HTMLやCSSを効率的に記述するためのプラグインです。初めのうちはプログラミングの学習に集中し、このような記法があることに気が付きませんでした。以下に使用例を記載します。tabキーを押すことで展開されます。

●HTMLの場合

!
<!DOCTYPE html>
<html lang=“ja”>
<head>
  <meta charset=“UTF-8”>
  <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
  <title>Document</title>
</head>
<body>
</body>
</html>
div
<div></div>
a
<a href=“”></a>
div#top
<div id=“top”></div>
div.container
<div class=“container”></div>
div#section.btn.twitter
<div id=“section” class=“btn twitter”></div>
p{hello}
<p>hello</p>
p*3
<p></p>
<p></p>
<p></p>
div.item*4
<div class=“item”></div>
<div class=“item”></div>
<div class=“item”></div>
<div class=“item”></div>
ダミー文章を入力する事もできます。

<p>lorem</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum illum reprehenderit vel rem mollitia, consequatur facilis sapiente earum, voluptatem veritatis officia iusto debitis expedita ducimus excepturi omnis quas voluptas nostrum?</p>
●CSSの場合

m
margin: ;
p
padding: ;
ピクセルを指定することでもできます。

m10
margin: 10px;
m10-20-30
margin: 10px 20px 30px;
他にも以下のように、省略して記述することも出来ます。

bgc
background-color: #fff;
fsz
font-size: ;
pos
position: relative;
このようにEmmetを使用すればコーディングが捗ります。

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-01T16:22:16+09:00

MySQLデータテーブルにPHPで作成したフォームのデータを書き込む

参考

・https://qiita.com/ho-gaku/items/914e80a955b510538377
・https://qiita.com/harufuji/items/d033d3480a0c791973ae

手順

前回同様に、
1.データベースに接続
2.接続エラー処理
3.テーブルデータ取得
4.表示処理
5.データベース接続終了

新たに、
1.フォーム作成
2.フォームに入力されたデータを受け取ってDBに接続し書き込む。

前回のコードサンプル

<?php

$link = mysqli_connect('localhost', 'root', ''   ,'eccube001');
//　　　　　　　　　　　↑host　　↑USER  ↑PW(空白)    ↑DB名前
// 接続状況をチェックします
if (mysqli_connect_errno()) {
    die("データベースに接続できません:" . mysqli_connect_error() . "\n");
}else {
    echo "データベースの接続に成功しました。\n";
}

print "<br>";

// ステータスの一覧を表示する
$query = "SELECT * FROM mtb_order_status;";
//　　　　　↑まずはサンプルで固定のSQLを入れる（サンプル・動作確認としてこのまま）
// クエリを実行します。
if ($result = mysqli_query($link, $query)) {
    echo "SELECT に成功しました。\n";

print "<br>";

    foreach ($result as $row) {
        var_dump($row);

    }
}else{
    echo "SQL実行に失敗しました。\n";
}

// 接続を閉じます
mysqli_close($link);

?>

今回

銀行口座の入出金の機能を最終的に作成するために、今回は銀行口座開設フォームを作成する。

銀行口座に必要な機能

・口座開設フォーム
・入出金を記録、確認できる

DBに書き込む

前回と同様に、DBに接続します。そして、フォームに入力されたデータをPOSTで受け取ってDBに接続しinsertで書き込む。

$link = mysqli_connect('localhost', 'root', ''   ,'AIBANK');
if (isset($_POST['send']) === true) {
    $number= htmlspecialchars(trim($_POST["number"]));
    $type = htmlspecialchars(trim($_POST["type"]));
    $name_full= htmlspecialchars(trim($_POST["name_full"]));
    $name_kana = htmlspecialchars(trim($_POST["name_kana"]));
    print($name_full);

    $query = "INSERT INTO account_170(number, type, name_full, name_kana, create_date,flg_active) VALUES ('$number','1','$name_full', '$name_kana',CURRENT_TIMESTAMP,'1');";
}

ステータスを表示する

テーブルデータを取得、表示しinsertされたデータをここに表示する。

$query = "SELECT * FROM account_170;";

if ($result = mysqli_query($link, $query)) 
    print "<table border=''>";

    foreach ($result as $row) {        

        print "<tr>";

        print "<td>" . $row["number"] . "</td>";
        print "<td>" . $row["type"] . "</td>";
        print "<td>" . $row["name_full"] . "</td>";
        print "<td>" . $row["name_kana"] . "</td>";
        print "<td>" . $row["create_date"] . "</td>";
        print "<td>" . $row["flg_active"] . "</td>";

        print "</tr>\n";

    }


print "</table>";    

mysqli_close($link);
print "<hr>";
?>

入力フォームを作成する

htmlでフォームを作成する

<body>
    <form action="" method="post">
        <h2>口座番号登録フォーム</h2>
        <p>口座番号 :
        <input type="text" id="number" name="number" size="60" placeholder="2020112"> 
        </p>
        <p>
            預金種別 : 
            <input type="radio" id="type" name="type" value="1">普通預金
            <input type="radio" id="type" name="type" value="2">当座預金
        </p>
        <p>
            <label>預金者名 : </label>
            <input type="text" id="name1" name="name1" size="60" placeholder="山田太郎"> 
        </p>
        <p>
            預金者名(かな) :
            <input type="text" id="name2" name="name2" size="60"placeholder="ヤマダタロウ">
        </p>
        <p><input type="submit" name ="send" value="口座開設を登録する" onclick="clickbtn()"></p>
    </form>


</body>

サンプルコード

銀行口座開設フォームが完成

<!DOCTYPE html>
<html lang="ja">



<?php
$link = mysqli_connect('localhost', 'root', ''   ,'AIBANK');
if (isset($_POST['send']) === true) {
    $number= htmlspecialchars(trim($_POST["number"]));
    $type = htmlspecialchars(trim($_POST["type"]));
    $name_full= htmlspecialchars(trim($_POST["name_full"]));
    $name_kana = htmlspecialchars(trim($_POST["name_kana"]));
    print($name_full);

    $query = "INSERT INTO account_170(number, type, name_full, name_kana, create_date,flg_active) VALUES ('$number','1','$name_full', '$name_kana',CURRENT_TIMESTAMP,'1');";
}


if ($result = mysqli_query($link, $query)) {
    echo "成功しました。\n";
    print "<br>";
}else{
    echo "失敗しました。\n";
    print "<br>";
}
$query = "SELECT * FROM account_170;";

if ($result = mysqli_query($link, $query)) 
    print "<table border=''>";

    foreach ($result as $row) {


        print "<tr>";

        print "<td>" . $row["number"] . "</td>";
        print "<td>" . $row["type"] . "</td>";
        print "<td>" . $row["name_full"] . "</td>";
        print "<td>" . $row["name_kana"] . "</td>";
        print "<td>" . $row["create_date"] . "</td>";
        print "<td>" . $row["flg_active"] . "</td>";



        print "</tr>\n";





    }


print "</table>";    

mysqli_close($link);
print "<hr>";
?>



<body>
    <form action="" method="post">
        <h2>口座番号登録フォーム</h2>
        <p>口座番号 :
        <input type="text" id="number" name="number" size="60" placeholder="2020112"> 
        </p>
        <p>
            預金種別 : 
            <input type="radio" id="type" name="type" value="1">普通預金
            <input type="radio" id="type" name="type" value="2">当座預金
        </p>
        <p>
            <label>預金者名 : </label>
            <input type="text" id="name1" name="name1" size="60" placeholder="山田太郎"> 
        </p>
        <p>
            預金者名(かな) :
            <input type="text" id="name2" name="name2" size="60"placeholder="ヤマダタロウ">
        </p>
        <p><input type="submit" name ="send" value="口座開設を登録する" onclick="clickbtn()"></p>
    </form>



</body>

</html>

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-01T15:46:56+09:00

html, javasript, jquery とSakura Editor

初めに

　Sakura EditorでHTMLページを保存する。

Sakura Editorのダウンロード

https://sourceforge.net/projects/sakura-editor/

HTMLページを保存する

<html>

  <head>
    <title>タイトル</title>
  </head>

  <body id="main-id">
      <div>サンプルテキスト</div>
  </body>

</html>

HTMLで保存して、実行する

jQueryの追加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

jQueryのロード（HTMLを読み込んでからjQueryの処理を開始）

    <script> 
        $(document).ready(function(){
            //マインオブジェクト
            var $main  = $("#main-id");

            //divを追加
            var $div = $("<div>").html("サンプルテキスト２");

            //親オブジェクトに子オブジェクトを追加
            $main.append($div);
        });
    </script>

結果

以上

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-01T13:16:17+09:00

Chromeの謎挙動であけおめ

次のコードをChromeかEdgeで実行してほしい

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <style>
    body {
        position: relative;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    #hinode {
        position: absolute;
        width: 1000px;
        background-color: aqua;
    }
    #fujisan {
        position: fixed;
        width: 1000px;
        height: 600px;
    }
    #minaide {
        position: fixed;
        top: 605px;
        width: 1000px;
        height: 1545px;
        background-color: white;
    }
    #expect-width {
        position: fixed;
        left: 1000px;
        width: 5px;
        height: 600px;
        background-color: black;
    }
    #expect-height {
        position: fixed;
        top: 600px;
        width: 1000px;
        height: 5px;
        background-color: black;
    }
    </style>
</head>
<body>
    <svg id="hinode" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <text x="10" y="0" font-size="4">1. ブラウザのサイズを右と下の黒線に合わせる。</text>
        <text x="10" y="10" font-size="4">2. F5キーを押す。</text>
        <circle cx="50" cy="50" r="8" fill="#f00" />
        <text x="20" y="50" font-size="5">2021年</text>
        <text x="62" y="50" font-size="5">あけおめ</text>
    </svg>
    <svg id="fujisan" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <polyline points="0 100, 30 50, 70 50, 100 100" fill="#00f" />
        <polyline points="30 50, 27 55, 73 55, 70 50" fill="#fff" />
        <polyline points="27 55, 34.5 63, 42 55, 49.5 63, 57 55, 64.5 63, 73 55" fill="#fff" />
    </svg>
    <div id="expect-width"></div>
    <div id="expect-height"></div>
    <div id="minaide"></div>
    <script>
    (function() {
        $("#hinode").height("3000px");
        $("#hinode").css("top", "-850px");
    })();
    </script>
</body>
</html>

何が言いたいの？

F5押してんのに画面が初期表示と違うってすごくね？
（cookie未使用、F5キー押下イベント上書きなし）

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-01T01:46:04+09:00

打倒レンダリングブロック！（JavaScript編）

はじめに

CSSやJavaScriptなどの読み込み方法（記述）によってはレンダリングを妨げることとなります。
本記事ではJavaScriptの読み込み（記述）に焦点を当てて、レンダリングブロックの対策について説明します。

レンダリングブロック対策の基本はHTMLをとにかく速く出力することです。
この前提をもとに、対策方法について説明できればと思います。

レンダリングの基本

ブラウザにおけるレンダリングの流れは大まかに以下のようになります。

HTMLをパース。

DOMツリーを構築する。

CSSのマークアップからCSSOMツリーを構築する。

JavaScriptを実行する。

DOMとCSSOMを組み合わせてレンダリングツリーを構成する。

各ノードのビューポート内での正確な位置とサイズをレイアウトする。

各ノードを画面に描画する。

ページにアクセスしてからデータを読み込んで描画するまでの処理手順をクリティカルレンダリングパスといいます。このフローを最適化することがレンダリングブロックへの対策となり、JavaScriptの読み込み方ひとつで最適化できます。

では具体的にどういったことに気をつければ良いのか、3つに分けて紹介します。

推奨パターン

アンチパターン

ケースバイケース

推奨パターン

async・defer属性で読み込み

記述に属性がない場合、途中でリソースを見つけるとパースを中断しリソースの読み込み・実行を行います。（これが所謂レンダリングブロックです。）
async・defer属性を付けることで非同期で（HTMLのパース/DOM構築を阻害することなく）読み込めます。
ただし非同期で行われるのは読み込みのみで、リソースの実行はパースが中断されます。

async・deferの違いはJavaScriptの実行タイミングにあります。

async：リソースが読み込まれた直後に実行されます。
defer：HTMLパース完了後（DOMContentLoadedの直前）に実行されます。

async属性の特徴
<head>
  <script src="foo.js" async></script>
  <script src="bar.js" async></script>
</head>
<body>...</body>
非同期で読み込まれたあと即座に実行されます。読み込まれたものから実行されるため順番が担保されません。

トラッキングコード/計測タグなど、他のJavaScriptに依存しないファイルの読み込みに使用。

</body>直前の読み込みでは非同期の利点が活かされないため、<head>内で読み込むこと。

defer属性の特徴
<head>
  <script src="foo.js" defer></script>
  <script src="bar.js" defer></script>
</head>
<body>...</body>
非同期で読み込まれ、HTMLパース完了後（DOMContentLoadedの直前）に実行されます。記載している順番に実行されます。

DOMに依存する、他のJSに依存するファイルの読み込みに使用。

</body>直前の読み込みでは非同期の利点が活かされないため、<head>内で読み込むこと。

アンチパターン

インラインJS
<head>
  <script>
  setTimeout(function() {document.body.appendChild(document.createElement("div")}, 1000);
  </script>
</head>
<body>
  <p>テキスト1</p>
  <script>
  setTimeout(function() {document.body.appendChild(document.createElement("div")}, 1000);
  </script>
  <p>テキスト2</p>
</body>
推奨しない理由

<script>タグ以降のDOMの構築をブロックしてしまう。

HTML文書のサイズを肥大化させてしまう。

ブラウザのローカルキャッシュが効かない。

属性無しで読み込み
<head>
  <script src="foo.js"></script>
</head>
<body>
  <p>テキスト</p>
</body>
推奨しない理由

<script>タグ以降のDOMの構築をブロックしてしまう。

</body>の直前で読み込み
<head>...</head>
<body>
  <p>テキスト</p>
  <script src="foo.js" async></script>
</body>
推奨しない理由

<script>タグ以降のDOMの構築をブロックしてしまう。

async・defer属性を付けても、パース終了間近に読み込みを開始するため非同期の利点が活かされない。

async・defer属性を両方指定
<head>
  <script src="foo.js" async defer></script>
</head>
<body>...</body>
推奨しない理由

syncに対応していないブラウザはdeferで読み込む記述方法だが、現在そんなブラウザはない。

link rel preloadで読み込み
<head>
  <script src="foo.js"></script>
  <link rel="preload" as="script" href="bar.js">
</head>
<body>...</body>
推奨しない理由

async・deferで代替できる。

ブラウザに依存する記述（IE・FireFoxでは使えない）。

ケースバイケース

Script-injectedでの読み込み

Script-injectedは外部リソース読み込みのソースコードを出力するインラインJSです。（以下の記述を参照）

Script-injected 実行前
<head>
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXXXX');</script>
</head>
<body>...</body>
Script-injected 実行後
<head>
<script async src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXX"></script>
</head>
<body>...</body>
推奨しない理由

非同期読み込みを実現できるが、インラインJSのため基本は使用しない。

Google Tag Managerなどはこのような仕組みだが、計測イベントのタイミングがシビアでなければ外部ファイルにしてasync・defer属性での読み込みも検討するとベター。

まとめとポイント

async・defer属性を使用して<head>内で読み込む。（deferは実行順序を保証するが、asyncは保証しない）

インラインJSを記述しない。

Google Tag Managerなどトラッキングコード/計測タグはケースバイケース。

JavaScriptは複数ファイルに分けずに出来る限り結合・圧縮する。（肥大化しすぎるのも問題なので適宜調整する）

参考URL

フロントエンドのパフォーマンスを徹底解説！ブラウザの気持ちで理解するHTML/Javascript/CSSの話
https://techblog.raccoon.ne.jp/archives/53180280.html

rel=”preload”を極めるために必要な2種類のプリロード機能
https://techblog.raccoon.ne.jp/archives/1575956867.html

JavaScript ファイルの読み込みと実行のタイミングを調べる(async, defer)
https://misc.laboradian.com/js-async/1/

　 Tweet
Qiitaで続きを読む

20210101のHTMLに関する記事は6件です。

迎春なので鏡餅をCSSで作った

どうも7noteです。お正月にふさわしいアレをCSSで作りました。

ソース

まとめ

おそまつ！

Emmetの記法について

説明

●HTMLの場合

●CSSの場合

MySQLデータテーブルにPHPで作成したフォームのデータを書き込む

参考

手順

前回のコードサンプル

今回

銀行口座に必要な機能

DBに書き込む

ステータスを表示する

入力フォームを作成する

サンプルコード

html, javasript, jquery とSakura Editor

初めに

Sakura Editorのダウンロード

HTMLページを保存する

jQueryの追加

jQueryのロード（HTMLを読み込んでからjQueryの処理を開始）

Chromeの謎挙動であけおめ

次のコードをChromeかEdgeで実行してほしい

何が言いたいの？

打倒レンダリングブロック！（JavaScript編）

はじめに

レンダリングの基本

推奨パターン

async・defer属性で読み込み

async属性の特徴

defer属性の特徴

アンチパターン

インラインJS

属性無しで読み込み

</body>の直前で読み込み

async・defer属性を両方指定

link rel preloadで読み込み

ケースバイケース

Script-injectedでの読み込み

まとめとポイント

参考URL

日付別

タグ一覧

`</body>`の直前で読み込み