プログラミング

【プログラミングをイチから学ぶ】“画像の添付” と “リスト作成”

 

はじめに…

 

このブログは、プログラミング初心者(筆者)が “ある目標”  に向けて

 

未知の領域であるプログラミングを、まっさらな状態から一歩ずつ登っていく(学んでいく)、雑記を含んだ内容になっております。

 

なので、、

プログラミングをこれから学んでみたいなって人の背中を少しは押すことができるかもしれませんが

すでにある程度の内容を理解している方に対しては読んでても面白くはないかもしれないことだけは お伝えしておきますm(._.)m

 

 

たか
たか
こんにちは、たかです! 

 

今日はこのテーマでブログを書いて復習をしていきます!

 

テーマは こちら↓

  • 画像の添付方法
  • リスト(箇条書き)の作り方

です!

 

※前回は 『リンクの作り方』を勉強しました ↓

【プログラミングをイチから学ぶ】リンクの作りかた はじめに… このブログは、プログラミング初心者(筆者)が “ある目標”  に向けて 未知の領域で...

 

※ “ある目標” については こちらへ ↓

 

 内容については 《Progate》の初級編を参考に

学習させていただいています。

 

画像の貼り付け

 

ホームページにリンクは必要(←前回勉強したよ)

そして画像も必須!

 

画像がなく文字だけだったら、、

 

パスタを茹でるときに お湯に塩を入れないくらい味気ないものとなってしまうでしょうww

たか
たか
あれって、塩の分量、いつも適当なんだよねぇ(汗) 

 

画像を挿入するための要素(コード)

 

画像を貼り付ける際のコードには 《img》というタグを使っていくようです。

img?? …“イメージ” ってことかな??

こんな感じです!

<img  src= “https://jibeergaumasudayo” > ←URLはテキトーですからねw

このようにテキストエディタにコードを入力すれば

こんな感じに画像が貼られます^ ^

 

srcの呼び名は『ソース(source)』といい、ここでは “画像のあるURLを指定する属性” ということのようです。

まろ
まろ
imgとセットで考えればいいかもだね〜

 

<img>要素の注意するポイント

<img>要素にはテキストを囲まないので、終了タグ(</img>)は必要ないので注意。

 

 

リスト(箇条書き)の作り方

 

リストとは、以下のような感じのことです↓

レッスン1

レッスン2

レッスン3

 

まろ
まろ
これをコードで書いていく場合は こうなります 

 

 

<ul>

 <li>レッスン1</li>

 <li>レッスン2</li>

 <li>レッスン3</li>

</ul>

<ul>タグと<li>というタグを使うことでリスト(箇条書き)ができるんですね

 

<li>タグは “箇条書きの中身” を意味しているので、これ単体では機能しないようです。

そこで <ul>タグを用いることで、<li>で書かれた文章を箇条書きとして表すことができるんです

※ちなみに、<li> は、“List Item” の略で、<ul>は “Unordered  List” の略だそうです。

 

番号順にリストを作る

<ul>タグの場合は黒点(・ ←これ)が先頭に付きますが、

 

これを数字に変えることができます。

<ol>を使うことで それが可能になります

 

<ol>

  <li>レッスン1</li>

  <li>レッスン2</li>

  <li>レッスン3</li>

</ol>

 レッスン1

 レッスン2

 レッスン3

 

用途に合わせてリストを変えていくのもいいですね^ ^

 

 

リスト作成の注意ポイント【インデントに気を付ける】

インデントとは『字下げ』のことで

各コードどうしの親子関係を明確に、わかりやすくするために使います。

そして、この親子関係がはっきりしていないと、書かれたコードの内容が反映されないのです!

 

上の例文を見てみると・・・

<ol>          ←親 

<li>レッスン1</li>   ←子

<li>レッスン2</li>   ←子

<li>レッスン3</li>   ←子

</ol>

こんな感じで

のスペースを空けるようにすることで、親<ol>子<li>の関係を はっきり示すように書くことがプログラミングには大事なことになってきます。

まろ
まろ
これは、リスト作成に限らず 全ての親子関係には必要になってくるので覚えましょう! 

 

今日の学び

 

  • 画像を貼るなら<img>を使おう
  • リスト作成(黒点と番号では要素が違う)
  • 親子関係を忘れずに!

を勉強しました!

 

 

これらを学ぶことができ、

たか は、経験値4を手に入れた

 

LEVELが2にアップした!(ほら、あのBGMが聞こえるよw)

 

  • HPが6あがった
  • 攻撃力が3あがった
  • 守備力が1あがった
  • すばやさが2あがった
  • ライティングが3あがった
まろ
まろ
なんか、ド○クエのような・・・

↑それ以上はスポンサー的にNGですよ、まろさんww

 

 

《たか のステータス》

LEVEL     2 HP    16 攻撃力     8
職業    旅人 MP     2 守備力       4
経験値    11 すばやさ    7
ライティング  5

 

 

さーて、、

“次回のプログラミング講座は?”

・CSSの基礎を学ぶ

 

です^ ^

 

おわり

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA