ゼロから始めるエンジニアへの道 #16 ~html or css - 初心者がエンジニアに転職するための、壁打ちブログ('ω')

学習範囲

・div使ってのレイアウト
・StyleBoxを見て、作成予定のページアイコン(icn）のmargin調整
・表示しているicnファイルを横並びにするために、display要素に、frexboxを追加
↳前回の

で識別子に指定したを指定する。
⇢frexboxはその名称の通り、フレームを色々いじれるよう

フレックスボックス入れる前のcss↓

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

.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;
  }
~

・divでconteinerの指定とfrexboxを活用

htmlの方を自由に記入したり、src属性をGドライブ上にやっていたり、コメントtagをたくさん使ったりと、非常に間違いに気づきづらい状態になったので、後でドットのソースを見て修正予定

まだ、ローカルの開発環境が揃っていないので、揃えつつ修正をする。

~
<!DOCTYPE html>
  <html lang="ja">
    <head>
      <meta charset="utf-8">
        <!--
           meta文字コードの設定は、最近はutf-8に統一されているケースが多いので、utf-8を指定すする
         -->
        <title>TKのportfolioサイト</title>
        <!--  
          タイトルtag（<tile>）の中身は、ブラウザタブに表記される
        -->
        <link src="<https://lh3.google.com/u/0/d/1yumUn_EzQtM_Wv0bCh5ytEYHdG4Bwiff=w425-h598-iv1" rel="icon" href="favicon.ico" width="30" height="20" >
        <!--
          本来は,src属性は使わずローカルデイレクトリの、同階層上に存在する[favicon.icon]を指定するだけ。a
          「favicon」とは、タブの小さなicon画像の事を指している。
          　同じ階層に存在するので、データファイル名の指定だけしています　階層が変わった場合の指方法がわからない:(サジェストする)
          　.ico(アイコン)の作り方は少々特殊らしいので別口でサジェスト
        -->
        <meta name="discription" content="TKのportfolioサイトです">
        <!--
          これはContent属性と言って、WEBに公開した時にSEO検索の説明文なに記載　されるようです。
          恐らくdedcriptファイルを作成して、指定する作業が必要なんだと思います。
        -->
        <link rel="stylesheet" href="BlogHederStyle.css">
        <body>
          
     <header>
      <div class="conteiner" >
         
              <img src="https://lh3.google.com/u/0/d/1bu81-XBeuq25FAv-QbvZ5zNk5SWxmXcR=w650-h596-iv1
              " width="500" height="400" alt="TKのアイコンです">
              <h1>TK</h1>
              <p>システムエンジニアを目指しています</p> 
        
              <!--
                head と、hederの違いについて
                　　headタグは、この文書全体に対して情報を入れるもの
                　　 headerタグは、bodyの中に使うヘッダー要素を入れるためのタグ
                　　　では、(h)のtagは？　hedingtag(ヘディングタグ）と読み、見出しをるける際に使うタグ
              -->
                  <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>
                      <!--
                      ・アンカータグの中に存在しないメールを<mailto:>で挿入
                      -->
                    </li>
                  </ul>
             </div>
     </header>         
    
      
      <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属性は「代替えテキストとして活用」)
                -->
                <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>作品自体の魅力としては、【王道のようで、王道ではない】という点です。
                  </P>
                    <!--
                    　VSコードにて、chordのコピー作業を行える。shift * alt * ctrl 上下で操作が行える。
                    　ただ、Setingの問題なのか同乗の操作が行えないので既存のショートカットキーを活用して、ctrl * C or V　で、ひとつづつコピペｗ
                  -->
              </section>
            <footer>
            <p>
              (C)dotinstall.com
            </p>
          </footer>
          <!--
            　vs操作を行う際の、（alt+↕)について、タグの宣言に必要な→<><>は、並列ではなく　row(つまり行)で、切り分けられていないと、入れれれない
          -->
        </body>
    </head>
   </html>
     
~