双極くんの学び

双極くんが学んだことをご紹介します。

コツコツゆっくりプログラミング学習part８【HTML】abbr・title属性・cite・address

プログラミング学習

はいどうもこんにちは、双極くんです。

今回は、略語・名前の特記・住所の表現について学んで行きましょう！

f:id:kazufumitan:20220403232922j:plain

こちらの「コツコツゆっくりプログラミング学習part8」は次の動画を参考にさせて頂いております。こちらも合わせてご覧ください。

youtu.be

 

略語・名前の特記・住所の表現

略語－abbr

まずは略語についてです。

ココの部分は、こういう言葉の略ですよ。というタグが…。

  • abbr

というタグです。

このabbrというタグを使ってこの部分は略語である、例えばHTMLという言葉は略語であるという事を示すことが出来ます。

略語の元の言葉を伝える－title属性

abbrタグに対して…。

  • title属性

これを追加することによって何の言葉の略なのかという事を伝える事が出来るようになります。

名前を特記する－cite

何か引用して来た際に、その出どころの名前を特記することがあるかも知れません。

例えば、映画のタイトル、本のタイトル、新聞のタイトル、あるいは何か特別なサイトのタイトルなどがあるかも知れません。

その際には

  • cite

というタグを利用することでこれは何かの名前であるという事を特記する事が出来ます。

住所などの表現－address

最後に住所の表現ですがココからココまでが住所ですよという事を示したいのであれば…。

  • address

というタグを使ってあげましょう。

 

これらを使うことによって、これまで紹介した表現をすることが出来ます。

実際にやってみましょう

実際にHTMLで見てみましょう。

 

今回はこのようなファイルを用意してみました。

<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta charset="UTF-8">
      <title>HTMLの練習</title>
   </head>
   <body>
      <p>
       HTMLは勉強し続けるとわかるし、便利なものだ。    
      </p>
      <p>
        私の好きな映画はターミネーターです。
      </p>
      <p>
         何かあればこちらまで。<br>
         東京都渋谷区○○１丁目２番３号
         □□ビル 5階
      </p>
   </body>
</html>
 
 

略語abbrを表現します

まず略語についてです。

HTMLという単語はHyper Text Markup Languageの略語ですので、これが略であることを示すために、HTMLをabbrで囲んでみます。（ファイルの一部の切り抜きました）

 

<body>
      <p>
         <abbr>HTML</abbr>は勉強し続けるとわかるし、便利なものだ。    
      </p>

 

このようにしたら保存して、ファイルを開いてみましょう。

f:id:kazufumitan:20220404213617p:plain

特にHTMLの部分に変化はありません。

title属性の追加

では、これに対してtitle属性を追加して、そこに元の単語Hyper Text Markup Languageと入力してみます。

<abbr title="Hyper Text Markup Language">HTML</abbr>は勉強し続けるとわかるし、
便利なものだ。
 

これを保存して、更新してみます。

 

見た目何も変化の無いように見えますが、カーソルをHTMLの上に持ってきて、しばらく待つと…

f:id:kazufumitan:20220404220214p:plain

（私のブラウザのスクショが上手く撮れなかったので動画スクショを貼り付けました）

Hyper Text Markup Languageと表示されました。

これによって、この単語が元々何なのか？ということが分かりやすくなりました。

 

名前をciteで特記する

そして名前の時ですが、自分の好きな映画を紹介したりする場合、今回の例で言えばターミネーターというのはタイトルです。

これが名前であることを伝えるためにciteのタグを使って囲んであげます。

 

 私の好きな映画は<cite>ターミネーター</cite>です。

これを保存して更新しましょう。

f:id:kazufumitan:20220404222712p:plain

斜体になることで他の文章の一部とは少し違う意味合いがある、というのが伝わります。（残念ながら、私のブラウザでは何故か斜体になりませんでした😓）

もちろん、斜体になったのはブラウザの解釈のおかげです。（そういうことなのね…）

 

これをcss（スタイルシート）を使って別の表現をさせることも出来ます。

住所をaddressで囲う

今回住所のことについても学びました。

今回のファイルの例であれば、東京都～で始まっている部分が住所であることを示すために…

adressタグで囲ってあげましょう。

 <p>
         何かあればこちらまで。<br>
         <address>
            東京都渋谷区○○１丁目２番３号
            □□ビル 5階
         </address>
      </p>

 

 

保存して更新します。

f:id:kazufumitan:20220404225912p:plain

すると住所の部分も斜体で表現されて、他の部分とはちょっと違うことが分かりました。（これも私のブラウザの場合は斜体で表現されず、改行のみされました。）

意図した所で改行がされていませんので、ここにもbrタグを追加してあげましょう。

 
<address>
東京都渋谷区○○１丁目２番３号<br>
□□ビル 5階
</assress>

そして更新します。

f:id:kazufumitan:20220404231442p:plain

すると住所の部分が、意図どうりに正しく表示されました。

まとめ

今回は略語の表現の仕方、名前の特記する時の書き方、住所を表現する時の書き方について学ぶことが出来ました。

 

私個人の今回の感想は

  • 略語についてはabbrタグとtitleタグとセットで用いる必要性があるのではないか
  • 名前と住所が私のブラウザでは斜体では表現されなかったため、ブラウザによってはciteタグとaddressタグの使い方に注意が必要がある
  • ブラウザによって表現の違いが生じるのでcssで表現を追加する必要性を感じる

という事です。

cssについてはのちに学ぶことになると思うので、あまり心配はいらないと思っています。

 

これまでの学習で本当にゆっくりコツコツとHTMLについて学んで来ていますが、こうして確実に自分のものになっていると思いますし、後で振り返って見直す事の出来る参考書になると思えば、この苦労も無駄にならないと思います。

 

これからもコツコツ頑張って行きたいと思います！

学び

千里の道も一歩から

老子

 

コツコツゆっくりプログラミング学習part７【HTML】引用blockquote・q・cite属性

プログラミング学習

はい、どうもこんにちは。双極くんです。

今回ですけども…。

HTMLの引用について学んで行きたいと思います。

 

引用には大きく２種類あります。まとめてブロック全体（文章の長いもの）を引用するパターンと、一部（一言）を引用するパターンです。

それによって書き方も異なって来ますので順番に整理していきたいと思います。

そして、最後にその引用元はどのように書けばいいのか、ということも確認していきましょう。

f:id:kazufumitan:20220402171607j:plain

 

HTMLの引用について

まとめて引用するとき

まず最初にブロック全体をまとめて引用するという場合には

  • blockquote

ブロッククォートというタグを使用します。（quoteには引用という意味があります）

 

このタグによってブロックごと引用していますよと示す事が出来ます。

一部を引用するとき

blockquoteに対し、一部を引用している事を示すためにはquoteを省略した

  • q

というタグを使用します。

これを使用して一部を引用していますよという事を示す事が出来ます。

 

引用元を表記する

blockquoteやqの引用元を表記する時には、それぞれのタグに

  • cite属性

を追加する事になります。

書き方はcite="URL"と書くことが出来ます。

実際にやってみましょう

今回はこのようなファイルを用意しておきました。

 

f:id:kazufumitan:20220402182207p:plain

このファイルを開くと、このようになっています。

f:id:kazufumitan:20220402185804p:plain

 

ファイルの１つ目にはa～zまでの文字と、.(ドット）と,（カンマ）の２つが出て来るという、よくフォントの表示のチェックに使われる文章を用意してみました。

 

そして２つ目には「ある人は言った　我思う故に我あり」という名言を引用した文章があります。

文章全体がまとめて引用であることを示す

まず、最初のThe quick brown …という文章全体が引用である事を示してみたいと思います。

このpタグの外側に<blockqoute>と書いて

pタグのインデントを１つ字下げて、</blockqoute>と閉じてあげます。

f:id:kazufumitan:20220402184545p:plain

 

これによってこの<p>～</p>の中身全部がblockqoute（文章全体をまとめて引用）であることを示す事が出来ました。

 

では、これを保存して更新します。

するとこのようになりました。

f:id:kazufumitan:20220402222658p:plain

このようにインデントされました。

これによって他の文章とスタートの位置が変わりこの部分が何か違うものである、今回の場合はこの文章全体が引用であるということを伝えることが出来るようになりました。

文章の一部が引用である事を示す

では、一部の引用を示してみましょう。

今回は、我思う故に我ありと言う言葉が引用です。

という訳で、これをqタグで囲むように表記してみます。

f:id:kazufumitan:20220402230204p:plain

保存して更新します。

　

するとこのようになりました。

f:id:kazufumitan:20220402230227p:plain

qタグによって「　」（鍵括弧）が追加されました。【テックアカデミーの動画では”　”（ダブルクォーテーション）となっています】

この鍵括弧によって、これは引用されたものであるいう事を表示してくれています。

 

引用元を表記する

では、引用元を表現してみましょう。

blockquoteのタグのなかにcite属性を追加します。

今回は<blockquote cite="http://www.example.com/story.html">と書きます。

（この" "ダブルクォーテーションの中は必ずURLでなければなりません）

 

同様にしてqタグにもcite属性を追加することが出来ます。

今回は<q cite="http://www.example.com/philosophy.html">と書きます。

 

実際のファイルは次のようになります。

f:id:kazufumitan:20220402234235p:plain

 

このファイルを保存して更新しても、URLが実在するものでは無いので、見た目は何も変わりませんでした。

 

ただ、必要であればこれを見ている人はこの情報をたどることが出来る、そして文書の構造として、これはどこから引用されたのかを示す事が出来るようになっています。

 

まとめ

今回の学習では

  • brockquote（文章をまとめて引用するタグ）
  • q（文章の一部を引用するタグ）
  • cite属性（brockquoteタグにもqタグにも追加出来ます。どちらもURLを書かなければなりません）

について学ぶことが出来ました。

今回citeの記述が実際には表示されなかったので、のちほどの学習で実際に存在するURLで記述した場合にどうなるか確認したいな、と思いました。

学び

耳を傾けて賢い人たちの言葉を聞け。

格言22:17

コツコツゆっくりプログラミング学習part６【HTML】強調emと重要性の表現strong・区切りhr

プログラミング学習

はい、どうもこんばんは、双極くんです。

今回は、HTMLの

  • 強調の表現
  • 重要性の表現
  • 区切り

について学んで行きましょう！

f:id:kazufumitan:20220401210245j:plain

【HTML】強調と重要性の表現・区切り

 

強調を表現

文章によっては「どの単語が強調されているのか」によって意味が変わる文章があります。

その強調したい部分をタグで囲んであげることによって、そのような強調を表現することが出来ます。

 

そのような時に実際に使われるタグは

  • em

です。

これは強調を意味するemphasis（エンファフィス）またはemphasize（エンファサイズ）という言葉の略になります。

このemを使うと斜体で表示されるという事が多いのですが、斜体で表示させたいから…という考えで使ってはいけません。

あくまでもemタグで強調された結果、斜体で表示されるという現象が起こっているだけだという認識を忘れないようにしましょう。

 

 

重要性を表現

emタグと違って、「この文章の中でこの部分が重要である」という事を伝えたい場合には

  • strong

というタグを使います。

このタグを使うと太字で表示されます。

こうして太字で表示されたのは、重要であることを示した結果であり、太字を使いたい場合にstrongというタグを使うという考え方をしてはなりません。

これもemタグと同じ考え方をします。

 

では、次に区切りについて考えましょう。

区切り

区切りについては

  • hr

というタグを使います。

horizontal rule(ホリゾンタルルール)【意味：水平線を引いてコンテンツやテーマを区切る】

いう言葉の略になっていて、これで区切りを示すことが出来ます。

文書のセクションを示してあげることが出来ます。

このタグは単独で使うことが出来ます。

実際にやってみましょう

では、実際にやってみましょう！

emでの強調の表現

 

それでは前回の学習で使ったこのファイルを使ってemでの強調の表現をやっていきましょう。

拡大してご覧ください。

f:id:kazufumitan:20220401162404p:plain

このファイルの最初のダミー文章（ローレンイプサム）の一段落目の始めの単語

Lorem Ipsumという部分を強調してみたいと思います。

そのためにこの単語Lorem Ipsumをemタグで囲みましょう。

拡大してご覧ください。

f:id:kazufumitan:20220401200108p:plain

上の写真のようにファイルの水色の部分のように<em>Lorem ipsum</em>と直します。

それから

保存してブラウザ（私はGooglechrome）で開きます。

 

すると

f:id:kazufumitan:20220401201342p:plain

この写真のように、ファイルの中でemタグで囲んだLorem ipsumという単語が

Lorem ipsumというように斜体で表示されました。

 

strongで重要性の表現

それでは次にstrongで重要性の表現を実際にやっていきましょう。

二つ目の段落で、その表現をやってみます。

二つ目の段落の最初のLorem Ipsumという単語をstrongで囲みます。

f:id:kazufumitan:20220401213523p:plain

上の写真のように

<strong>Lorem ipsum</strong>とします。それから保存して更新します。

すると

f:id:kazufumitan:20220401214038p:plain

この写真のように２段落目の始めの単語Lorem Ipsumが太字で表示されました。

 

これによって、この部分が重要なのであると表現されました。

 

それでは最後に、この２つのセクションがそれぞれ区切られていることをブラウザに伝えてみましょう。

hrで区切りをつける

今回のファイルのローレンイプサムの文章の１つ目の段落と２つ目の段落が区切られているという表現をしてみましょう。

そのためには、このファイルの２つの段落の間に<hr>を追加することで区切りをつけることが出来ます。

次のように追加してみます。

f:id:kazufumitan:20220401221323p:plain

このファイルを保存して更新します。

そうすると次のようになります。

f:id:kazufumitan:20220401221502p:plain

このようにセクション区切りの線が引かれました。

これにhrタグによってこの２つの段落が区切られていることを表現することが出来ました。

まとめ

今回は

  • emタグで強調を表現することが出来ること(ブラウザによって斜体で表示されることが多い）
  • strongタグで重要性が表現出来ること（ブラウザによって太字で表示されることが多い）
  • hrタグでセクション（段落）とセクション（段落）の間が区切られているという表現が出来ること（区切りの水平線が引かれる）

というこの３つのタグを学習しました。

 

実際にタグを使用すると、斜体になったり、太字で表示されたり、サイズが変わったりといろいろと見え方が違ってくる部分がありますが、それはあくまでもブラウザが解釈をして勝手に表示させているだけです。

もし、そのようないろいろな表示をデザインとしてやりたいのであれば、後ほど学ぶことになるCSSを利用してやるようにしましょう。

学び

忍耐するのをやめないでください。忍耐がその役割を果たす時……欠けたところがない人になります。

ヤコブ1:4

 

コツコツゆっくりプログラミング学習part５（HTML段落pと見出しh1～h6）

プログラミング学習

はいどうもこんにちは、双極くんです。

今回なんですけども、HTMLの段落と見出しの書き方を学んで行きたいと思います。



 

 

段落

まずは段落です。これに使われるタグは

  • p→パラグラフ(段落)の頭文字

です。

見出し

次に、見出しです。これに使われるタグは6段階用意されています。

本や文章で言えば、章や節といった意味合いで使われると思っていただければ良いと思います。

このタグは、大きい方から

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6

と6段階あります。

このhとは、ヘッドライン(最も目立つように書かれた文字)という言葉のの頭文字をとったものです。

 

下記に参考としてLorem Ipsumについてご紹介します。

Lorem Ipsum

具体的にはこのような文章のことです。

  1. Lorem ipsum.
  2. Lorem ipusum dolor sit amet. consectetur adipiscling elit. Pellentesqre id ultrices massa. Proin dignissim augue tempor, pretium doler vitae, pulvinar tellus. Nullam scelerisque leo ac pellentesque porttitor. Praesent lacus nunc, consequat et vehicula in, eleifend eget velit. Maecenas ornare odio et odio porttitor pulvinar. Ut non uruna odio. Praesent adipiscing mollis mauris, a tincidunt felis feugiat id. Mauris vitae auque ante. Vestibulumante ipsum primis in faucibus orci luctus posuere cubilia Curae; Morbri tempor, nistl et fringilla auctor,ante tortor ornare leo, sit amet aliquet nunc nulla id mi.Maecenas mollis,odio eget fermentum porta, nisl sem congue nisi, nec tincidunt lorem justo in purus.

 

これはダミーとして使うために用意されたものです。この文章のことをローレンイプサムと言います。略してリプサムと言う事もあるようです。

この文章は単語自体が、どの言語でも意味を持たないという事をメリットとして、意味を考えてしまわずに、デザインだけをチェックすることが出来る文章として、良く使われます。

 

では、実際にこの文章を使って書いて行きましょう。

実践

段落について確認をしていく

今回はこのようなファイルをすでに用意しておきました。

<!DOCTYPE html>

<html lang="ja">
   <head>
      <meta charset="UTF-8">
      <title>HTMLの練習</title>
   </head>
   <body>
   </body>
</html>

 

前回の学習でも触れましたが、インデントをすることで、どこからどこまでがタグの内側なのか、分かるようにしています。

これは、後からの修正やメンテナンスを楽にしますので、この癖をつけるようにしてください！

 

では、pタグでパラグラフのブロックを用意しましょう。その内側に先ほど紹介したLorem Ipsum(ローレンイプサム)の文章を貼り付けてみます。

これを保存して、ブラウザで開いてみましょう。

このように表示されました。1つの段落として表示されている状態です。

 

ただ、これだけでは良く分かりません。実際に段落がいくつかあったらどう表示されるのか、上記ファイルのLorem Ipsum(ローレンイプサム)の文章をコピーして、あと２回ほど繰り返して書いてみましょう。

合計で３つの同じ文章の段落を記入しました。

 

これを保存して、ブラウザを更新してみましょう。

このように同じ文章が３回繰り返され、段落と段落に間が少し広く空いています。

 

これによって段落が切れていることが良く分かります。

この段落と段落に間が少し広く空いているのは、ブラウザの初期の設定に基づいているものです。私たちが何か書いたから段落と段落が少し空いたスタイルになったという訳ではありません。

 

では、再度HTMLファイルに戻って、今度は見出しについて確認をしていきましょう！

見出しについて確認をしていく

まず、見出しの一番大きなものを用意して行きましょう。

h1です。

そして、その中に、”これはh1です”と入力してみます。

 

これを保存して、ブラウザを更新してみましょう。

このように、一番上に”これはh1です”と表示されました。

 

同じように、h2、h3なども確認して行きましょう。

では、<h1>これはh1です</h1>の行をコピーして、あと５つ増やしてみます。

<h1>これはh1です</h1>

<h1>これはh1です</h1>

<h1>これはh1です</h1>

<h1>これはh1です</h1>

<h1>これはh1です</h1>

<h1>これはh1です</h1>

この様にします。

そして、次のように直して、閉じます。内容もタグに合わせて直します。

<h1>これはh1です</h1>

<h2>これはh2です</h2>

<h3>これはh3です</h3>

<h4>これはh4です</h4>

<h5>これはh5です</h5>

<h6>これはh6です</h6>

実際のファイルでは次のようになります。

これを保存して、ブラウザを更新してみましょう。

このようにしてサイズが少しずつ小さくなるような形で表示されました。これが見出しの大きさを表しています。

 

このhのタグですが、h1の次は必ずh2であるべきです。

そして、h2の次に来るものがh3であるべき…というのは、文書の構造のルールとして決まっています。

例えば、本の中に章が無いのに、いきなり節が登場する、というようなことがあれば、非常に違和感を感じるかも知れませんよね。

 

ですから、一番大きいブロックがあって、その中に小さいブロックが存在するという考え方のもとにh1の次はh2が来るというように表記して行きましょう！

まとめ

今回は、見出しと段落について学ぶことが出来ました。

ちなみに、VScodeでファイルをそのままコピーすると、Lorem Ipsumの文章が上手く記事の中に納まらなかったので、残念ながらスクショを載せることになってしまったので分かりにくかったかも知れませんね(^^;

このブログ自体も、基本的に見出しと段落で構成されている事が私でも分かります。

この見出しに使うｈタグと段落に使うpタグもHTMLに欠かせないものとして覚えておきましょう！

学び

準備をしておこう。チャンスはいつか訪れる。

エイブラハム・リンカーン

 

　

 

 

 

 

コツコツゆっくりプログラミング学習part４（HTMLでよく使われるタグmeta・title・div・span・）

プログラミング学習

はい、どうもこんにちは。双極くんです。今回ですけども…。

前回に引き続きHTMLの基礎を学んで行きましょう！

 

前回紹介したのは、HTMLに必ず必要なタグでした。

HTMLに必ず必要なタグ

それに対して今回は、よく使われるタグを紹介していきます。

 

 

 

HTMLでよく使われるタグ

meta(メタ）

このタグは文書の情報を伝えるためのものです。

title(タイトル）

このタグは「この文書」のタイトルを伝えるために使われます。

div(ディブ）

このタグは一つの塊を示すものです。

span(スパン）

このタグは文章の一部を示すものです。

実際にどのように使われるのか確認して行きましょう

前回作ったファイルはこのようなものでしたね。

  1. <!doctype html>
  2.  
  3. <html lang="ja">
  4. 　<head>
  5. 　</head>
  6. 　<body>
  7. 　</body>
  8. </html>

このなかに、今回紹介いていくタグを書きながら学んで行きましょう。

まずはmetaタグです。

metaタグの書き方

（以降、VScodeを使って書いて行きます。）

<!DOCTYPE html>

<html lang="ja">
   <head>
      <meta charset="UTF-8">
   </head>
   <body>
   </body>
</html>

このようにheadタグの内側にmetaタグを書いてみます。

metaと書いたあとcharset(キャラセット）と書いてUTF-8を" "(ダブルクォーテーション)で囲む、という書き方をします。

metaは情報を伝えるタグですので、ここからここまでのような二つのタグで挟む必要はありません。

今回のmetaタグは、この文書がUTF-8という文字コードで書かれたことを示しています。

続いてtitleタグです。

titleタグの書き方と実際の表示

titleタグの書き方は<title>を書いて、titleタグで閉じ</title>ます。その内側に今回はMyPageと名前を付けてみました。

<!DOCTYPE html>

<html lang="ja">
   <head>
      <meta charset="UTF-8">
      <title>MyPage</title>
   </head>
   <body>
   </body>
</html>
 

これによって、このHTML文書のタイトルがMyPageと言うものである、ということを伝えることが出来ます。

 

では、実際にどのように表示されるのか、確認をしてみましょう。

一旦、このファイルを保存して、開いて見ましょう。（私はGooglechromeで開きました）

 

上のスクリーンショットのようにGooglechromeのタブの所にMyPageと表示されました。

 

では、ファイルに戻りましょう。

続いては、divタグとspanタグの書き方を紹介します。

divタグとspanタグのの書き方

divは表示させる内容なのでbodyの内側に書くことになります。

divタグを書いて、これはdivです。と書いてみます。

<!DOCTYPE html>

<html lang="ja">
   <head>
      <meta charset="UTF-8">
      <title>MyPage</title>
   </head>
   <body>
      <div>これはdivです。</div>
   </body>
</html>
 

では、これを保存して表示させてみましょう。

ブラウザを更新してみます。

すると、このように、これはdivです。と表示されました。

 

同じようにして、次の行にspanタグを書いてみます。

こちらには、これはspanです。と書いてみましょう。

<!DOCTYPE html>

<html lang="ja">
   <head>
      <meta charset="UTF-8">
      <title>MyPage</title>
   </head>
   <body>
      <div>これはdivです。</div>
      <span>これはspanです。</span>
   </body>
</html>

 

divの時と同様に、保存して更新します。

 

すると、上のように表示されました。

 

 

これだけでは、この二つの違いが良く分からないかも知れません。

ただdivタグは”これで一塊である”という事を示すブロック要素と呼ばれるものです。

それに対してspanタグは”文章の一部”を示すインライン要素である、という事がポイントです。

 

また、タグは入れ子と言われるタグの内側にタグがある、という状態で使われる事があります。

実際に今回も、htmlの内側にbodyがあり、その内側にdivタグがある状態になっています。

 

では、divタグのさらに内側にspanタグを足してみましょう。

divという3文字を囲むようにspanタグを書いてみます。

<!DOCTYPE html>

<html lang="ja">
   <head>
      <meta charset="UTF-8">
      <title>MyPage</title>
   </head>
   <body>
      <div>これは<span>div</span>です。</div>
      <span>これはspanです。</span>
   </body>
</html>

 

保存して、ブラウザを更新します。

 

あれ？

見た目は何も変わりませんでした。

実際にはdivの3文字がspanタグで囲まれています。

 

この時、あくまでspanタグは文章の一部を選択している状態になっていますので、特に見た目に変化はないわけです。

 

それに対して、この部分がdivになるとどうなるのかやってみましょう。

 

spanで囲んだ3文字"div"を、今度はdivタグで囲むように変更します。

<!DOCTYPE html>

<html lang="ja">
   <head>
      <meta charset="UTF-8">
      <title>MyPage</title>
   </head>
   <body>
      <div>これは<div>div</div>です。</div>
      <span>これはspanです。</span>
   </body>
</html>
 

保存して、更新をすると…

このようになりました。

 

divというタグは、一つのブロックを示しています。

前の内容、そして後ろの内容とは別になるように表示される。

これが、ブロック要素の基本です。

今回も”これは”の次で改行された形、そして、”div”が終わった後で改行という形で表示をされていたわけです。

 

このように、ブロック要素とインライン要素という2種類があるという事は非常に重要なポイントです。

ぜひこの2つを覚えていてください。

まとめ

今回は、HTMLでよく使われるタグの4つ

「meta」「title」「div」「span」

について学びました。今回の学習を私になりにまとめますと、

  • metaによって、今回、この文書がUTF-8という文字コードで書かれたこと示すものと理解しました。
  • titleによって、ブラウザのページのタブにタイトル名を表示させることが出来ると理解しました。
  • divは、divタグで囲まれた文字を一塊として表示するブロック要素であることを確かめました。
  • spanは、spanで囲まれた文字が文章の一部として表示するインライン要素であることを学びました。

次回からも、前回学んだHTMLに必ず必要なタグと、今回学んだ良く使われるタグを念頭に置きながら、HTMLを学んで行きたいと思います！

学び

それにしても、ウクライナにおける戦争はなかなか終わりそうにありませんね。

この戦争のニュースをあまり見たくないと思いながらも、どうしても目に入って来て

しまいます。

とはいえ、私に何か出来ることはあるでしょうか？人道的寄付でしょうか？

残念ながら、私には人に寄付出来るようなお金は、悲しくて情けない事に、本当にないのです(´;ω;｀)

私に出来るのは、命の危険にさらされている民間の人たち、子供たちが安全に、出来る限り平穏な気持ちでいられるように心から祈るだけです。

 

敵を愛し続け…なさい。

イエス・キリスト（マタイ5:44）

コツコツゆっくりプログラミング学習part3（HTMLの基礎構造）頑張れ双極くん！

プログラミング学習

f:id:kazufumitan:20220325202446j:plain

はい、どうもこんばんは。双極くんです。

今回ですけども、「プログラミング学習Part3」と言うわけで、HTMLの基礎構造について学んで行きたいと思います。

目次

 

HTMLの基礎

HTMLのファイルを作るのに必ず必要なタグが大きく４種類あります。

doctype

このHTMLファイルがどのようなHTMLで書かれているのか伝えるというタグです。

このHTML言語はこれまでに様々なバージョンアップを重ねて来ましたので、「このHTMLはどのバージョンのHTML言語で書かれているのものなのか」を示すのに必要なものです。

html

このタグの内側がHTMLの本文（内容）であることを伝えるものです。

その内側に書かなければいけない要素が以下の二つです。

このHTMLを解釈する上で必要な情報を書く場所を用意するタグです。

body

このHTMLファイルの文書の内容。つまりウェブページで見せたい内容を基本的に書くエリアがこのbodyというタグです。

では、実際に書いて行きましょう！

実際に書いてみましょう

まずは新しいファイルを用意しましょう

私はVScodeで新規ファイルを準備しました。

最初にdoctypeを書きます

これは、半角でスペースを作らずに書かなければならない、というルールがあります。

次のように書きます。

1<!doctype html>←(HTML５の場合はこのように記述します）

続けてhtmlタグを用意します

2

3<html>←htmlで書き始め

4</html>←htmlで閉じてあげます

HTML言語が日本語であることを示してあげます
  1. <!doctype html>
  2.  
  3. <html lang="ja">
  4.  
  5. </html>

このhtmlの内側にheadとbodyを用意するわけですが、これらがhtmlの内側にあることを分かりやすくするために、字下げ（インデント）をしておきましょう。

キーボードのTabを押すと、一つ字下げが出来ます。

headを用意します
  1. <!doctype html>
  2.  
  3. <html lang="ja">
  4. 　<head>
  5. 　</head>
  6. </html>
同様にbodyを用意します
  1. <!doctype html>
  2. 　
  3. <html lang="ja">
  4. 　<head>
  5. 　</head>
  6. 　<body>
  7. 　</body>
  8. </html>

このようにして、最低限必要な4つの要素を用意することが出来ました。

ファイルを保存します

保存するのに、今回はデスクトップに新しいフォルダを用意して、htmlと名前を付けました。

そして、ファイル名はindex.htmlとします。

多くのウェブサーバーがこのファイルindex.htmlを探す、という指示を持っていることが多いです。

ですので、最初に作るファイルはindex.htmlが多い、というルールを覚えておきましょう。

 

今回もこのルールに従ってファイル名はindex.htmlとして保存しておきましょう。

ただ、私たちが表示させたい内容はここにはまだ書かれていません。

この続きはまた次の回で学んで行きましょう。

まとめ

今回学んだのは最低限必要な4つの要素でした。

次回のHTMLの学習移行でも以下の記述が最低限必要になってくると覚えておきましょう。

  1. <!doctype html>
  2. 　
  3. <html lang="ja">
  4. 　<head>
  5. 　</head>
  6. 　<body>
  7. 　</body>
  8. </html>
学び

最初は1の楽しいを手に入れるために10のしんどいをする。

すると次第にその比重は変わっていく。

しんどいを続けた人に与えられる特権と言っても大袈裟ではない

1のしんどいが10の楽しいを生み出す。

ヒカル

 

就労継続支援Ｂ型事業所って何？見学して来ました！

はい、どうもこんにちは、双極くんです。

 

今回なんですけども、発達障害、精神障害を持っている方のための就労継続支援Ｂ型事業所についてご紹介していきます。

f:id:kazufumitan:20220325113751j:plain

目次

 

 

就労継続支援Ｂ型事業所とは

就労継続支援B型とは、障害や難病のある方のうち、年齢や体力などの理由から、雇用契約を結んで働くことが難しい人が、比較的簡単な作業などの就労訓練を行うことができる福祉サービスです。

障害や体調に合わせて自分のペースで働くことができ、就労に関する能力の向上が期待できます。

ここで、働く意識や社会生活技能を取りもどす、あるいはそういう意識を培ってA型事業所へステップアップするためのきっかけとすることも出来るでしょう。

事業所と雇用契約を結ばないため、賃金ではなく、生産物に対する成果報酬の「工賃」が支払われます。

 

就労継続支援B型の作業内容は事業所によってさまざまです。一例を挙げると以下のようなものがあります。

  • 農作業
  • 部品加工
  • 手工芸
  • 喫茶店での調理
  • パンやクッキーなどの製造
  • 衣類のクリーニング
  • WEBサイト作成
  • データ入力　など

双極くんがB型事業所見学に行って来た

1週間前に私は、デイケアスタッフと一緒にＢ型事業所の見学に行って参りました。

その事業所の所在地は私の住んでいる街の駅前で、作業内容はパソコンに特化した支援だということで、私にとって魅力的な事業所でした。

 

これから、この事業所のパンフレットをもとに紹介いたします。

見学したＢ型作業所の紹介

来られている主なメンバー

発達障害、精神障害などを持っている方、働きづらさを感じている方、自分のペースで仕事をすることから始めたい方が来られているそうです。

活動内容
  • オフィスで一般に使用されているソフトを用いて、パソコンを一から覚えたいという方も、専門の指導員に教わりながら、基本から学べる
  • クリエイティブな分野に興味がある、絵や文字を見たり書いたりするのが好きという方には、デザインソフトやインターネットを駆使して、チラシやパッケージなどの制作、カメラ撮影など、活動しやすい環境を整えている
  • 軽作業では、手先を使って作業するウッドチップの商品制作をしているので、黙々と作業したい方や単純作業が好きな方にも向いている
就職に向けたトレーニングについて
  • パソコンの基礎を学びながら、就職に向けたトレーニング
  • 長く現場で活躍していたデザイナーが在籍しているので、売れるデザインや、好きなデザインも作れるようになる
  • パソコンに興味はあるけど操作に自信がない、基礎から学んでスキルアップを計りたい！という方も、自分のペースに沿って丁寧に指導するので大歓迎だそう

こうして、次のような目標をもつことが出来るようです。

  • 企業の事務スタッフ
  • 企業でのデザイナー
  • 自分で稼ぐ可能性（YouTuberやLINEスタンプ、イラスト投稿サイトなどのデザイナー）
  • その他（学びの時間をとってあるので、個人的にウェブデザインを学びたいと思います）
オリジナル商品の制作について

県産のひのき・クスノキを自社で天然乾燥させ、一本一本かんなで削って香りを存分に引き出した「ウッドチップ」の商品制作がされています。

この事業所の特徴まとめ

  • キレイでお洒落な事業所で、実際のオフィスのようです。
  • パソコン初心者でも基礎から学べる！
  • 工賃１時間　200円　
  • 作業時間【10:00～12:00】【13:00～15:00】

　　例）週3日利用の場合

　　200円×4時間＝800円

　　1ヶ月12日間ご利用の場合

　　800円×12日＝9,600円

  • 自分の好きなペースで通える
  • 交通費補助有り（上限8,500円）
  • 選べる昼食弁当一食100円。炊き立てごはんおかわり自由

見学に行ったこの事業所についての感想

結論からいうと、私はこの事業所に是非行きたいと思いました。

というのは、私の住んでいる市内には、ここまでパソコンに特化しているＢ型事業所はないからです。

立地的にも、私の家の近くのバス停から駅のそばのバスセンターまで片道170円で行けるという利点があります。

工賃は他の事業所の中では少し安いですが、スキルを身に付けられるという観点で見れば、私にとって大した問題ではありません。

 

過去2回、別の事業所も見学しましたが、作業内容は車の部品の組み立て、手芸、屋外の草むしり、小物作り、エアコン清掃補助などで、パソコンは多少使うぐらいのものでした。

なので、パソコンを使う仕事をやりたい私にとっては、今回見学した所がうってつけの事業所なのです。

 

まとめ　事業所を見学してみませんか？

私は今回の見学を含め、3回にわたりＢ型事業所見学に行った上で、意外と早めに、自分にとって理想的な事業所を見つけたわけですが、私が今までやっていたことと言えば次のような事柄です。

  • 自分が将来やりたい仕事、好きなことを思い描いていた
  • 自分に合った事業所がないかとネットで調べておいた
  • 市報など無料で家庭に配布される情報誌に一応目を通していた
  • デイケアから不定期に案内される事業所見学に、とりあえず参加した（そもそもデイケアを利用する利点はここにもあるかもしれません）

こうして、いろいろとアンテナをはっておくことが良かったな、と思いました。

実際見学に行くことで、紙やネットの情報だけでは分からない事業所の様子を感じることが出来ます。

それと、どこの事業所でも作業の体験をさせてくれるので、一度体験をしてみるというのも大切な要素かもしれません。

 

とりあえず、これからも私は、デイケアの日数を増やして外出に慣れ、体調を整え、社会生活に対応できる訓練を頑張っていきます！

学び

考え方を新しくすることによって自分を変化させましょう。

ローマ12:2