Javascript 四角を描画

'use strict';

{
  function draw() {
    const canvas = document.querySelector('canvas');
    if (typeof canvas.getContext === 'undefined') {
      return;
    }
    const ctx = canvas.getContext('2d');

    // ctx.fillRect(50, 50, 50, 50);
    ctx.strokeRect(50, 50, 50, 50);
  }

  draw();
}
body {
  background: #222;
}

canvas {
  background: #fff;
}
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Canvas</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <canvas width="600" height="240">
    Canvas not supported.
  </canvas>

  <script src="js/main.js"></script>
</body>
</html>

MySQL 関数

DROP TABLE IF EXISTS posts;
CREATE TABLE posts (
  id INT NOT NULL AUTO_INCREMENT,
  message VARCHAR(140),
  likes INT,
  PRIMARY KEY (id)
);

INSERT INTO posts (message, likes) VALUES
  ('Thanks', 12),
  ('Merci', 4),
  ('Arigato', 4),
  ('Gracias', 15),
  ('Danke', 8);

-- + - * / %

SELECT
  likes * 500 / 3 AS bonus,
  FLOOR(likes * 500 / 3) AS floor,
  CEIL(likes * 500 / 3) AS ceil,
  -- ROUND(likes * 500 / 3) AS round
  ROUND(likes * 500 / 3, 2) AS round
FROM
  posts;

MySQL NULL

DROP TABLE IF EXISTS posts;
CREATE TABLE posts (
  id INT NOT NULL AUTO_INCREMENT,
  message VARCHAR(140),
  likes INT,
  PRIMARY KEY (id)
);

INSERT INTO posts (message, likes) VALUES
  ('Thanks', 12),
  ('Arigato', 4),
  ('Merci', NULL),
  ('Gracias', 15),
  ('Danke', NULL);

-- SELECT * FROM posts;
-- SELECT * FROM posts WHERE likes != 12;
-- SELECT * FROM posts WHERE likes != 12 OR likes IS NULL;
SELECT * FROM posts WHERE likes IS NOT NULL;

MySQL SELECT

DROP TABLE IF EXISTS posts;
CREATE TABLE posts (
  id INT NOT NULL AUTO_INCREMENT,
  message VARCHAR(140),
  likes INT,
  PRIMARY KEY (id)
);

INSERT INTO posts (message, likes) VALUES
  ('Thanks', 12),
  ('Arigato', 4),
  ('Merci', 4),
  ('Gracias', 15),
  ('Danke', 23);

-- SELECT * FROM posts;
-- SELECT id, message FROM posts;

-- > >= < <=
-- SELECT * FROM posts WHERE likes >= 10;

-- = != <>
SELECT * FROM posts WHERE message = 'Danke';
SELECT * FROM posts WHERE message != 'Danke';
SELECT * FROM posts WHERE message <> 'Danke';

Java  配列と反復処理

import java.util.Scanner;

public class MyApp {
  public static void main(String[] args) {
    int[] scores = {70, 90, 80, 60};
    // System.out.println(scores[0]);
    // System.out.println(scores[1]);
    // System.out.println(scores[2]);
    // for (int i = 0; i < 3; i++) {
    for (int i = 0; i < scores.length; i++) {
      System.out.println(scores[i]);
    }
  }

Bootstrapフッターを配置

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <title>My Site</title>
</head>

<body>
    <header class="bg-primary text-center text-light p-5">
        <h1 class="fs-3">My Admin</h1>
    </header>

    <div class="container mt-5">
        <section class="row">
            <section class="col-md-4 mb-5">
                こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
            </section>
            <section class="col-md-8">
                こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
            </section>
        </section>
    </div>

    <footer class="bg-secondary text-center text-light p-5 mt-5">
        (c) chodomeyuhei
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
        crossorigin="anonymous"></script>
</body>

</html>