What's New Qiita

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

  • 投稿日：2020-09-16T20:43:34+09:00

Tsハロトレ22日目

レンタルサーバー

・忍者ツールズ
永久にホームページが見れます。

・XFREE
データベースは使えますが、3か月ごとに更新する必要があります。

・StarServerFree
PHP・MySQL対応プランがあります。

illustrator

初心者参考サイト

illustrator 入門

Photoshop　入門

Webサイトに地図を載せる場合

illustraterのSVG形式の手書き地図とGoogle Mapの地図が必要です。

参考：タブパネル

地図作り

斜めの道を作る2.png

斜めの道2.png

オブジェクト＞パス＞平均　（Ctrl+J）
オブジェクト＞パス＞連結　（Ctrl+J+Alt）
平均連結2.png

地図のクリッピングマスク

mapmask.png

長方形ツール
tyoho線塗り入替2.png
線の内側に揃える
紙なので線の内側に揃える2.png

編集＞前面へペースト
前面ペースト2.png

オブジェクト＞クリッピングマスク＞作成
mapクリッピングマスク2.png

オブジェクト＞アートボード＞選択オブジェクトに合わせる

Web用に保存＞PNG-24

Web用の地図で枠線の入れ方

１．クリッピングマスク作成時の枠線を表示
--- クリッピングマスク用の四角
--- 枠線用の四角
この2つの2重構造になっている

２．Web用に保存するときに枠線を消すと、正確なサイズの幅・高さの書き出しができます。
枠線は、HTML+CSSで設定すると、枠線のpxで滲むなどは防げます。

CSSでmapの枠線を入れる手順

01map2.png

02artboard2.png

03Web用に.png

スクリーンショット 2020-09-17 11.39.35.png

グリッド

960 grid systemsをダウンロード
960.png

ドキュメント設定2.png

Web用に保存で注意すること

「Web用に保存」は、幅を統一することを意識しましょう。

名前をつけて保存で注意すること

・0916-map　ハイフン使うと名前が分かれます。
・0916_map　アンダースコアは名前が連結されます。

日本語名は、開けないサーバーがあるので、英数字で記入しましょう。

Web画像作成で、保存してサイトに乗せる準備をする

１．Web画像作成
２．Web用に保存
３．その画像をHTML内に挿入

マルチデバイス対応

wh_utanai2.png

代わりにCSSで設定します。

img{
max-width: 100%;
}

　name="viewport"は、スマートフォン対応させますよ。
　content="width=device-width"は、スマホ、タブレット、PCどれでも同じ画面幅になりますよ。という意味になります。

metawidth2.png

アセンダとディセンダ

画像は、img{vertical-align: bottom;}と記入して、ディセンダの空きを取るようにしましょう。
アセンダは、大文字の「Q」や「G」の上の部分で、ディセンダは小文字の「q」や「g」などの下の部分です。
vertical-align2.png

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

計算機作ってみた。

初心者ですがアプリ的なのをつくてみました

複数同時計算機のAです。

使用言語はHTML、JavaScript　です。

HTMLのコードです。

  <h1>計算プログラム</h1> 
  <h2>足し算</h2>

  <div>
     1つ目の値<input type="text" id="atai1">       <br>

     2つ目の値<input type="text" id="atai2">       <br>

     3つ目の値<input type="text" id="atai3">       <br>

     4つ目の値<input type="text" id="atai4">       <br>

     5つ目の値<input type="text" id="atai5">       <br>

     　　　　　　　
     <button onclick="tashizan()">
        足し算
     </button>        <br>                           


     結果<br>

     <div id="kekka">


     </div>　

  </div>

次はJavaScriptコードです

  　//足し算の式


    function tashizan(){



     text01 = document.getElementById('atai1');
     text02 = document.getElementById('atai2');
     text03 = document.getElementById('atai3');
     text04 = document.getElementById('atai4');
     text05 = document.getElementById('atai5');




     x = parseInt(0 + text01.value);
     y = parseInt(0 + text02.value);
     u = parseInt(0 + text03.value);
     k = parseInt(0 + text04.value);
     t = parseInt(0 + text05.value);





     z = x + y + u + k + t;

     kekka = document.getElementById('kekka');

     kekka.innerHTML = z; 

    }

出来上がりは

コメント 2020-09-16 182246.jpg

このような感じです。

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

ブラウザWebVRで遊ぶ「おにごっこ」をA-frameとp5jsで作ってみた

おにごっこしたい

最近はいろんな技術がすすみ、VR・AR・MRといった言葉も市民権を得てきましたよね。
昔ドラえもんで出てきた秘密道具が「あれこれスマホでできるじゃん」みたいなものだったり。
当時は「ドラえもん的」だと思われていたものがどんどん現実になってきていて、本当に技術の進歩ってすごいなあと思います。
どこでもドアﾎｯｼｨｨｨｲｲｲｲ。

先日投稿した「光センサで遊ぶ「かくれんぼ」をobnizとp5jsで作ってみた」の中で、ブラウザで遊べるかくれんぼゲームを作りました。
A-frameを使えばサクッとVRが作れるということを知り、VR版おにごっこを作ってみました。
ただ逃げ回るだけも面白くないなあと思ったので、白黒世界でめちゃめちゃ見えにくい世界を作ってみました。

コードはGistに載せてあるので是非実装してみてくださいね。
アプリもNetlifyに載せたので是非遊びに行ってみてください。
難易度がいまいちわからなかったので、3つ作ってみました。

Gistはこちらから
Appは
やさしいモードはこちらから
ふつうモードはこちらから
くらやみモードはこちらから
※VRをお持ちの方、今回はブラウザで操作すること前提で実装してしまったため、VRで操作する仕様になっていない可能性があります（theクソ仕様）。それを踏まえたうえでお楽しみください。

完成デモ

基本ルール

おにごっこと同じく、おにから逃げ続けるゲームです。
おには暗闇に溶け込みそうな真っ黒な箱。
こいつに追いつかれるか、場外に出てしまうとゲームオーバーになります。

黒い箱は近くにプレイヤーを見つけると接近してきます。
検知の範囲はそこまで広くないので正面にいる場合は大丈夫だと思いますが、木々からヌッと出てくることもあるので要注意です。
また黒い箱は一日ごとに足が速くなります。
3日目ぐらいでプレイヤー同等ぐらいのスピードになるので、うまく先読みをしながら逃げ回ってください。

朝と夜

ゲーム内には時間の概念がありまして夜になるほど空が暗くなってきます。
この真っ暗な間は黒い箱は背景に隠れてしまう上に、木々が邪魔で見通しが悪くなります。
この間も黒い箱に近づくと接近してくるので要注意です。

ゲームオーバー

タッチされる・場外に出ると記録が表示されます。

ちなみに(余談)

今回初めてのVR制作でして、VRのヘッドセットを使うことも初めて。
今回はOculus Goを一からセットアップしてやってみました。
動画も取ったんですが、なぜか起動ができなくなってしまってデータが抜けず断念。。。
DSC_0096.JPG
テンションの上がるぼく

基本的な操作はブラウザと同じく、手元のコントローラーのクリックでどうにかなりそう。
クリックする必要が無く周りが見渡せるので、もしかしたらこちらの方が簡単かもしれません。
ただ今回「ゲームオーバーしたらRボタンを押してね」仕様にしているので、ゲームオーバーのたびにURLを叩く必要があるのが難点。

この辺りはヘッドセットの種類に応じて実装を変える必要があるんですかね？
今回はOculus Go自体初めてだったので、もう少し突き詰めてみたいところですね。

実装こまごま

基本アーキテクチャ

今回は
・index.html (画面表示用）
・sketch.js (常に処理し続ける内容の記述）
・components.js (基本オブジェクトのクラス・メソッドを記述）
の3つで構成されています。
index.htmlはほとんどライブラリの呼び出しの記述のみで、メインはsketch.jsになります。

A-frameはa-skyやa-entityのようなタグを記述することで3Dオブジェクトをラクラク生成を可能にしてくれる便利なライブラリです。
今回はcreateElementなどを駆使しながら、a-sceneタグの子要素としてこれらのオブジェクトを入れ込んでいます。
詳しくは公式ドキュメントやA-frameまわりのQIita記事をご覧になりながら、是非ハンズオンしてみてくださいね。

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.js"></script>
        <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
        <script src="components.js"></script>
    </head>

    <script src="sketch.js">
    </script>

    <body>
    <a-scene id="VRScene">
    　　ここにオブジェクトのタグが入りまくるイメージ
    </a-scene>
 </body>
</html>

オブジェクトの生成処理

今回はこちらのサイトをかなり参考にさせていただきました。
こちらのサイトにあるコードを読み解いて、実装に利用した形になります。
p5jsのお作法については先日の記事を見つつ実装しています。
今回は備忘録的にA-frameに関するお作法をメモしておきます。

p5jsではブラウザが読み込まれると同時にsetup()が実行されます。
setup()ではまずworldクラスという各オブジェクトを管理するためのクラスを生成します。
worldクラスで必要そうなメソッドはcomponents.jsに実装されています。

//sketch.js
function setup() {
    noCanvas();
    world = new World('VRScene');

        //
        //以下省略
        //
}

//components.js
function World(id) {
    console.log("A-FrameP5 v0.1 (Craig Kapp, 11/8/2016)");

    if (id == undefined) {
        id = "VRScene";
    }
    this.scene = document.getElementById(id);

    this.flying = false;
    this.setFlying = function(v) {
        this.flying = v;
        this.camera.setWASD(v);
    }
    this.getFlying = function() {
        return this.flying;
    }

    this.camera = new Camera();
    this.scene.appendChild(this.camera.holder);

    this.add = function(entity) {
        this.scene.appendChild(entity.tag);         
    }
    this.remove = function(entity) {
        this.scene.removeChild(entity.tag);         
    }

    this.removeall = function(){
        while(this.scene.firstChild){
            this.scene.removeChild(this.scene.firstChild);
        }
    }

       //
       //その他様々な処理を定義
       //
}

このworldクラスへオブジェクトをどんどん追加していきます。
今回の敵役である黒い箱に着目すると、

//sketch.js
//setup()の中
    enemy = new Box({x:x, y:0.5, z:z,
                     width:1, height:1, depth:1, 
                     red:0, green:0, blue:0,
                    });
    world.add(enemy);


//components.js
function Box(opts) {
    // store desired options
    setEntityOptions(opts, this);

    // store what kind of primitive shape this entity is
    this.prim = 'box';

    // setup geometry parameters
    if (!('width' in opts))  {
        opts.width = 1;
    }
    if (!('depth' in opts))  {
        opts.depth = 1;
    }
    if (!('height' in opts)) {
        opts.height = 1;
    }
    this.width  = opts.width;
    this.height = opts.height;
    this.depth  = opts.depth;

    // set geometry
    setGeometry(this);

    // set material
    processMaterial(this);
    setMaterial(this);

    // set scale
    setScale(this.opts, this);

    // set position
    setPosition(this.opts, this);

    // set rotation
    setRotation(this.opts, this);

    // set visibility   
    setVisibility(this.opts, this);

    // set click handler
    setClickHandler(this);

    // init common setters / getters
    initializerSettersAndGetters(this);

}

components.js中のsetEntityOptions()でタグを生成し、setGeometry()・setMaterial()・setScale()などによって属性情報の挿入処理が走るようです。
setEntityOptions()のcreateElement()でタグが生成します。

function setEntityOptions(opts, entity) {
    // store desired options
    if (opts == undefined) {
        opts = {};
    }
    entity.opts = opts;

    // create a tag for this box
    entity.tag = document.createElement('a-entity');

    // setup a "children" array
    entity.children = [];
}

その後の処理で属性情報が挿入されていきます。
setGeometryを代表例として示しますが、オブジェクトの形状に応じてタグの属性情報が変わるのでelse if(caseのほうが良いんでしょうか？)の嵐ですね。
ここでsetAttributeすることでタグへ属性情報を挿入することができます。

function setGeometry(entity) {
    if (entity.prim == 'sphere') {
        entity.tag.setAttribute('geometry', 'primitive: sphere; radius: ' + entity.radius + '; segmentsWidth: ' + entity.segmentsWidth + '; segmentsHeight: ' + entity.segmentsHeight + '; phiStart: ' + entity.phiStart + '; phiLength: ' + entity.phiLength + '; thetaStart: ' + entity.thetaStart + '; thetaLength: ' + entity.thetaLength);             
    }
    else if (entity.prim == 'circle') {
        entity.tag.setAttribute('geometry', 'primitive: circle; radius: ' + entity.radius + '; segments: ' + entity.segments + '; thetaStart: ' + entity.thetaStart + '; thetaLength: ' + entity.thetaLength);              
    }
    else if (entity.prim == 'ring') {
        entity.tag.setAttribute('geometry', 'primitive: ring; radiusInner: ' + entity.radiusInner + '; radiusOuter: ' + entity.radiusOuter + '; segmentsTheta: ' + entity.segmentsTheta + '; segmentsPhi: ' + entity.segmentsPhi + '; thetaStart: ' + entity.thetaStart + '; thetaLength: ' + entity.thetaLength);              
    }
    else if (entity.prim == 'cone') {
        entity.tag.setAttribute('geometry', 'primitive: cone; height: ' + entity.height + '; openEnded: ' + entity.openEnded + '; radiusBottom: ' + entity.radiusBottom + '; radiusTop: ' + entity.radiusTop + '; segmentsRadial: ' + entity.segmentsRadial + '; segmentsHeight: ' + entity.segmentsHeight + '; thetaStart: ' + entity.thetaStart + '; thetaLength: ' + entity.thetaLength);            }
    else if (entity.prim == 'torus') {
        entity.tag.setAttribute('geometry', 'primitive: torus; radius: ' + entity.radius + '; radiusTubular: ' + entity.radiusTubular + '; segmentsRadial: ' + entity.segmentsRadial + '; segmentsTubular: ' + entity.segmentsTubular + '; arc: ' + entity.arc);            
    }
    else if (entity.prim == 'torusKnot') {
        entity.tag.setAttribute('geometry', 'primitive: torusKnot; radius: ' + entity.radius + '; radiusTubular: ' + entity.radiusTubular + '; segmentsRadial: ' + entity.segmentsRadial + '; segmentsTubular: ' + entity.segmentsTubular + '; p: ' + entity.p + '; q: ' + entity.q);           
    }
    else if (entity.prim == 'cylinder') {
        entity.tag.setAttribute('geometry', 'primitive: cylinder; radius: ' + entity.radius + '; height: ' + entity.height + '; openEnded: ' + entity.openEnded + '; segmentsRadial: ' + entity.segmentsRadial + '; segmentsHeight: ' + entity.segmentsHeight + '; thetaStart: ' + entity.thetaStart + '; thetaLength: ' + entity.thetaLength);         }
    else if (entity.prim == 'box') {
        entity.tag.setAttribute('geometry', 'primitive: box; depth: ' + entity.depth + '; height: ' + entity.height + '; width: ' + entity.width);  
    }
    else if (entity.prim == 'plane') {
        entity.tag.setAttribute('geometry', 'primitive: plane; height: ' + entity.height + '; width: ' + entity.width);
    }
    else if (entity.prim == 'octahedron' || entity.prim == 'tetrahedron' || entity.prim == 'dodecahedron') {
        entity.tag.setAttribute('geometry', 'primitive: ' + entity.prim + '; radius: ' + entity.radius);
    }
}

setGeometryだとかsetMaterialだとか、それぞれがどんな役割をしているのかについてはまだまだ理解できていません。。。
A-frameのEntity-Component-Systemあたりが関係していそうなんですがいまいちわからず。。。
ちょっとずつ勉強していこうと思います。

おにごっこの処理

一通りオブジェクトの生成がすんだら、残りはオブジェクトをどう動かすかの処理になります。
p5jsのお作法ではdraw()が常に実行され続けるので、この部分におにごっこのロジックを書いていきます。
細かいロジックについては先日の記事を参考にしてみてください。

コード全体はこちらからご覧いただけますので、是非是非実装してみてください！
参考にしたサイトの方もこちらからご覧ください。

今後やりたいこと

A-frame面白い。。。楽しい。。。
みんなが作った3Dモデルの共有サイトもあるらしく、そこから良いモデルをインポートすることもできる様子ﾕﾒｶﾞﾋﾛｶﾞﾙｩｩｩｳｳ
VR周りはもっと勉強していきたい。

最後までご覧いただきありがとうございました！！
LGTMつけていただけると励みになります、よろしくお願いします！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-16T15:51:04+09:00

【初心者でもわかる】CSSだけで6角形を作る方法

どうも7noteです。あまり使う機会は少ないかもですが、CSSだけで6角形の作り方について

CSSだけで6角形を作ります。6角形は英語でヘキサゴン！

8角形も似たような方法で作ったのでよければ見てってください。

・【初心者でもわかる】CSSだけで8角形を作る方法

cssだけで6角形を作る

index.html
<div class="hexagon">
  <div class="hexagon_frame"></div>
</div>
style.css
.hexagon {
  width: 69px;
  height: 80px;
  background: #000; /* 6角形の色 */
  position: relative;
}
.hexagon::before {
  content: '';
  width: 0;
  height: 0;
  border-top: 10px solid #fff;
  border-left: 17px solid #fff;
  border-bottom: 10px solid transparent;
  border-right: 17px solid transparent;
  position: absolute;
  top: 0;
  left: 0;
}
.hexagon::after {
  content: '';
  width: 0;
  height: 0;
  border-top: 10px solid #fff;
  border-left: 17px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 17px solid #fff;
  position: absolute;
  top: 0;
  right: 0;
}

.hexagon_frame::before {
  content: '';
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-left: 17px solid #fff;
  border-bottom: 10px solid #fff;
  border-right: 17px solid transparent;
  position: absolute;
  bottom: 0;
  left: 0;
}
.hexagon_frame::after {
  content: '';
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-left: 17px solid transparent;
  border-bottom: 10px solid #fff;
  border-right: 17px solid #fff;
  position: absolute;
  bottom: 0;
  right: 0;
}

結果

reslut.png

この方法でハニカム構造にするにはちょっとしんどいかも。できなくはないが・・・

もう一つ疑似要素を使った方法

index.html
<div class="hexagon"></div>
style.css
.hexagon {
  width: 70px;
  height: 40px;
  background: #000;
  position: relative;
}
.hexagon::before {
  content: '';
  width: 0;
  height: 0;
  border-top: 0 solid transparent;
  border-left: 35px solid transparent;
  border-bottom: 20px solid #000;
  border-right: 35px solid transparent;
  position: absolute;
  top: -20px;
  left: 0;
}
.hexagon::after {
  content: '';
  width: 0;
  height: 0;
  border-top: 20px solid #000;
  border-left: 35px solid transparent;
  border-bottom: 0 solid transparent;
  border-right: 35px solid transparent;
  position: absolute;
  bottom: -20px;
  left: 0;
}

結果
reslut2.png

まとめ

どちらの方法も擬似要素を使った方法です。

1つ目の方法は、背景と同じ色の三角形で削り取って6角形に見せかけている方法。
2つ目の方法は、逆に四角形に三角形を2つ上下に重ね、6角形に見せかけている方法。

どちらもだいたい6角形に見えるだけで、数値的には正6角形ではありませんが、WEBで使用する分にはさほど問題ないと思います。

おまけ

2つ目の方法でハニカム構造を作ってみた。

画像

index.html
<ul>
  <li>
    <div class="hexagon"></div><div class="hexagon"></div><div class="hexagon"></div><div class="hexagon"></div><div class="hexagon"></div><div class="hexagon"></div>
  </li>
  <li>
    <div class="hexagon"></div><div class="hexagon"></div><div class="hexagon"></div><div class="hexagon"></div><div class="hexagon"></div><div class="hexagon"></div>
  </li>
  <li>
    <div class="hexagon"></div><div class="hexagon"></div><div class="hexagon"></div><div class="hexagon"></div><div class="hexagon"></div><div class="hexagon"></div>
  </li>
</ul>
style.css
ul li {
  margin-bottom: 15px;
  list-style: none;
}

ul li:nth-child(odd) {
  margin-left: -36px;
}


.hexagon {
  width: 70px;
  height: 40px;
  background: #000;
  position: relative;
  margin-right: 2px;
  display: inline-block;  /* 追記 */
}
.hexagon::before {
  content: '';
  width: 0;
  height: 0;
  border-top: 0 solid transparent;
  border-left: 35px solid transparent;
  border-bottom: 20px solid #000;
  border-right: 35px solid transparent;
  position: absolute;
  top: -20px;
  left: 0;
}
.hexagon::after {
  content: '';
  width: 0;
  height: 0;
  border-top: 20px solid #000;
  border-left: 35px solid transparent;
  border-bottom: 0 solid transparent;
  border-right: 35px solid transparent;
  position: absolute;
  bottom: -20px;
  left: 0;
}

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

[参考]
https://spyweb.media/2017/12/21/css-responsive-hexagon/
https://qiita.com/cotolier_risa/items/96992b5e2561dc8cbaa3

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

[HTML]初心者が学んだことをまとめてみた

プログラミングに興味を持った初心者の自分が学んだことをわかりやすくまとめてみようと思って記事を作ってみました。インプットとアウトプットが大切とよく言われてるのでQiitaをアウトプットの機会として生かしていこうと思ってます。
では、頑張っていきましょう!!

HTMLとは

WEBページのほとんどはHTML/CSSで作られています。CSSはとりあえず置いておいて、HTMLは文字であると考えていいと思っています。
(引用元 https://udemy.benesse.co.jp/development/web/what-is-html.html)

コードとして下記の適当な例をご用意しました。

example.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>sample</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div class="scroll">
    <h2>テキストテキストテキスト</h2>
  </div>
</body>
</html>

これだけみても何にも分からないと思いますが、イメージを持ってもらえるだけで結構です。

タグについて

HTMLは<・・・>～</・・・>で表されるかっこで囲まれています。これを"タグ"といいます。
HTMLの宣言とコメントを除くすべてのタグにおいて、開始タグと終了タグで囲まれています。また、これらのまとまりを"要素"と呼ばれていて、要素がたくさん集まって一つのサイトが構成されています。
よく使われているタグは以下のサイトで一覧となっているのでぜひ確認してみてください。
(https://techacademy.jp/magazine/12305)
代表として15個挙げられています。無理に１日で覚えると疲れたり、モチベの低下につながりますので、練習サイトを使ったり毎日5分見直す等の工夫をして自分のペースで頑張ってみましょう。

インデントについて

文章の先頭に空白を作り、先頭の文字を右にずらしたり、左端に空白を作ったりすることです。このインデントは初めから意識して行った方がいいものなのでぜひ意識してコードを書いてみましょう。このインデントという技術を使うことで"誰が見てもわかりやすいかつ見やすい"コードを作りやすくなります。
インデントにルール等はありませんが、主に見かけるのは以下の2つだと思っています。
・TAB
・半角スペース
自分は半角スペース2個を一つのインデントと習ったので、それを意識います。チーム開発等に関わるのであれば、開発を始めるまでにインデントについてチーム内でルールを作った方がいいと思いますが、自分一人だけならば自分で適当なものを作っていいと思います。堅苦しく書いてしまったのですが、絶対なものではないのでそんなに緊張せずにいきましょう。

HTMLの構成html構成-1024x802.png

上記のイメージ画像を元に説明していきます。

head要素
ページが読み込まれてもウェブブラウザーには表示されない部分です。ですから、文書のすべてのコンテンツを指定するための場所で、Webデザイナーやディベロッパーが多くの時間を費やす場所です。それに対して head 要素はあまり意味をなさないように見えます。なぜなら要素の内容で、ページの利用者に直接現れるのは title 要素の情報だけだからです。これがどういう事かというと、head 要素は、ブラウザーに対する指定と、文書に関するメタ情報 (meta) など、付加的な情報を指定するための場所なのです。
引用元(https://webplatform.github.io/docs/guides/the_html_head/ja)
また上記のサイトにはさらに詳しく書かれています。気になった方は確認してみてください。

body要素
ここには、ブラウザに表示されるコンテンツを記述します。たくさんのタグがありますが、全部覚える必要はないので、どんな機能があるのか程度っていう感じで大丈夫です。知っていれば、使う際に調べることができるからですね。

まとめ

初心者の自分が文章で説明できそうなところを浅くですがまとめてみました。拙い文章を読んでくださりありがとうございました。皆さんの今後のご活躍を心よりお祈り申し上げます。

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

Emmetでよく使うもの

EmmetでHTMLを記述

　!・・・HTMLのひな形が作れる

<!DOCTYPE html>
<html lang="en">
<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>

</body>
</html>

　.classname・・・クラス付きの要素が作れる

<div class="classname"></div>

　#idname・・・ID付きの要素が作れる

<div id="idname"></div>

　ul>li*2>a・・・リンク付きリスト

<ul>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
</ul>

　table>tr*2>th+td・・・テーブル（表）をつくる

<table>
  <tr>
    <th></th>
    <td></td>
  </tr>
  <tr>
    <th></th>
    <td></td>
  </tr>
</table>

　dl>(dt+dd)*2・・・説明リスト

<dl>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
</dl>

EmmetでCSSを記述

ショートハンド 展開後
dib display: inline-block;
bg#fff background: #fff;
c#fff color: #fff;
fz32 font-size: 32px;
w50 width: 50px;
maw640 max-width: 640px;
miw50% min-width: 50%;
pl10 padding-left: 10px;
mb1e margin-bottom: 1em;
m0-auto20 margin: 0 auto 20px;
p5-10-5-10 padding: 5px 10px 5px 10px;
bd(+)　※1 border: 1px solid #000;
bsh0-0-3-0#000　 box-shadow: 0 0 3px 0 #000;　
bdrs5 border-radius: 5px;
bds:n border-style: none;
bdsp0 border-spacing: 0;
bdcl:c border-collapse:collapse;
psr position: relative;
psa position: absolute;
ta:c text-align: center;
trf:sc transform: scale(x, y);
trs transition: prop time;

※1
VScodeでは、bdは+がいらないっぽい

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

日付別

タグ一覧