- 投稿日：2020-01-13T22:12:11+09:00
HTMLタグ 早見
- 投稿日：2020-01-13T19:13:16+09:00
今更だけどCSSって何ぞや あとPHPってHTMLの中に書けるのに.phpってどういう意味だってばよ？
という方に向けてざっくりCSSとPHPを解説して行きたいと思います。
まあCSSがCascading Style Sheetsの略で、表示に関する記述って言うのは誰でも分かると思うんですが、じゃあCSSの中身はどういう仕組みになってるの？という問いに対して答えられる人ってIT人口の何割なんだろうねって気がします。HTMLに関してもPHP使うなら必修だと思うけど、pとかaとかimgとか、主要なタグさえ覚えればheadの中身とか理解しなくても使えてしまったりするので「今更HTMLとかなぁ～」って思ってる人こそ勉強してみると楽しいと思う。
あと分かってるとは思うけど、仕組みと言いつつ低レイヤーの話はしない（出来ない）のでCSガチ勢の方は帰ってどうぞ。
CSSの役割とは何ぞや
これに関しては長々と解説するより実例を見てもらった方が早いでしょう。
みなれたQiitaのトップページはCSSを抜くとこんな感じになります。HTMLのお仕事はテキストとそれに付随するコンテンツを規定するだけなのでまあ当然ですね。
ここからCSSの魔法をかけて一気に現代的なサイト表示を作り上げていきます。
色やサイズ、位置の調整
これは簡単で、対象を指定して『プロパティ：パラメータ；』と書いていくだけで勝手に表示が変わっていきます。便利ですね。
まあこれだけだとざっくりし過ぎな気もするので簡単な例を書いておきます。これさえマスターすれば君も今日からフロントエンドエンジニアだ！（）
body{ color:white; /*文字色の変更*/ } .huga{ float:left; /*要素を左から横に並べる*/ } .hoge{ padding :10px 30px ; /*要素の内側に指定幅の余白を取る*/ background-color: #FF0000; /*背景色の変更*/ color:#FFFFFF; position: relative; /*位置プロパティを『相対』に指定*/ top:29px; /*上側を指定幅ずらす*/ left:34px; /*左側を指定幅ずらす*/ } /*基本要素全てまとめようと思ったけど想像以上に面倒かったのでこれで許して ちなみにfloatとpaddingとmarginとposition辺りを使いこなせれば位置調整に困ることはないはず :hoverとか:actionとか使えばオサレな表示も思いのままゾイ 詳しくはググってどうぞ*/
適用範囲の指定方法は。
これも非常に簡単でHTMLのタグ内でclass="(クラス名)"を宣言してCSS側で.(クラス名)と指定すればそれでOK。一応IDに被せるやり方もあるけど、JS使いに怒られるらしいのでやめた方が無難。QiitaのCSSもclassで書いてるのでまあ指定がない限りclassで書けば良いんじゃないかなって気はする。
ちなみに.(クラス名)の後に要素名を書けば指定範囲を要素だけに限定できるぞい。あとbodyはクラスでは無いので.を付けなくても良かったりする。
body { font-family: 'Arial'; /*フォントの指定*/ } .hoge h1{/*H1タグのみに範囲を指定*/ color:red; }
このようにとってもとっても便利なCSSだけど、ただ１つ気をつけないといけない点があって実はどんなに雑に書いても動いたりする。要素指定の重複はもちろんOKだし、書く順番もごちゃごちゃでOK、クラス名をタイポしてもエラーは吐きません。だからまあ………………CSSぐらい楽勝でしょってノリで書くと多分その先は地獄なんじゃないかなって思ったりもします。
PHPってHTMLの中に書けるのに.phpってどういう意味だってばよ？
まあ結論から言ってしまうと、HTMLとPHPを使って.htmlの設計図を記述するのが.phpです。コンテンツを表示する場合は、サーバー側が.phpを処理してクライアント側に.htmlを送信します。バックエンドですね。
文法の解説はここではしません。参考書の劣化コピーになりそうですし、何より面倒いので………………
特徴を上げるとすれば良く出来た言語だと思います。WEB系の言語としては最近RUBYに食われつつある感じはありますが、RUBYって学習コスト高くない？
railsさえマスターすればOK！みたいな言い草で語られるけど、１つの技術に依存すれば需要が落ちた時買い叩かれるのは明白だし、いざ２つ目のスキルを考える段階でもRUBYとのマルチランゲージを考えると適切な言語が存在しない。強いて言えばPythonか？？？
………………話が逸れましたね。後は何の話をしましょうか。技術的な面と言っても自分は入門書を数冊読んだだけのレベルなのであんまり深い事は言えなかったりする。まあ動的型付けや配列サイズが不定なのって便利だねと思ったり、Javaとは一味違う方法でオブジェクト指向を実装するのも中々楽しいです。
という訳で最後に一言
みんな‼ PHPやろうぜ！
- 投稿日：2020-01-13T18:49:24+09:00
実際に使われている HTML タグランキング 20
はじめに
みなさんこんにちは、N予備校プログラミングコースの講師をしております、折原 ダビデ竜 です。
プログラミング必修化もあり さぁ勉強頑張るぞ！ となっている方々もいるかもしれません。
いざプログラミングの勉強を初めてみると、膨大な数の機能や書き方がありますよね、そこで何を優先して学ぶべきか悩むこともあるかもしれません。そこで実際に使用されている使用頻度を調査することにしてみました。
使用頻度が多い物こそ重要であり優先して学ぶべであろうということで、今回はそれの HTML タグ編です。この記事を楽しく読んでいるだけで重要な HTML タグも理解できるように解説も書いておりますので、参考にしてください。
HTML タグランキングを作った経緯
今回なぜこのようなランキングを作成するに至ったのかは私の仕事が関係しているため、記事の最後に自己紹介を載せてみました。
自己紹介でも書きましたが私自身が教育の現場でプログラミングを教えており、その中で HTML の書き方も教えております。
その時にどの HTML タグをどのような順番で紹介するかを常に考えておりまして、実際に使われいる HTML タグは何であるかを調べてみました。HTML タグランキング
世界中の HTML ファイル 8629 ファイルを調べ、使用回数が多い HTML タグをまとめてみましたので、ランキング形式で 20タグ を紹介いたします。
それでは第20位からランキングの発表です。
第20位
<dd>タグ使用率 156% で、平均して HTML 1ファイルあたり約 1.5個使われいる計算になります。
<dd>タグは description definition（定義説明）の略で、説明を記述するために使うタグです。
説明リストはまず<dl>タグ（definition list: 説明リスト）を用意し、その中で<dt>タグ（description term: 説明項目）で説明したい項目を書き、この<dd>タグで説明を書いていていきます。
1 つの<dt>タグに対して<dd>タグは何個あっても構いません。━━━ 以下のように書きます ━━━
<dl> <dt>正三角形</dt> <dd>全ての辺の長さが等しい三角形</dd> <dd>全ての角の角度が 60度 の三角形</dd> <dt>二等辺三角形</dt> <dd>２辺の長さが等しい三角形</dd> </dl>━━━ 実際の見え方 ━━━
- 正三角形
- 全ての辺の長さが等しい三角形
- 全ての角の角度が 60度 の三角形
- 二等辺三角形
- ２辺の長さが等しい三角形
第19位
<img>タグ使用率 165% で、平均して HTML 1ファイルあたり約 1.6個使われいる計算になります。
<img>タグは Image の略称で 画像を表示するタグです。
みんな大好き飯テロ写真や可愛いペットの写真などをサイトに貼る時に使います。ここでは
<img>タグの使い方として自分の若かりし頃のコスプレ（？）写真を貼る例をお見せしましょう。━━━ 以下のように書きます ━━━
<img src="originalCosplay1.jpg">━━━ 実際の見え方 ━━━
第18位
<font>タグ使用率 213% で、平均して HTML 1ファイルあたり約 2.1個使われいる計算になります。
<font>タグは囲った文章の大きさや、色や、フォントを設定することができます。
最近では CSS で style をあてることが推奨されていますが、いまだに人気なタグで自分自身も昔はよく書いていたな〜と懐しむタグです。━━━ 以下のように書きます ━━━
<font size="5" color="orange" face="fantasy">Web application</font>━━━ 実際の見え方 ━━━
第17位
<input>タグ使用率 217% で、平均して HTML 1ファイルあたり約 2.1個使われいる計算になります。
<input>タグは入力欄用のタグで、主に<form>タグと共に使用されます。
type属性に設定する値次第で様々な形をとります。ここでは簡単なアンケートフォームを例をお見せしたいと思います。
━━━ 以下のように書きます ━━━
<form method="POST" action="sample.html"> お名前: <input type="text" name="user-name"><br> メールアドレス: <input type="text" name="email"><br> <label for="name">N予備校にプログラミングコースがあることを知っていますか？</label><br> <input type="radio" name="hyouka" value="good" checked="checked">知ってる <input type="radio" name="hyouka" value="bad">知らない <p><input type="submit" value="送信する"></p> </form>━━━ 実際の見え方 ━━━
第16位
<code>タグ使用率 224% で、平均して HTML 1ファイルあたり約 2.2個使われいる計算になります。
<code>タグは囲った文章がプログラミングコードであることを示すタグです。
<pre>タグと一緒に使用することで改行やインデントまで反映して表示させることができます。
プログラムの説明を書くときなどに良く使いますね。━━━ 以下のように書きます ━━━
<pre><code>function add(a, b) { return a + b; }</code></pre>━━━ 実際の見え方 ━━━
function add(a, b) { return a + b; }第15位
<meta>タグ使用率 257% で、平均して HTML 1ファイルあたり約 2.5個使われいる計算になります。
<meta>タグはサイトのメタデータを設定するタグで、このサイトはこんなページですよーとブラウザや検索エンジンに知らせることができます。
ユーザーが<meta>タグを見ることはほとんどありませんが、サイトの文字コードを設定したり、サイトの説明を設定したり、SNS でシェアする時などに表示する画像を設定できます。SNS が普及している現代では必須のタグと言えるでしょう。
以下では<meta>タグを設定して Slack に URL を貼り付けた例をお見せしましょう。━━━ 以下のように書きます ━━━
<html lang="ja" prefix="og: http://ogp.me/ns#"> <head> <!-- ページのタイトル --> <title>D_drAAgon が作る最高のwebページ</title> <!-- サイトの文字コードを設定 --> <meta charset="utf-8"> <!-- サイトの説明を設定 --> <meta name="description" content="このページには素晴らしい内容がたくさん書かれています。"> <!-- SNS でシェアする時などに表示する画像を設定 --> <meta property="og:image" content="https://ddragon.github.io/easyHTML/submarine2L.png">━━━ 実際の見え方 ━━━
第14位
<ul>タグ使用率 337% で、平均して HTML 1ファイルあたり約 3.3個使われいる計算になります。
<ul>タグは Unordered List の略称で順序なしの箇条書きです。
いくつかある項目を見やすく表示するための工夫として良く使われますよね。━━━ 以下のように書きます ━━━
遠足の持ち物 <ul> <li>遠足のしおり</li> <li>ハンカチ、ティッシュ</li> <li>お弁当</li> <li>水筒</li> <li>お菓子（300円まで）</li> </ul>━━━ 実際の見え方 ━━━
遠足の持ち物
- 遠足のしおり
- ハンカチ、ティッシュ
- お弁当
- 水筒
- お菓子（300円まで）
第13位
<b>タグ使用率 356% で、平均して HTML 1ファイルあたり約 3.5個使われいる計算になります。
<b>タグは Bold の略称で囲った文章を太字にしてくれます。
重要な単語なんかを太字にして強調したいときなどに使いますよね。━━━ 以下のように書きます ━━━
<b>2020年</b>には<b>東京オリンピック</b>が開催される。━━━ 実際の見え方 ━━━
2020年には東京オリンピックが開催される。第12位
<link>タグ使用率 395% で、平均して HTML 1ファイルあたり約 3.9個使われいる計算になります。
<link>タグは外部の CSS ファイルを読み込むためのタグです。
サイトのデザインには欠かせないタグですよね。以下では実際に CSS ファイルを HTML から読み込む例をお見せしましょう。
━━━ 以下のように書きます ━━━
html
<head> <link rel="stylesheet" type="text/css" href="darktheme.css"> </head> <body> <p>ダークテーマ</p> </body>css
p { color: white; background-color: black; }━━━ 実際の見え方 ━━━
第11位
<br>タグ使用率 416% で、平均して HTML 1ファイルあたり約 4.1個使われいる計算になります。
<br>タグは Break の略で改行をするためのタグです。━━━ 以下のように書きます ━━━
下の文章から「ま」を無視して読んでください。<br> たかさまらのまちさず<br> さらに上の文章から「さ」をぬいて読んでください。━━━ 実際の見え方 ━━━
下の文章から「ま」を無視して読んでください。
たかさまらのまちさず
さらに上の文章から「さ」をぬいて読んでください。第10位
<tr>タグ使用率 440% で、平均して HTML 1ファイルあたり約 4.4個使われいる計算になります。
<tr>タグは Table Row の略で、<table>タグと一緒に使って表を作る際に行を作るタグです。
表（テーブル）を作るための<table>タグはいまだに根強い人気を誇っていました。
表の行を作る<tr>タグや、表の見出しを作る<th>タグ、表の項目を作る<td>タグなどと一緒に使われることが多いですね。寿司の値段表の例をお見せしましょう。
━━━ 以下のように書きます ━━━
<table> <tr> <th>寿司ネタ</th><th>値段</th> </tr> <tr> <td>大トロ</td><td>599円</td> </tr> <tr> <td>中とろ</td><td>399円</td> </tr> <tr> <td>まぐろ</td><td>199円</td> </tr> </table>━━━ 実際の見え方 ━━━
寿司ネタ 値段 大トロ 599円 中とろ 399円 まぐろ 199円 第9位
<i>タグ使用率 493% で、平均して HTML 1ファイルあたり約 4.9個使われいる計算になります。
<i>タグは italic（イタリック）の略称です。
タグで囲った文書を右斜めに傾けたイタリック体にして表示します。ジョジョ立ちに見えてこなくもないオシャレな傾き方ですよね。
━━━ 以下のように書きます ━━━
<i>この傾き加減がオシャレじゃない？</i>━━━ 実際の見え方 ━━━
この傾き加減がオシャレじゃない？第8位
<p>タグ使用率 494% で、平均して HTML 1ファイルあたり約 4.9個使われいる計算になります。
<p>タグは Paragraph の略称で段落を意味します。
タグで囲った文章の上下に余白を入れてくれます。━━━ 以下のように書きます ━━━
<p>吾輩は猫である。</p> <p>名前はまだ無い。</p> <p>どこで生れたかとんと見当がつかぬ。</p>━━━ 実際の見え方 ━━━
吾輩は猫である。
名前はまだ無い。
どこで生れたかとんと見当がつかぬ。
第7位
<script>タグ使用率 549% で、平均して HTML 1ファイルあたり約 5.4個使われいる計算になります。
<script>タグは JavaScript のコードを書くためのタグで、書いたコードをブラウザが実行してくれます。
HTML でプログラム動かす時にはこのように JavaScript を使うことができます。例の ロシェ が何かって？それは最後にある私の自己紹介記事を読んでみてください。
━━━ 以下のように書きます ━━━
<script> alert(`1箱30個入りのロシェを4箱買ったらロシェは全部で ${30*4} 個あります。`); </script>━━━ 実際の見え方 ━━━
第6位
<!-->タグ使用率 596% で、平均して HTML 1ファイルあたり約 5.9個使われいる計算になります。
HTML においてコメントに使うタグで、これに囲まれている文章などは表示されません。
メモ書きに使うのに大活躍しますよね。━━━ 以下のように書きます ━━━
司会者が「Aさんは？」と尋ねますので、Aさんは武勇伝を語ってください。 <!-- そしてここでボケてください --> 司会者:「それでは次のコーナーです！」━━━ 実際の見え方 ━━━
司会者が「Aさんは？」と尋ねますので、Aさんは武勇伝を語ってください。
司会者:「それでは次のコーナーです！」第5位
<td>タグ使用率 1065% で、平均して HTML 1ファイルあたり約 10.6個使われいる計算になります。
<td>タグは Table Data の略称で、表を表示するときに表の1項目として<table>タグと共に使うタグですよね。
こちらは第10位<tr>タグのところで解説しました。第4位
<span>タグ使用率 1840% で、平均して HTML 1ファイルあたり約 18.4個使われいる計算になります。
<span>タグは特に意味を持たないタグで、とりあえずタグで囲っておいてスタイルをあてたり JavaScript から操作したりするためのタグです。
似たタグに<div>タグというのがありますが、違いは範囲がタグの中の量と同じだけになることと、改行が無いことです。背景色を設定すると分かりやすいでその例を紹介したいと思います。
取る領域に無駄がないですね、まるで狭いところを好む猫のようです。━━━ 以下のように書きます ━━━
<span style="background-color: Gold;">猫は</span> <span style="background-color: Gold;">狭いところにすっぽり嵌るのが好き</span>━━━ 実際の見え方 ━━━
第3位
<li>タグ使用率 1843% で、平均して HTML 1ファイルあたり約 18.4個使われいる計算になります。
<li>タグは List Item の略で箇条書きをする時に使用するタグです。こちらは 14位の
<ul>タグのところで解説をしましたね。
外枠の<ul>タグよりも項目を列挙する内側の<li>タグの方が使用回数が多くなるのはなんとなく推測できます。第2位
<div>タグ使用率 2221% で、平均して HTML 1ファイルあたり約 22.2個使われいる計算になります。
で、でたー！意味のないタグその２..!笑
<div>タグは division の略称ですが特に意味を持たないタグで、とりあえずタグで囲っておいてスタイルをあてたり JavaScript から操作したりするためのタグです。
細かい特徴としては、横幅は画面いっぱいとり改行もされます。
こちらも背景色を設定すると分かりやすいでその例を載せます。━━━ 以下のように書きます ━━━
<div style="background-color: LightSkyBlue;">ワレワレハ</div> <div style="background-color: LightSkyBlue;">ウチュウジンダ</div>━━━ 実際の見え方 ━━━
第1位
<a>タグ使用率 2887% で、平均して HTML 1ファイルあたり約 28.8個使われいる計算になります。
<a>タグは Anchor の略称で HTML と言えばもうこれ、リンクを作る<a>タグで HTML あたり平均 28 個使われいる計算になる大人気タグ。この記事にもこのページにも数え切れないほどのリンクがありますよねぇ。
HTML の名前にもある Hyper Text の由来でもあり、普通のテキストよりもどの部分がハイパーであるか（優れているか）はこのリンクでありこの<a>タグのことであると言っても過言ではないでしょう。━━━ 以下のように書きます ━━━
<a href="https://www.amazon.co.jp/hz/wishlist/ls/3QA45Y32CGCGL">amazon ウィッシュリスト</a>━━━ 実際の見え方 ━━━
amazon ウィッシュリストおわりに
記事を読んでくださりありがとうございます。HTML タグランキングはいかがでしたでしょうか？
予想外だったという人も、ある程度は予想していた通りであったという人もいるかと思います。
これらを元にどのタグを習得すべきかの参考になりましたので、教材がさらに良くなるようにしていきたいと思います。自己紹介
N予備校プログラミングコース でプログラミングを教えております 折原ダビデ竜 と申します。
N予備校といえば最近話題になった記事がありましたね → N予備校プログラミング入門コースで学べること
この入門コースの一番始めでは HTML についても教えております。【余談】：チョコレートのロシェを愛しています、どんなお菓子かは amazon ウィッシュリストに飛んでいただければ分かるかと思います。ド○キとかにたくさん売っているやつですね。記事を気に入っていただけたら送ってやってください?✨
- 投稿日：2020-01-13T15:58:51+09:00
【HTML】構造体のメンバ表示
html<link rel="stylesheet" type="text/css" href="Untitled-1.css"> <head> <title>構造体</title> </head> <body> <div class="hidden_box"> <div style="line-height: 0.5em;"> <p>aaaa</p> <p>aaaa</p> <div style="position: relative; top: 0; left: 2em;"> <div class="hidden_box"> <label for="label2">+</label> <input type="checkbox" id="label2"/> <div style="position: relative; top: -20px; left: 30px;" class="hidden_show"> <!--非表示ここから--> <p>aaaa</p> <p>aaaa</p> <p>aaaa</p> <p>aaaa</p> <p>aaaa</p> <p class="cs">aaaa</p> <!--ここまで--> </div> </div> </div> <div style="position: relative; top: 0; left: 4em;"> <div class="hidden_box"> <label for="label3">+</label> <input type="checkbox" id="label3"/> <div style="position: relative; top: -20px; left: 30px;" class="hidden_show"> <!--非表示ここから--> <p class="cs"><img src="face.jpg"></p> <!--ここまで--> </div> </div> </div> </div> </div> </body>css/*全体*/ .hidden_box { margin: 20px 0;/*前後の余白*/ padding: 0; } /*ボタン装飾*/ .hidden_box label { padding: auto; font-weight: none; border: solid 1px black; cursor :pointer; } /*ボタンホバー時*/ .hidden_box label:hover { background: #efefef; } /*チェックは見えなくする*/ .hidden_box input { display: none; } /*中身を非表示にしておく*/ .hidden_box .hidden_show { height: 0; padding: 0; overflow: hidden; opacity: 0; transition: 0.0s; } /*クリックで中身表示*/ .hidden_box input:checked ~ .hidden_show { padding: auto; height: auto; opacity: 1; } /*改行後の余白*/ .ss { margin-bottom: 0; }変換' 上書き書込みのサンプル。 ' 元のファイルの内容はクリアされる。 Sub WriteTest1() Set ws1 = Worksheets("init1") Set ws2 = Worksheets("struct") ' エラーの場合、WriteErrorラベルに飛ばす。 On Error GoTo WriteError ' 上書きモードでファイルをオープン Open ".\test.html" For Output As #1 ' オープンしたファイルに文字列を出力 '初期 For i = 1 To 13 Print #1, ws1.Cells(i, 1).Value Next '// ▼▼▼差し込む位置 For i = 1 To 2 Print #1, "<p class=""cs"">" & ws2.Cells(i, 1) & "</p>" Next '// ▲▲▲差し込む位置 'エンド For i = 15 To 20 Print #1, ws1.Cells(i, 1).Value Next ' ファイルをクローズ Close #1 Exit Sub WriteError: Close #1 MsgBox "書込みに失敗しました。" End Sub参考
HTMLとCSSだけ！要素の表示・非表示を切り替える方法
boxの配置 position/css
ホームページ作成 - 文章を下げる（インデント）
[ HTML ] 文字間隔と行間（行の高さ）を設定する ( letter-spacing / line-height ) – 行け！偏差値40プログラマー
HTMLで改行する方法：brとpタグの使い分け方は？
テキストファイルに書き込む方法（Shift-JIS）[エクセルVBA] : バヤシタ
- 投稿日：2020-01-13T07:02:21+09:00
初心者によるプログラミング学習ログ 209日目
100日チャレンジの209日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
209日目は
おはようございます
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) January 12, 2020
209日目
progateでjquery上級編、rubyをⅢまで
技術書でwebサイトコーディング#100DayOfCode#駆け出しエンジニアと繋がりたい #早起きチャレンジ
- 投稿日：2020-01-13T06:10:32+09:00
JavaScriptでJSONからテーブルを動的に生成
以下のサンプルソースは、JSON型データからテーブルを動的に生成し、指定した行数ずつ表示するページング機能を実装しています。「Tabulator」は使っていません。
jsontoTable.html<!DOCTYPE html> <html lang="ja"> <head> <title>サンプル</title> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <style> div#paging { text-align: center; /* スクロールに対してページングボックスの位置を固定 */ position: fixed; /* 位置を指定 */ bottom: 0; right:45%; } div#pagingbox{ background: #FFF; } th{ /* ヘッダ背景塗りつぶし */ background: #eee; } th,td { /* 枠線を1本線指定 */ border: solid 1px; width:auto; } table{ /* 枠線を1本線指定 */ border: solid 1px; border-collapse: collapse; white-space: nowrap; } footer{ position: fixed; width: 100%; background-color: #C0C0C0; padding: 15px 0; bottom: 0; /*下に固定*/ } </style> </head> <body> <!--テーブル生成位置--> <div id ='maintable'></div> <!--ページングボタン配置--> <footer> <div id="paging"> <table> <tr> <tb><button id="prevbtn" type="button"><</button></tb> <tb> <span id="currentpage">currentpage</span> / <span id="lastpage">lastpage</span> </tb> <tb><button id="nextbtn" type="button">></button></tb> </tr> </table> </div> </footer> <script> var json =[ //jsonサンプルデータ { "順位":1 ,"氏名":"王貞治" , "本数":868 } , { "順位":2 ,"氏名":"野村克也" ,"本数":657 } , { "順位":3 ,"氏名":"門田博光" ,"本数":567 } , { "順位":4 ,"氏名":"山本浩二" ,"本数":536 } , { "順位":5 ,"氏名":"清原和博" ,"本数":525 } ] // table要素を生成 var table = document.createElement('table'); // ヘッダーを作成 var tr = document.createElement('tr'); for (key in json[0]) { // th要素を生成 var th = document.createElement('th'); // th要素内にテキストを追加 th.textContent = key; // th要素をtr要素の子要素に追加 tr.appendChild(th); } // tr要素をtable要素の子要素に追加 table.appendChild(tr); // テーブル本体を作成 for (var i = 0; i < json.length; i++) { // tr要素を生成 var tr = document.createElement('tr'); // th・td部分のループ for (key in json[0]) { // td要素を生成 var td = document.createElement('td'); // td要素内にテキストを追加 td.textContent = json[i][key]; // td要素をtr要素の子要素に追加 tr.appendChild(td); } // tr要素をtable要素の子要素に追加 table.appendChild(tr); } // 生成したtable要素を追加する document.getElementById('maintable').appendChild(table); </script> <script>// ページング機能 jQuery(function($) { var page = 0; var displayrows = 30;// １ページ当たり表示する行の数 function draw() {// ページの表示 $('#lastpage').html(Math.ceil(($('tr').size()-1)/displayrows)); $('#currentpage').html(page + 1); $('tr').hide(); $('tr:first,tr:gt(' + page * displayrows + '):lt(' + displayrows + ')').show();// 変数を使用する場合は' + + 'を忘れずに } $('#prevbtn').click(function() {// １ページ後進 if (page > 0) { page--; draw(); } }); $('#nextbtn').click(function() {// １ページ前進 if (page < ($('tr').size() - 1) /displayrows - 1) { page++; draw(); } }); draw();//初回表示 }); </script> </body> </html>結果
json =[ //jsonサンプルデータ { "順位":1 ,"氏名":"王貞治" , "本数":868 } , { "順位":2 ,"氏名":"野村克也" ,"本数":657 } , { "順位":3 ,"氏名":"門田博光" ,"本数":567 } , { "順位":4 ,"氏名":"山本浩二" ,"本数":536 } , { "順位":5 ,"氏名":"清原和博" ,"本数":525 } ]⇓
- 投稿日：2020-01-13T00:11:05+09:00
HTMLとCSS学習完了
あっという間にHTMLとCSSの学習部分が終了。
テキスト通り言われるがままコードを書いただけ。とりあえず表示はされたのでうまくいったのかとは思う・・・
何度も同じコードを打っていたら、なんとなく意味が分かってきた気がする。divがグループを括ってるとか、bodyとかfooterとか。。。最後に確認テストがありました。コードを自分で書いて、ページの左上の方が広さ300px、高さが100pxの範囲を赤くするというもの。全くわからず。。。自分のレベルの低さに愕然。繰り返しコードを書いて、自分のものにしていきたいとおもいます。
