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

投稿日：2021-01-15T23:30:18+09:00

高速でコーディングするための「Emmet」備忘録

はじめに

コーディングを高速で行うことができる「Emmet」についてあまり知らなかったので学習するついてでまとめてみました。

Emmetとは

Emmet（旧：Zen Coding）は既定形式の入力補完機能によりHTML、CSS、XML、XSL等を素早く編集できる、テキストエディタ用プラグインである。 2008年にVadim Makeevが開発を始め[1]、Sergey Chikuyonokと利用者によりMIT Licenseのオープンソースとして継続して開発されている[2]。多くの著名なエディタに実装されているが、特定のソフトウェアに特化して開発されておらず、どのテキストエディタにも偏向していない
https://ja.wikipedia.org/wiki/Emmet

コーディングを補助してくれるプラグインのことです。このEmmetをうまく利用していくことでより早くコーディングをすることができるようになります。様々なエディタに対応していて、標準でインストールされているものもあれば、プラグインをダウンロードしてインストールする必要があるものもありますので、ご自身が利用しているエディタが対応しているがご確認ください。(ちなみにVS Codeは標準でインストールされています。)

使い方

使い方は簡単で、用意されているHtmlタブやCSSプロパティの略式記法を入力してTabキーを押すだけです。
略式記法入力
nav>ul>li*5

展開後
<nav>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</nav>
使えるようになれば一気にコーディングが早くなりそうですね。

略式記法

HTML編

記号一覧

記号役割例

> ネストし子要素を作ることができます div>p

+ 兄弟要素を作ることができます div+p

^ 次の要素の階層を一つあげることができます div>p^div

() 囲った要素をグループ化することができます div>(ul+li)+p

*n n回要素を複製することができます div>p*3

$n n個連番を作ることができます div>h$5

実際の使用例

　子要素


nav>ul>li



<nav>
  <ul>
    <li></li>
  </ul>
</nav>
　兄弟要素


div+p+bq



<div></div>
<p></p>
<blockquote></blockquote>
階層を上げる


div+div>p>span+em^bq



<div></div>
<div>
  <p><span></span><em></em></p>
  <blockquote></blockquote>
</div>
グループ化


div>(header>ul>li*2>a)+footer>p



<div>
  <header>
    <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </header>
  <footer>
    <p></p>
  </footer>
</div>
要素の複製


ul>li*5



<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
連番


ul>li.item$*5



<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
</ul>
子要素や兄弟要素の作成などはよく使うのではないでしょうか。他の記号も使えるようになっても損はないと思います。

属性の記法

ID、Classの場合

IDは付けたいID名の前に『 # 』を、classの場合は『 . 』をつけるだけです
使用例


#header
.title
p.class




<div id="header"></div>
<div class="title"></div>
<p class="class"></p>
また要素を書かなくても自動で補完してくれたりします。何も書いてなければdiv属性、ulの子要素だったらli属性などの要素を勝手に付けてくれます。
便利ですね〜！

その他属性

その他属性の場合は、属性とその値を『 [] 』で囲ってあげましょう。
使用例


p[title="Hello world"]



<p title="Hello world"></p>
HTML書き出し

Htmlの書き出しテンプレートを書くのってめんどくさいですよね。
Emmetでは『 ! 』を入力するだけで長いテンプレートを展開してくれます。
使用例


!



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>
一気にここまで展開してくれるのは非常に便利ですね。
ただ初期設定では

lang="en"

となっているので場合によって「 "ja" 」に書き換える必要があります。
設定を変えると、展開後一発で『 lang="ja" 』とすることができるようです。
VS Codeでの設定方法はこちらにいい記事がありました。

CSS編

HTMLだけでなく、CSSにも略式記法があります。
非常にたくさんあるのでよく使うであろうものだけピックアップしています。

Visual Formatting

position

略式記法プロパティ: 値

pos position:relative;

pos:s position:static;

pos:a position:absolute;

pos:r position:relative;

pos:f position:fixed

float

略式記法プロパティ: 値

fl float:left;

fl:n float:none;

fl:l float:left;

fl:r float:right;

display

略式記法プロパティ: 値

d display:block;

d:n display:none;

d:b display:block;

d:f display:flex;

d:if display:inline-flex;

d:i display:inline;

d:ib display:inline-block;

Spacing

margin

略式記法プロパティ: 値

m margin:;

m:a margin:auto;

mt margin-top:;

mt:a margin-top:auto;

mr margin-right:;

mr:a margin-right:auto;

mb margin-bottom:;

mb:a margin-bottom:auto;

ml margin-left:;

ml:a margin-left:auto;

pading

略式記法プロパティ: 値

p padding:;

pt padding-top:;

pr padding-right:;

pb padding-bottom:;

pl padding-left:;

marginもpaddingも

t → top
r → right
b → bottom
l → left

の部分は共通なので覚えやすいですね！

Sizing

略式記法プロパティ: 値

w width:;

w:a width:auto;

h height:;

h:a height:auto;

maw max-width:;

maw:n max-width:none;

mah max-height:;

mah:n max-height:none;

miw min-width:;

mih min-height:;

Font

略式記法プロパティ: 値

f font:;

fw font-weight:;

fz font-size:;

ff font-family:;

「 "font-size" 」が「 "fz" 」であることがちょっと間違えやすいところかもしれません。
今までの流れだったら「 "fs" 」ですが、それだと「 "font-style" 」になってしまいます。

Text

text-align

略式記法プロパティ: 値

ta text-align:left;

ta:l text-align:left;

ta:c text-align:center;

ta:r text-align:right;

text-decoration

略式記法プロパティ: 値

td text-decoration:none;

td:n text-decoration:none;

td:u text-decoration:underline;

td:o text-decoration:overline;

td:l text-decoration:line-through;

Background

略式記法プロパティ: 値

bg background:#000;

bgc background-color:#fff;

bgi background-image:url();

Color

略式記法プロパティ: 値

c color:#000;

c:r color:rgb(0, 0, 0);

c:ra color:rgba(0, 0, 0, .5);

op opacity:;

Border

略式記法プロパティ: 値

bd border:;

bdc border-color:#000;

bds border-style:;

bdt, bt border-top:;

bdr, br border-right:;

bdb, bb border-bottom:;

bdl, bl border-left:;

Flexbox

略式記法プロパティ: 値

ac align-content:;

ai align-item:;

fxd flex-direction:;

fxf flex-flow:;

fxw flex-wrap:;

jc justify-content:;

さいごに

結構な量がありますが、ある程度規則性があるので意外と覚えやすいような気がします。（まだ自分は全然覚えきれていません笑）
毎日使うことで自然と手に染み付いてくるかと思うので、これからは意識的に使っていこうと思います。
また、ここに全て書いた訳ではないので公式ページやチートシートなども覗いてみてください。

参考

https://emmet.io/
https://docs.emmet.io/
https://docs.emmet.io/cheat-sheet/
https://ja.wikipedia.org/wiki/Emmet

記号	役割	例
>	ネストし子要素を作ることができます	div>p
+	兄弟要素を作ることができます	div+p
^	次の要素の階層を一つあげることができます	div>p^div
()	囲った要素をグループ化することができます	div>(ul+li)+p
*n	n回要素を複製することができます	div>p*3
$n	n個連番を作ることができます	div>h$5

略式記法	プロパティ: 値
pos	position:relative;
pos:s	position:static;
pos:a	position:absolute;
pos:r	position:relative;
pos:f	position:fixed

略式記法	プロパティ: 値
fl	float:left;
fl:n	float:none;
fl:l	float:left;
fl:r	float:right;

略式記法	プロパティ: 値
d	display:block;
d:n	display:none;
d:b	display:block;
d:f	display:flex;
d:if	display:inline-flex;
d:i	display:inline;
d:ib	display:inline-block;

略式記法	プロパティ: 値
m	margin:;
m:a	margin:auto;
mt	margin-top:;
mt:a	margin-top:auto;
mr	margin-right:;
mr:a	margin-right:auto;
mb	margin-bottom:;
mb:a	margin-bottom:auto;
ml	margin-left:;
ml:a	margin-left:auto;

略式記法	プロパティ: 値
p	padding:;
pt	padding-top:;
pr	padding-right:;
pb	padding-bottom:;
pl	padding-left:;

略式記法	プロパティ: 値
w	width:;
w:a	width:auto;
h	height:;
h:a	height:auto;
maw	max-width:;
maw:n	max-width:none;
mah	max-height:;
mah:n	max-height:none;
miw	min-width:;
mih	min-height:;

略式記法	プロパティ: 値
f	font:;
fw	font-weight:;
fz	font-size:;
ff	font-family:;

略式記法	プロパティ: 値
ta	text-align:left;
ta:l	text-align:left;
ta:c	text-align:center;
ta:r	text-align:right;

略式記法	プロパティ: 値
td	text-decoration:none;
td:n	text-decoration:none;
td:u	text-decoration:underline;
td:o	text-decoration:overline;
td:l	text-decoration:line-through;

略式記法	プロパティ: 値
bg	background:#000;
bgc	background-color:#fff;
bgi	background-image:url();

略式記法	プロパティ: 値
c	color:#000;
c:r	color:rgb(0, 0, 0);
c:ra	color:rgba(0, 0, 0, .5);
op	opacity:;

略式記法	プロパティ: 値
bd	border:;
bdc	border-color:#000;
bds	border-style:;
bdt, bt	border-top:;
bdr, br	border-right:;
bdb, bb	border-bottom:;
bdl, bl	border-left:;

略式記法	プロパティ: 値
ac	align-content:;
ai	align-item:;
fxd	flex-direction:;
fxf	flex-flow:;
fxw	flex-wrap:;
jc	justify-content:;

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-15T14:38:16+09:00

雰囲気でもいいからAHKでブラウザを弄りたい人への記事

概要

AHK(AutoHotKey)でブラウザをいじる時のテンプレや注意点を記載していく記事。
細かい理屈とかは全部省いています。自分で調べてください。
難しいことわからねーけど自動化したい！という人の参考になれば幸いです。
また注意点として私はHTMLとか正直よくわかってないので、認識が間違っているところがあるかもしれません。
俺は雰囲気でツールを作っている。

AHKそのものについては別途記事を作成しているのでご参考に
AutoHotKeyの利用補足資料

ページの特定まで

該当ページを表示（例ではブラウザはIE）
url := "https://XXXX"
ie := ComObjCreate("InternetExplorer.Application")
ie.visible := true
ie.navigate(url)
他のブラウザでも似たやり方でＯＫ

該当のページ(window)の特定
For window in ComObjCreate("Shell.Application").windows{
    If window.LocationName = "該当ページのロケーションネーム"{
        Break
    }
}
ロケーションネームは基本的にタブ名称です。
また、フレームがある場合は以下の感じでフレームを特定してあげる。
objFrames := Array()
objFrames := window.document.frames
objFrame := objFrames[i]
要素を取得する方法

window（orフレーム）を特定したら要素(HTMLelement)を取得します。
取得方法は色々あると思いますが、私は以下の2つでどうにかしてます。
hogeID := window.document.getElementById("ID名"
ID名はソースや後述の方法で拾ってきてください。単一のHTMLelementが取得できます。
hogeClass := window.document.getElemensByClassName("クラス名）
クラス名はソースや後述の方法で拾ってきてください。HTMLコレクションが取得できます。
ここからhogeClass[i]でHTMLelementが取得できます。
なおHTMLコレクションは一見配列に見えますが配列ではないので、For~in等を使おうとするとバグります。
気を付けてください。
なおHTMLコレクションはLENGTHのプロパティを持っているので、長さを取得してごり押しでループさせるのはありです。

ソース（body.innerHTML)を見る

クラス名やIDを確認するときにフレームが存在して見にくい場合や、
アプリの都合でソースが見えない場合は以下の手法で
body.innerHTMLをテキストに落としてクラスやＩＤなどを確認します。
For window in ComObjCreate("Shell.Application").windows{
    If window.LocationName = "該当ページのロケーションネーム"{
        Break
    }
}
objFrames := Array()
objFrames := window.document.frames
objFrame := objFrames[i]
inHtml := objFrame.document.body.innerHTML

FileAppend %inHTml%,output.txt
要素にあるメソッドを動かしたり、プロパティを弄る

上記で要素を取得したら、要素のメソッドを動かしたりプロパティを弄ります。
UIやソースを見ながら弄っていきましょう。

クリックする

基本of基本。だいたいこれ。
hogeID.Click()
hogeClass[0].Click()
valueの中身を取得する

あまりvalue使ってるのないですけど、基礎的なやつ。
条件式などで活躍。
hogeVal := hogeID.value
innerTextを取得する

innnerTextで取得できるのはソースの<>に入ってないところです。
例えるとこんな感じ
<div Class="HOGEHOGE" ID="HOGE"> ここがinnnerText </div>
ここは以下の方法でとれます。
hogeInnerText := hogeID.innerText
ちょっと面倒なやつ

基本的には上記の使えばどうにかなります。
しかし、それだけではできない面倒くさいやつもいますので、
その対処をちょこっと書きます。

何かを選択した後にボタンをクリックすると動くタイプ

一覧で何かを選択させてから、ボタンをクリックするタイプです。
（良い例が見つかったら添付します）

このタイプは（私の知る限りは）「選択されている」という情報がCLASSに付与されてるので、
それを書き換える事で弄ることができます。
例を記載します。
CLASS("hogehoge")に一郎から四郎まで存在しており、初期では一郎を選択されているとしましょう。
これを三郎に変更するとします。
この場合、
<div Class="hogheoge SELECTED">一郎</div>
<div Class="hogheoge">二郎</div>
<div Class="hogheoge">三郎</div>
<div Class="hogheoge">四郎</div>
のような形で最初は記載されていますので、
以下のようにして三郎をセレクトさせてあげる必要があります。
window.getElementsbyClassNamea("hogehoge")[0].ClassName := "hogehoge"
window.getElementsbyClassNamea("hogehoge")[2].ClassName := "hogehoge SELECTED"
このようにClassNameを変更させてあげる事で選択先を変更させる事ができます。
この状態でボタンをClickすればOKですね。

Attributeの内容を取得する

HTMLにはAttributeなるものが存在します。Attributeはノード属性らしいですが私はよくわかりません。
よくわからなくても利用しないといけない場合がありますので、対処法を少し。
まず、エレメントにあるAttributeの一覧を獲得しましょう。
hogeAttributes := window.document.getElementById("hoge").attributes
これをテキストなりMsgBoxなりに落として中身を見ますが、
なおAttributesは配列ではないのでFor~inは使えません。注意。

で欲しいAttributeが見つかったら
hogehogeAttribute := window.document.getElementById("hoge").getAttribute("hogehoge")
といった形でAttributeを取得できます。
条件式で必要となる場合がたまにあるので、覚えておくと良いと思います。

おわりに

HTMLとか良くわからなくても、ロジックさえ組めれば雰囲気でブラウザは弄れます。
詳しいことは詳しい人に任せればよいのです（エンジニアの風上にも置けない発言）
とりあえず動かしてみましょう。

<参考>
htmlelementのリファレンス
 htmlコレクションのリファレンス

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-15T10:28:32+09:00

placeholderが表示されないinputにplaceholderを表示させる

この記事について

type="date"にplaceholderを指定しているのに表示されず困った事があったので、その原因と解決方法や調査結果をまとめた記事です。

placeholderが表示されなかったコード
index.html
<input type="date" placeholder="placeholder">
解決したコード

疑似要素を使うと表示できるようになります↓

See the Pen
qBaJvdd by kena-nk (@kena-nk)
on CodePen.

解決方法の詳細

まず疑似要素のbeforeでcontent: attr(placeholder);を使いplaceholderに設定された文字列を受け取ります。

そしてShadow DOMで作られた要素のdivのpseudoに指定されていた-webkit-datetime-edit-fields-wrapperと-webkit-calendar-picker-をdisplay: noneに設定したら完成！

Shadow DOMについて

通常のDOMツリーの下に隠れているDOMになります。検証ツールで見ても表示されないので、確認するにはShadowDOMを見る設定オンにする必要があります。

Chromeで確認する場合は以下の流れでONにできます↓
検証ツールを開く > 歯車マーク > Preferences > Elements > 「Show user agent shadow DOM」にチェックをつける

Shadow DOM により、通常の DOM ツリーの要素の下に DOM ツリーを追加し隠すことができます。
shadow DOM ツリーは shadow root を根とし、その下には普通の DOM ツリーと同様に任意の要素を追加できます。

ソース：https://developer.mozilla.org/ja/docs/Web/Web_Components/Using_shadow_DOM

placeholderが表示されない原因

placeholder属性がそのtypeで対応されていない属性であるためです。
調査したところ、以下のtypeはplaceholder属性には対応していませんでした。

date（未対応ブラウザ：Safari,IE）

month（未対応ブラウザ：FireFox,Safari,IE）

week（未対応ブラウザ：FireFox,Safari,IE）

time（未対応ブラウザ：Safari,IE）

datetime-local（未対応ブラウザ：FireFox,Safari,IE）

未対応ブラウザではtype="text"の表示になるためplaceholderは表示されます。

入力欄のユーザーインターフェイスは、一般にブラウザーによってまちまちです。詳細はブラウザーの互換性を参照してください。対応していないブラウザーでは、このコントロールは単純な <input type="text">に格下げされます。

ソース：https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/date

See the Pen gOwBexv by kena-nk (@kena-nk) on CodePen.

まとめ

無理してtype="date"を使ってplaceholderを表示させずに、divで作るかtype="text"で作成した方が簡単そうだなと感じた。

気になったのが、Shadow DOMで作られた属性に指定されているpseudoは一体なんなのか、、
MDN調べても疑似要素や疑似クラスの記事しか見当たらずもやもや

ShadowDOMで作られた疑似要素にはくっ付いてくるお約束でもあるのかな、、、

参考記事

https://developer.mozilla.org/ja/docs/Web/CSS/attr()
https://qiita.com/alangdm/items/cec32f21151a9da3c3f2

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-15T01:04:14+09:00

Qiitaアイコンをhtmlに挿入したい

はじめに

この画像かわいいですよね！！
まだまだですが，ポートフォリオ作るときにQiitaのリンクをはろうと思ったのです．
ただ，公開されてるのがこれだけなので，とりあえず，貼るのにちょうどいい画像に変換してから，乗っけました．
３Dペイントとかも使えるみたいですがよくわからなかったのでpythonで画像加工のプログラムを書きました．
たぶん大丈夫だと思うのですが，これがガイドライン的にアウトだったら教えてください
早急に消します

pythonプログラム
import cv2
import numpy as np
from PIL import Image, ImageDraw, ImageFilter,ImageOps,ImageChops

# 元画像を読み込み最大値を255，最小値を0にする
im_gray = cv2.imread('qiita-icon.png', cv2.IMREAD_GRAYSCALE)
imtype = im_gray.dtype
im_gray -=np.min(im_gray)
valmax = 255 / np.min(im_gray)
im_gray = im_gray * valmax

# 白黒反転
im_gray = 255 - im_gray 
#型変換してしまうので元に戻す
im_gray = im_gray.astype(imtype)
#Image型に変換
img_p = Image.fromarray(im_gray)

# 黒画像を作り，アルファ値の設定
im_a = Image.new("RGB", img_p.size, (0,0,0))
im_a.putalpha(img_p)
crop = im_a.split()[-1].getbbox()
im_a.crop(crop)
im_a.save('qiita-icon.png')
htmlへの実装

html
<div class="btnce">
  <a href="https://qiita.com/#" class='btn'><img class="qiiicon" src="img/qiita-icon.png"/> Qiita</a>
</div>
css
  .qiiicon{
    height: 1rem;
    width: auto;
    filter: invert(100%);
  }
filterで色を変えたことくらい
他の色のやり方はafterとかなのでしょうか？
うまくいかなかったです
やり方知りたい...

結果

こんな感じになりました
まあまあいい感じにはなったと思うので及第点とします
少しずれてるのでアドバイスあればお願いします

参照

ブランドガイド
 ?【CSS】filterのみを使用して黒い画像を任意の色に変更する

　 Tweet
Qiitaで続きを読む

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

高速でコーディングするための「Emmet」備忘録

はじめに

Emmetとは

使い方

略式記法

HTML編

記号一覧

実際の使用例

子要素

兄弟要素

階層を上げる

グループ化

要素の複製

連番

属性の記法

ID、Classの場合

その他属性

HTML書き出し

CSS編

Visual Formatting

position

float

display

Spacing

margin

pading

Sizing

Font

Text

text-align

text-decoration

Background

Color

Border

Flexbox

さいごに

参考

雰囲気でもいいからAHKでブラウザを弄りたい人への記事

概要

ページの特定まで

該当ページを表示（例ではブラウザはIE）

該当のページ(window)の特定

要素を取得する方法

ソース（body.innerHTML)を見る

要素にあるメソッドを動かしたり、プロパティを弄る

クリックする

valueの中身を取得する

innerTextを取得する

ちょっと面倒なやつ

何かを選択した後にボタンをクリックすると動くタイプ

Attributeの内容を取得する

おわりに

placeholderが表示されないinputにplaceholderを表示させる

この記事について

placeholderが表示されなかったコード

解決したコード

解決方法の詳細

Shadow DOMについて

placeholderが表示されない原因

まとめ

参考記事

Qiitaアイコンをhtmlに挿入したい

はじめに

pythonプログラム

htmlへの実装

結果

参照

日付別

タグ一覧

　子要素

　兄弟要素