What's New Qiita

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

  • 投稿日：2019-11-26T21:42:26+09:00

※Haml記事まとめ

はじめに

記事数が多くなってきたので、ジャンル別に記事のリンクをまとめます。
本記事はHamlです。

リンク

Hamlの基本箇所についての復習①(基本的な書き方)
Hamlの基本箇所についての復習②（＝）
Hamlの基本箇所についての復習③（%p.class）
Hamlの基本箇所についての復習④（ネスト）

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

要素の表示非表示は visibility:hidden の方が display:none よりも高速

はじめに

ACCESS Advent Calendar 2019 の25日目最終日です。

初めまして、今年一番ハマったソシャゲはドラクエウォークの @naohikowatanabe です。

HTML 的要素の表示非表示の基本

一般的には HTML 的に要素の表示非表示を行う際、以下のように言われます。
・要素の非表示は display:none か visibility:hidden で実現出来る
・visibility:hidden は「見えない＋要素自体は存在する」
・display:none は「見えない＋要素自体無し」
・visibility:hidden の方が要素の削除が無いので高速

本記事ではどの程度速度に差があるのか、を見ていきます。
＃組込ブラウザのお仕事をやっているとお客さんからこの質問が非常に多い。。
＃なのでまとめてしまう。

測定

display:none と visibility:hidden の違い の HTML をベースに、
「display:none による表示非表示100万回」
「visibility:hidden による表示非表示100万回」
を行うようにコードを変更し、測定します。

html

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>difference between visibility hidden and display none</title>
    <link rel="stylesheet" href="css/style.css">
    <script>
    const loop_count = 1000000;

    function visibilityhidden () {
      const two = document.getElementById("two");
      const startTime = Date.now();
      for (i = 0; i < loop_count; i++) {
        two.style.visibility = "hidden";
        two.style.visibility = "visible";
      }
      const endTime = Date.now();
      console.log("visibility:hidden " + (endTime - startTime) + " [msec]");
    }

    function displaynone () {
      const three = document.getElementById("three");
      const startTime = Date.now();
      for (i = 0; i < loop_count; i++) {
        three.style.display = "none";
        three.style.display = "inline";
      }
      const endTime = Date.now();
      console.log("display:none " + (endTime - startTime) + " [msec]");
    }
    </script>
</head>
<body>
    <div id="one" class="box"></div>
    <div id="two" class="box">
        <h3>Visibility:hidden</h3>
        エレメント描画されず。けど、表示エリアは「残る」。背景色で塗りつぶした感じ。
    </div>
    <div id="three" class="box">
        <h3>display:none</h3>
        エレメントが表示エリアから消える。DOMとして存在はするけど描画されない。
    </div>
    <div id="four" class="box"></div>

    <button onclick="visibilityhidden()">visibility:hidden * 100万回</button>
    <button onclick="displaynone()">display:none * 100万回</button>
</body>
</html>

CSS

オリジナルから変えてません。

@charset "UTF-8";

.box{
  width:150px;
  height:150px;
  margin:10px;
  border-radius: 10px;        /* CSS3草案 */
  -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
  -moz-border-radius: 10px;   /* Firefox用 */
  float:left;
  padding:20px;
}

#one{

  background:#000;
}

#two{
  /*visibility:hidden;*/
  background:#9eccb3;
}

#three{
  background:#f47d44;
  /*display:none;*/
}

#four{
  background:#000;
  clear:right;
}

表示結果

Screenshot2019-11-26_1.png

測定結果

やり方 時間[msec]
display:none 100万回 1000
visibility:hidden 100万回 888

visibility:hidden の方が1割程度高速です。
PC 環境ではあまり気にならないですが、
組込環境ではマシンパワーが非力な場合が多いのでこういうところで少しずつ気を付けるのが良いですね。

Screenshot2019-11-26.png

まとめ

要素の表示非表示は visibility:hidden の方が display:none よりも1割程度高速。

参考

display:none と visibility:hidden の違い

終わりに

本記事で ACCESS Advent Calendar 2019 無事終了です。
ここまで見ていただいた皆様に感謝です。

それでは皆様、良いお年を！
来年もよろしくお願いします！

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

大きい画像をスマホで見たときに縮小する方法

趣味とポートフォリオを兼ねて自分が主催しているダンスイベントのサイトを作っています。

 

 

 

 

 

 

配置は基本的な構成なのですが、トップ画像で問題発生。

 

縦長のサイズのトップ画像が、PCサイズからスマホサイズに可変しない。

 

 

 

 

 

Googleで調べてみると

 

 

 

 

 

img{

width: 100%;

height: auto;

}

 

とあったんですが、これだとスマホサイズにはなるんですが、今度はPCサイズに可変しなくなりました。

 

 

 

 

 

色々と試行錯誤した結果

 

 

 

.main-view .top-img{
　　width: 100%;
height: 0;
padding-top: 50%;
padding-bottom: 80%;
background-image: url("画像のファイル");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
} 

 

 

これでスマホサイズにもPCサイズにも可変するようになりました。

 

 

 

ヘッダー下にdivタグを作成して、CSSにバックグラウンドとして画像を挿入。

 

パディングの余白を%で追加することで縦長のフライヤーも出現しました。

 

 

 

 

画像の出し方一つでも色々な要素が出てくるので、一つずつ理解していきたいです。

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

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

100日チャレンジの169日目

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

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

169日目は

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

Nuxt.jsに飛びつく前に~Nuxt.jsを習得するための前提技術と、その勉強方法の紹介~

概要

Nuxt.jsは今最もイケてるゥ!最高にCooooooolなWEB開発フレームワークです。巷でNuxt.jsについての記事も増えていますね。
しかし、ネット上のNuxt.jsの記事では、Nuxt.jsを始める上で前提となる前提知識の存在が省略されているように思います。Nuxt.jsはVue.jsの発展形(=Nuxt.jsを触る人はVue.jsの経験があるという前提）なので当然と言えば当然なのですが。

本記事では、これからWEB開発者を目指す人を対象に、
・Nuxt.jsを習得するには何が必要か？
・そのための勉強方法
を紹介します。

自己紹介

Nuxt.jsとFirebaseを用いたWEBアプリ開発を担当することになりました。
Pythonはある程度触ってきたものの（機械学習やスクレイピング等）、WEB開発は全くの未経験。Progateや入門書を触って、簡単なWEBサイトを公開した経験がある程度でした。

失敗談「とりあえずNuxtアプリを作ってみたけど・・・・・・・?」

さて、Nuxt.jsは公式ドキュメントの内容が充実しており、"分かりやすい"です。
しかも驚くべきことに日本語に翻訳されています。

例えば、npxさえ事前にインストールされていれば下記の簡単なコマンドで簡単にプロジェクト(※)を始めることができます。
(※厳密には違うのですが、初心者の方は「プロジェクトを作る=アプリを作る」と読みかえてください)
Nuxt.js - ユニバーサル Vue.js アプリケーション/インストール

//任意のディレクトリで下記を実行すると、<project-name>という名前のプロジェクトが作成されます
$ npx create-nuxt-app <project-name>

//サーバーを立ち上げます。http://localhost:3000で確認できます
$ npm run dev

また、Nuxt.jsとFirebaseを組み合わせることも簡単です。
私は下記記事を参考にユーザー認証を実装しました。
『FirebaseとNuxt.jsを使ってユーザ認証関係を簡単に作ってみる+1ヶ月前の自分に教えたいリンク集
あとはTwitterでログインできる簡単なチャットなんかも作りましたね。

ここまでで、カタチがあり動くものを何となく作れました。

しかし、WEBエンジニアとして自分が殆ど成長していないことに気付きます。なぜなら、Nuxt.jsの中身を理解できているわけではないから。「このままだとググってコピペすることしかできないし、永遠にWEBエンジニアとして自立できない」と危機感を募らせました。

Nuxt.jsに飛びつく前にまず基本をちゃんと押さえよう

「Nuxt.jsは公式ドキュメントが充実していて分かりやすい」とよく言われていますが、正直当初はさっぱり分かりませんでした。
ええ、Nuxt.jsのドキュメントはとても優良なドキュメントです。
しかし但書をつけると、「(Vue.jsの経験がある人には）Nuxt.jsは公式ドキュメントが充実していて分かりやすい」んですね。なぜなら、Nuxt.jsはVue.jsを発展させて、その弱点を補ったものだからです。

なので、Nuxt.jsに飛びつく前にまず基本をきちんと押さえましょう。（自戒を込めて）

Nuxt.jsを習得するために必要な技術

さて、いよいよ本題です。WEB開発未経験者がNuxt.jsを習得するために必要な要素を列挙します。

Vue.js
「コンポーネントとは？」「テンプレートとは？」等、基本を抑えていますか？ ごく簡単なもので良いので、フルスクラッチ※（後述）で一つ一つのファイルやコードの意味をきちんと理解しながらアプリを作ってみると良いです。
JavaScript ES6
Progateレベルだと少し物足りないです。特にアロー関数は頻繁に使いますね。おすすめは「MDN web docs」を読むことです。
JSON
超大事です!エンジニアにとって当たり前の知識ですが、何となくで済ませてきた人も多いのではないでしょうか。この機会にしっかりと理解しましょう。おすすめは「MDN web docs」を読むことです。
HTML
やはりProgateレベルだと少し物足りないです。おすすめは「MDN web docs」を読むことです。
CSS
CSSはProgateで十分ですね。
WEB開発の基本知識
コードを書くのと直接は関係ないですが、きちんと理解しておくと学習が捗ります。おすすめは「MDN web docs」を(略）

「こんなにやってられないよ」と思う方。安心してください！
それぞれのおすすめの教材もきちんとご紹介します。
目標(=Nuxt.jsを扱えるようになる）と目標に向けて自分に必要なカリキュラムが明確に分かっていれば、短期間で効率的に学習することができます。具体的には合わせて2週間程度で、無理なくNuxt.jsを習得するための準備学習を完了できます。

おすすめの学習教材・方法

「Vue.jsは未経験だがES6は分かる」「正直HTMLも怪しい・・・」とレベル感に差があると思うので、三つのペルソナに分けました。ご自身のレベルに応じて参考になさってください。

「Vue.jsの経験がある、基本がわかる」人向け

公式ドキュメントや『Nuxt.jsビギナーズガイド Vue.jsベースのフレームワークによるシングルページアプリケーション』がおすすめです。

「Vue.js未経験、Vueだけ分からない」人向け

『Vue.js&Nuxt.js超入門』
正直、時間がない方はこれ一冊でも良いかもしれません。
Nuxt.jsを習得するためのVue.jsやJavaScriptを網羅しています。
特に素晴らしいのですが、フルスクラッチで（=一枚のHTMLファイルから手作業で）Vue.jsのアプリを作っていくので、Vue.jsの構造やファイルの中身を一つ一つきちんと理解できます。
僕は本書がきっかけで急に理解が深まりました（掌田さんの本は片っ端から揃えようと思います）。

「Progateは終わったけど・・・」「正直WEB開発の基本も自信ない」「JSONって何？」人向け

「MDN web docs」を読みましょう！
「MDN web docs」はGoogleやMicroSoft等、世界のトップレベルの人たちが中心に作成しているサイトです。つまり情報の信頼性がこの上なく高いので、正確で丁寧な理解ができます。「でも難しいんでしょ？」と思われた方、そんなことはありません。むしろ、文章量が紙幅に制限されないので懇切丁寧に解説が記述されており、とても分かりやすいです。しかも完全無料。（ほぼ）日本語対応。あらゆる点で書籍や大学の情報系の講義より遥かに優れた教材です。
何とWEB入門やJavaScriptの第一歩などの体系的なカリキュラムまで備えています。

ただ、プログラミングの知識が全くのゼロの状態で読むと少し辛いと思うので、プログラミング初心者の方はまずProgateから始めるのが良いでしょう。

終わりに

さあ、これで貴方もNuxt.js公式ドキュメントが「分かりやすい」と感じられるようになります。
自分のレベルに合わせて、無理なく学習を進めてください。
良いエンジニアライフを〜

参考文献

Nuxt.js 公式ドキュメント
MDN web docs
『Nuxt.jsビギナーズガイド Vue.jsベースのフレームワークによるシングルページアプリケーション』
『Vue.js&Nuxt.js超入門』

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

日付別

タグ一覧