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

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

ゼロから始めるエンジニ アへの道 #16.5 ~html or css (整理したコード添付しただけ)

コメントtagめいっぱい使っていたら荒れたので、修正


~

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>TKのポートフォリオサイト</title>
  <link src="https://lh3.google.com/u/0/d/1yumUn_EzQtM_Wv0bCh5ytEYHdG4Bwiff=w425-h598-iv1" rel="icon" href="favicon.ico" width="30" height="20" >
  <meta name="discription" content="TKのportfolioサイトです">
  <link rel="stylesheet" href="BlogHederStyle.css">

<body>
  <header>
    <div class="container">
      <div class="icon">
        <img src="https://lh3.google.com/u/0/d/1bu81-XBeuq25FAv-QbvZ5zNk5SWxmXcR=w650-h596-iv1
               " width="500" height="400" alt="TKのアイコンです"> 
      </div>
      <div class="info">
        <h1>TKｊのBlogです</h1>
        <p>WEBエンジニアのもどきです。</p>
        <!-- <ul>
         <li>
           <a href="https://takeyoshiblog.hateblo.jp/" target="_blanck">
             <img src="
             https://lh3.google.com/u/0/d/1HqFjA2tV_cKy68909muNSC9QehUqhwEA=w681-h606-iv1" class="a-b-ta-Ua" " width="20 " height="20" alt="tork icon" 
           </a>
         </li>
         <li>
           <a href="mailto:tk-nomailaddress@gmail.com""tk-nomailaddress@gmail.com">
             <img src="https://lh3.google.com/u/0/d/1jIu88lxb4YEqZThhbFQuJq0Oq1grPdOU=w681-h606-iv1" width="20" height="20"  alt="photo.png を表示しています" aria-hidden="true">
           </a>
       -->
        <ul>
         <li>
           <a href="https://takeyoshiblog.hateblo.jp/" target="_blanck">
             <img src="
              https://lh3.google.com/u/0/d/1HqFjA2tV_cKy68909muNSC9QehUqhwEA=w681-h606-iv1" class="a-b-ta-Ua" " width="20 " height="20" alt="tork icon" >
            </a>
         </li>
     
         <li>
            <a href="https://dotinstall.com" target="_blank">
              <img src="img/photos.png" width="20" height="20" alt="写真サイトへのリンク画像です">
            </a>
         </li>
      </ul>
      </div>
    </div>
  </header>

  <section>
    <h1>WORKS</h1>
  
    <section>
      <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属性は「代替えテキストとして活用」)
      -->
      <h1>私の大好きな「ゲーム」につて紹介です</h1>
        <p>
          基本的には、コンシューマー向けのゲームになるのですが...
          複数のシリーズが展開されていて、作品によってはアプリ<br>
          またPSのポータブルも販売していますので、
          是非、ゲームをプレイしてください(´ω｀*)
        </p>
   </section>

   <section>

      <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>作品自体の魅力としては、【王道のようで、王道ではない】という点です。
          </P>
            <!--
            　VSコードにて、chordのコピー作業を行える。shift * alt * ctrl 上下で操作が行える。
            　ただ、Setingの問題なのか同乗の操作が行えないので既存のショートカットキーを活用して、ctrl * C or V　で、ひとつづつコピペｗ
          -->
      </section>
   <section>      
      <iframe src="https://docs.google.com/presentation/d/e/2PACX-1vR1cWD-3W1FKLuTEZ_WbROfFVkjuQcCxIor9-6klVH3RU5boC4BObwAc4dgG7-I88toKAmLQe5VD_ed/embed?start=false&amp;loop=false&amp;delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
   </section>  
<!-- 
   HtemnaBlogで公開したロードマップの掲載
   ここは、Imageではなくifeamを活用して文章作成
 -->

<footer>
  <p>
    (C)dotinstall.com
  </p>
</footer>
<!--
  　vs操作を行う際の、（alt+↕)について、タグの宣言に必要な→<><>は、並列ではなく　row(つまり行)で、切り分けられていないと、入れれれない
-->
</body>
</head>
</html>
~

~
/* body
 {
    color: #333; font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Verdana ,sans-serif; 
} 
 ↑disctipt用↑

 iconのカラーに関しては変更する際に、プレビューが判りやすいからです
*/


.body {
     color: #333; font-family: Verdana, sans-serif; margin: 0; 
    } 

header { background-color: #efefef; } 

.container 
{
background-color: pink;
width: 400px; 
margin-left: auto;
margin-right: auto; 
display: flex; 
} 

.icon { background-color: skyblue; } 

.icon img { 
/* border-radius: 20px; */ 
border-radius: 50%; 
border-width: 4px;
 border-style: solid; 
 border-color: white; 
  } 
 
 .info
  {
    background-color: tomato;
     margin-left: 35px; 
  } 
  
  .info h1 
  {
    font-weight: normal; 
    font-size: 30px;
    margin: 0;
  }

~