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

投稿日：2020-04-07T18:24:53+09:00

htmlで共通メニュー部分をajaxで対応させる

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>タイトル</title>

<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
  <script type="text/javascript" src="template.js"></script>
</head>

<body>
  <script type="text/javascript">header();</script>
  <script type="text/javascript">footer();</script>
</body>
</html>

footer.html

表示させたい内容を記入

template.js

function footer(){
    $.ajax({
        url: "footer.html",
        cache: false,
        async: false,
        dataType: 'html',
        success: function(html){
            document.write(html);
        }
    });

}

function header(){
    $.ajax({
        url: "header.html",
        cache: false,
        async: false,
        dataType: 'html',
        success: function(html){
            document.write(html);
        }
    });

}

　 Tweet
Qiitaで続きを読む

投稿日：2020-04-07T18:00:14+09:00

<jQueryで作る>画面がぱっぱ変わる性格診断アプリ

もともとのシュミレーション問い合わせ画面を、
ネットによくある性格診断アプリに変えて、簡単にコーディング。
今回は「選択するたびに質問がぱっぱ変わる性格診断アプリ」を作成。
デモはこちら。

See the Pen eYNqrPL by 坊拓磨 (@bo_chan6130) on CodePen.

準備物

①htmlとcssとjs
②表記をjQueryで書いているのでCDNで読み込んでおく。

今回はjsでの動作をメインにしている記事なので、cssはcode Penからコピペするかデザインしてください。

実装過程(思考)

①質問を回答(選択ボタンをおす)すれば、前の質問が消えて、次の質問が現れる
②回答の選択数に応じて答えの出し方を記述

の２つ。

以下説明。

①質問を回答すれば、前の質問が消えて、次の質問が現れる

index.html

<!DOCTYPE html>
<html>
<head>
  <title>パパッと変わる性格診断</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
</script>

<div class="choose_box">
      <div class="app-theme">
        <p>ぱっぱ画面が変わる性格診断アプリ(全5問)</p>
      </div>


 <!-- ここから５つ質問を記述 -->
      <!-- 質問1 -->
      <div id="q_01" class="fit">
        <p>質問1: あなたは普段　</p>
        <ul>
          <li><a class="btn" href="#q_02" data-value="a">話すペースが速い</a></li>
          <li><a class="btn" href="#q_02" data-value="b">話すペースがゆっくり</a></li>
        </ul>
      </div>

      <!-- 質問2 -->
      <div id="q_02" style="display: none;">
        <p>質問2:　あなたは普段、相手との会話で</p>
        <ul>
          <li><a class="btn" href="#q_03" data-value="a">間をとらずに話す</a></li>
          <li><a class="btn" href="#q_03" data-value="b">間をとりながら話す</a></li>
        </ul>
      </div>

      <!-- 質問3 -->
      <div id="q_03" style="display: none;">
        <p>質問3:　あなたの話し方は</p>
        <ul>
          <li><a class="btn" href="#q_04" data-value="a">語尾がキッパリ</a></li>
          <li><a class="btn" href="#q_04" data-value="b">語尾がソフト</a></li>
        </ul>
      </div>

      <!-- 質問4 -->
      <div id="q_04" style="display: none;">
        <p>質問4:　あなたは普段声が</p>
        <ul>
          <li><a class="btn" href="#q_05" data-value="a">大きめ</a></li>
          <li><a class="btn" href="#q_05" data-value="b">小さめ</a></li>
        </ul>
      </div>

      <!-- 質問5 -->
      <div id="q_05" style="display: none;">
        <p>質問5:　意見を求められた時、あなたは</p>
        <ul>
          <li><a class="btn end" data-value="a">自分から口火を切る</a></li>
          <li><a class="btn end" data-value="b">後から発言する</a></li>
        </ul>
      </div>



<!-- ここから以下回答 -->
 <!-- この辺に回答を記述 -->
 </div>




  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript" src="index.js"></script>
</body>
</html>

①それぞれの質問に「#q_01」のようにidをふる。
②最初の「質問1」は画面に出力しておく。他の質問はdisplay:none;を記述し、あとで前の質問が回答されたら、次の質問のdisplay:none;を解除する、という指示をjsに後述。
③また合わせて、次の質問を出力する際にclass="fit"をaddClass()メソッドでつけることで、fitがついている質問のみを出力されるようにする。
④タグの２つの選択に、それぞれdata属性でa,bと値をふっておく。
⑤最後の質問「質問5」にはclassにendをつけておいて、「end」がクリックされたら結果が表示される仕組みをjsに後述する。

と、下処理はこんな感じ。

index.js

//ボタンを押すごとに画面が切り替わる関数
  $(function () {
    $(".btn").on("click", function () {
      //btnクラスをクリック後の関数処理
      $(this).closest("div").css("display", "none");
      //質問画面にあたらる親要素divをdisplay:none;にする
      id = $(this).attr("href");
      //次の質問hrefをidに格納
      $(id).addClass("fit").fadeIn("slow").show();
      //次の質問にfitをつけて出力。
    });

これで、画面の切り替える処理は終了。

②回答の選択数に応じて答えの出し方を記述

次に、回答に応じて答えを出力する処理を記述。
はじめにhtmlに回答を記述。

index.html

<!-- ここから以下回答 -->
  <!-- 回答の答え1 -->
     <div id="answer_01" class="result" style="display: none;">
      <div class="result_theme ">
            <p>あなたの性格は</p>
      </div>
      <div class="result_type0 ">
            <h4>『イケイケどんどん』タイプ</h4>
      </div>
      <div class="result_discription0">
        <h2>めっちゃ自己主張 × めっちゃスピーディ</h2>
        <p>
          　あなたは自己主張強いのでリーダーに向いています。今すぐリーダーになろう。
        </p>
      </div>
       <div class="return-btn">
        <a class="return" href="index.html">もどる</a>
       </div>
     </div>



  <!-- 回答の答え2 -->
     <div id="answer_02" style="display: none;">
          <div class="result_theme ">
            <p>あなたの性格は</p>
      </div>
      <div class="result_type1 ">
            <h4>『まろやか』タイプ</h4>
      </div>
      <div class="result_discription1">
        <h2>周りを立てる人 × じっくり考える人</h2>
        <p>
          　あなたは物事をじっくり考えて、最善策を練ることが得意。組織や周りを支えることが得意。
        </p>
      </div>
       <div class="return-btn">
        <a class="return" href="index.html">もどる</a>
       </div>
     </div>

①それぞれの回答のdivタグに「answer_01」のようにidをふる
②回答はdisplay:none;で隠しておく。あとで、回答に応じて、display:none;を解除する処理をjsに記述する。

index.js

//選択ボタンデータを配列に入れてカウントする関数
      var countA;
      //data-value="a"を選択した数を入れる変数
      var countB;
      //data-value="b"を選択した数を入れる変数
      var box =[];
      //それぞれのデータを配列に入れるための変数box
    $(".btn").each(function(){
      $(this).on('click',function(){
        var value = $(this).data("value");
         box.push(value);
         //data-value値をboxに入れる。(配列に値を入れるときはpush()を使用)

        countA = box.filter(function(x){
                      return x === "a"
                    }).length;
        //aの数を変数countAへ入れる
        countB = box.filter(function(y){
                        return y === "b"
                    }).length;
        //bの数を変数countBへ入れる
      });
    });

ここまでで選択するたびに、その選択したデータの数をcountA / countBに入っている。
(もともとの開発アプリから間引いたものなので、もしかした遠回りしているコーディングかもしれません)

以下、回答数に応じて答えを出力する処理を記述。

//結果を出力する関数
    $('.end').on('click',function(){
      //endクラスをクリックしたときの関数
      if( countA > countB ) {
        $('#answer_01').css("display",""); //回答1
      //answer_01のdisplayを""へ
      } else {
        $('#answer_02').css("display","");//回答2
      //answer_02のdisplayを""へ
    }
  });

display:none;をdisplay:"";とすることで、
選択された回答は出力されるように処理を記述。

これで、簡単な診断テストは完成。

まとめ

今回は２択問題で結果を出力しているが、
４択にしたい場合は、liタグを増やしてdata-valueをいじる→jsで該当処理をいじる
とすることもできるし、
回答数を増やす場合は、出力処理の条件を変更すれば、
簡単に出力できるはず。

コピペして使えると思うので、
使用したい方はドゾー

　 Tweet
Qiitaで続きを読む

投稿日：2020-04-07T16:50:48+09:00

NHK番組表APIを使ってオリジナル番組表を作って見ました。

動機

ネタ探しをしていて、Qiita.com:個人でも使える！おすすめAPI一覧の投稿に出会う。
コメント欄に「NHK 番組表 APIもいいよ」とあったので覗いて見たら簡単そうだった。
REST APIから取得(JSON形式)して、加工・整形してHTML作成まではいい練習と思い。
NHK番組APIを使ってオリジナルの番組表を作って見ました。(見てくれは残念ですが、、、)

API keyの取得の流れ

NHK番組APIで、アカウント登録を行います。
メール認証を経て、アプリケーション名：（好きな名称）、URL：（未登録）を登録します。
登録が完了するとAPI キーが発行されます。これが取得に必要です。

APIの概要

公開中のAPIは以下の４種類になります。

No.	名称	説明
1	Program List API	地域、サービス、日付を指定
2	Program Genre API	地域、ジャンル、日付を指定
3	Program Info API	番組IDを指定
4	Now On Air API	地域、サービスを指定

今回利用するProgram List APIは以下の構成になっています。

https://api.nhk.or.jp/v2/pg/list/{area}/{service}/{date}.json?key={apikey}

パラメータ	説明	値
area	地域ID(3byte)	130:東京,他46地域
service	サービスID(2byte)	g1：NHK総合,e1:Eテレ,s1:BS,s3:BSP
date	日付(YYYY-MM-DD形式)	例:2020-04-07
apikey	APIキー(32byte)	アプリ登録で取得した`APIキー`

レスポンスフォーマットは、jsonで、利用回数制限は300回/日となっています。
以下の例は、area:130(東京)、service:g1(NHK総合)、date:2020-04-07で取得した一部です。

{
  "list": {
    "g1": [
      {
        "id": "2020040704706",
        "event_id": "04706",
        "start_time": "2020-04-07T04:02:00+09:00",
        "end_time": "2020-04-07T04:30:00+09:00",
        "area": {
          "id": "130",
          "name": "東京"
        },
        "service": {
          "id": "g1",
          "name": "ＮＨＫ総合１",
          "logo_s": {
            "url": "//www.nhk.or.jp/common/img/media/gtv-100x50.png",
            "width": "100",
            "height": "50"
          },
          "logo_m": {
            "url": "//www.nhk.or.jp/common/img/media/gtv-200x100.png",
            "width": "200",
            "height": "100"
          },
          "logo_l": {
            "url": "//www.nhk.or.jp/common/img/media/gtv-200x200.png",
            "width": "200",
            "height": "200"
          }
        },
        "title": "ダーウィンが来た！「波乱のライオン学園に潜入！百獣の王を養成！！」",
        "subtitle": "成長まっただ中のライオンの子どもたちが、群れの中で先生役の大人から狩りの技や子育て術を学ぶ。不真面目な生徒は退学処分に！？学園ドラマ顔負けの波乱の日々に密着！",
        "content": "新年度１本目は、ライオンの「学校」をご紹介。成長真っ最中のライオンの子どもたちが、群れの中で先生役の大人から狩りや子育て、ライバル撃退法まで、生きるためのあらゆるスベを学ぶ。でもライバル・ハイエナに全く歯が立たなかったり、狩りでは姿が丸見えで獲物にあっさり逃げられたり、実践形式の授業にみんなタジタジ。さらに不真面目な生徒はまさかの退学処分に！？学園ドラマ顔負けの波乱の授業に潜入！歌：ＭＩＳＩＡ",
        "act": "【語り】和久田麻由子，龍田直樹，豊嶋真千子，山田孝之，水瀬いのり",
        "genres": [
          "0802",
          "1000"
        ]
      },
{以下、省略}

データ取得

取得したAPIキーで、Program List APIを叩く。
取得サービスは、g1:総合１、e1:Eテレ、s1:BS1、s3:BSプレミアムの４局です。
pandasのjson_normalize()を使って、json形式をデータフレームに変換します。

import pandas as pd
import json
import requests
import datetime

# 取得したAPIキーをセット
apikey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'

# 130:東京
area = '130'
# g1:NHK総合１,e1:Eテレ,s1:BS,s3:BSP
service = ['g1','e1','s1','s3']
# 日時
date = datetime.date.today()

all_results = pd.DataFrame(index=None, columns=[])
for i in range(len(service)):
    url = 'https://api.nhk.or.jp/v2/pg/list/{0}/{1}/{2}.json?key={3}'.format(area,service[i],date,apikey)
    request_get = requests.get(url)
    if request_get.status_code != 200:
        print('NHK番組表APIのデータが取得出来ません。')
        break
    result = pd.json_normalize(request_get.json(), ['list',[service[i]]])
    all_results = pd.concat([all_results, result])

all_results = all_results[~all_results['title'].str.contains('放送休止')]

取得したデータ概要：

<class 'pandas.core.frame.DataFrame'>
Int64Index: 235 entries, 0 to 37
Data columns (total 22 columns):
 #   Column                 Non-Null Count  Dtype 
---  ------                 --------------  ----- 
 0   id                     235 non-null    object
 1   event_id               235 non-null    object
 2   start_time             235 non-null    object
 3   end_time               235 non-null    object
 4   title                  235 non-null    object
 5   subtitle               235 non-null    object
 6   content                235 non-null    object
 7   act                    235 non-null    object
 8   genres                 235 non-null    object
 9   area.id                235 non-null    object
 10  area.name              235 non-null    object
 11  service.id             235 non-null    object
 12  service.name           235 non-null    object
 13  service.logo_s.url     235 non-null    object
 14  service.logo_s.width   235 non-null    object
 15  service.logo_s.height  235 non-null    object
 16  service.logo_m.url     235 non-null    object
 17  service.logo_m.width   235 non-null    object
 18  service.logo_m.height  235 non-null    object
 19  service.logo_l.url     235 non-null    object
 20  service.logo_l.width   235 non-null    object
 21  service.logo_l.height  235 non-null    object
dtypes: object(22)
memory usage: 42.2+ KB

データ加工

日付形式に置き換え、放送時間の算出、ページ内リンクのためのHTMLコード列の追加

# 日付形式に変換、放送時間の計算
all_results['start_time'] = pd.to_datetime(all_results['start_time'], format='%Y/%m/%d %H:%M')
all_results['end_time'] = pd.to_datetime(all_results['end_time'], format='%Y/%m/%d %H:%M')
all_results['airtime'] = all_results['end_time'] - all_results['start_time']
all_results['link'] = all_results['id']
# ページ内リンク情報の作成
func = lambda x: x.replace(x, f'<div id="{x}">番組詳細</div>')
all_results['link'] = all_results['link'].apply(func)

# 月・日。時間・分を取得する。さらに番組表の時間行名を追加する
tmp = pd.concat([all_results['start_time'].dt.month ,all_results['start_time'].dt.day,
                 all_results['start_time'].dt.hour, all_results['start_time'].dt.minute,
                 (all_results['start_time'].dt.day.astype(str)+all_results['start_time'].dt.strftime('%H'))], axis=1)
tmp.columns = ['month', 'day', 'hour', 'minute','time_bins']

# 取得データと新規の列を結合する
all_results = pd.concat([all_results, tmp], axis=1)

# 番組表ための集約
data = all_results.iloc[:,[23,0,1,2,3,4,5,6,7,8,9,10,11,12,22,24,25,26,27,28]]

データ整形(その１)

番組表の必要データが揃えられたので、最終形のテーブルを作成してHTML形式保存します。

# 最終の番組表のデータフレーム作成
tv_index = data.time_bins.sort_values().unique()
tv_table = pd.DataFrame(index=tv_index, columns=['H', 'g1', 'e1', 's1', 's3']).fillna('')

# コンテンツを結合して時間帯に挿入する。
cell = ''
for s in range(len(service)):
    for i in range(len(tv_table.index)):
        tmp = data[(data['time_bins'] == tv_table.index[i]) & (data['service.id'] == service[s])]

        for c in range(len(tmp)):
            cell += '[' + str(tmp['minute'].iloc[c]) + '~]'
            cell += tmp['title'].iloc[c]
            cell += f'<a href="#{tmp["id"].iloc[c]}">▼</a><br>'
        tv_table[service[s]].iloc[i] = cell
        cell = ''

# 時間帯追加
for h in range(len(tv_index)):
    tv_table['H'].iloc[h] = int(tv_index[h][-2:])
tv_table.columns = ['H', 'NHK総合', 'Eテレ', 'BS', 'BSP']

データ整形(その２)

番組タイトルから、ページ内リンクとして番組詳細情報を提供するためテーブル作成します。

detail_table = data.stack().reset_index()
detail_table.drop(columns='level_0', inplace=True)
detail_table.columns = ['種別', '値']
detail_table.set_index('種別', drop=True, inplace=True)

データ整形(その3)

pandasのto_htmlを使って、htmlファイルを作成します。
htmlファイルの定義情報

html_template = '''
<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>私製番組表</title>　<!-- #1 -->
  </head>
  <body>
    <h2>&nbsp;NHK番組表APIを使ってオリジナル番組表を作って見ました。{date}版</h2>　<!-- #2 -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <style type="text/css"> th {{ text-align: center; background-color: #f5f5f5}}</style>
    <div class="container-fluid"> <!-- #3 -->
        {table}
    </div>
    <div class="container-fluid"> <!-- #4 -->
        {table1}
    </div>
    <div>情報提供:ＮＨＫ</div> <!-- #5 -->
</body>
</html>

定義情報に追加したの以下の内容になります。
1. title:ページタイトル
2. h2:見出し + {date}
3. ４局の番組表table {table} -> table
4. 番組詳細table {table1} -> table1
5. クレジット表示

htmlファイル形式の保存

table = tv_table.to_html(classes=['table', 'table-bordered', 'table-hover'],escape=False)
table1 = detail_table.to_html(classes=['table', 'table-bordered', 'table-hover'],escape=False)
html = html_template.format(table=table, table1=table1, date=date)

with open('g1_table_' + str(date) + '.html', 'w') as f:
    f.write(html)

▼をクリックすると、ページ内リンクで番組詳細データにスクロールします。

参考サイト

pandasのDataFrameを元に、画像入りの表をつくる
上記のサイト情報から bootstrapのバージョンを最新化しました。

まとめ

pandas.read_jsonとpandas.to_htmlがどこまで使えるか確認したかったので、練習としては最適だった。
pandas.read_jsonは軽い入り口的な状態で終わったので、また材料を探そうと思う。
pandas.to_htmlは、そもそもの使い方が理解できたのが収穫でした。
ただBootstrapを導入しても自分のWeb力が低いので見てくれは残念な結果となった。
ニュースが気になる状況なので、朝一に実行しておけば、本家サイトの番組表に飛ばずに確認ができます。
NHK番組表API 利用上の注意を確認の上、用法・用量を守ってご利用ください。

　 Tweet
Qiitaで続きを読む

投稿日：2020-04-07T08:57:45+09:00

htmlのタグ(超初心者向け一覧)

前置き

大学でなんとなく習ったはいいものの、いちいち調べるの面倒だなあ。英語苦手だし……スペルミスがよく起きる(;^ω^)
例のごとく自分が使いそうなやつをまとめますか！

ここから本編

絶対忘れてはいけない編

<!DOCTYPE html>

一番最初に絶対必要なやつ。
使うHTMLのバージョンをここで指定するぽい。
HTML5ならこれでオッケー。それ以前のバージョンなら、<!DOCTYPE　…　の後が変わってくる。

<HTML>　</HTML>

<!DOCTYPE html> の後に絶対に必要なやつ。<!DOCTYPE html> 以外をこれで囲む。
こっからここまで全部HTMLですよーって意味かしら？

忘れたら意味ない編

<HEAD>　</HEAD>

タイトルとかの情報をここで決める。
<HTML>の中には入るけど、<BODY>の中には入らないぽい。

<BODY>　</BODY>

本編情報をここで決める。
<HTML>の中には入るけど、<HEAD>の中には入らないぽい。
二つはライバルポジなのかもしれない。

<title>　</title>

タイトルを決める。<HEAD>の中に入れる。
なかったらどうなるんだろ。多分、タイトルがないから検索欄にも引っかからないものができるんじゃないかな。

あったらいいね編

<h1>　</h1>

この中には本編の見出しが入る。<h2>や<h3>にしたら、その数字の分だけ見出しが小さくなる。
<BODY>の中にある。

<p>　</p>

この中に一つの段落の文章を書く。<BODY>の中にある。
論文とかの長文を書くときには必須。つまり、これを使わない人生を送れたらいいなーってことだ。
perfect.html
<!DOCTYPE html> 
<HTML>　
  <HEAD>　
    <title>これこそタイトル</title>
  </HEAD>
  <BODY>
    <h1>素晴らしい見出し</h1>
    <p>完璧な文章</p>
    <p>すごい文章</p>
  </BODY>
</HTML>
構造をまとめるとこんな感じ。(^^)/

補足

ここからさらに拘りたい場合はここ見ると分かりやすい。
HTMLタグリファレンス(目的別)

　 Tweet
Qiitaで続きを読む

投稿日：2020-04-07T04:59:33+09:00

初心者によるプログラミング学習ログ 283日目

100日チャレンジの283日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
283日目は、

おはようございます
283日目　2h
・xdデザインカンプからのサイト模写
・ヘッダーとフッターのブラウザ幅いっぱい表示#早起きチャレンジ #駆け出しエンジニアと繋がりたい #100DaysOfCode
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) April 6, 2020

　 Tweet
Qiitaで続きを読む

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

htmlで共通メニュー部分をajaxで対応させる

<jQueryで作る>画面がぱっぱ変わる性格診断アプリ

準備物

実装過程(思考)

①質問を回答すれば、前の質問が消えて、次の質問が現れる

②回答の選択数に応じて答えの出し方を記述

まとめ

NHK番組表APIを使ってオリジナル番組表を作って見ました。

動機

API keyの取得の流れ

APIの概要

データ取得

データ加工

データ整形(その１)

データ整形(その２)

データ整形(その3)

参考サイト

まとめ

htmlのタグ(超初心者向け一覧)

前置き

ここから本編

絶対忘れてはいけない編

`<!DOCTYPE html>`

`<HTML>　</HTML>`

忘れたら意味ない編

`<HEAD>　</HEAD>`

`<BODY>　</BODY>`

`<title>　</title>`

あったらいいね編

`<h1>　</h1>`

`<p>　</p>`

補足

初心者によるプログラミング学習ログ 283日目

100日チャレンジの283日目

日付別

タグ一覧

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

htmlで共通メニュー部分をajaxで対応させる

<jQueryで作る>画面がぱっぱ変わる性格診断アプリ

準備物

実装過程(思考)

①質問を回答すれば、前の質問が消えて、次の質問が現れる

②回答の選択数に応じて答えの出し方を記述

まとめ

NHK番組表APIを使ってオリジナル番組表を作って見ました。

動機

API keyの取得の流れ

APIの概要

データ取得

データ加工

データ整形(その１)

データ整形(その２)

データ整形(その3)

参考サイト

まとめ

htmlのタグ(超初心者向け一覧)

前置き

ここから本編

絶対忘れてはいけない編

<!DOCTYPE html>

<HTML> </HTML>

忘れたら意味ない編

<HEAD> </HEAD>

<BODY> </BODY>

<title> </title>

あったらいいね編

<h1> </h1>

<p> </p>

補足

初心者によるプログラミング学習ログ 283日目

100日チャレンジの283日目

日付別

タグ一覧

`<!DOCTYPE html>`

`<HTML>　</HTML>`

`<HEAD>　</HEAD>`

`<BODY>　</BODY>`

`<title>　</title>`

`<h1>　</h1>`

`<p>　</p>`