森のプログラミング練習ブログ

htmlやcssの練習したコードを投稿するブログです。

動画で練習2

YouTube内の無料動画で練習してみました。

初心者でもわかるHTML&CSS講座 第2回基本的なHTMLタグを理解しよう - YouTube

ブログ

初心者でもわかるHTML&CSS講座 第2回基本的なHTMLタグを理解しよう | Inoma Create

自分なりにまとめてみました。

--------------------------------------

※ダウンロードファイルはブログ内にあります。

リスト項目リストの種類=2種 

  • 点が付いたもの
  1. 番号が付いたもの

コード(番号無し)

<ul>

     <li>リスト項目1</li>

     <li>リスト項目2</li>

     <li>リスト項目3</li>

</ul>

コード(番号あり)

<ol>

     <li>リスト項目1</li>

     <li>リスト項目2</li>

     <li>リスト項目3</li>

</ol>

 

f:id:morijuntan:20201129001149p:plain

黄色いカッコ内は自分で入力

f:id:morijuntan:20201129001442p:plain

↑反映、成功しました

 --------------------------------------

リンクの設定

使用タグ=<a>タグ コード=<a href"http://○○○○">文字</a>

 

ブログでダウンロードした「02」の「index」ファイルを開きます。

f:id:morijuntan:20201129160731p:plain

↑黄色い枠が自分で入力したコードです。

  • 「hana.html」は「02」ファイルの中にあります。
  • 「hana_btn.jpg」は画像フォルダにあります。

f:id:morijuntan:20201129162303p:plain

↑グーグルチャームで読み込み、成功 

  • 実際にYAHOOリンクに接続が可能になります。

f:id:morijuntan:20201129163634p:plain

↑「02」ファイルの中にある「hana.html」で「<a href="index.html">トップへ戻る</a>」と記入


※黄色の枠は自分で入力した分です。

f:id:morijuntan:20201129164108p:plain

 

成功、ページが繋がりました。

--------------------------------------

strongタグ

html=<p>文字を<strong>強調</strong>したい</p>

意味;強調したい文字<strong>囲む太字になる

f:id:morijuntan:20201129165256p:plain

※黄色い枠が自分で入力した部分

f:id:morijuntan:20201129165508p:plain

↑確認、成功しました。

 

 

 

動画で学習

YouTube上で視聴可能な動画で学習したいと思います。

初心者でもできるHTML&CSS講座 第1回HTML,CSSの概要 - YouTube

自分なりにまとめてみました。

---------------------------------------

html&css概要

ホームページの仕組み=ブラウザから「サーバー(html.css.画像ファイル)が入っている倉庫にアクセスすると倉庫からデータを渡してくれる。

ブラウザでHPを解読して表示(高速で表示させている

--------------------------------------

HTML=ホームページ作成の為のマークアップ言語

開始タグ=<h1> 終了タグ=</h1>  <h1>サンプル</h1>=囲んで使用します。

--------------------------------------

CSS=HTMLをデザインする仕組み

  • HTMLだけでも最低限のデザインが適用されます。

--------------------------------------

作製に必要な物

--------------------------------------

HTMLの基本構造

↓動画製作者の方のブログで練習用のデータをDLできます。

初心者でもわかるHTML&CSS講座 第1回HTML,CSSの概要 | Inoma Create

  1. ブログでZIPデータをダウンロード
  2. フォルダ内の「00」内の「index 」ファイルを使用(ファイル内に「CSS」ファイルや「imags」ファイルがあります。)

 

f:id:morijuntan:20201127174332p:plain

↑「ATOM」で00ファイルの「index」ファイルを開きます。

  • <DOCTYPE ht,ml>=htmlで作成されている宣言
  • <html>=htmlの文章と示すタグ
  • ling=言語
  • <head>=HPに必要な情報を書く
  • <title>ブラウザに表示させる文字を表示させる
  • <link>=cssを表示させるコード
  • <body>=実際に表示される情報を書く

--------------------------------------

ファイルの「01 簡単なページ」で編集

 

f:id:morijuntan:20201127180501p:plain

  • <h1>=見出し

f:id:morijuntan:20201127180835p:plain

  • <p>=段落

f:id:morijuntan:20201127183359p:plain

Googleチャームで読み込み、成功

--------------------------------------

<h1>~<h6>=文字の大きさを変えれる(htmlで編集が可能)

f:id:morijuntan:20201127202849p:plain

html

f:id:morijuntan:20201127203020p:plain

↑無事反映されました。

--------------------------------------

画像の挿入

コード:<img src="○○○.jpg" alt="画像"> 

総数属性: src="○○○.jpg"=配置したい画像を指定する

alt属性: alt="画像"=代替文字を指定する

 

配布された03の画像ファイルを使用↓

f:id:morijuntan:20201127205434p:plain

画像は「03」の「images」に入っています。

 

f:id:morijuntan:20201127212804p:plain


 <img src="○○○.jpg" alt="画像">=〇の中に「"images/sample.jpg"」と記入

f:id:morijuntan:20201127213129p:plain

↑成功、画像と文字が適用できました。

--------------------------------------

ブログのページだと何処にどの様にコードを入力するか分からず混乱していたので今後「YouTube」の動画でコードの練習をしていきたいと思います。

CSSの一括指定「flex」

参考サイト

CSSのプロパティのショートハンド11個まとめ!イラストを使ったチートシートで解説 | webliker

 

flex

f:id:morijuntan:20201126103606p:plain

1.flex-grow:子要素事の大きさ比例

2.flex-shrink:親要素が縮んだ時の子要素事の縮む比率

3.flex-basis:子要素事の要素のサイズ指定

 

ショートハンド

flex:

例:.el{flex:1 2 30%

 

 

 

 

 

 

自分なりにまとめてみました。

 

 

CSSの一括指定「flex-flow」

参考サイト

CSSのプロパティのショートハンド11個まとめ!イラストを使ったチートシートで解説 | webliker

自分なりにまとめてみました。

 

flex-flow

f:id:morijuntan:20201126100713p:plain

1.flex-diection:要素を縦と横に並べる方向

2.flex-warp:要素の折り返しの許可をするか

・direction=ディレクション(方向)

 

ショートハンド

flex-flow:

例:.el{flex-flow: row-reverse no-warp}

CSSの一括指定「transition」

参考サイト

CSSのプロパティのショートハンド11個まとめ!イラストを使ったチートシートで解説 | webliker

自分なりにまとめてみました。

 ---------------------------------------

transition

f:id:morijuntan:20201125151525p:plain

1.transition-property:アニメーションしたいプロパティ

2.transition-duration:開始から終わりまでの時間

3.transition-timing-function:動きの速度の指定

4.trandtion-delay:アニメーションの回石を遅らせる

 

読み:duration=デュレーション(持続、存続)

  :function=ファンクション(機能、動き、作用)

  :delay=ディレイ(遅らせる、延ばす)

  :transition=トランセッション(移行、変化)

ショートハンド

transition:

例:.el{transition:all 1s ease-in 3s;}

 

 

 

CSSの一括指定「animation」

参考サイト

CSSのプロパティのショートハンド11個まとめ!イラストを使ったチートシートで解説 | webliker

自分なりにまとめてみました。

---------------------------------------

animation

f:id:morijuntan:20201124113452p:plain

1.animation-name:アニメーション名

2.animation-duration:開始~終わりの時間

3.animation-timing-function:動きの速度の指定

4.animation-delay:開始を遅らせる

5.animation-iteration-count:繰り返しの指定

6.animation-direction:アニメ再生方向の指定

7.animation-fill-mode:アニメ終了後のcss

 

ショートハンド

animation:

例:.el{animation:slidein 0.3s liner 1s 0 alternate forwards;}

  • 1~7を全て書く必要はない
  • 各順番に決まりはないが、期待通りの動きにならない可能性もある

CSSの一括指定「list-style」

参考サイト

CSSのプロパティのショートハンド11個まとめ!イラストを使ったチートシートで解説 | webliker

自分なりにまとめてみました。

 

f:id:morijuntan:20201124101934p:plain

1.list-style-type:箇条書きのマークの種類

2.list-style-position:マークの表示位置

3.list-style-image:マークを画像に変える 

 

ショートハンド

list-style :

例:.el{list-style: square outside url('mark.png')}

  • list-style-type」と「ist-style-image」を両方指定した時は「ist-style-image」が指定される