Programming from 30

自分の備忘録が、誰かの為になれば・・

divタグ,sectionタグ、articleタグの整理

＜HTML＞-div,section,articleの違いについて

HTML５から学習を開始して、div,section,articleの違いについて理解が浅かったので調べた事を含めて備忘録
※お気付きの点があればご指摘よろしきお願い致します。

参考：articleタグとsectionタグとdivタグ,HTMLクイックリファレンス,oli.jp

divタグ

HTML５以前のdivの使い方は、「header」、「footer」などをidの名称に指定して使用。現在では、「header」、「section」、「article」、「nav」、「footer」などの要素(タグ)が追加されたことで、検索エンジンにWEBページの構造をより明確に伝えることができるようになった。

  • divタグは、ひとかたまりの範囲として定義する際に使用。特に意味はない。
  • 他に適切な要素が無い場合の使用が推奨されている。
    →ウェブページのアクセシビリティやメンテナンス性が低下を招く
  • div 自体に意味はないため section や article を内包可

    articleタグ

  • ブログの投稿や記事１件、コメント１件分など独立して成立するコンテンツに使用
  • article は section 同様、文脈的な意味がある コンテンツに対し使用
  • 内側の article が、外側の article の内容と関係がある場合、article を内包（ネスト）することができます。またsectionも内包できる。
  • レイアウトのために基本的はdivを使用使わない
  • 無理して使わなくてもよい
<article>
    <h1>Title</h1>
    <section>
        <h2>Section title</h2>
        <p>Content</p>
    </section>
    <section>
        <h2>Section title</h2>
        <p>Content</p>
    </section>
    <section>
        <h2>Section title</h2>
        <p>Content</p>
    </section>
</article>

sectionタグ

  • 章や節の区切りやまとまりなどに使用
  • 意味や機能のまとまり
  • div と違い、文脈的な意味があるコンテンツに対し使用する。 よってsection 内には見出しが必須
  • 文章の論理構造用タグ
  • article同様、基本的にレイアウトのためには使わない
  • articleを内包可（あまり腑に落ちてない。。。）
    – 無理して使わなくてもよい
  • コンテナーとして使うならdivを使用
<section id="main-content">
    <article>
        <h1>Article title</h1>
        <p>Summary</p>
    </article>
    <article>
        <h1>Article title</h1>
        <p>Summary</p>
    </article>
    <article>
        <h1>Article title</h1>
        <p>Summary</p>
    </article>
</section>

現在、FjordBootCampでプログラミング学習中！

8/7よりFjordBootCampに参加

始めてのはてなブログ投稿。
Fjordではブログを書き自身のアウトプットやエンジニアとしての素養を高める為、ブログを書くことを進めている。
慣れない部分はご容赦いただくとして、コンスタントにアウトプットし、自信と知識を積み重ねていきたい。

今日はTerminalの基本について学習

binについては調べたことがなかった。心なしか”b”から始まるものが多く敬遠していた。猛省。

binはbinary(バイナリー)の略です。binaryには”対になった物”という意味があ>ります。コンピューターのCPUが実際に実行するプログラムの中身は0と1だけになります。そこから、実行できるプログラムのことをbinaryファイルと言います。lsはbinaryファイルです。昔、二手に別れたペンギンの夫婦を操ってゴールを目指すバイナリーランドというファミコンゲームがありましたが、正にそのバイナリーです。

  • binファイルについての疑問
    lsを叩いた時にディレクトリ内のファイルが一覧で表示される為、どこかのディレクトリ内のコマンドという認識がなかった。ただ/bin/lsと叩くと、 今までは何も気にせずlsやpwd を叩いていたが、「PATHを通す」という行為をしなければで、フルパスを打ち込んで実行しなくてはいけない。というのも/bin/lsはbinディレクトリの中にあるlsというコマンドを実行している。「PATHを通すことでフルパスを打たずともlsのコマンドを実行出来るようになる。

  • 叩いたコマンド
    touch

    touchコマンドは空のファイルを作成します。本来既にあるファイルに触って(touchして)最終更新日を更新するだけのコマンドですが、空ファイルを作るのにも使われます。

→新規ファイル作成とばかり思っていたので、意味を理解できて良かった。

cat

catはconCATenateの略でファイルの中身を表示するコマンドです。concatenateは連結させるという意味で本来は引数に渡した二つのファイルを繋げて表示するコマンドですが、一つしかファイルを渡さなければ単に中身を表示するのでその用途の方で主に使われている悲しいコマンドです。lsやrmやcatのような基本的なコマンドは問答無用で覚えさせられることが多いので「cat?何で猫がファイルを表示するんだろう？」と思う人は多い(ハズ)です。

→初心者だから表示のみの仕方しか使わないが、エンジニアの方は頻繁に使っているのでしょうか。体感覚で連結時にさらっと使ってみたい。

sudo rm -rf / 　 →見るからに怖いコマンド。きっと使うことはない！！

  • 作業の自動化
    ...いかに効率良く作業を行うかが生産性に関わる。ただあまりパソコンを触ってこなかったので自動化したい作業が見当たらない。強いて挙げるなら、集中できる時間が１時間半なのでDashboardのタイマーで1時間半のタイマーをコマンド一つで実行できるような簡単なものから作っていきたい。

  • スクリプトを単体で実行するためにshebang(シバン)という機能
    自分自身でも理解できるスクリプトがあるか探して見たが、なかなか見当たらないので、簡単なコードを書いて見る為、以下を練習用に！
    read -p "Please input your name: " name
    echo "Hi, $name."をimput.shというファイルを作成し、保存。
    $ chmod u+x input.sh
    $ ./input.sh
    Please input your name: Tsubasa
    Hi, Tsubasa. と、簡単なもので練習。

    所感

今まで深く調べてみようと思ってはいたが、怠けていた黒い画面。分からないことを後回しにする事や、その場で掘り下げない事のツケが今になって表面化してしまった。Part.1-9までを自分なりに理解したが、まだまだものになっていないので、作業の自動化など効率化したいものを見つけ、それを形にできるよう技術を深めたい。黒い画面入門はとてもわかりやすく効率よく開発ができるよう何度か復習もしていきたい。