チョコパイを240こ食べたプログラマ

青森から大都会に出てきてPHPエンジニアとして修行後、今度はフロントエンドエンジニアになろうと奮闘中。時々趣味の雑貨系も♡好物は『チョコパイと焼き鳥』。Twitterは@chooringo(ちょうりんご)

HTML5の基礎知識~要素のカテゴリとコンテンツモデル~

素人が書く備忘録
HTML5のカテゴリとコンテンツモデルについて(HTML5.2に関して記載)
うーん、定義書(英語)を見ての自分の解釈と他の方の参考ページ見てると
微妙に違うんだようなぁ。。。あくまで参考程度で・・・

概要

HTML5より前のHTML/XHTMLは、インライン要素とブロック要素に分類されていたが、HTML5でこのような分類は廃止された。
CSSではこの分類は引き続き使われているので完全に考えなくていいというわけではない。

その代わりと言っちゃなんだが、コンテンツモデルとカテゴリが導入されている。

コンテンツモデル

どの要素にどの要素が入れられるかが定義されたもの。
基本的には、子要素についてのルール。孫要素についてもルールがあるものもある。
どの要素が入れられるかの定義は、主要カテゴリで定義されるが、それ以外のカテゴリもある。
(トランスペアレントとかパルパブルコンテンツとか・・これは別記事で書こう・・・('ω')ノ)

例
body要素のコンテンツモデルはフローコンテンツ
→body要素の子要素になれるのは、フローコンテンツに属している要素

主要カテゴリ

7つに分けられていて、多くの要素はカテゴリに属している。
複数のカテゴリに属する要素もある。
カテゴリに属さない要素もある。

メタデータコンテンツ(Metadata Content)

メタデータの設定。
属している要素は、
base、link、meta、noscript、script、style、template、title

フローコンテンツ(Flow Content)

body内で使われる要素はほとんどこのカテゴリに属する。
属している要素は、
a、abbr、address、area(map要素に含まれている場合)、article、aside、audio、b、bdi、bdo、blockquote、br、button、canvas、cite、code、data、datalist、del、details、dfn、dialog、div、dl、em、embed、fieldset、figure、footer、form、h1、h2、h3、h4、h5、h6、header、hr、i、iframe、img、input、ins、kbd、label、link(body要素で許可されている場合)、main、map、mark、math、meter、nav、noscript、object、ol、output、p、picture、pre、progress、q、ruby、s、samp、script、section、select、small、span、strong、style、sub、sup、svg、table、template、textarea、time、u、ul、var、video、wbr、文字列

セクショニングコンテンツ(Sectioning Content)

見出しとフッターの範囲を定義。
属している要素は、
article、aside、nav、section

ヘッディングコンテンツ(Heading Content)

セクションのヘッダーを定義。
属している要素は、
h1、h2、h3、h4、h5、h6

フレージングコンテンツ(Phrasing Content)

文章や文章をマークアップする要素を定義。
属している要素は、
a、abbr、area(map要素に含まれている場合)、audio、b、bdi、bdo、br、button、canvas、cite、code、data、datalist、del、dfn、em、embed、i、iframe、img、input、ins、kbd、label、link(body要素で許可されている場合)、map、mark、math、meter、noscript、object、output、picture、progress、q、ruby、s、samp、script、select、small、span、strong、sub、sup、svg、template、textarea、time、u、var、video、wbr、文字列

エンベッディッドコンテンツ(Embedded Content)

別のリソースをインポートするコンテンツ、または名前空間の挿入する要素を定義。
属している要素は、
audio、canvas、embed、iframe、img、math、object、picture、svg、video

インタラクティブコンテンツ(Interactive Content)

ユーザーとの対話を目的としたコンテンツを定義。
属している要素は、
a(href属性が指定されている時)、audio(controls属性が指定されている時)、button、details、embed、iframe、img(usemap属性が指定されている時)、input(type属性がhidden以外の時)、label、select、textarea、video(controls属性が指定されている時)、tabindex属性が指定されている要素


どの要素がどのカテゴリに属しているかは以下のものがわかりやすそうです!
webgoto.net



参照元
HTML 5.2: 3. Semantics, structure, and APIs of HTML documents

HTML5の基礎知識~STEP1ほんとの基本~

久しぶりに記事を書きます。
9年半ほどPHPエンジニアとして修行してきましたが、ざっくり言うとフロント側の開発に魅力を感じ転職しました。
ロスタートで頑張っていきたいです!!

この前HTML5プロフェッショナル認定試験レベル1を合格できました!
しかし、人間は忘れる生き物です。
おまけに私はにわとり以下・・・

ということで、自分が忘れそうだなとかポイントだなと思うことをメモとして記事を書いて残しておこうと思います。
もし、私のようなこれから挑戦するような人の役に立てれば幸いです・・・。
解釈が間違っていたりするかも・・・

HTML5の基本

DOCTYPE宣言

  • HTML5SGML*1に基づいて作られたものではないためDTD*2が存在しない。よって今までもじゃもじゃいっぱい書いていたDTD宣言はいらない
  • ただDOCTYPEがないとブラウザが互換モード*3で表示してしまうので、標準モード指定するために記載する
<!DOCTYPE html>  // 基本はこう
<!doctype html>    // これも可
<!DOCTYPE html > // これも可 
<! DOCTYPE html> // これはだめ

属性値を指定するとき

  • HTML5では属性値を囲む、ダブルクオートやシングルクオートは省略可能
  • HTML5ではイコール(=)の前後に空白文字を入れることが可能


次回は要素カテゴリについて書こうと思います。

*1:HTML4.01以下(HTML2.0まで?)のHTMLはSGMLを元に作られたそうで、どのDTDを使うか宣言しないといけないそう。

*2:DTDとは文書型定義で、どの要素どの属性が使えるかなどが定義されているもの

*3:互換モードというのは、昔のブラウザの独自仕様に合わせて表示するモード

Git マージコミットをrevert後に再度マージしたいけど差分が出ない時には

この間、(今更ですが)困っていたのでぐぐったら情報がでてきたので、
自分なりに解釈してメモしておきますmm

GitでAブランチに修正内容コミット // 手順1

Aブランチの内容をメインブランチにマージ // 手順2

やっぱAブランチの内容取り消したいわ。。

Aブランチの内容をメインブランチにマージしたコミットを取り消す! // 手順3

git revert -m 1 {手順2のリビジョン番号}


数日後、、、
よし、Aブランチの内容やっぱメインブランチにマージしたいわ!

Aブランチ⇒メインブランチへのマージ、再度プルリク作成!
あれ、、、差分があるはずなのに出てこない汗


という感じで困りましてググりました。。
以下のページ参照させていただきました、ありがとうございます!
qiita.com

revertしたものをさらにrevertする

ということが必要なのですね!
Gitは結局、前へ前へどんどん進めていくもので、
手順1が一番リビジョン番号が古くて、手順3が一番リビジョン番号が新しい。
そこでいくらマージしようとしても、修正を加えた手順1より、revertした手順3というのが一番最新の状態となる。
なので、差分は出てこない。
ということで、

revertした手順3のあとに、revertしたことを打ち消すコミットをする

と差分がでてくる!つまり、

git revert -m 1 {手順3のリビジョン番号}

でコミットプッシュすると差分がでてくる!
ちょと認識違っているかもですが、一旦自分はこれで納得したのでこれでmm

revertのオプションの-m 1はほかに -m 2もあるのでこれについては次回の記事でmm

PHP正規表現で一部の文字を保持しつつ、一部の文字を置換したい~第1弾キャプチャとは~

ある一部の文字列を保持しつつ、他を置き換えたいときの正規表現の書き方の第1弾のメモっっ
正規表現なんて嫌いだっっ(◞‸◟ㆀ)ショボン

とかく、まずはキャプチャてなんじゃろってところを。
※以下、phpで書いている※

例えば、
置換しようと思うと正規表現で以下のようなコードになる。

$subject     = "ちょこぶどうりんご";
$pattern     = "/(ちょこ)(ぶどう)(りんご)/";
$replacement = "$1パイ $2パイ $3パイ";
preg_replace($pattern, $replacement, $subject)

とやると置換後のようになる。
()で囲むと、グループ化され、それがキャプチャ(保持)される。

$replacementに書いている、
$1にはちょこ
$2にはぶどう
$3にはりんご
が左から順にキャプチャされて入っている。
で、

置換前:
ちょこぶどうりんご

置換後:
ちょこパイ ぶどうパイ りんごパイ

となる。


というここまでが準備段階として書いておくっっ
本当にやりたいことは次の記事に書きますっっ

FireFoxを同時に複数起動するやり方

FireFoxを同時に複数起動するやり方をメモ。
ぐぐったらすぐ出てくるけど、
自分の言葉でまとめたほうが、思いだしやすいから汗汗


1. とかくFireFoxをインストールする

2. すべてのプログラム>>FireFoxを右クリック>>プロパティ表示

3. ショートカットタブ>>リンク先の中身をコピー
  ⇒実行ファイルのパスを知りたいから

4. Windowsキー + R で、↑のコピったやつを貼り付けしその後ろに以下の文字を追加してOK
  -no-remote -p
 
  結局、「"ほげほげほげちょこぱい\firefox.exe" -no-remote -p」
  みたいな感じで入れられればよし!


5. 追加するなら「新しいプロファイルを作成」、追加したプロファイルを使って起動ならそれを選択して起動!

eclipseからGitマージで競合したら

eclipseからEGitを使ってマージで競合したときにやったやりかたをメモ。
自分でわかりやすいようにメモ。。。

  1. 内容をとりこみたいブランチと、内容をとってくる元のブランチを両方pullしておく
  2. gitリポジトリタブ⇒内容をとりこみたいブランチ選択⇒マージ⇒内容をとってくる元のブランチを選択
  3. 競合してなかったらそのままマージできるけど競合してたら競合マークがつく
  4. 競合箇所のファイルを確認して手動でコードを修正
  5. 競合したファイルを選択⇒チーム⇒Add Index(索引を追加)

Add Index(索引を追加)ってやらないといつまでも競合マーク付いてて
いつまでたってもコミットプッシュできなかった…|ω;`))

Androidの標準ブラウザでショートハンドだと背景画像がでない時は

CSSで背景画像をbackgroundのショートハンドで指定したけど、
Androidの標準ブラウザで表示されなかったときのメモっ!

Androidのシミュレータだと出ちゃうけど、実機の標準ブラウザで見ると出ない…むむっ
ということがありました。


※そもそもプロパティをまとめて指定する形を、
ショートハンドということをいまさら知った…
(心の中でまとめてかく書き方っみたいに思ってた…)

そんなときは、
background-sizeだけ個別で指定したらうまくいきましたっ
以下のような感じ。

background: url("画像パスだよ") top right no-repeat fixed;
background-size: 10px 10px;

top rightの位置指定のあとにスラッシュ(/)つけてそのあとにサイズ書くと良い、
というのを見つけたんですが、それだとうまくいかなかった壁|ω;`))
なのでsizeだけ個別でっ
とかくのメモっ