HTML , CSS , JavaScript - 流行の科学技術を勝手に追いかけるブログ人工知能仮想現実ブロックチェーン

htmlからjsを動かす方法

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>Document</title>
</head>
<body class="bg-light">
    <div class="container w-75">
        <h1 class="text-center text-info my-4">TODO</h1>
        <h2 id="dinner">今日のディナーは</h2>
        <form id="form" class="mb-4">
            <input type="text" id="input" class="form-control" placeholder="今日の気分は"
            autocomplete="off">
        </form>
    </div>

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

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<h2 id="dinner">今日のディナーは</h2>

<input type="text" id="input" class="form-control" placeholder="今日の気分は"

autocomplete="off">

</form>

</div>

</body>

</html>

index.js

console.log("今日のディナーは");
document.getElementById("dinner").addEventListener("click", function() {
    document.getElementById("dinner").textContent = "かつどん"
    confirm("aaa")
    confirm("bbb")
});

console.log("今日のディナーは");

document.getElementById("dinner").addEventListener("click", function() {

document.getElementById("dinner").textContent = "かつどん"

confirm("aaa")

confirm("bbb")

});

Flaskを使ってみる

まずはwebアプリフレームワークであるFlaskをインストール

$pip install Flask

2.0.1 が入りました.

次にjinja2もインストールします。

HTMLにpythonを埋め込むテンプレートエンジンというものらしい。

$pip install jinja2

3.0.1 が入っていました。入れた記憶がないが、Flaskをインストールすると勝手にはいるのかな？

構成は

flaskr>templates>index.html, xxx.html

flaskr>__init__.py, main.py, yyy.py

の２系統ある感じする。templatesは決まりなのでフォルダ名を変えてはいけない。

フォルダ構成を作ったらindex.htmlを書いていきましょう。vs code を使っているなら　!　を打つだけで、下のコードが自動的に生成されて便利です。langはenからjaに変えておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

ボディには下記のようなのを入れておきました。

<body>
    <h1>Flaskの使い方</h1>
    <h2>最新情報</h2>
    <p>まだ記事はありません。</p>
</body>

<body>

<h1>Flaskの使い方</h1>

<p>まだ記事はありません。</p>

</body>

次、__initi__.pyです。

意味わからないけど、下記のような呪文を書きます。

インポートするのはflaskモジュールではなくて自分で作ったflaskrです。

from flask import Flask

app = Flask(__name__)

from flask import Flask

app = Flask(__name__)

appはFlaskアプリケーションオブジェクト　というらしいです。

つぎに、main.pyです。今作ったFlaskアプリケーションオブジェクトをインポートします。

トップページ(‘/’)にアクセスしたときに実行する関数を定義します。

# さっき __init__.pyで作ったFlaskインスタンス appをインポートする
# なんでオブジェクトがインポートの対象になるのかは不明
from flaskr import app

# ルーティングという呪文。Flaskの決まりごと。
@app.route('/') # / はルートで、トップURLを表す。
def index():
    # トップ画面にアクセスしたときに実行される
    pass # とりあえずパス

# さっき __init__.pyで作ったFlaskインスタンス appをインポートする

# なんでオブジェクトがインポートの対象になるのかは不明

from flaskr import app

# ルーティングという呪文。Flaskの決まりごと。

@app.route('/') # / はルートで、トップURLを表す。

def index():

# トップ画面にアクセスしたときに実行される

pass # とりあえずパス

トップページにアクセスしたときに、render_templateメソドを使って、index.htmlが表示するようにしましょう。

from flaskr import app

# レンターテンプレートをインポートする
from flask import render_template

@app.route('/')
def index():
    # トップ画面にアクセスしたときに実行される
    return render_template('index.html')

from flaskr import app

# レンターテンプレートをインポートする

from flask import render_template

@app.route('/')

def index():

# トップ画面にアクセスしたときに実行される

return render_template('index.html')

最後に__init__.pyの方にこのmain.pyを呼び出せるようにしておく。

from flask import Flask

app = Flask(__name__)
print(app)

# main.pyをインポートする
import flaskr.main

from flask import Flask

app = Flask(__name__)

print(app)

# main.pyをインポートする

import flaskr.main

さて実行しよう

Flaskアプリの起動方法

CMDの場合

flaskrが入っているフォルダへcd で移動する

set FLASK_APP=flaskr

set FLASK_ENV=development

ここまではできた

flask run　でエラー

powershellの場合

flaskrが入っているフォルダへcd で移動する

env:FLASK_APP=”flaskr”　ですでにエラー

どうしようもない。ﾀﾞﾚｶﾀｽｹﾃ

で、結局どうしたかというと、flask runができないので、直接python main.py　して動かせるようにした。

そうすると、flaskrフォルダの上位へ移動する必要なくなる。

そもそも__init__.pyのimport flaskr.mainも意味わからんし、やめた。

もともと__init__.pyに入れていた app=Flask(__name__)もmain.pyに移動した。

で、最後にapp.run()を入れると、python main.py　で実行できたから、ひとまずは良しとしよう。

from flask import Flask
from flask import render_template

app = Flask(__name__)

# ルーティングという呪文。Flaskの決まりごと。
@app.route('/') # / はルートで、トップURLを表す。
def index():
    # トップ画面にアクセスしたときに実行される
    return render_template('index.html')

app.run()

from flask import Flask

from flask import render_template

app = Flask(__name__)

# ルーティングという呪文。Flaskの決まりごと。

@app.route('/') # / はルートで、トップURLを表す。

def index():

# トップ画面にアクセスしたときに実行される

return render_template('index.html')

app.run()

JavaScript:基本

基本をはるだけです。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="sample">サンプル</div>
    
    <script src="js/app.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

/*
//データ型
String 文字列
Number 数値
Boolean true false
Symbol インスタンスが固定で不変となるデータ型
null null値
undefined 定義がない状態
Object 上記以外の特殊なデータ型

//エスケープシーケンス
\n 改行する
\t タブを入れる
\" ""で囲まれた文字列中に"をいれる
\' "で囲まれた文字列中に'をいれる
\\ 文字列中にバックスラッシュを入れる

//ダイアログ
alert('');
confirm('');
prompt('');

//変数
let v = 100;
const human = 'Mike';
console.log('値を表示 : ', v);
console.log('名前を表示 : ', human);

//BMI プログラム

let height = prompt('身長を入力してください cm : ');
let weight = prompt('体重を入力してください kg : ');

let bmi = weight / (height * height);
console.log(bmi);
alert('あなたのBMIは : ' + bmi + ' です');




//条件分岐
let money = prompt('Input your money.');
money = parseFloat(money)

if (money > 800){
    alert('You are a rich man!');
}
else if(money > 500){
    alert('Your are a middle class man.');
}
else{
    alert ('You are a poor man.');
}

//厳密に等しい場合 === 厳密に等しくない場合 !== を使おう
//and && / or || / not ! 


// ランダム
let num_rand = Math.random() // 0 to 1
console.log(num_rand)

let num10 = num_rand * 10 // 0 to 1
console.log(num10)

let num_int = parseInt(num10) // 0 to 1
console.log(num_int)

//関数定義
function print_num(x, y){
    console.log(x+y);
}

print_num(100, 200);

//while文
let cnt = 0
while (cnt < 10){
    console.log(cnt);
    cnt= cnt + 1;
}

//do while文
let cnt_do = 0;
do {
    console.log(cnt_do);
    cnt_do = cnt_do + 1
}while(cnt_do < 10);

//for文
for (let i = 0; i <=10; i++) {
    console.log(i);
}
*/
//cssの操作

function change_innerhtml(element){
    let new_text = prompt('書き換えたい文字を入れてください ： ')
    element.innerHTML = new_text;
    console.log(element.innerHTML)
    return element.innerHTML
}
let element = document.getElementById('sample')
//console.log(element);           //<div id="sample">サンプル</div>
//console.log(element.innerHTML); //サンプル
//console.log(element.innerText); //サンプル

element.addEventListener('click', change_innerhtml);

//element.innerHTML = change_innerhtml(element)

100

101

102

103

104

105

106

107

108

109

110

//データ型

String 文字列

Number 数値

Boolean true false

Symbol インスタンスが固定で不変となるデータ型

null null値

undefined 定義がない状態

Object 上記以外の特殊なデータ型

//エスケープシーケンス

\n 改行する

\t タブを入れる

\" ""で囲まれた文字列中に"をいれる

\' "で囲まれた文字列中に'をいれる

\\ 文字列中にバックスラッシュを入れる

//ダイアログ

alert('');

confirm('');

prompt('');

//変数

let v = 100;

const human = 'Mike';

console.log('値を表示 : ', v);

console.log('名前を表示 : ', human);

//BMI プログラム

let height = prompt('身長を入力してください cm : ');

let weight = prompt('体重を入力してください kg : ');

let bmi = weight / (height * height);

console.log(bmi);

alert('あなたのBMIは : ' + bmi + ' です');

//条件分岐

let money = prompt('Input your money.');

money = parseFloat(money)

if (money > 800){

alert('You are a rich man!');

}

else if(money > 500){

alert('Your are a middle class man.');

}

else{

alert ('You are a poor man.');

}

//厳密に等しい場合 === 厳密に等しくない場合 !== を使おう

//and && / or || / not !

// ランダム

let num_rand = Math.random() // 0 to 1

console.log(num_rand)

let num10 = num_rand * 10 // 0 to 1

console.log(num10)

let num_int = parseInt(num10) // 0 to 1

console.log(num_int)

//関数定義

function print_num(x, y){

console.log(x+y);

}

print_num(100, 200);

//while文

let cnt = 0

while (cnt < 10){

console.log(cnt);

cnt= cnt + 1;

}

//do while文

let cnt_do = 0;

do {

console.log(cnt_do);

cnt_do = cnt_do + 1

}while(cnt_do < 10);

//for文

for (let i = 0; i <=10; i++) {

console.log(i);

}

//cssの操作

function change_innerhtml(element){

let new_text = prompt('書き換えたい文字を入れてください： ')

element.innerHTML = new_text;

console.log(element.innerHTML)

return element.innerHTML

}

let element = document.getElementById('sample')

//console.log(element); //<div id="sample">サンプル</div>

//console.log(element.innerHTML); //サンプル

//console.log(element.innerText); //サンプル

element.addEventListener('click', change_innerhtml);

//element.innerHTML = change_innerhtml(element)

WordPressもHTMLだから　ちゃんとタグは守ろう(´・ω・`)

こんにちは　圧倒的　かずまなぶ　(´・ω・`)です。

いままで見出し部分は、見やすさで”引用”を使っていました。

でも、それはHTML的には邪道なので、ここからはちゃんとしていこうと思います。

<h2>大見出し１</h2>

下のimageに意味はありません。

基本構造は

<a href=”https://○○”></a>で画像に対してリンクを貼ります。
この<a>タグのパラメータとして target=”_blank”　を追記し、別タブで開くようにします。
その中に<img src=”https://○○.jpg”>で画像を入れます。
画像タグの内部には画像サイズを指定するwidth=”300″ height=”225″ を入れます。

<a href=”https://toyo-interest.com/wp-content/uploads/2019/01/old_map.jpg”><img class=”aligncenter wp-image-902 size-medium” src=”https://toyo-interest.com/wp-content/uploads/2019/01/old_map-300×225.jpg” alt=”” width=”300″ height=”225″ /></a>

<h3>中見出し１－１リストの構造</h3>

<p1>ここは段落。文章を書いていく場所</p>

<ul><li>ここはun-order-list（順番なしのリスト項目）</li>
<li>ここはun-order-list（順番なしのリスト項目）</li></ul>

<p1>ここはparagraph（段落）。文章を書いていく場所</p>

<ol><li>ここはorder-list（順番ありのリスト項目）</li>
<li>ここはorder-list（順番ありのリスト項目</li></ol>

<h3>中見出し１－２効果的なリンクの貼り方</h3>

２つあるので比較してみましょう。

<h4>中見出し１－２－１アンカーテキスト</h4>

テキストを書いて、それにリンクを貼ります。

例えば < グーグル >

でもなんか寂しいですね。次回はテーマを変更してみます。

webサイトの作り方の基本を再確認

こんにちは、かずまなぶです、２０１９年　あけましておめでとうございます。

初心に帰りまして、いままで乱雑に学んできてしまった、webサイトの作り方の基本を今一度確認しようと思います。

基本要素をふんだんに使ったHTMLサンプルコード

<!DOCTYPE html>
<!-- this html code is a format for making website -->
<html>
  <head>
    <meta charset="UTF-8">
    <title>fill the title here</title>
    <meta name="description" content="introduction of this web-site here">
    <meta name="keywords"
          content="keyword,keyword,keyword,keyword,keyword,keyword">
    <meta name="author" content="write the author here">
    <link rel="stylesheet" media="all" href="css/style.css" type-"text/css">
  </head>
  
  <body>
    <header>
      <h1 style="color:red;">Self Introduction</h1>
      <h2 style="color:blue;">I am a mechanical engineer in Tokyo.</h2>
      
      <nav id="navigation">
      	<ul id="un-order_list">
       	  <li class="list_item">
       	  	<a href="#" class="anchor">ABOUT</a>
       	  </li>
          <li class="list_item">
          	<a href="#" class="anchor">GELLERY</a>
          </li>
          <li class="list_item">
          	<a href="#" class="anchor">CONTACT</a>
          </li>
        </ul>
      </nav>
    </header>

    <div id="img">
      <img src="images/file_name.png"
           alt="explane about this image file"
           width="500">		
    </div>

    <div id="statement">
      <h1 width="250">write mark-up statements here</h1>
      <p>write 1st statement here</p>
      <p>and 2nd statement here  <br>
      and 3rd statement here  </p>
    </div>
    
    <div id="contents_list">
    	<h1>My skills</h1>
    	<ol id="order_list">
    	  <li><a href="#"><img src="images/AI.png" alt="AI"><br>Artificial Interigence</a></li>
    	  <li><a href="#"><img src="images/CV.png" alt="CV"><br>Computer vision</a></li>
    	  <li><a href="#"><img src="images/VR.png" alt="VR"><br>Virtual Reality</a></li>
    	  <li><a href="#"><img src="images/QC.png" alt="QC"><br>Quality Control</a></li>
    	  <li><a href="#"><img src="images/QC.png" alt="DB"><br>Data Base</a></li>
    	</ol>
    </div>

    <footer id="footer">
    	<img src="images/twitter.png" alt="twitter_logo"><br>
        <img src="images/facebook.png" alt="facebook_logo"><br>
        <p id="paragraph">&copy;2019 Kazu Manabu</p>
    </footer>

  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>fill the title here</title>

content="keyword,keyword,keyword,keyword,keyword,keyword">

</head>

<body>

<h1 style="color:red;">Self Introduction</h1>

<h2 style="color:blue;">I am a mechanical engineer in Tokyo.</h2>

<a href="#" class="anchor">ABOUT</a>

</li>

<a href="#" class="anchor">GELLERY</a>

</li>

<a href="#" class="anchor">CONTACT</a>

</li>

</ul>

</nav>

</header>

<img src="images/file_name.png"

alt="explane about this image file"

width="500">

</div>

<h1 width="250">write mark-up statements here</h1>

<p>write 1st statement here</p>

<p>and 2nd statement here <br>

and 3rd statement here </p>

</div>

<h1>My skills</h1>

<li><a href="#"><img src="images/AI.png" alt="AI"><br>Artificial Interigence</a></li>

<li><a href="#"><img src="images/CV.png" alt="CV"><br>Computer vision</a></li>

<li><a href="#"><img src="images/VR.png" alt="VR"><br>Virtual Reality</a></li>

<li><a href="#"><img src="images/QC.png" alt="QC"><br>Quality Control</a></li>

</ol>

</div>

</footer>

</body>

</html>

上記のHTMLだけでは下記のような、縦一列の体裁になる。あとでCSSが必要

CSSとリンクして体裁を整える

デザインの参考になるサイト：とにかく真似をする

io300.com

IKESAI.com

サイズと色を測る：chromeの拡張機能

measureIt

ColorZilla

chromブラウザの右上に常駐しますので、アイコンをクリックすると機能します。

HTMLエディタ

sublimetext3

DOCTYPE宣言：html5を使用する宣言　 CSSの解釈が異なる

<!DOCTYPE html>

効果的なボタンやバナーのデザイン

HTMLの話

超基本的なものを張っておきますあ。

&lt;!DOCTYPE html>
&lt;meta charset="utf-8">

&lt;head>
    &lt;style>
        &lt;!--ここにcssを書く-->
        #my-viz{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
        #lead{font-size:150%;}
        .alert{color:red;background:yellow}
    &lt;/style>
    
    &lt;link rel="stylesheet" type="text/css" href="style.css">
&lt;/head>

&lt;body>

    
    &lt;script type="text/javascript" src="script.js">&lt;/script>
    
    &lt;script>
        &lt;!--ここにjavascriptを書く-->
    &lt;/script>
    
    &lt;h1>h1サイズのヘッダー&lt;/h1>&lt;!DOCTYPE html>
&lt;meta charset="utf-8">

&lt;head>
    &lt;style>
        &lt;!--ここにcssを書く-->
        #my-viz{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
        #lead{font-size:150%;}
        .alert{color:red;background:yellow}
    &lt;/style>
    
    &lt;link rel="stylesheet" type="text/css" href="style.css">
&lt;/head>

&lt;body>

    
    &lt;script type="text/javascript" src="script.js">&lt;/script>
    
    &lt;script>
        &lt;!--ここにjavascriptを書く-->
    &lt;/script>
    
    &lt;h1>h1サイズのヘッダー&lt;/h1>
    &lt;h2>h2サイズのヘッダー&lt;/h2>
    &lt;p>ここに本文を書く&lt;br>
       段落がかわります
    &lt;/p>
    
    &lt;div id="my-chart-wrapper" class="chart-holder dev">
        &lt;div id="my-chart" class="bar chart">
            this is a placeholder, with parent #my-chart-wrapper
        &lt;/div>
    &lt;/div>

    &lt;div id="inline^examples">
        &lt;img src="path/to/image.png" id="prettypic">
        &lt;p>this is a &lt;a href="link-url">link&lt;/a> to
            &lt;span class="url">link-url&lt;/span>
        &lt;/p>
    &lt;/div>
    
    &lt;ol>
        &lt;li>first item&lt;/li>
        &lt;li>second item&lt;/li>
    &lt;/ol>
    
    &lt;ul>
        &lt;li>first item 2&lt;/li>
        &lt;li>second item 2&lt;/li>
    &lt;/ul>
    
    &lt;table id="chart-data" border=3>
        &lt;tr>
            &lt;th>name&lt;/th>
            &lt;th>categoty&lt;/th>
            &lt;th>country&lt;/th>
        &lt;/tr>
        &lt;tr>
            &lt;td>kazu manabu&lt;/td>
            &lt;td>machine learning&lt;/td>
            &lt;td>japan&lt;/td>
        &lt;/tr>
        &lt;tr>
            &lt;td>makoto tanabe&lt;/td>
            &lt;td>math&lt;/td>
            &lt;td>usa&lt;/td>
        &lt;/tr>
    &lt;/table>
    
    &lt;div id="my-viz">
        &lt;div id="lead">
            &lt;h2>a leader header&lt;/h2>
            &lt;p>次の文字をcssで強調します
                &lt;span class="alert">強調！！&lt;/span>
            &lt;/p>
        &lt;/div>
        
        &lt;p>ここは普通の文字&lt;/p>
        
        &lt;div id="chart-holder">
            &lt;svg>&lt;/svg>
        &lt;/div>
    &lt;/div>
    &lt;span class="alert" id="special-alert">アラート&lt;/span>
    
&lt;/body>

    &lt;h2>h2サイズのヘッダー&lt;/h2>
    &lt;p>ここに本文を書く&lt;br>
       段落がかわります
    &lt;/p>
    
    &lt;div id="my-chart-wrapper" class="chart-holder dev">
        &lt;div id="my-chart" class="bar chart">
            this is a placeholder, with parent #my-chart-wrapper
        &lt;/div>
    &lt;/div>

    &lt;div id="inline^examples">
        &lt;img src="path/to/image.png" id="prettypic">
        &lt;p>this is a &lt;a href="link-url">link&lt;/a> to
            &lt;span class="url">link-url&lt;/span>
        &lt;/p>
    &lt;/div>
    
    &lt;ol>
        &lt;li>first item&lt;/li>
        &lt;li>second item&lt;/li>
    &lt;/ol>
    
    &lt;ul>
        &lt;li>first item 2&lt;/li>
        &lt;li>second item 2&lt;/li>
    &lt;/ul>
    
    &lt;table id="chart-data" border=3>
        &lt;tr>
            &lt;th>name&lt;/th>
            &lt;th>categoty&lt;/th>
            &lt;th>country&lt;/th>
        &lt;/tr>
        &lt;tr>
            &lt;td>kazu manabu&lt;/td>
            &lt;td>machine learning&lt;/td>
            &lt;td>japan&lt;/td>
        &lt;/tr>
        &lt;tr>
            &lt;td>makoto tanabe&lt;/td>
            &lt;td>math&lt;/td>
            &lt;td>usa&lt;/td>
        &lt;/tr>
    &lt;/table>
    
    &lt;div id="my-viz">
        &lt;div id="lead">
            &lt;h2>a leader header&lt;/h2>
            &lt;p>次の文字をcssで強調します
                &lt;span class="alert">強調！！&lt;/span>
            &lt;/p>
        &lt;/div>
        
        &lt;p>ここは普通の文字&lt;/p>
        
        &lt;div id="chart-holder">
            &lt;svg>&lt;/svg>
        &lt;/div>
    &lt;/div>
    &lt;span class="alert" id="special-alert">アラート&lt;/span>
    
&lt;/body>
&lt;link rel="stylesheet" type="text/css" href="style.css">

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

<!DOCTYPE html>

<head>

<style>

#my-viz{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}

#lead{font-size:150%;}

.alert{color:red;background:yellow}

</style>

</head>

<body>

</script>

<h1>h1サイズのヘッダー</h1><!DOCTYPE html>

<head>

<style>

#my-viz{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}

#lead{font-size:150%;}

.alert{color:red;background:yellow}

</style>

</head>

<body>

</script>

<h1>h1サイズのヘッダー</h1>

<h2>h2サイズのヘッダー</h2>

<p>ここに本文を書く<br>

段落がかわります

</p>

this is a placeholder, with parent #my-chart-wrapper

</div>

<p>this is a <a href="link-url">link</a> to

</p>

</div>

<ol>

<li>first item</li>

<li>second item</li>

</ol>

<ul>

<li>first item 2</li>

<li>second item 2</li>

</ul>

<tr>

<th>categoty</th>

<th>country</th>

</tr>

<tr>

<td>kazu manabu</td>

<td>machine learning</td>

<td>japan</td>

</tr>

<tr>

<td>makoto tanabe</td>

</tr>

</table>

<h2>a leader header</h2>

<p>次の文字をcssで強調します

</p>

</div>

<p>ここは普通の文字</p>

</div>

</body>

<h2>h2サイズのヘッダー</h2>

<p>ここに本文を書く<br>

段落がかわります

</p>

this is a placeholder, with parent #my-chart-wrapper

</div>

<p>this is a <a href="link-url">link</a> to

</p>

</div>

<ol>

<li>first item</li>

<li>second item</li>

</ol>

<ul>

<li>first item 2</li>

<li>second item 2</li>

</ul>

<tr>

<th>categoty</th>

<th>country</th>

</tr>

<tr>

<td>kazu manabu</td>

<td>machine learning</td>

<td>japan</td>

</tr>

<tr>

<td>makoto tanabe</td>

</tr>

</table>

<h2>a leader header</h2>

<p>次の文字をcssで強調します

</p>

</div>

<p>ここは普通の文字</p>

</div>

</body>

2024年11月
月	火	水	木	金	土	日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

<h2>大見出し１</h2>

<h3>中見出し１－１ リストの構造</h3>

<h3>中見出し１－２ 効果的なリンクの貼り方</h3>

<h4>中見出し１－２－１ アンカーテキスト</h4>

<h3>中見出し１－１リストの構造</h3>

<h3>中見出し１－２効果的なリンクの貼り方</h3>

<h4>中見出し１－２－１アンカーテキスト</h4>