チョコパイを240こ食べたエンジニア

PHPエンジニアをやった後、現在はフロントエンドエンジニアに・・。好物は『チョコパイと焼き鳥』。Twitterは@chooringo（ちょうりんご）

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

HTML5

素人が書く備忘録
HTML５のカテゴリとコンテンツモデルについて(基本的には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の基礎知識～概要～

HTML5

素人が書く備忘録
ひとまず、ざっくりと概要について。(基本的にはHTML5.2を元に記載。)

セマンティクス

*1

あるHTMLの例
<div class="article">
    <h2>好きな焼き鳥メニュー</h2>
    <div class="list">ネギま</div>
    <div class="list">ぼんじり</div>
    <div class="list">皮(カリカリタイプ)</div>
</div>
セマンティクスな感じで書いた例
<article>
    <h2>好きな焼き鳥メニュー</h2>
    <ul>
        <li>ネギま</li>
        <li>ぼんじり</li>
        <li>皮(カリカリタイプ)</li>
    </ul>
</article>

*1:セマンティック・ウェブ - Wikipedia

HTML5の基礎知識～DOCTYPE宣言～

HTML5

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

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

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

HTML5の基本

DOCTYPE宣言

  • HTML5はSGML*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後に再度マージしたいけど差分が出ない時には

Git

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

GitでAブランチに修正内容コミット //　手順１
⇩
Aブランチの内容をメインブランチにマージ // 手順２
⇩
やっぱAブランチの内容取り消したいわ。。
⇩
Aブランチの内容をメインブランチにマージしたコミットを取り消す！ // 手順３

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

⇩
数日後、、、
よし、Aブランチの内容やっぱメインブランチにマージしたいわ！
⇩
Aブランチ⇒メインブランチへのマージ、再度プルリク作成！
あれ、、、差分があるはずなのに出てこない汗


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

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

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

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

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

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

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

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

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

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

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

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