初心者がエンジニアに転職するための、壁打ちブログ('ω')

・CS、SV、TA、データサイエンス、などをIT業界で学んできた私が、 サーバーサイドエンジニアとして独立するまでのブログです

ゼロから始めるエンジニアへの道 #5 ~html編⑤~

やったこと

1.文章全体のtag付け
2.VSショートカット操作
3.基礎tagの種類のサジェストと、lang / doctyoe / の意味の違いなどなど

07 文書に関する情報を設定しよう ＆08文書の本文を書き込んでいこう

  • 今回は、chordの中で、コメントtagを用いた疑問の書き込み。　
    • サジェストした内容、定義確認は別途文章として記載する。
~

<!DOCTYPE html>

  <html lang="ja">
    <head>
      <meta charset="utf-8">
      <!--
         meta文字コードの設定は、最近はutf-8に統一されているケースが多いので、utf-8を指定すする
       -->
      <title>TKのportfolioサイト</title>
      <!--
        タイトルtag（<tile>）の中身は、ブラウザタブに表記される
      -->
      <link rel="icon" href="favicon.ico">
      <!--
        「favicon」とは、タブの小さなicon画像の事を指している。
        　同じ階層に存在するので、データファイル名の指定だけしています　階層が変わった場合の指方法がわからない:(サジェストする)
        　.ico(アイコン)の作り方は少々特殊らしいので別口でサジェスト
      -->
      <meta name="discription" content="TKのportfolioサイトです">
      <!--
        これはContent属性と言って、WEBに公開した時にSEO検索の説明文なに記載　されるようです。
        恐らくdedcriptファイルを作成して、指定する作業が必要なんだと思います。
      -->
      <body>
        <img src="https://cdn.image.st-hatena.com/image/square/da161997713f23479ca06fcaff8c7893ce57a75d/backend=imagemagick;height=128;version=1;width=128/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fblog_custom_icon%2F155897278%2F1583412966696427
        " width="120" height="120" alt="太郎にアイコンです">
          <h1>TK</h1>
          <p>システムエンジニアを目指しています</p>  
          
          <h2>Works</h2>
           <img src="https://lh3.google.com/u/0/d/1Z2wuIjH4R-QPmY70nxIuhYByLDITg3S7=w514-h596-iv1" class="a-b-ta-Ua"  width="600" height="400" alt="TKのWorkSpeaseです">
          <!--ここで指定していIMGtagと、src=img/work2は意味合いが違います。
            　srcはソースの略称
            　　要するに「img」の元ソースはどこ？ってこと
            　ソースを指定する際に用いている、/ は、一つ下の階層を指定。
           　記載していなかった備忘(alt属性は「代替えテキストとして活用」)
          -->

         <h3>私の大好きな「ゲーム」につて紹介です</h3>
          <p>
            基本的には、コンシューマー向けのゲームになるのですが...
            複数のシリーズが展開されていて、作品によってはアプリ<br>
            またPSのポータブルも販売していますので、
            是非、ゲームをプレイしてください(´ω｀*)
          </p>
         
         <h3>閃の軌跡</h3>
          <<img style="-webkit-user-select: none;margin: auto;cursor: zoom-in;" src="https://pbs.twimg.com/media/DmJX1E-UwAAb-Nw?format=jpg&amp;name=large" width="600" height="400" alt="英雄伝説の画像">
          <P>
          このゲームは上記に記載したコンシューマゲームに該当します。

          RPG（ロールプレイングゲーム）となっており、<br>基本的にはストーリーラインが緻密に構成され、バトルアクションも楽しめるといった作りになっています。
          <br>作品自体の魅力としては、【王道のようで、王道ではない】という点です。

 [f:id:Takeda2864:20200509143024p:plain]         </P>
          <!--
            　VSコードにて、chordのコピー作業を行える。shift * alt * ctrl 上下で操作が行える。
            　ただ、Setingの問題なのか同乗の操作が行えないので既存のショートカットキーを活用して、ctrl * C or V　で、ひとつづつコピペｗ
          -->
          
      </body>
    </head>
   </html>
~

Blogについて　

  • コードblockに記載されている[html]構文について、utf-8で指定しているにもかかわらず、

    が表示されない

    • 一応、反転すれば表示はできるのですがブロック側では、ブラックテキストになっているのでしょうか？(;´･ω･)

全体像　

f:id:Takeda2864:20200509143024p:plain
全体像