20191224のHTMLに関する記事は8件です。

投稿日：2019-12-24T23:59:23+09:00

Webページ作成するときにいつもすることまとめ

個人的なWebページを作るにあたって、毎回参照するメモがあるのですが、それを公開します。

サーバ

無料でカスタマイズが可能なページを作成できる以下を使うことが多いです。

GitHub Pages

Heroku

スマホでのビュー対応

headerに以下を追加します。
<meta name="viewport" content="width=device-width, initial-scale=1" />
ファビコン・Webクリップアイコン

以下のサイトで自動で生成できます。
https://ao-system.net/favicongenerator/
<link rel="icon" sizes="180x180" href="https://example.com/img/favicon.ico" />
<link rel="apple-touch-icon" href="https://example.com/img/apple-touch-icon.png" />
OGP画像

OGP画像がどんな見た目になるかプレビューするためのサイト
http://ogimage.tsmallfield.com/
<meta property=og:image content="https://example.com/img/ogp.png" />
ローカルサーバを起動

pythonでローカルサーバを容易に構築できます。
python3 -m http.server 8000
配色

HTML Color Pickerで配色を参照します。
https://www.w3schools.com/colors/colors_picker.asp

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-24T22:13:08+09:00

IDを使ったページ内リンクの作り方

ページ内リンクってどうやるの？

目的

ページ内リンクの作り方が分かったため残すことにする

やり方

リンク先になる見出しや文にid属性をつける

リンク元になるタグのhrefに"リンク先id名"をつける

例
<a href="#contents">リンク元</a>
・
・
・
<div id="contents">
  <h2>リンク先はこちらです</h2>
</div>

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-24T19:10:48+09:00

スピードに特化したコーディング規約【QuiCSS】

QuiCSSとは

どのタグにクラスをつけるか、クラス名はどうするか、どこにスタイルを記述するか...
コーディングには迷う要素がたくさんあり、迷いこそが制作スピードのボトルネックになっています。

QuiCSS（クイックス）は、迷う時間を最小化し高速でコーディングをするために設計された、BEMベースのコーディング規約です。

背景

FLOCSS、SMACSSなどいくつかのコーディング規約を試してみたのですが、規約が緩すぎて結局自分で考えなければならない箇所が多かったり、逆に構成が複雑すぎたり、小~中規模案件では必要が無いほどディレクトリが細分化されていたりして、どれもしっくりきませんでした。

QuiCSSはシンプルな構成かつ厳格なルールを採用し、少ない学習コストでコーディングスピードを上げることができるように設計されています。

必要な前提知識

・HTML、CSSの基本文法
・Sassの文法及びパーシャルによるファイル分割
・命名規則「BEM」の概要

メリット

・どのタグにクラスをつけるかが明確
・HTMLとCSSを行ったり来たりする必要がなくなる
・クラス名がすぐに決まる
・クラス名が重複する可能性がほとんど無い
・CSSをどのファイルに書くべきかが明確

デメリット

・使っている人が少ない
・HTML内の記述量が多くなりがち（Emmetを使っていてある程度のタイピングスピードがあれば、文字を入力する時間は迷う時間と比べるとずっと少ないので、記述量の増加はスピード的には問題になりません。）

内容

ディレクトリ構成
ディレクトリ構成
- index.html
- img/
- js/
- css/
- scss
  └── style.scss
  └── bases
      └── _reset.scss
      └── _config.scss
      └── _base.scss
      └── _mixin.scss
      └── _responsive.scss
      └── _utility.scss
  └── components
      └── _btn.scss
      └── _title.scss
      └── _form.scss
      └── _paging.scss
  └── layouts
      └── _header.scss
      └── _gnav.scss
      └── _main.scss
      └── _fnav.scss
      └── _footer.scss
  └── pages
      └── _idx.scss
      └── _abt.scss
      └── _ctt.scss
  └── pulgins
      └── _swiper.scss
basesディレクトリ
_reset.scss：ブラウザのデフォルトのスタイルをリセットするCSSを保存します。
_config.scss：カラーコード、ブレイクポイントなどを保存します。
_base.scss：タグに対して直接指定するスタイルを保存します。
_mixin.scss：メディアクエリなど、mixinを保存します。
_responsive.scss：レスポンシブ対応の際に使うクラスを保存します。(display: none;のつけ外しなど）
_utilities.scss：汎用クラスを使う場合には、このファイルに保存します。

その他、bootstrapなどのcssフレームワークの書き換えを行いたい場合には、適宜このディレクトリにファイルを追加してください。

componentsディレクトリ
ボタンやフォームなど、繰り返し使うパーツを1パーツ1ファイルで保存します。

作成したパーツを随時自分のテンプレートに追加して他の案件で流用することで、コーディングスピードをどんどんと上げていくことができます。

また他の案件でも(カスタマイズして)再利用できそうなパーツ以外は、無理に共通化せずにpagesディレクトリ内に繰り返し書いていくスタイルにした方が、結果として迷う時間が減ってコーディングスピードが上がります。

DRY(Don't Repeat Yourself)の原則は、ことCSSに関してはあまりストイックにならない方が良いと思っている派です。3、4回登場するくらいのスタイルの共通化で期待できる保守性の向上なんて、それによって必要になる思考量の増加と比べればたかが知れてます。

layoutsディレクトリ
ヘッダーやフッターなど、ほとんどのページで繰り返し使うエリアに関する記述を、1Block1ファイルで保存します。

pagesディレクトリ
各ページ固有のスタイルを1ページ1ファイルで保存します。
ファイル名は必ずアルファベット3文字にしてください。（後述するクラスの命名規則に関係します。）

pluginsディレクトリ
プラグイン固有のCSSがある場合、このディレクトリに保存します。

クラスの命名規則

クラスの命名はBEMがベースです。
Block：block
Element：block__element
Modifier：-modifier
が基本形となります。。Modifierはマルチクラス方式を採用しました。

その他、詳細なルールを以下に記載します。

layoutsディレクトリに保存するスタイルのBlock名は固定
layoutsディレクトリに保存するBlockは、どの案件も大体同じものになります。
以下のようにBlock名を固定しましょう。
もし以下にないlayoutが必要になった場合には、その都度Block名を考えます。
layoutsディレクトリに保存するブロック名
<header class="header"> 
<nav class="gnav"> 
<main class="main"> 
<footer class="footer"> 
<nav class="fnav"> 
pagesディレクトリ内のBlock名はファイル名の3文字 + その箇所を表す3文字
例えばindex.htmlに対するスタイルをscss/pages/_idx.scssに保存した場合、ブロック名はidxtopやidxcttなどになります。
同じ名前のファイルを複数保存することはできないため、このルールによりクラス名が衝突する可能性はほぼ無くなります。
なお、ページごとにファイルを分割しているので、その箇所を表す3文字はある程度適当でOKです。（適当な名前でもどのスタイルを指しているかすぐに分かる）

element名はタグごとに固定する
div、p以外のタグ
完全に1つに固定します。同じブロック内に複数の同一タグがあった場合には、modifierを使いましょう。
div,p以外のElement名
<h1〜h6 class="block__ttl">
<form class="block__form">
<table class="block__table">
<ul class="block__list">
<ol class="block__list">
<dl class="block__def">
div、p
用途が多すぎで1つに固定するのは難しいですが、以下のいずれかが使えるケースが多いです。
それっぽければなんでも良いのですが、よく使うものを固定化して、悩む時間を少なくすることが大切です。
div,pのElement名
<p class="block__txt"> 
<p class="block__ttl"> 
<p class="block__btn"> 
<p class="block__logo"> 
<div class="block__group"> 
<div class="block__inner">
<div class="block__outer">
<div class="block__wrap">
<div class="block__box">
<div class="block__container">
クラスをつけるタグ、つけないタグ

クラスをつけるタグとつけないタグをあらかじめ決めておくことで、クラスをつけるかどうか迷う時間を無くします。またHTMLを一気に書き上げてからCSSを当てていくことができるようになるという意味でもスピードアップに貢献します。

クラスをつけるタグ
・大半のブロックレベルのタグ
header, footer, main, section, article, aside, nav, div, h1~h6, p, table, dl, ul, ol, ,iframe, form...

スタイルを当てる必要があるかどうかに関わらず、上記のタグには必ずクラスを指定します。

クラスをつけないタグ
・インラインレベルのタグ
a, span, img, em, strong, label, input, time...
・親要素が(ほぼ)決まっているタグ
li, thead, tbody, tr, th, td, dt, dd

上記のタグにはクラスをつけず、Sassのネストでスタイルを指定します。

Blockにするタグ、Elementにするタグ

BlockにするかElementにするかも、タグレベルで固定します。

Blockにするタグ
header, footer, main, article, section, aside

BlockにもElementにもなり得るタグ
div

Elementにするタグ
クラス付け対象の、その他全てのタグ
h1~6, p, ul, ol, dl, form, table, iframe...

componentsを利用する場合のクラスの付け方

上記のルールで付与した各クラスの前にcomponents用のクラスを追加します。
titleというcomponentsを使う場合
<div class="idxtop">
  <h2 class="title idxtop__ttl">ページタイトル</h2>
</div>
サンプル

サンプルをGitHubおよびGitHub Pagesに公開しました。
不明点等ございましたらお気軽にご質問ください。

GitHub

GitHub Pages

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-24T18:23:21+09:00

[HTML/CSS]CSSアニメーションだけでアコーディオンつくるぞ

inputとlabelでアコーディオンつくった

inputとlabelを使って、CSSだけでアコーディオンを作ったので備忘録として書くぞ。

See the Pen CSSでアコーディオン作る by mame_hashbill (@mayu-mameuda) on CodePen.

ちなみに領域外クリックでアコーディオン閉じるようにしたぞい。

これからCSSでアコーディオン作ろうとしてる人、なるべくコピペでなんとかなるようなシンプルな記述にしたので、べろっとコピって使ってもらえたら嬉しいぞい。

inputとlabelの関係性

（以前の記事に書いたやつとだいたい同じこと書く。
以前の記事→[HTML/CSS]チェックボックスの仕組みを使ってえだまめ無限プチプチをつくるぞ）

さて、今回使うinputとlabelは、よくお問い合わせフォームとかで
チェックボックスとかラジオボタンとかを作るときに使うやつだよな。

このinputとlabelは、idとforで関連づけることができて、
関連付けをするとlabelをクリックしても選択ができる（input部分にチェックがつけられる）ぞ。
こんな感じに。↓

See the Pen
rNamJmo by mame_hashbill (@mayu-mameuda)
on CodePen.
<input type="checkbox" name="choice" id="choice-1" checked>
<label for="choice-1">選択肢1</label>
<input type="checkbox" name="choice" id="choice-2">
<label for="choice-2">選択肢2</label>
<input type="checkbox" name="choice" id="choice-3">
<label for="choice-3">選択肢3</label>
で、CSSでアコーディオンを作る上で重要なポイントは、
inputまたはlabelをクリックしたとき、checkedっていう状態が付与される点だな。

つまり、
checkedがついてる時はアコーディオンが開いていて、
ついてない時は閉じてる、っつう指定をしていくのだ。

HTML

使うHTMLはこんな感じ。
<body>
  <input type="checkbox" name="accordion" id="accordion">
  <label class="overlay" for="accordion"></label>
  <div class="accordion">
    <label class="accordion__heading" for="accordion"><span class="accordion__icon"></span>title</label>
    <div class="accordion__item-wrap">
      <div class="accordion__item">hogehoge</div>
      <div class="accordion__item">fugafuga</div>
      <div class="accordion__item">hogehoge</div>
      <div class="accordion__item">fugafuga</div>
    </div>
  </div>
</body>
inputが1つとlabelが2つ、上の方にいるな。

.overlayは領域外クリックの時に使うlabel、
.accordion__headingはアコーディオン開閉に使うlabel。

ほんで、inputはこの2つのlabelとid="accordion"で結びついてるぞ。

titleクリックで矢印アイコンの向きを変える

矢印アイコンは、アコーディオンが開いた時にぐるっと上下が反転するようになってるよな。
この仕組みもアコーディオン開閉と仕組みは一緒なので、先にこっちを説明していく。
  <input type="checkbox" name="accordion" id="accordion">
  <div class="accordion">
    <label class="accordion__heading" for="accordion"><span class="accordion__icon"></span>title</label>
  </div>
アイコンを動作させるのに必要なHTMLはこれだけ。
で、Scss。
$purple: #3B3955;

%accordion,.accordion{
  &__heading{ 
    position: relative;
  }
  &__icon{
    &:before{
      //アコーディオンの矢印をCSSで作成
      content: " ";
      position: absolute;
      left: 20px;
      top: 16px;
      width: 5px;
      height: 5px;
      border: 3px solid;
      border-color: transparent $purple $purple transparent;
      transform: rotate(45deg);
    }
  }
}

input[name="accordion"] {
  display: none; //ラジオボタンを消す
}

#accordion:checked~ {
    .accordion .accordion__icon{
      &:before{
        //check入ったときにアイコンを回転
        transform: rotate(-135deg);
        top:23px
      }
    }
}
アイコン自体をCSSで作成してしまっている関係で:beforeの中にたくさん書いてあるのだけど、その辺の説明はこのサイトを参考にしたので、何してるか知りたい人は見てほしい。
→【CSS】CSSのみで三角と矢印を作る方法

さてさて、
.accordion__iconでは、
とりあえず閉じている状態の下矢印アイコンを作成しているぞ。

で、そのあとの記述でinputをdisplay:none;してるんだけど、
これは、今回はlabelクリックでcheckedが付与される仕組みを使いたいだけで、
input自体は画面に存在している必要がないためだぞ。

チェック入ったときの指定方法

ほんで、inputを消したあとの記述で、labelをクリックしたとき（checked付与状態、つまりアコーディオン開いてる状態）の時のアイコンの指定をしているよ。
checked状態の指定は、checked ~に続けて書くのがお約束。

~は、間接セレクタっていうやつで、
兄弟関係にあれば間に別の要素が入っても指定ができる便利なセレクタだぞ。

【参考】間接セレクタ (E ~ F)

このセレクタの注意点としては、
~の後に指定するのは、必ず同階層にある要素にしないといけない決まりなので
アイコンをぐるっと回転させるには、
#accordion:checked ~ .accordion__iconという指定にせず、
#accordion:checked~ .accordion .accordion__icon
という指定にしないときかないんだなぁ。

ちなみにlabelがinputの上にあったりしてもきかないので注意である。

アコーディオンを開閉させる

上と同じ仕組みを使って、いよいよアコーディオン開閉を作る。
HTMLは上に貼ったもの。

で、Scssはこんな感じ（アコーディオン開閉部分のみ抜き出してます）
%accordion,.accordion{
  &__heading,&__item{
    padding: 0 20px 0 40px;
    line-height: 50px;
    letter-spacing: 0.05em;
  }
  &__heading{
    background: white;
    color: $purple;
    font-weight: bold;    
    position: relative;
    display: block;
    cursor: pointer;
    font-size: 18px;
  }
  &__item-wrap{
    overflow:hidden; //これをやらないと中身が表示されちゃうので入れる
  }
  &__item{
    height: 0; //閉じてるときは高さを0にしておく
    background: $purple;
    color: white;
  }
}

#accordion:checked~ {
    .accordion .accordion__item{
        height: 50px;
        transition: height .5s;
    }
}
ポイントとしては2点で、
1. .accordion__item-wrapにoverflow:hidden;して、はみ出た部分の表示（.accordion__item）を隠す。
2. .accordion__itemをheight:0;にして、checkedが付与された時にheight:50px;にアニメーションさせる。

これでアコーディオンが開閉するようになるぞ。
この作り方だと、.accordion__itemにアニメーションの秒数指定をしているから、
項目がいくつ増えても指定した秒数で開閉できるのだ。

領域外クリックでアコーディオンを閉じる

最後に領域外クリックでアコーディオンを閉じる指定の仕方。

.overlayを領域いっぱいにかけてから、
pointer-events: none;で、ポインタの動作を全て無効化する。
この指定を入れることで、要素自体はあるけどクリックはできないようにできるぞ。

で、inputにcheckedが付与されたあと、pointer-events: auto;でポインタの動作をデフォルトに戻して、.overlayを押せるようにするぞい。
  <input type="checkbox" name="accordion" id="accordion">
  <label class="overlay" for="accordion"></label>
.overlay{
    pointer-events: none; //ポインタの動作全部無効化
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    z-index:-1;
}

#accordion:checked~ {
    .overlay{
      pointer-events: auto; //ポインタの動作デフォルトに戻す
    }
}
こんな感じで、領域外をクリックしてもアコーディオンが閉じるようになる。

まとめ

アコーディオンが2つとか3つとかになると、領域外クリックで閉じるやつは無理なのかもしれない。。
その場合はやっぱりJSになっちゃうのかな〜〜〜〜〜〜〜・・・教えて詳しい人よ

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-24T08:55:29+09:00

画像ファイルが選択されたらブラウザ上でリサイズしてBase64文字列にして結果をフォームに埋め込んでサーバに送信する(非ajax)

色々と面倒だったので備忘。
アプリケーション設定はplayframework独自ですが、フロント側は素のjavascriptでいけますし、サーバサイドもどんな言語・Webフレームワークでも道具立てが用意されているはずです。

アプリケーション設定

application.confでBodyParserのデータ上限を緩和する.

HTML

input[type='file']タグを用意

上記に対応するcanvasを用意する。表示サイズはwidth指定しておく。(役割はファイル選択時のサムネイル表示とBase64文字列取得)

画像ファイル選択

選択されたら、canvasを初期化する(clearRect)。ファイル内容を読み込む。ファイル種別等をチェック。

ファイル読み込みが完了(onload)したらその結果(e.target.result)をimg.srcに設定する

img.srcの読み込みが完了(onload)したら、その内容を適宜リサイズしてcanvasに描画(drawImage)する

フォーム確定(submit)

フロントエンド

選択されたファイルが存在する場合、canvasからBase64化された文字列を取得(toDataURL('image/jpeg'))。以降ではイメージ文字列と呼称

フォームにhidden属性を追加して値にイメージ文字列を設定する

input[type='file']に設定された内容を消す ← 無駄なので。そもそも画像リサイズ要件の背景は「通信遅い」から派生しているので

submitする

サーバサイド

multipartでなく通常のフォームパラメタとして読み出す

イメージ文字列のデータ部分を切り出して、BufferedImageに変換する。=> このあとはファイルに戻したり、好きに加工

data:image/jpeg;base64,★ここから後=>★/9j/4AAQSkZJRgABAQEASABIAAD/4ge4SUNDX1BST0ZJTEUAAQEAAAeoYFKc5KKbP/2Q==

ポイントとしては、

サーバサイドに送信するデータはcanvasに描画したデータで、input[type='file']のデータではないこと

非ajax(フォームに埋め込んでサーバに送信)であること。(こういった処理を行う場合は、Blob化してFormDataに詰めて、ajaxでサーバサイドに送ることが多い模様)

参考

ブラウザでローカル画像をリサイズしてアップロード - Qiita

java - Convert base64 string to image - Stack Overflow

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-24T07:19:39+09:00

クリスマスツリーをCSSで作ってみた

はじめに

アドベントカレンダーといえばクリスマス。
クリスマスといえばツリー。
ということで、とってもありきたりですがクリスマスツリーをCSSで作ってみることにしました。

用意するもの

もみの木

電飾

てっぺんの星

オーナメント

作ってゆく

もみの木

まずはもみの木から。これがないと始まりませんからね。
何となくもみの木は3段のイメージでいたんですが、画像検索してみるとそんなことないんですね。
いいんです。気にしません。borderを使っていい感じの三角形を作って、よしなに重ねていきます。
幹の部分もborderを使って台形を作り背面に置きます。

See the Pen tree by sasakiy (@sasakiy0819) on CodePen.

電飾

とにかくもう何が何でもキラキラ光らせたかったので、オーナメントの前にこれを作ります。
作り方は簡単。適当なサイズの円を作り、アニメーションを使ってbox-shadowで光彩を加えていきます。

See the Pen light by sasakiy (@sasakiy0819) on CodePen.

てっぺんの星

まず、五角形の星型の内角の和は180°になるということを思い出すところから始めます。
正五角形の星型にするには頂点の角度は36°にしたいところなので、36°-36°-108°の三角形を３つ用意して、それらを重ねて正五角形を作ります。
これに黒丸背景を重ねればサッポロビールのロゴの完成ですね。

See the Pen star by sasakiy (@sasakiy0819) on CodePen.

オーナメント

本当は杖とかヒイラギの葉とか作りたかったんですが、断念しました。
プレゼントの箱を用意することにします。

See the Pen ornament by sasakiy (@sasakiy0819) on CodePen.

組み立てる

用意したパーツたちをひたすら並べて組み上げていきます。
アクセントにアニメーションで雪を降らせてみたりします。

See the Pen merged by sasakiy (@sasakiy0819) on CodePen.

まとめ

CSSってなんでもできますねー。
普段の業務ではなかなか機会のなさそうな使い方ですが、きっとどこかで約には立つのではないかと思います。

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-24T04:14:24+09:00

HTML基礎

HTMLとは

Webページを作るためのプログラミング言語のこと

＜＞←このカッコをタグと呼ぶ。
　文字をこのタグで囲むことで見出しやリンクの役割となる。
　タグの中身は h1 や a などいろんな種類がある。
　開始タグと終了タグがあるが、終了タグの場合は下記のように／が必要。
例.html
<h1>h1のタグで文字を囲むと大見出しとして表示されるよ</h1>
Webではこんな感じに表示される
↓

hタグ

Webで見出しをつけたいときに使用。
h1〜h6まで種類がある。
　 h1が一番大きな文字で表示され、h6が一番小さな文字で表示される。
例.html
<h1>h1はこれくらいの大きさ</h1>
<h2>h2はこれくらいの大きさ</h2>
<h3>h3はこれくらいの大きさ</h3>
<h4>h4はこれくらいの大きさ</h4>
<h5>h5はこれくらいの大きさ</h5>
<h6>h6はこれくらいの大きさ</h6>
web
↓

pタグ

段落を表す
例.html
<p>段落を表すよ</p>
ｐで囲まないと改行されないよ。
ここでは改行されてるけど
Webで表示したときに改行されてないでしょ？
Ｗｅｂ
↓

liタグ・ulタグ・olタグ

リストを作成する
必ず ul+li もしくは ol+li のセットで使用する
ul+li はリストの前に黒点がつく
ol+li はリストの前に番号がつく
例：ulとliのセット.html
<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>メロン</li>
</ul>
web
↓
例：olとliのセット.html
<ol>
  <li>りんご</li>
  <li>みかん</li>
  <li>メロン</li>
</ol>
web
↓

ul もしくは ol で li を囲む場合は必ず字下げする。
詳しくはこのページの一番下の見出しの親要素と子要素に記入。

aタグ

リンクを作成する
例.html
<a>GoogleへGo！</a>
Web
↓

Web上では表示されているが、文字が表示されているだけでGoogleへは繋がらない。
だってリンク先のURLを指定していないもん。
どうするかというと・・・
開始タグに　href="URL"　を追加するのです。
例.html
<a href="https://www.google.co.jp">GoogleへGo！</a>
GoogleへGo！の文字をクリックすると・・・

ちゃんとGoogleへ繋がりました

imgタグ

画像を表示する
＜img src="画像のURL"＞で作成
終了タグがない（文字を囲む必要がないから）
例.html
<img src="https://2.bp.blogspot.com/-HGO1Xeo-UCU/UV1JGezkNhI/AAAAAAAAPS4/kIa5Y9sWfZs/s400/hiyoko_baby.png">
Web
↓

要素と属性

aタグやimgタグの開始タグにいろいろと詰め込まれているが、aタグで説明すると以下のようになる。
例.html
<a href="https://www.google.co.jp">GoogleへGo！</a>
a ・・・要素名
href ・・・属性名
"https://www.google.co.jp" ・・・属性値

href="https://www.google.co.jp" ･･･属性名 + 属性値 = 属性

＜a href="https://www.google.co.jp"＞GoogleへGo！＜/a＞・・・要素

＜a＞＜/a＞・・・タグ（開始タグと終了タグ）

上記は a要素や aタグなどと呼ぶ。
要素名に要素やタグをつけて呼ぶ（他にもpタグやｐ要素、imgタグやimg要素など）

要素名と属性名のあいだはスペースをあける（例：<a href･･･）
属性名と属性値のあいだは = をつける（例：href="https://www.google.co.jp" ）
要素名は " " で囲む（例："https://www.google.co.jp" ）

つまりは・・・
<要素名 属性名="属性値">
となる。

親要素と子要素
例：ulとliのセット.html
<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>メロン</li>
</ul>
上記のように要素を要素で囲む（ul を li で囲む）ことを入れ子という。
このとき ul を親要素、 li を子要素と呼ぶ。

ロシアのマトリョーシカみたいなイメージ。
一番大きなマトリョーシカが ul だとするならば
二番目に大きなマトリョーシカが li になる。

この入れ子構造にする場合は必ずインデント（字下げ）する。
下記のようにインデントをしないと親子関係がわかりづらい。
キーボードの Tabキーを押すとインデントできる。
インデントなし.html
<ul>
<li>りんご</li>
<li>みかん</li>
<li>メロン</li>
</ul>
インデントあり.html
<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>メロン</li>
</ul>

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-24T04:14:24+09:00

【HTML】基礎

HTMLとは

Webページを作るためのプログラミング言語のこと

＜＞←このカッコをタグと呼ぶ。
　文字をこのタグで囲むことで見出しやリンクの役割となる。
　タグの中身は h1 や a などいろんな種類がある。
　開始タグと終了タグがあるが、終了タグの場合は下記のように／が必要。
例.html
<h1>h1のタグで文字を囲むと大見出しとして表示されるよ</h1>
Webではこんな感じに表示される
↓

hタグ

Webで見出しをつけたいときに使用。
h1〜h6まで種類がある。
　 h1が一番大きな文字で表示され、h6が一番小さな文字で表示される。
例.html
<h1>h1はこれくらいの大きさ</h1>
<h2>h2はこれくらいの大きさ</h2>
<h3>h3はこれくらいの大きさ</h3>
<h4>h4はこれくらいの大きさ</h4>
<h5>h5はこれくらいの大きさ</h5>
<h6>h6はこれくらいの大きさ</h6>
web
↓

pタグ

段落を表す
例.html
<p>段落を表すよ</p>
ｐで囲まないと改行されないよ。
ここでは改行されてるけど
Webで表示したときに改行されてないでしょ？
Ｗｅｂ
↓

liタグ・ulタグ・olタグ

リストを作成する
必ず ul+li もしくは ol+li のセットで使用する
ul+li はリストの前に黒点がつく
ol+li はリストの前に番号がつく
例：ulとliのセット.html
<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>メロン</li>
</ul>
web
↓
例：olとliのセット.html
<ol>
  <li>りんご</li>
  <li>みかん</li>
  <li>メロン</li>
</ol>
web
↓

ul もしくは ol で li を囲む場合は必ず字下げする。
詳しくはこのページの一番下の見出しの親要素と子要素に記入。

aタグ

リンクを作成する
例.html
<a>GoogleへGo！</a>
Web
↓

Web上では表示されているが、文字が表示されているだけでGoogleへは繋がらない。
だってリンク先のURLを指定していないもん。
どうするかというと・・・
開始タグに　href="URL"　を追加するのです。
例.html
<a href="https://www.google.co.jp">GoogleへGo！</a>
GoogleへGo！の文字をクリックすると・・・

ちゃんとGoogleへ繋がりました

imgタグ

画像を表示する
＜img src="画像のURL"＞で作成
終了タグがない（文字を囲む必要がないから）
例.html
<img src="https://2.bp.blogspot.com/-HGO1Xeo-UCU/UV1JGezkNhI/AAAAAAAAPS4/kIa5Y9sWfZs/s400/hiyoko_baby.png">
Web
↓

要素と属性

aタグやimgタグの開始タグにいろいろと詰め込まれているが、aタグで説明すると以下のようになる。
例.html
<a href="https://www.google.co.jp">GoogleへGo！</a>
a ・・・要素名
href ・・・属性名
"https://www.google.co.jp" ・・・属性値

href="https://www.google.co.jp" ･･･属性名 + 属性値 = 属性

＜a href="https://www.google.co.jp"＞GoogleへGo！＜/a＞・・・要素

＜a＞＜/a＞・・・タグ（開始タグと終了タグ）

上記は a要素や aタグなどと呼ぶ。
要素名に要素やタグをつけて呼ぶ（他にもpタグやｐ要素、imgタグやimg要素など）

要素名と属性名のあいだはスペースをあける（例：<a href･･･）
属性名と属性値のあいだは = をつける（例：href="https://www.google.co.jp" ）
要素名は " " で囲む（例："https://www.google.co.jp" ）

つまりは・・・
<要素名 属性名="属性値">
となる。

親要素と子要素
例：ulとliのセット.html
<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>メロン</li>
</ul>
上記のように要素を要素で囲む（ul を li で囲む）ことを入れ子という。
このとき ul を親要素、 li を子要素と呼ぶ。

ロシアのマトリョーシカみたいなイメージ。
一番大きなマトリョーシカが ul だとするならば
二番目に大きなマトリョーシカが li になる。

この入れ子構造にする場合は必ずインデント（字下げ）する。
下記のようにインデントをしないと親子関係がわかりづらい。
キーボードの Tabキーを押すとインデントできる。
インデントなし.html
<ul>
<li>りんご</li>
<li>みかん</li>
<li>メロン</li>
</ul>
インデントあり.html
<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>メロン</li>
</ul>

　 Tweet
Qiitaで続きを読む

20191224のHTMLに関する記事は8件です。

Webページ作成するときにいつもすることまとめ

サーバ

スマホでのビュー対応

ファビコン・Webクリップアイコン

OGP画像

ローカルサーバを起動

配色

IDを使ったページ内リンクの作り方

ページ内リンクってどうやるの？

目的

やり方

例

スピードに特化したコーディング規約【QuiCSS】

QuiCSSとは

背景

必要な前提知識

メリット

デメリット

内容

ディレクトリ構成

クラスの命名規則

クラスをつけるタグ、つけないタグ

Blockにするタグ、Elementにするタグ

componentsを利用する場合のクラスの付け方

サンプル

[HTML/CSS]CSSアニメーションだけでアコーディオンつくるぞ

inputとlabelでアコーディオンつくった

inputとlabelの関係性

HTML

titleクリックで矢印アイコンの向きを変える

チェック入ったときの指定方法

アコーディオンを開閉させる

領域外クリックでアコーディオンを閉じる

まとめ

画像ファイルが選択されたらブラウザ上でリサイズしてBase64文字列にして結果をフォームに埋め込んでサーバに送信する(非ajax)

参考

クリスマスツリーをCSSで作ってみた

はじめに

用意するもの

作ってゆく

もみの木

電飾

てっぺんの星

オーナメント

組み立てる

まとめ

HTML基礎

HTMLとは

hタグ

pタグ

liタグ・ulタグ・olタグ

aタグ

imgタグ

要素と属性

親要素と子要素

【HTML】基礎

HTMLとは

hタグ

pタグ

liタグ・ulタグ・olタグ

aタグ

imgタグ

要素と属性

親要素と子要素

日付別

タグ一覧

`input`と`label`でアコーディオンつくった