What's New Qiita

20191130のHTMLに関する記事は7件です。

  • 投稿日：2019-11-30T22:56:14+09:00

高専祭でARスタンプラリーのウェブページを作った時の話

沼津高専2019アドベントカレンダーのトップバッターを務めます、Hoppyです。
今年のアドベントカレンダーは下級生の参加が多い分昨年とはまた違った雰囲気のアドベントカレンダーになると思います。今年もどうぞよろしくお願いいたします。
さて、簡単に自己紹介すると
・高2の春に初めて自分のパソコン(13万くらいのゲーミングノートPC)を持つ
・高2夏からAviUtlで映像を作り始める
・プログラミングの知識は高2、高3に授業でやったC言語の知識(弊学科では親関数と子関数、ポインタなどまでやります)だけ
・ゲーミングノートPCなのにPCゲームなんもやってない
といった感じです。よわよわこうせんせいとか言わないで
そんな僕ですがこの度沼津高専の学生会直属の組織、NIT2.0の企画でARスタンプラリーのサイト制作のほとんどを任されました。

ARスタンプラリーとは、学校内に配置されたQRコードを探し、作成したウェブページ上でマーカーを読み込むことで各学科をモチーフにしたモデルのスタンプを集め、景品をもらうという企画。

ウェブサイトを作る際、デザイン作成→コーディングの順に行うことが多いと思いますが僕はコーディングのみを行いました(デザインはつよつよがいたのでそちらにお願いしました…)
作ったページのリンクです
NIT2.0 ARスタンプラリー

苦労した点を以下にまとめていきます

CSSでハンバーガーメニューの実装、めっちゃ大変やん

HTMLとCSSの基礎知識は某プログラミングについてめっちゃ詳しく教えてくれるサイトのスライドを見たり自分でも本を買うなどし容易に知識を得ることができましたがハンバーガーメニューについてはだいぶ困りました。正直何をどう使えばいいのか全く分からず、3日くらいググりまくりました。
コピペしてそのまま使える！というサイトのコードをコピペしたのにｺﾚｼﾞｬﾅｲ感あったのはいい思い出(遠い目)
そして色々調べまくった結果、以下のコードにより実装ができました。

base-style.css
#ham-menu{
    background-color: #457389;
    box-sizing: border-box;
    height: 100%;
    padding: 10px 40px;
    position: fixed;
    right: -300px;
    top: 0;
    transition: transform 0.1s linear 0s;
    width: 300px;
    z-index: 1000;
}

#ham-menu::before {
    background-color: #457389; 
    border-radius: 0 0 0 10px; 
    color: #333; 
    content: "≡";
    display: block;
    font-size: 60px;
    height: 60px;
    line-height: 60px;
    position: absolute;
    right: 100%;
    text-align: center;
    top: 0;
    width: 60px;
}
#menu-background {
    background-color: #333; 
    display: block;
    height: 100%;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: all 0.1s linear 0s; 
    width: 100%;
    z-index: -1;
}

#ham-menu:hover {
    transform: translate(-300px); 
}

#ham-menu:hover + #menu-background {
    opacity: 0.5;
    z-index: 999;
}

いろいろなサイトの記事を参考にしながらなんとか実装できました。
しかし、ここまでできたものの、最後の最後まであることに苦しめられていました。

ワイ「ハンバーガーメニュー開いてカメラ開いたろ」
ホームのメニュー「ええで」
ワイ「カメラは大丈夫やな、次チケットのページいこ」
カメラの画面のメニュー「…(反応ﾅｼ)」
な　　ぜ　　な　　の　　か

これも3日くらい悩みましたが、メニューのul要素の前にに以下のコードをはめ込むことで問題解決できました。

index.html
            <div id="ham-menu" ontouchstart="">

問題解決できたのは嬉しいですがなんでホームのメニューは反応したのにカメラや他のページのメニューは反応しなかったのかわからずもやもやしています。原因分かるつよつよの方いらっしゃればコメントお願いします。

AR.jsすげえな！

ARスタンプラリーの肝となるQRコードを読み取りモデルを表示させスタンプを押すARカメラの部分。
今回モデルのデータを取り込んだQRコードはこちらのサイトを使用しました。
AR.js Marker Traning
各学科をモチーフにしたモデル、スタンプはFusion360,Blenderにてメンバーが製作しました。
ARカメラを使用する部分については昨年度使用したコードを参考にし、要点をざっくりまとめると
・aframe.min.js、aframe-ar.min.jsを使用
・a-assetsタグで使用するモデル(.objファイルと.mtlファイル)を指定
・a-markerタグで名称、サイズ、表示される向きを指定
をしました。

反省点

・カメラを起動する際読み込みが遅い→モデルのデータが重いから？
・スタンプがどこにあるかのマップを準備できなかった
・知名度が低く参加率が悪かった
・本当はコーディング班があったが全員忙しくて作業の分担ができず、一人でずっと制作していたため自分だけの負担が大きかった

実際に作ってみた感想

学校でやったCに比べ、HTMLやCSSは勉強が少し楽に感じました。HTMLのコードを書いている際、プログラムを組んでるというよりかはどちらかというと映像を作ったりポスターを書いている感覚に近いものがありました。
また初めはARは敷居が高いように感じていましたが実装してみてaframe.min.jsなどを使えば容易にARコンテンツを作ることができとても驚きました。ここ最近様々な分野でARなどが使われている理由がなんとなくわかった気がします。
もっと勉強して自分の作った映像作品を載せるページなども作ってみようと強く思いました。

最後まで読んでくださりありがとうございました。これからのNIT2.0の活動もどうぞよろしくお願いいたします。
Twitter:NIT2.0
個人のやつ
ほっぴー()(本垢) Hoppy(映像等技術関連)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-30T21:25:56+09:00

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

100日チャレンジの173日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

173日目は

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

あまり知られていない（と思う）CSS中央寄せテクニック

CSS中央寄せテクニックとして、

position: absolute;
left: 0;
right: 0;
margin: auto;

はあまりにも有名だが、
親要素より大きな要素を中央寄せしようとすると左寄せになってしまう問題がある。

スクリーンショット 2019-11-30 18.31.59.png

この問題を解消するためのCSSの書き方が以下になります。

css
position: absolute;
left: -100%;
right: -100%;
margin: auto;

スクリーンショット 2019-11-30 18.39.28.png
※left right は必ずしも -100% でなくてもよい。
厳密には親要素からはみ出した数値の半分をleft right にマイナス値で設定する。
上記の場合だと、

親：400px - 子：600px = -200px
-200px / 2 = -100px
left: -100px; right: -100px

こんなときに使える

コンテナー内にあるセクション要素の背景が、コンテナーを突き抜けてるようなデザインだった場合、いちいちコンテナー内からセクション要素を外に出す必要がなくなる。
スクリーンショット 2019-11-30 20.30.12.png

css
section2 {  
  position: relative;

  &::before {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    left: -100%;
    right: -100%;
    margin: auto;
    width: 100vw;
    height: 100%;
    background: url(bg.jpg);
  }
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-30T16:45:43+09:00

flaskでHello world

目標

ブラウザに"Hello, world!"と表示するだけ。
fisrst-flask.png

環境

  • Windows 10 Pro
  • Python 3.7.5
  • flask 1.1.1

ディレクトリ構成

これだけ。
tree.png

ソースコード

index.htmlはVSCode上でEmmetで!と打ってtabで展開したものに<h1>Hello, world!</h1>を書いただけ。

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

sample.pyでport='5555'としてるのに特に理由はない。

from flask import Flask, render_template

# インスタンス化
app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html');

if __name__ == '__main__':
    app.run(host='0.0.0.0', port='5555', debug=True)

起動

>python sample.py
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-30T16:17:11+09:00

【未完成】ドットインストールでHTML/CSS,JavaScriptを学習してみた所感と学習内容

はじめに

フロントエンドに興味がある新人技術者がプログラミング学習サービス「ドットインストール」で学習してみた感想と、そこで得た知識をアウトプットしてみました。
実施したレッスンは以下。
　・HTML/CSSの学習環境を整えよう macOS編 (全5回)
　・はじめてのHTML (全14回)
　・はじめてのCSS (全15回)
　・はじめてのJavaScript (全11回)

活用してみた所感

今回「ドットインストール」を初めて活用して感じた所感をあげていきます。

①動画なので操作がわかりやすい

書籍で学習する際との決定的な違いです。
書籍だと省略されがちな操作方法を動画で見ながら確認できるので、「説明書いてあるけど難しすぎてどう操作していいか分からない」といった詰み状態にならないのが最大のメリットだと思いました。

②手軽に学習できるため、学習がストップしない

動画1本の時間が1〜3分くらいと短めなので、集中力が切れることなくサクサク進められるのが特徴です。
ゲームのステージをこなしていく感覚で実際に手を使いながらどんどん学習できます。

③OSごとの解説がある

環境設定やショートカットキーなど、Mac環境とWindows環境で異なる部分の解説をしっかりとしてくれているため、誰でもスムーズに学習に取り組めます。
個人的に、覚えておいて役立つショートカットキーを動画内で説明してくれるのはありがたかったです。

④自分に必要なレッスンが分かりやすい

目的別でやるべきレッスンがまとめられているため、初心者にありがちな「何から手をつけていいか分からない問題」が起こりづらいのではないでしょうか。
動画内でも事前に受けておいた方が良いレッスンを教えてくれるので、迷いなく学習に入れます。

実際に学習した内容

以下、実施したレッスンのアウトプットです。
なぜこのレッスンを選んだのかも記載していきます。

① HTML/CSSの学習環境を整えよう [macOS編]

もともとJavaScriptを勉強しよう！と思い、後に出てくる「はじめてのJavaScript (全11回)」を始めたのですが、動画冒頭で「HTML/CSS」の学習が大前提と説明があったため、HTML/CSSの学習から始めることに。
エディター環境が整っていなかったため、このレッスンをまず実施しました。
MacOS編とWindows編があり、とても親切。
レッスン内容は以下。
　・Chromeブラウザの導入方法
　・VS Codeの導入と設定

②はじめてのHTML

①の経緯で学習を開始。
実際に手を動かしながら簡単なプロフィールサイトを作成していきます。
以下、レッスンのアウトプット。

■タグでテキストを意味付けしていくことを”マークアップする”という

index.html
<h1>ダイエット</h1>
<p>健康的なダイエット法を紹介します。</p>

■タグの種類

<h1></h1> : 見出しタグ。数字が小さいほど大きな見出しになる。
<p></p> : 段落タグ。
<img src="画像のファイル名"> : 画像を表示するためのタグ。マークアップする文章がないため、終了タグは不要。

※参考になったタグ入れの子ルール

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

HTMLで動的にクラス名をつける

HTMLでeachやtimesで同じクラスを複数個作成した時に一つだけに別のcssを当てたくなるような状況が出てきたので、いっそのこと繰り返し処理中に異なるクラス名を動的に作成できないかと思ってやってみました。

どんな状況か


よく見ると、２つの箱の重なる部分の線が太くなっています。
cssは箱のborderを囲うものを当てています。
この２つの箱は同じクラス名で、cssも同じものを当てているためこうなってしまいました。

実際のコード

sample.html.haml
 - 2.times do |number|
   .history_single__category
     - case number
     - when 0
       = rec.donation_day
     - when 1
       = rec.inspection_method

このように、timesで2回同じクラスを作成しています。
そのため、上の図のようなことになっているので、動的にクラス名をつけてみたいと思います。

対策

sample.html.haml
 - 2.times do |number|
   .history_single__category{class: "category#{number}"}
     - case number
     - when 0
       = rec.donation_day
     - when 1
       = rec.inspection_method
sample.scss
 .category1 {
   border-left: none;
 }

今回の場合は、timesでnumberという変数を宣言しているので、それを使って２行目のようにクラスを動的に作成しています。
あとは、cssで２番目のクラス(今回の場合だとcategory1)に左のボーダーを消すようなcssを当てると、

このように他の部分と同じ線の太さにすることができました。

他にも

sample.html.haml
 - @records.each.with_index(1) do |record, i|
   .sample{class: "result#{i}"}

each_with_indexでも同じように使うことができます。
また、番号が0から始まるのがわかりづらいときはこのように1から始まるように指定してあげたほうが良いのかもしれません。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-30T00:25:15+09:00

GitHubのポップアップメニューはdetailsタグと:beforeが使われててクレバーだった

概要

普段使ってるGitHubのUIパーツの実装を見てみたら真似したいエッセンスがあったので紹介します。

GitHub上でちょいちょい使われてるポップアップメニュー

Nov-29-2019 22-44-08.gif
図 マイページのコンテキスト切り替えメニュー

Nov-29-2019 22-27-24.gif
図 プルリクエストページのプロジェクト選択メニュー

なにが優れてる？

  • Javascript使ってない
  • メニュー外をクリックしたらメニューが閉じる

サンプルコード

https://codepen.io/y-tsuzaki/pen/abzoOgL

Nov-29-2019 23-05-14.gif

<div class="wrap">
  <details>
    <summary>button</summary>
    <div>menu</div>
  </details>
</div>

*,
*:before,
*:after {
  box-sizing: border-box;
}

.wrap {
  width: 500px;
  height: 500px;
  margin: 0 auto;
  padding: 50px 50px;
}

details > div {
  position: absolute;
  display: block;
  width: 200px;
  height: 200px;
  border: 1px solid rgba(27, 31, 35, 0.15);
  border-radius: 3px;
  box-shadow: 0 3px 12px rgba(27, 31, 35, 0.15);
  z-index: 100;
}

details[open] > summary:before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  background: transparent;
}

Javascript使ってない

GitHubで使われてるHTMLタグをみてみましょう

HTML抜粋したコード
<details>
  <summary>
    メニュー開くボタン
  </summary>
  <details-menu>
　　コンテンツ内容
  </details-menu>
</details>

ポップアップメニューは、detailsとsummaryというタグで構成されています。
(details-menuはカスタムエレメントです。今回は割愛してdivとして扱います。)

detailsとsummaryは,HTML5.1にて追加されたHTMLタグです。

Detailsタグとは

HTML の詳細折りたたみ要素 (<details>) は、ウィジェットが open 状態になった時のみ情報が表示される折りたたみウィジェットを作成します。概要やラベルは<summary>要素を使用して提供することができます。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/details

Nov-29-2019 23-23-40.gif

このタグを装飾することでメニューの開閉をJavascriptなしで実現することが出来ます。
今回の例ではdetails > divをposition: absoluteとして、box-shadowで影を落とすことで、浮き出たメニューを表現しています。

detailsタグを使う以外にもJavascriptなしでこのような開閉メニューを作る方法あります。
見えないcheckboxを作って、checked属性の有無でスタイルを変更するというテクニックです。

しかし、checkboxはそう行った目的のタグではないため、メニューの開閉に使うというのは直感的ではありません。
details、summaryの方が表示の開閉をイメージしやすく直感的なためこちらの方が目的にあったタグだと考えます。
（対応ブラウザの話はさておいて）

メニュー外をクリックした時にメニューが閉じる

detailsタグをそのまま使っただけでは、summary部分をクリックしない限り閉じてくれません。
GitHubでは、:beforeを使ったテクニックを使っていました。

Nov-29-2019 23-54-28.gif

わかりやすくするために:beforeの要素を赤い半透明にしてみました。
メニュー外に透明な当たり判定用のパネルを広げているんですね。

:beforeを使わない場合は、Javascriptで処理を書かなければいけないと思いますが、
このやり方だとJavascriptなしでスッキリかけますね。

デメリット

まとめ

  • GitHubのポップアップメニューはJavascriptなしで動いてすごい
  • detailsタグ
    • HTML5.1で追加になった
    • 詳細折りたたみ要素
    • めっちゃいいけどIEとEDGE未対応
  • 透明な:beforeをヒットボックスにするアイデアいいね
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧