What's New Qiita

20200110のHTMLに関する記事は4件です。

  • 投稿日：2020-01-10T18:20:55+09:00

WordPressで構築されたサイトにGTMのタグを直接header.phpに書き込む方法

全くの初心者です、内容に不足していたら申し訳ございません。

WordPressでサイトを構築しております。
プラグインを使わずに、GTMを設定したいと考えております。
理由は、現在のプラグインの場合スマホの計測が何故かできないためです。

FileZillaを使って直接header.phpにGTMタグをヘッダー直後と、bodyタグに入れようと思っているのですが

下記のようなコードがありました。

>

この場合、body内に埋め込むべき下記のコードはどの部分に記述するのが正しいでしょうか。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

>の直下に記載してみたのですが、GAは動かずという状況です。

恐れいりますが、ご回答ご意見賜れますと幸甚です。

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

M5StickCを使ってブラウザ上で3Dモデルを動かしてみる

はじめに

obnizOSを搭載したM5StickCに内蔵された角速度センサーをコントローラーにして、ブラウザ上の3Dモデルを動かしたいと思います。

ブラウザ上に3Dモデルを描画する方法として、A-Frame（ブラウザ上に簡単にVRや3Dを作成できるフレームワーク）を使用します。

完成品

用意するもの

作成手順

1. プログラムを書く

最終プログラムは以下になります。

index.html
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://aframe.io/releases/latest/aframe.min.js"></script>
  <script src="https://unpkg.com/obniz@3.1.0/obniz.js" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/m5stickcjs/m5stickc.js"></script>
  <style>
    #title{
      text-align: center;
      margin-top: 20px;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>

  <div id="obniz-debug"></div>
  <h1 id="title">M5StickC 3D</h1>
  <a-scene>
    <a-cube id="cube" position="0 1.5 0" rotation="40 0 0" width="1.6" height="0.8" depth="3.4" color="#FF6600">
      <a-plane position="0 0.42 -0.5" rotation="90 0 0" width="0.8" height="1.7" color="#333333"></a-plane>
    </a-cube>
  </a-scene>
  <script>

    const m5 = new M5StickC('OBNIZ_ID_HERE');
    console.log("connecting");

    m5.onconnect = async function(){

      console.log("conncected");
      let imu = m5.wired("MPU6886",{i2c:m5.m5i2c});
      let data = await imu.getGyroWait();
      let cube = document.getElementById("cube");

      let a,b,c,x,y,z;
      [a,b,c,x,y,z] = [data.x,data.z,data.y,0,0,0];

      async function gyro(){
        let data = await imu.getGyroWait();
        x += (data.x-a)/5;
        y += (data.z-b)/5;
        z -= (data.y-c)/5;
        cube.setAttribute("rotation",{x:x,y:y,z:z});
      }
      let interval = setInterval(gyro,200);
    }

  </script>
</body>
</html>


各コードの解説をしていきます。

aframe.js, obniz.js, m5stickc.jsをそれぞれ読み込みます。
obniz.jsを読み込んだ後に、m5stickc.jsを読み込むようにしてください。

<script src="https://aframe.io/releases/latest/aframe.min.js"></script>
<script src="https://unpkg.com/obniz@3.1.0/obniz.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/m5stickcjs/m5stickc.js"></script>


A-Frameの部分は以下になります。
<a-scene>タグでシーンを作成し、<a-cube>で四角形、<a-plane>で平面を作成しています。
position属性で各位置、rotation属性で回転状態を決めています。

<a-scene>
  <a-cube id="cube" position="0 1.5 0" rotation="40 0 0" width="1.6" height="0.8" depth="3.4" color="#FF6600">
    <a-plane position="0 0.42 -0.5" rotation="90 0 0" width="0.8" height="1.7" color="#333333"></a-plane>
  </a-cube>
</a-scene>


このコードでM5StickCのインスタンスを作成します。OBNIZ_ID_HEREにはあなたのobniz_idを入れてください。

const m5 = new M5StickC('OBNIZ_ID_HERE');


M5StickCに内蔵されたMPU6886という６軸センサ（加速度、角速度）を初期化します。

let imu = m5.wired("MPU6886",{i2c:m5.m5i2c});


.getGyroWait()で角速度を一度取得します。

let data = await imu.getGyroWait();

ディスプレイが水平な状態にしてM5StickCを置くと、角速度の値は（x : 0, y : 0, z : 0）になるはずですが、実際に取得してみると、値には少しズレがあります。

そのため、最初にディスプレイが水平な状態で角速度の初期値を取得し、a,b,cに代入します。
その後、data.x, data.y, data.zのそれぞれから初期値 a, b, cを引くことでズレを無くしています。

gyro()という関数を0.2秒に一度実行して、回転角 x, y, zを導出し、<a-cube>のrotation属性に代入することで、M5stickCの動きに合わせて3Dモデルも同じ動きをします。

2. M５StickCを電源に繋ぐ

電源が入ってもディスプレイには何も表示されません。起動したのかわかりづらいですが、電源ボタンを何度も押さないようにしましょう。

3. 実行

実行するとこのようにM5StickCの動きに合わせて、ブラウザ上の３Dモデルも動きます！

最後に

今回は３Dモデルを動かしましたが、M5StickCをコントローラーにしたゲームなどを作ってみるのも面白いかもしれません。色々試してみたいと思います！
最後まで読んでいただきありがとうございました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-01-10T01:02:59+09:00

[未経験] ProgateのHTML＆CSSレッスン受けたからポートフォリオサイト作ってみた。

自己紹介

  • 文理系（？）の４年制大卒

  • 新卒未経験でSES＋受託開発の中小企業に入社

  • 入社後、３ヶ月間の社内研修を受講（C,Java,HTML,CSS,PostgreSQL,Linux..)

  • 現在は大手保険会社のWindowsアプリ開発プロジェクト（C#.Net,SQLite使用）に参画中

  • Web系に転職を検討中。。

Progateについて

  • Progateとは・・・

    　HTML、CSS、Java、Ruby、SQL etc..様々なプログラミング言語をWebまたはスマホで学習できるオンラインプログラミング学習サービスです。
    　➡︎　https://prog-8.com/


  • 今回は『HTML＆CSS』の全７レッスンを受講した後、簡単に自作のポートフォリオサイトを作ってみました!

ポートフォリオサイトについて

FireShot Capture 002 - Sakutomo Studio. - sakutomo07.github.io.png

  • シンプルなデザインで、内容も軽めのTopページのみ作成しました！ （Simpler is usually better...笑)

  • HTML&CSSのみの実装ですので、コンタクトフォームやリンク、ボタンなどありますが、見た目だけになっています。

  • ProgateのHTML＆CSSのレッスン受講〜制作完了までにかかった時間は約５０時間くらいです（ちょっと時間かかりすぎたかもです笑）

  • 制作〜公開までに参考にさせていただいた文献、使用したソフトや開発環境は後述

  • 制作したWebページはGitHubPageにて公開いたしました！

　➡︎ 　https://sakutomo07.github.io/sakutomo_portfolio_ver1.0./

開発環境・使用ソフト・参考サイト

  • 開発環境

    　MacBookAir(macOS Catalina 10.15.2)

  • 使用ソフト

    Visual Studio Code　➡︎　コーディングに使用

    GitHub Desktop　➡︎　ソースファイル、画像ファイルをGitHubにプッシュ（Upload）するために使用

    Numbers　➡︎　主にWebページのイメージを設計するために使用
    　

  • 参考サイト

    ① HTML&CSS学習
    　Progate
    　MDN web docs
    　qiAz web tech blog


    ② 画像データ取得
    　Font Awesome
    　SVG PORN
    　pixaboy
    　Online Logo Maker


    ③ GitHubについて
    　ferret
    　

制作開始〜完成までにやったこと

　1. 目標設定・計画

・目的の明確化　➡︎　ProgateのHTML&CSSのレッスンの復習&実践 　
　
・目標の設定　➡︎　ポートフォリオサイトのTOPページ１枚の作成 　
　
・設計　➡︎　他の方のポートフォリオサイトを参考にどんなデザインにするのか、サイトに入れる内容などを考える。 　
　
　2. コーディング

・設計を基にProgateを復習しながらコーディングを進めていきました。 　
　
・わからない＆Progateで学習した範囲外のことはググって調べながら進めていきました。 　
　
　3. Webページの公開

・ローカルリポジトリ＆GitHubにリモートリポジトリを作成後、ソースファイル・画像ファイルなどをPush（Upload）してGitHubページに公開しました。

所感

　
・良かった点

　
1.　コーディングに入る前に目標設定や簡単な設計によって完成のイメージが固まっていたことで、
　割とスムーズに完成までコーディングすることができました。

　
2.　コーディングで詰まった時など、どうすれば上手くいくか考えたり自分で試してみたりする時間が
　長くなりすぎないように意識し、わからないことはどんどんググっていち早く解決に辿り着けるようにできました。

　
3.　Progateで学んだこと以外に、自分で調べて発見した新しい技術・知識
　（例：CSSだけでWebページをフェードインで表示させる）を取り入れたりして、楽しみながら制作することができました。

　
・反省点

　
1.　目標設定した際に、期限（納期）を定めていなかったことで、少しズルズルと制作をしていました。

　➡︎　今後は制作期間・時間の目標設定を実施
　
2.　まだまだHTML&CSSについての知識、コーディング経験の不足しているため、
　 ソースコードが雑であることが否めない・・

　➡︎　基礎がまだまだ身についていないので、MDN Web Docsなどを読んで知識をinputしつつ、継続的にコーディングしていきます。

今後の目標

　・HTML&CSSだけでなく、JavaScriptやBootstrapなどを学んで、動的機能を持つWebサイトを作成する

　・Ruby,railsを学んでSNSサービス（twitter,instagram)などのコピーサイトを作成する

最後に

最後までご覧いただきありがとうございます。

宜しければ、こちらの記事やソースについて、ご指摘・アドバイス・感想など頂けると幸いです。

まだまだ未経験新卒新人のヒヨコですので、お手柔らかに、、笑

今後ともよろしくお願いいたします！！

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

HTML・CSS

HTML・CSSのまとめ

HTMLとCSSと勉強していて、基本的な事と分かり難かったところ、注意すべき点をまとめました。
（間違いがあった場合は、ご指摘いただけると幸いです。）

HTML

タグ

開始タグ<h1>と終了タグ</h1>に挟まれている『こんにちは』これがコンテンツ。実際の画面に表示されるもの。

h1.png

属性・属性値

タグに追加的な情報を付け加えてくれるのが属性
属性には値を設定しなければならない。それが属性値
上記の例でいうとlinkの属性がrel
＝”stylesheet”のstylesheetが属性値
属性値は必ず””で囲む

zokusei.png

要素の構造

個人的に一番面白かったのがこの要素の構造
親要素、子要素、祖先要素、子孫要素
開始タグと終了タグが同じ位置にくるので、必ずキレイなカーブになります。
綺麗に並べると間違いも見つけやすい。

irekokouzou.png

全てのHTMLに共通するタグ

qiita-html.png

<!DOCTYPE html>

DOCTYPE宣言と言います。
このHTMLは『HTML5』の使用に準拠して書かれていることを示しています。

<html></html>

ルート要素と呼ばれDOCTYPE宣言を除く他の全てのHTMLタグの親要素。子要素として必ずheadタグとbodyタグの２つがこの順番で含まれます。

<head></head>

headタグはメタデータと呼ばれるHTMLのドキュメント自身の情報を記述します。

主に3つの大切な役割。

1.<meta charset>文字コード方式の宣言で必ず<head>のすぐ後ろに記述します。新規のHTML文字コード設定をUFT-8に設定。

2.<title></title>HTML自身の『タイトル』を意味します。
<meta>タグのすぐ後ろに記述します。

3.<link rel="stylesheet" href="●●●●.css">
これはCSSと結び付けるもので必ず必要。

:hand_splayed:<meta>タグの補足
metaタグには覚えておかないといけない重要なタグがあと2つあります。

:star:<meta name="viewport" content="width=device-width,intial-scale-1">
<meta name="viewport">タグは
レスポンシブデザインのページならどんな場合でもこの記述。

:star:<meta name="description" content="●●●●●●●●●●">
<meta name="description">タグの
content属性に概要のテキスト（７０文字程度）を含めます。
SEOでとても重要。

<body></body>

そのページの内容（コンテンツ）を表す要素です。
画面に表示したいコンテンツ全て<body>要素内に配置します。

body要素でよく使われるタグ

<header></header> ヘッダーの部分をまとめるタグ
<main></main>ページの中心となる内容をまとめるタグ
<footer></footer>フッターの部分をまとめるタグ
<h1>~<h6>見出しのタグ
<nav></nav>そのページの主要なナビゲーション　　　　
<div>要素をまとめてグループ化する
<ol>番号付きリスト
<ul>番号なしリスト
<il>ol,ulの子要素
<table>表
<a>リンクの出発点と到達点を指定する
<p>段落
<img src>画像
etc...

:star2:SEOについて

『検索エンジン最適化』のことで検索エンジンからの成果を最大化することです。
検索エンジンとは日本においてはGoogleのこと。

:star2:SEO対策はキーワード順位を上げる意味でもとても重要。
現在はh1,h2タグ。現在、Googleもメタディスクリプションの有無が検索順位に影響を与えることは無いと明言していますが適切なメタディスクリプションを設定すれば、確実にメリットが得られます。

:star2:HPを作る際

いかに多くの人の目に触れるか。という事がとても重要。
そのためにSEO対策だけではなく、レイアウトや内容、出来上がってからのマメな更新がとても大切だと思いました。

CSS

・CSSは、HTMLを装飾して見やすくスタイリングするもので、セレクタ、プロパティ、値で表記されます。
・たくさんの種類のプロパティがあります。
・今回は大まかな説明とfloatを使った配置について記述していこうと思います。

セレクタ　{ プロパティ : 値 ; }
セレクタ.png

リセットCSS

ブラウザによって決められた設定があるため、そのままCSSの入力をするデザインが崩れてしまうことがあります。
そのために一度デフォルトに戻す作業が必要。
決められた記述ではなく、その都度自分でカスタマイズすることができます。

ブロック要素のデフォルトの大きさ

横幅(width)親要素の横幅と同じ
高さ(height)子要素の高さの合計

例

qiita.css
body, html {
  height: 100%;
  background-color: white;
}

h1, h2, h3, h4, h5, h6, p, body {
  font-size: 18px;
  color: #4a4a4a;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

左上に重力があるHTMLの特徴を理解する

HTMLとは左上に重力がある箱のような物でCSSで配置を設定する。

floatでの回り込みとその解除。

左右にボックスを配置し、その下にもう一つのボックスを配置したい時。

floatで左右に配置する（HTML）

qiita.html
      <div class="left-content">
      </div>
      <div class="right-content">
      </div>

(CSS)

qiita.css
    .left-content{
  width: 700px;
  float:left;
  }
.right-content{
  width: 260px;
  float: right;
  }

floatの解除をして下にもう一つのボックスを配置(HTML)

qiita.html
       <div class="bottom-content">
      </div>

CSS clear:both; の設定をする。

qiita.css
   .bottom-content{
  background-color: green;
  clear: both;

:sunny:CSSでclear:both;の設定をすると、入力したセレクタからfloatが解除されます。
その結果、

.bottom-contentのボックスは下に配置されます。

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

日付別

タグ一覧