What's New Qiita

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

  • 投稿日：2019-07-07T21:37:06+09:00

【HTML】ページ内リンクを作る方法

ページ内リンクを作る方法

手順
①リンク先のタグにidで名前をつける
※classで名前を作るとうまくいきません
②anchorタグにhref="リンク先の名前"をつける

参考コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Link</title>
    <style>
        header {
            border: 1px solid black;
            height: 100px;
        }
        main {
            margin: 30px auto;
            border: 1px solid black;
        }
        section {
            border: 1px solid red;
            height: 500px;
            margin: 30px;
        }
    </style>
</head>
<body>
    <header>
        Header<br>
        <a href="#section1">Section1</a>
        <a href="#section2">Section2</a>
        <a href="#section3">Section3</a>
        <a href="#section4">Section4</a>
    </header>
    <main>
        Main
        <section id="section1">Section1</section>
        <section id="section2">Section2</section>
        <section id="section3">Section3</section> 
        <section id="section4">Section4</section>
    </main>
</body>
</html>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-07T20:16:57+09:00

HTMLでテーブルのヘッダー（上部と左部）を固定してスクロールさせる実装

はじめに

テーブルのヘッダー（上部と左部）を固定してスクロールさせる実装でプラグインなどを比較したため、備忘録を含めまとめたいと思います。

position:stickの実装方法

まず、大前提として本来であればposition:stickyを使用することが望ましいかと思いました。
こちらの方の記事が大変わかりやすいです。
https://qiita.com/s0tter/items/14fb4ec2600828a21a22
CSSのみで完結するため上記手法が望ましいかと考えておりますが、2019年7月7日時点でIEに対応しておりません。IEのユーザーもアプリを活用されることが予想されるため、採用を見送りさせていただきました。
https://caniuse.com/#search=position%3A%20sticky

position:sticky対応状況

スクリーンショット 2019-07-07 17.43.02.png

可能であれば、position:stickyを使用したいのですが、今回はIEの関係で採用が難しいため、以下のプラグイン等を比較いたしました。

プラグインを比較してみました。

当方Macしかパソコンを持ち合わせていないため、virtualBoxでIEを立ち上げて
動作状況を確認してみました。

・DataTable

Github:https://github.com/DataTables/DataTables
https://datatables.net/extensions/fixedcolumns/examples/initialisation/two_columns.html
最終更新:2018年6月23日

IEでの動作状況

ezgif.com-video-to-gif.gif

・fixedTblHdrLftCol

Github:https://github.com/nkmrshn/fixedTblHdrLftCol
http://nkmrshn.com/fixedTblHdrLftCol/samples/sample_3_sync.html
最終更新:2014年6月13日

IEでの動作状況

ezgif.com-video-to-gif.gif

・FixwdMidashi

http://hp.vector.co.jp/authors/VA056612/fixed_midashi/manual/index.html
最終更新:2018年12月3日

IEでの動作状況

ezgif.com-video-to-gif.gif

・Grid

（まだまとめている最中です。）

IEで最も綺麗に動作しているのが、FixwdMidashiだったように思えます。
他に良い方法などございましたら、一声かけていただけますと幸いです。

少しずつ追加させていただきます。
ご参考になれば幸いです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-07T20:14:49+09:00

小学2年生にプログラムをさせてみた

きっかけ

同僚と飲んでいる時、こんな話がありました。

同僚A
「うちの子供（小２）にそろそろプログラムさせようかな？」
同僚B
「いいねぇ。自由研究の課題でDNSサーバーとか作らせるとかw」
私
うちも小２だからやらせようかな
でも何からやればいいかなー

という話をぐだぐたしていました。

それから数週間後、夏休みの自由課題の話になり、パチンコ作るとか、楽器作ってみるとか、小学生らしい話になってみましたが、、、
ふと、「プログラムやってみる？」と言ったところ、「やってみる！」という話に。
ということで、やってみました。

家族構成(2019年時点)

私:SE
嫁:Webデザイナー
息子(兄):小学２年生
息子(弟):年中さん

環境

mac Mojave 10.14.5
Javascrpit
HTML
Visual Studio Code
Chrome

業務要件

・ぐーちょきぱーを選べる
・対戦相手はコンピューター

ソースコード（随時更新）

こちら(Github)

最初にやったこと

まずは「変数」というものを教えてみました。「なんか箱なんだよ」という軽めの説明。
自分でタイピングして画面に出してみせました。

var i;
i= "ぐー";
document.write(i);

息子:おおぉ！
反応はよさそうです。じゃんけんゲームを作る事に。
ここでとりあえず、「ちょき」とか「ぱー」とか画面にでるようにコードをかかせてみました。
タイピングの練習も兼ねています。普段、スマホでぐぐるくらいはできるようになっている為、わりとキーボード入力もすぐ慣れました。
ローマ字入力をまだ覚えていないので、それっぽいローマ字で。

var a;
a="cyoki";
document.write(a);
var b;
b="pa";  
document.write(b);
var c; 
c="guu";
document.write(c);

ここまでは何とか理解できたようです。
66399956_10211338830825460_1643360074925604864_o.jpg

if文にチャレンジ

じゃんけんする以上、条件分岐は必須です。とりあえずだらだら書きながら説明してみました。

if(i=="ぐー" && j=="ぐー"){
  document.write("どっちもあいこになりました");
}

まぁちょっとこのあたりはまだ理解できないかもですね。。。

UI/UXに挑戦

次にゲームをする為には画面が必要です。とりあえずどんな画面にするか考えさせました。
UI/UXの講師はWebデザイナーのママです。
(この間に私は弟の散髪屋に）
66324002_10211339871851485_3930939216749395968_o.jpg
それなりに画面遷移について議論があったようです。

2019/7/9追記
議論ポイントは「ぐーちょきぱーを選んだあとに変更できるか？」
嫁：変更できない。じゃんけんは勢いで出してすぐ勝負がきまる。あと1クリック増えるとわずらわしい。
子：変更できる。いろいろ悩んで決定したい。
とのこと(笑)

本日はここまで(2019/7/7)

次回は、HTMLで画面を作ります。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-07T19:24:45+09:00

HTML の 入れ子 について

目的

  • 入れ子について簡単にまとめる。
    ※予備知識が増え次第追記を行う予定。
    ※本記事は主にHTMLの入れ子について記載する。

入れ子

  • 要素を要素で囲むこと

HTMLでのリストの記載を抜粋した画像で説明を行う。
赤枠の部分がul要素である。
黄枠の部分がli要素である。
このときul要素がli要素を包み込んでいることになる。
このような状態を「入れ子」という。
入れ子の関係を見た目で分かりやすくするためにインデントを用いる。

HTMLでのリストの記載を抜粋した画像を記載する。
説明概要_1.png

親要素と子要素

  • 入れ子での各要素の名称。

HTMLでのリストの記載を抜粋した画像で説明を行う。
赤の部分がul要素である。
黄の部分がli要素である。
このときul要素がli要素を包み込んでいることになる。
外側の要素を「親要素」と呼ぶ。
内側の要素を「子要素」と呼ぶ。

HTMLでのリストの記載を抜粋した画像を記載する。
説明概要_2.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-07T18:52:23+09:00

HTML で リスト (箇条書き) を 作成する

目的

  • HTMLでリスト(箇条書き)の作成方法をまとめる。

押さえるポイント

  • リストで箇条書きにしたい内容をliタグで囲む。
  • liタグをulタグで囲む。
  • ulタグとliタグにはインデントを用いて入れ子の関係をわかりやすくする。

書き方の例

<ul>
  <li>(リストとして記載したい内容を記入する-1)</li>
  <li>(リストとして記載したい内容を記入する-2)</li>
  <li>(リストとして記載したい内容を記入する-3)</li>
</ul>

〜実際の表示〜

  • (リストとして記載したい内容を記入する-1)
  • (リストとして記載したい内容を記入する-2)
  • (リストとして記載したい内容を記入する-3)

注意するポイント

  • liタグはデフォルトだと内容の前に黒点が自動で追加される。
  • ulタグが親要素、liが子要素。
  • 入れ子の関係を見た目でわかりやすくするため、インデントを利用する。

より具体的な例

挨拶に関するリストを作成する。

リストに箇条書きする内容は、おはようございます。こんにちは。こんばんは。とする

〜サンプルコード〜

<ul>
  <li>おはようございます。</li>
  <li>こんにちは。</li>
  <li>こんばんは。</li>
</ul>

〜プレビュー画面〜

  • おはようございます。
  • こんにちは。
  • こんばんは。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-07T00:24:21+09:00

シノビリフレに学ぶ固定メニュー

なんてことない土曜日の話

新しいサイトのレイアウトの参考にと、にじいろクリップを眺めていた時のことでした。

なんかこう、ビビッ!!とくるサイトないかなぁ……
そう、某「いつでも、どこでも、誰とでも」なハイブリッドゲーム機のHD振動みたいに
心の芯が揺さぶられるような……ん？

そう、見つけてしまったのです。シノビリフレのサイトを！

こ、こいつは……下端固定メニューだと！？

そこに書かれていたのは、衝撃的な事実でした。

なんと810円にプライスダウンされていた！

上端のメニューを一部だけ固定するのは比較的簡単にできます。

body
　header
　nav
　div#body
　footer

といったタグ構成（header+navでヘッダー）の場合

nav {
  position: sticky;
  top: 0;
}

だけで大体終わります。
一定位置までスクロールしたらfixedのnavを表示するとかは必要ありません。
IEユーザは文句を言う前に、対応ブラウザへ移行しましょう。

今回の下端固定メニューの場合も実際には、

body
　header
　div#body
　nav
　footer

nav {
  position: sticky;
  bottom: 0;
}

だけで済む話なんです。ええ。

それではシノビリフレのタグ構成を見てみましょう。

body
　header
　div#body
　footer
　　nav
　　others (最下部にした時に表示されるもの)

そこに書かれていたのは、衝撃的な事実(タグ構成)でした。
ちなみにnavのみ表示されている時は、footerに.fixedが付いています。

さて、貴方ならどうやって実装しますか？ 少しだけ考えてみてください。

特定の条件を満たすと「裏オプション」も

どう実装されているかを確認するより、どう実装するかを考えた方が勉強になります。
というわけで、タグ構成はこのままでチャレンジしてみました。

とりあえずCSSだけで頑張った

footer.fixed {
  position: sticky;
  bottom: 0;
}
footer.fixed > :not(nav) {
  display: none;
}

見た目上と表示上はいい感じに再現されたものの、最下部に来るとスクロール領域が増えてスクロールバーがぴょこぴょこします。
シノビリフレはそんなことしない！

仕方なくjsでも手を加えた

ぴょこぴょこしない方法は分かっているのです。

footer.fixed {
  position: sticky;
  bottom: XXXX;    // -(othersのheight)px
}

とすれば良いのですが、XXXXは決め打ち以外にcssで当てようがありません。
どうせ.fixedの着脱時にDOMやwindowのサイズを使用しているので、js側で直接footerにbottomだけstyle付与しました。
これで大体シノビリフレと同じ挙動になってくれます。
ところで、.fixedなのにposition: sticky;ってどんな裏仕様ですか？

実際のところどうなのか

詳細までは見る気が起きなかったですが、以下の特徴を見るにサイズは決め打ちでしょうね。

footerにposition:absolute;
footer.fixedにposition:fixed;
bodyにfooter用のpadding-bottom指定

無駄に勉強させてもらった感じとなりました。

CSSが思い通りに当たらない場合は、HTMLのタグ構成から見直すべき

途中にも書きましたが、stickyを使えば上端固定メニューも下端固定メニューも結構簡単に実装できます。
ですが、適当に書いたHTMLと、それを無理矢理デザインに寄せたCSSの場合は、大体うまく行かずにどこかが崩れます。そんな場合は、どんなに詳しくてもCSSだけで対処するのではなく、HTMLのタグ構成から見直してはどうでしょう？　それくらいサイトデザインとHTMLは密接な関係にあるんですよ！というお話でした。
あるいは全タグにidを振ってデザイン管理しましょう！(ﾏﾃ

体形を見ただけで３サイズを当てられる特技は無くてもいいですから、
適当なサイトを眺めるだけで、おおよそのタグ構成が想像できるようになると良いですよね！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧