srcの読み方、判明
「ブラウザ」って何？
こんにちは。
今日はプログラミングというよりは、「ブラウザ」っていう、もっと前提のことを知ったので、書いておきます。
っていうか、いろいろ勉強する上で、「ブラウザ」って言葉が出てきてたけど（それ以前に、生活しててちょいちょい目にしたけど）、ぶっちゃけよく分かってなくて「？？？」って感じで今まで生きてきたので、ついに調べましたわ。
例を出せば一発で分かると思います。
・グーグルクローム
・サファリ
↑ こーゆーやつらの総称が「ブラウザ」っていうんやて。
インターネットで何か調べたりするとき、上のやつらをクリックするっしょ？それのことよ。
言葉で説明すると「ウェブサイトを閲覧するためのソフト」。
「ブラウザ」の語源は「閲覧する」って意味の「browse」。
「閲覧するやつ」って意味。
「ブラウザはクローム使って…」ってかっこよく聞こえてたのは、「見るやつ（見るためのソフト）はグーグルクローム使って…」っていう意味やったんやね。
「ブラウザいったん閉じて」→「見てるやつをいったん閉じて」
「違うブラウザで開いて」→「違う見るソフトで開いて」
って意味。めっちゃ簡単やん。
なんかパソコン系に詳しい人は
インターネットエクスプローラー → IE（アイイー）
って呼んでる人が多いね。
僕は今まで「インターネット＝グーグル」みたいな感じで生きてたけど、今まで思ってたグーグルは「グーグルクローム」っていうソフトのことやったんやね。
「グーグル」って会社が作った「クローム」っていう閲覧ソフト。
確かに「グーグルアース」とか同じグーグルでもいろいろあるもんなぁ。
今までインターネット使って調べることを「ググる」って言ってたけど、今日からは「クロームと云う名のブラウザを使ってリサーチする」と言って生きていこう。
ここからは雑談になるんだけれども。
このブラウザの意味よぉ、調べるときに知ったんだけども、20～50代で意味分かってないの、2％なんやて。。。
いましたわ、ここに。2％の人間が。
正直ちょっと、ショックだったよね。。。勉強しよ。
大丈夫！自分の弱さを知った時、人にやさしくなれるから！
ブラウザの意味知らん人いたら、優しく教えてあげよ！
文字に色を付ける
こんにちは。
昨日は夜勤で、帰った時にはめっちゃ眠かったのですが、何もしないで寝ると忘れるので、20分くらい復習だけやって寝ました。
今日は、表示した文字に色を付ける方法です。
今までやってきたのは「HTML」ってやつだったんだけど、今回のは「CSS」ってやつらしいです。
CSSも使うとなると、画面が3つになるみたい。
「HTMLの画面」、「CSSの画面」、「結果（プレビュー）の画面」の3つ。
【見出しを作って色を付ける順序】
１．HTML画面に<h1>オムライス美味い</h1>って書く
→「オムライス美味い」って見出しが出てくる
２．CSSを開く
３．CSS画面に次のように書く（改行やスペースも完全に同じように書く）
h1 {
color:～～;
}
以上で「オムライス美味い」が～～に書いた色の文字の見出しで出てきます。
「～～」には色の名前を書くんだけども、「赤」とか書けばいいわけじゃなくて、「#ff0000」みたいな、色のデータ名？的なので書くんだとさ（ポピュラーな色は「red」とかでもいけるらしいけどね）。
もう、は？って感じですよね。
分かりやすくするために、いったん改行せずに、カッコやコロンも全角で書いてみます。
h1｛color：～～；｝
うん、一気に分かりやすくなった。
h1で出してる色をこの色で表示させてくれ。
っていう指示ですね。
なんでややこしいところで改行するかはまだ分かりませんが、まぁ後々分かってくるんでしょう。
ちなみにこの→｛｝変なカッコ、日本語入力で→「」が出てくるキーボードを、半角でシフト押しながら押せば出てきます。エンターのすぐ横。
：←これの名前はコロン
；←これの名前はセミコロン
っていうらしいです。
夏に鳴きまくってるやつですね、セミ。
一方、コロンはお菓子だけど。
基本中の基本、修了
今、progateの基本中の基本を終えました！
「HTMLに触れてみよう」、「CSSに触れてみよう」っての終えました！
基本中の基本なんだろうけど、覚えるのが大変ですわ！
一回やって「よし覚えた」って思って放っておくと一瞬で忘れるので、
軽くでいいから頻繁に反復練習しないと。
progateは実際に演習みたいなことができるので、そーゆーとこがいいですね！
実際に２章まで終えた後で最初から演習だけもう一度やり直して、ぐちゃぐちゃになりかかってた頭が、だいぶ整理されました。
で、まぁブログを書きながら進めているわけですけれども、
その日勉強したことを全部ブログにまとめると全然勉強が進まないので、
１日１項目くらいにしようと思います( ;∀;)
１個前のとか、頑張って３種類くらい書いたけども。。。
ブログ書くのmixi以来だし、不慣れなうちはめっちゃ時間かかってしまってるので( ;∀;)
勉強、ジム、運動。。。やることが多いなぁ。
「絶対やらなきゃダメだ」って思い込んで、無理にこなしてストレスにならないようにコントロールしないとあかんなぁ。
音楽も作りたいしなぁ。
明日は遅番、勉強の時間ないかも…(=_=)
HTMLの基礎
今日は休みです！
数日ぶりにめっちゃ寝た！ゆーて８時間くらいだけど！
全然寝られてなかったから「起きたら夕方になってるかも」って思って寝るけど、
案外早く起きてしまうって、あるあるやな。
さて、昨日に引き続きProgateを進めております。
30分くらいやって、覚えることが多いのので、整理するのも兼ねてブログ書いてます。
今回は
- リンクの作成
- 画像の表示
- リスト＝箇条書きの作成
の３つ。
【リンクの作成】
これは、Webページに表示させた文字にリンクを貼って、
その文字をクリックすれば飛ばしたいページに飛ぶような効果をつけるってことな。
使うタブは、
開始タブ：<a>
終了タブ：</a>
昨日「見出し」で「h」を使ったけど、それが「a」になるっちゅーことですね。
あ、話が逸れるけど、このタブで使うコレ→<>。
これ、昨日はキーボード探したけど見つからなくて、いちいち日本語入力にして「かっこ」って検索して打って、またアルファベッド入力に戻すって面倒なことをしてたんだけど、さっきキーボード見つかりました！
日本語を打つ時の「、」「。」を打つボタンですね。
ひらがなの「ね」「る」が書いてあるとこ。
（使うキーボードによって違うかもだけど…）
アルファベッド入力の状態で、シフト押しながら打つと「<」「>」になりました！
話を戻します。
で、リンクを貼るには<a></a>を使うわけだけども、
問題は、どこのリンクを貼るかってことですね。
作るときに念じながら作れば、そのWebページに飛ぶようになるほど、世の中はまだ進歩していません。残念ですが。
ここからちょっと覚えること多いです。
<a href="http://～～">表示させたい文字</a>
なんのアルファベッドの羅列かは分かりませんが、こうやって打たなくちゃいけないみたいなんです。
もうこれは、根性で覚えるしかない。
【ポイント】
- 開始タブのaの後に半角スペースをぶち込む
- その次に「href＝」って打つ（読み方分からんけど「ハレフ＝」って覚えた）！
- 飛ばしたいアドレスはを「””」で囲う（ダブルクォーテーションっていうらしい）
リンク貼る文字の締めに</a>を入れるのも忘れずにね！
【画像の表示】
これは、まぁテーマの通り、画像を表示させるってことやな。
勉強したのは、自分の持ってる画像ファイルの絵を表示させる方法じゃなくで、画像のアドレスの絵を載せる方法でした。
<img src="http://～～">
imgは「イメージ」のことかな？頑張って覚えましょう。
【ポイント】
- imgの後に半角スペースをぶち込むこと
- その次に「src=」って打つ（今回は「スルク」かい！ややこしいで！）
- 画像のリンクを「””」で囲う
で、今回は「表示させてる文字に効果をつける」ってものじゃなくて、ただ単にそこに画像を載せたいだけだから、終了タグは要りません。
上のように入力するだけで、そこに画像の絵が載っかるみたいですよ。
「ハレフ」と「スルク」、このへんがなんとも覚えにくそうですねぇ。。。頑張ろ。
【リスト＝箇条書きの作成】
・キャベツ
・トマト
・ニンジン
みたいな表示にさせる方法ですね。
<ul>
<li>キャベツ</li>
<li>トマト</li>
<li>ニンジン</li>
</ul>
ってのを使います。
「li」はたぶん「リスト」の「リ」かな？
「ul」は知らん。「ウル」や。まぁとにかく、覚えりゃええねん。
見てわかる通り、箇条書きは、二重でタグを入れるようです。
<ul>は「ここからここまでを箇条書きにしてくれ」の意味。
<li>は「これを箇条書きにしてくれ」の意味。
こんな風に、二重でタグを入れること、要素を要素で囲うことを、
「入れ子」って呼ぶんだってさ。
で、外にある要素（今回なら<ul>）を親要素、
中にある要素（今回なら<li>）を子要素って呼ぶみたいです。
で、データ入力するときには改行、インデント（頭にスペース入れること）をすると見やすいってさ。
インデントは、キーボードの「tab」を押せば勝手にやってくれるっぽい。
Progateではできたけど、ワードとかでもできんのかな？
ちなみにProgateでは「tab」一回押すと、半角スペースが2個分入力される感じでした。
入れ子、親要素、子要素、インデント、覚えておきましょう。
さて、どうでしたでしょうか。
自分的には「昨日勉強した<p>（段落）は、逆を言えば<p>を入れなきゃ改行してくれないってことやろか？」とか「箇条書きした文字にリンク貼るには、入れ子を使うんかな？」って疑問があったりとか、「初歩中の初歩から、覚えるの大変そうだなぁ」って感じです。
まぁ積み重ねやね、何事も積み重ね。
積み重ねでしか結果は残せん。
１日何時間もやって数日ぼーっとするより、ふとした時にちょいちょい思い出すことが、勉強にとって効果的だと思うのです。
今回は、こんな感じでどうでしょうか。
文字の大きさとか色とか付けられるの発見して使ってみましたけども。
文字打ちまくってタイピングも速くなってきてる気がする…。
勉強開始
こんにちは！
眠い。かなり眠い。
昨日今日と残業続きで、ブログ立ち上げてたのとかあって、
３時間ずつくらいしか寝ておりません(*_*)
しかし勉強すると決めたし、明日休みなんで、少しだけでもやっておこうと思い、昨日登録した「Progate」ってやつをやってみました。
特に何も考えず、ログインして一番目立ってたボタンをクリック！！
「プログラミングとは？」みたいなのを想像してたんだけど、
そうではなく、「HTML」と「CSS」ってのをやってみんさい、と。
おいちょっと、いきなりすぎんか？もっとこう、前置きとかさ…とか、
こーゆーアルファベッドの羅列系、苦手なんだよなぁ…とか思いつつ、
とりあえず「次へ」をクリックして読み進む。
「HTMLってのは何の略で…」みたいな話も全く出てこなかったけど。
まぁいい、とにかく進んでみよう。
「Webページを作るための言語」ってカッコいい感じで書いてあったけど、
まぁ要するに、
「HTML・CSSを勉強する」＝「Webページが作れるようになる」
ってことらしいんですわ。
ちなみにまだ今日はCSSまで到達してません。
で、なんかまだよく分かってないけど、Webページを作るときは「データを入力する画面」と「実際にWebページになる結果画面」の2つを見比べながら作ってくっぽいんさ。
パソコンにの２つのウィンドウが出てて、「実際にWebページになる結果画面」を見て確認しながら「データを入力する画面」にデータをどんどん打ち込んでいく感じ。
「データを入力する画面」はまぁ、よう使うワードみたいな感じのウィンドウ。
なんかワードと違って背景は黒かったけど。
でもワードは上の方に「文字のサイズ」とかあるけど、この画面にはそーゆーのがなくて、ただひたすらに同じサイズの文字を打ち込んでいく画面。
なんかめんどいから以下、「入力画面」と「結果画面」って呼ぶことにします。
で、「入力画面」に文字を打つと、「結果画面」にもその文字が出てくるんだけど、
いくら打っても結果画面には、同じ大きさの文字しか出てこないんですね。
そんな新聞みたいなWebページ、見づらいですよね。
そこで役に立つのが、HTMLっていうものらしいです。
「入力画面」に打ってある文字に、「ここの文字を見出しにする」とかの効果を出すために、「あること」をするらしいんですね。それは後から説明します。
「見出しにする」だけじゃなくて、「リンクにする」とかもできるらしいです。
よくある「〇〇の人はココ←をクリック」の「ココ」の部分をクリックすると違うページに飛ぶやつですね。
どうやら、そーゆーことをするってのが、「HTML」ってやつみたいです。
じゃあ具体的にどんな風に何をすんのさ？って話ですね。
よくドラマとかで天才ハッカー的な人が打ってるのに、
<h1>YOASOBIの女の子かわいい</h1>
みたいな、よう分からんカッコみたいなやつで文字が挟まれてるの、見たことありますかね。
僕は見たとき、あーなんか見たことあるような気がするなって思いました。
この、文字を挟んでるよう分からんカッコみたいなやつ、
「<>」と「</>」、これを使うことがHTMLってやつみたいですね。
で、この「<>」のことを、「タグ」って呼ぶらしい。
この記号で「入力画面」にある文字を挟むと、その挟まれた部分の文字が、いろんな効果を持って「結果画面」に表示される、ってことらしいんですわ。
で<>の中に「h」とか「p」とかの文字を入れて、どんな効果にするのかっていうのを指示するんですね。例えば、
<h1>YOASOBIの女の子かわいい</h1>
→この文字は、一番大きい見出しとして表示せい！
<h2>マジでかわいい</h2>
→この文字は、２番目に大きい見出しとして表示せい！
<p>おれ、YOASOBIのメンバーになるわ</p>
→この文字は、改行して表示せい！
みたいな感じです。
大事な点が一つ。
文字の開始のタグは<〇>（「開始タグ」って呼ぶ）
文字の終了のタグは</〇>（「終了タグ」って呼ぶ）
っていう決まりがあるみたいです。終了タグには「/」を忘れずに付けましょう！
今日勉強した種類は、
・<h1></h1>は「１番大きい見出し」、
・<h2></h2>は「２番目に大きい見出し」、
・<h3></h3>は「３番目に大きい見出し」、
・<h4></h4>は「4番目に大きい見出し」、
・<h5></h5>は「５番目に大きい見出し」、
・<h6></h6>は「最小の見出し」、（heading：見出し）
・<p></p>は「段落を改行する」（paragraph：段落）
・<!-- -->はコメント、「入力画面」には表示されるけど、「結果画面」には表示されない
このくらいです。
まだまだ全然勉強し足りなくて、書いてることがあっているかぶっちゃけ怪しいんですけど、お許しください(^_^;)
HTMLの定義ってものよく分かってないし。。。
というわけで、プログラミングの世界に片足を突っ込んだ１日目でした！
ってか、ブログ書くのめっちゃ時間かかるなぁ。
考えながら書いてるし、1時間以上かかっちゃう。
そんな時間あるならもっと勉強せいって話だし、ブログ書いてる時間の方が圧倒的に長い。。。
慣れて、もっと早く書けるようになりたいなぁ。。。
はじめまして～！！
どーもはじめまして、オリマゲと申します！
この度、ブログを開設いたしました！
まず、1回目なので簡単に自己紹介させてくださいな。
性別：男
年齢：32歳（2021年現在）
職業：接客業（2021年現在）
趣味：音楽、ジム
好き：Mr.Children、aiko、嵐、甘いもの
嫌い：退屈、寒い、キュウリ、パクチー
こんな感じです。
どこにでもいるフツーのサラリーマンです。
さて、こんな私が「なぜブログをはじめようと思ったのか」についてですが、、、
ふとね、思ったんですよ、、、
金が欲しい、って。
で、さらに思ったんですよ、、、
このままじゃ金持ちにはなれないなぁ、って。
さっき書いた通り、僕はごく普通のサラリーマンで。
いやたぶん給料でいえば、同じ年齢なら低いほうで。
ぶっちゃけ、2、3年前までフリーターだったんですよ。
やっぱほしいじゃないですか、金。
一生豪遊するってほどは無くていいけど、
ある程度余裕持って、贅沢して、、、くらいは稼げたらなって思うんです。
そんなことを思ってたある日、わが親友「しょーちゃん」からライン。
「あーまじ仕事辞めたいわ。在宅フリーランス希望。あとYOASOBIの女の子かわいい」
やっぱ30歳になって、多少焦りを感じてしまうんかな。
「おれの人生このままでいいんかなぁ」って思ってたところに、
そんなラインが来たんですわ。
でまぁいろいろ考えた結果、
プログラミングを勉強しようかなって思ったんです。
勉強だけならリスクもほとんどないしね。
しょーちゃんは勉強しようとして、2回挫折したらしいです。
でも、「おれもやるから一緒にやるべ」という流れで。
一緒にやる人がいればお互いのモチベーションアップにもなるわけで。
難しいかもしれないけど。
コロナの影響で、今の仕事の形態もどんどん変わっていって、
もしかしたらそのうち失業ってこともあり得るわけで。
プログラミングを習得しとけば就職に困らないっぽいし、
そーゆー系は給料いいらしいから、マスターすればめっちゃ稼げるなって。
めっちゃ安直な考えやな＼(^o^)／
軽く調べたけど、小学校でもプログラミングの授業ができたらしくて、
教材も分かりやすいの増えていくだろうから、
そういう意味でもいいタイミングなんじゃないかなって。
はっきり言って、マジで何も分かりません。
「プログラミングって何？パソコンいじることは知ってるけど・・・」レベルです。
でね、せっかくゼロから勉強するんだから、
記録を残そうかなと思ったんです。
正直プログラミング、言葉だけ聞くと、今のところ難しそうなイメージです。
だけど、とにかくまずはできること、やってみます。
あとで自分で見返したりして、思い出したり、復習したりするための記録。
それと、同じように考えてる人、勉強したいと思ってる人がどこかにいて、
少しでもその人が理解するのに役立てればなっていう記録。
で、最終的な目的はお金なので、
あわよくばいずれ広告収入も得られたらなって思って、
昨日ブログの開設の仕方を調べて、開設して、今に至ります！
ちゃっかりしてます！！
プログラミングに限ったことじゃないけど、
詳しくなちゃうと、初めての人にとって難しいことが当たり前になっちゃって、
教えることが難しくなっちゃうと思うんです。
知らなかったことを知った瞬間だからこそできる説明が、
一番分かりやすいんじゃないかなぁと。
だからできるだけ分かりやすく、小学生でも理解できるような、
そんな風に書けたらなって思ってます。
こんなこと書いて、僕も挫折するかもしれないですけど(^_^;)
最初は誰も読まないだろうし、ずっと誰も読まないかもしれないけど、
とりあえず続けられるだけ続けてみます！
今日の進展は、「Progate」っていうオンライン学習サービスに無料登録しました！
しょーちゃんが「とりあえず登録してみ」って言ってたので。
明日も仕事が朝早いので登録だけですけどね、
何もしないよりはだいぶマシです！
勉強は「積み重ね」やで！
明日時間があったらProgate、ちょっといじってみようかなと思います～！
ということで、第1回目のブログはこんな感じでした！
ではでは！
