| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | IELTS | JS |
長年愛用していたMacbook Airが壊れ、金欠で買い替えずにいたらまさかの円安でもっと買えなくなってしまった。めげずにiPadでプログラミングの勉強のためホームページを作ってみたいと思う。そこで必要なモノを調べたところ
iPad
iPadで使えるテキストエディタソフト
FTPソフト
借りれるサーバー
があれば作れる事がわかった。
とりあえず、iPadとテキストエディタは今すぐ準備できる。朗報だわーい。
ちょうど良い時にKindle Unlimitedに加入してたなぁ。とういうことで現在の用意できたもの
まぁ参考書籍はWindows用だけどいいでしょう。ここまで書いていた上であった困ったことを箇条書きしようと思う
ここら辺までで書籍のp68 第3章までの内容だ。先は長い
できるようになったこと
さてここからは書籍の第4章以降だ。どうやらホームページというのはリンクの豊富さが大事らしい。確かにリンクで飛べるようになっているのは、便利だと思う。
ここまで来て第5章で既にホームページを公開しよう！なんて来てる。
えー。早くない？怖くない？
一旦現実から逃げたものの、とりあえず本誌通りに進むしかないのである。
だがしかし。FTPソフトをまだ見つけられて無いんですよね。
いやぁ、長かった。FTPソフトをダウンロードしてから全然進まず（笑）
無料レンタルサーバー借りるまでは調子良かったんだけどなー。
使用したのは書籍通りのレンタルサーバーとiPad用のFTPソフト
このFTP Managerがどうしてもhtmlファイルをアップさせてくれず、
なかなか時間かかって2022年08月05日午後8時30前にようやく公開できました。
おめでとう！わーい
HTMLで文字だけのホームページですが、参考書籍を終える頃には写真と色もついてるはず。
時間がかかった点
ここまでで第5章終了。
反省点
昨日のよく分からなかったこと
今日は昨日の続きからやろうと思う。要は第6章以降だ。
htmlで書いたファイルは決められた大きさ、書体、色でしか書けないWord文書見たいな見た目をしてる。色をつけたり大きさを変えたりできるのがCSS（cascading style sheet）でスタイルシートがワードでデザイン挿入したら一気に見た目変えれる的なやつと理解。CSSは色々あるスタイルシートの王道で有名なやつ。
CSSの書き方
とりあえず背景と太字部分の色を変えてみた。使ったプロパティはbackgroundとcolor
本日2022年8月8日。日が空いてしまった。いやまぁ、そういう時もある。早速続きをやろう。
文字の大きさを変えよう
次は行の高さを調節
今日はサクサク進むなぁ。余白(Margin)入れるぞ
文の見出し(h2タグ)の背景を狭くしたい気がするから、右側の余白を多く取ってみよう。 それから画面いっぱいに文字がある気がするから(body)左右に余白入れてみよう。
余白入れてみたら、なんか見出しのバランス悪い気がする。うーん。元に戻すぞ。その代わり行の高さをもう少し高くして、段落にも余白入れてみよう。なんか変わったかな？まぁ良しとしよう。
どんどん行くぞー頑張れ自分。次は強調文字にスタイルを追加。ちょっと疲れてきた。いや頑張れ。
背中疲れたー。Ohダイ6ショウマダマダアルヨ。
リンクがついてる文字の色変えるんだって。やれる。まだ今日はやれるぞ。
むむ。だめだ。今日はもう負けた。お疲れ様でした。
モチベーションキープって難しい。やる気出そうぜ自分。暑くてやる気になんないぜ。
本日は、何をするのかな？「スタールシートだけのファイルを作成」だそうで。せっかくここまで htmlファイルにスタイル足してったのに結局抜き出すんですか。そうですか。
抜き出す時に必要なこと
使用しているテキストエディタJSAnywhereでは、新しくファイルを作成しなくても違うタブでJS(JavaScript)とCSSファイルも作成できるらしい。htmlファイルには、始めからlinkタグとscriptタグが書いてあったのはこの為だったらしい。デフォルトでくっついてるCSSファイルの名前はstyle.cssでちゃんとlinkタグ内のhref属性で指定してある。CSSを記入するときは波括弧の後からプロパティごとに改行すると読みやすくなるらしい。更新するときに読みやすい方がいいもんね。
無事CSSファイルの準備ができたのでHTMLファイル内のstyleタグを削除して完了。今日で6章終わらせたい。後ちょっと頑張れ。
次にやるのはCSSファイルの更新。見出しの端をまあるくするんですって。それってリストの背景も丸くできたりするのかなー？
あとは、ミラーリングアップロードの方法についてで6章は終了。iPadでのミラーリングの方法は調べてみるとして、ようやく終わったお疲れ様でした。
今日は画像を載せる方法についてやっていきます。画像ファイルには.jpg .png .gifとか色々ある。良い写真なんか持ってないのでホームページの大きさに合わせてお絵描きしよう。
横幅300px縦200pxのpngファイルの用意ができた。bodyのh1と最初のh2の間に画像を入れよう。むむむ思った以上にバランスが悪い。こんなサイズなんだなぁ
横幅300px縦200px
横幅400px縦300px
横幅500px縦400px
横幅600px縦500px
画像の挿入が終わったら、CSSで画像に装飾をつけます。
class名は他のタグにも同じ名前をつけられるらしい。ホームページロゴとアイコンを追加して7章終了！アイコンはCSSでh2:before で設定したことによりhtmlに何度もimgタグを書かなくてすみようになる。
反省点
今日はテーブル(表)作成。表は行と列でできていてマス目で区切られた小さな四角をセルと呼ぶ。エクセルと一緒だ。
表の作成方法
やってみよう。何の表を作ろうかな。今まで使ったタグの説明とか？
| タグ名 | 説明 | 補足 |
|---|---|---|
| html | ||
| head | ||
| meta | ||
| style | スタイルシート挿入 | |
| title | ホームページの名前 | |
| link | CSSファイルでスタイルシートを挿入する時 | |
| body | 本文 | 下記のタグで構成される |
| h1~6 | 見出し＞太字で表示される | h1が最大で数字が大きくなるごとに小さくなる |
| p | 段落 | 画像や箇条書き挿入時は毎回閉じる |
| br | 改行 | ー |
| em | 強調文字 | デフォルトだとイタリック体 |
| ul | 箇条書き・で表示 | ー |
| ol | 箇条書き 番号で表示される | ー |
| li | 箇条書きの内容 | 閉めるタグは省略できる |
| img | 画像挿入 | 閉じるタグが無い |
| a | アンカー。リンク挿入 | href忘れずに |
枠線なしだと見づらいからCSSファイルに表の装飾を追加しよう。今まで使ったプロパティでアレンジ！
今日は、web siteを複数のページで構成するために他のhtmlファイルを作成する。参考書籍内ではaboutページ diaryページ link集ページとなっているので3ページ以上作ろう。topページはタイトルを保持してテーブルで他ページへのリンクを作る。他のページはトップページに戻れるようにする。あとは、画像ファイルがたくさんあるのをまとめて管理しやすくしたい。
linkの貼り方と階層構成
今日で書籍の内容は最後！全部することはできないので、いつかやる事としてメモしておこう
どれもサイトの設定ページに埋め込み用リンクがあるはずなので、埋め込む予定のものができたらやってみよう
やってしまいたいこと
しばらく期間を空けてしまった。8月20日にIELTSの受験が終わった〜。
さて受験おわってから書籍とか見ずに自力でhtmlで新しいページを作ろうって頑張ってみてたのだが、とても時間がかかった…
To Do Listのページを作成して全然CSSが反映されなくて…しばらく考えてタグとか正しく覚えてないけど思い出そうとしてごちゃごちゃいじり…結局わからず見比べて。
思った通りに公開されるまで、サボった時間も含めて2日かかってしまった。
間違っていた場所
ほんとすごいケアアレスミスすぎて絶句…延々に反映されないなんでーとか思ってたのに…今後本当に気をつけたい
ホームページを作る際に参考にした書籍は一通り終わってしまったので、次はちょこっとJavaScriptも始めたい…今回もKindleUnlimitedから「これ1冊でゼロから学べる Webプログラミング超入門 ーHTML,CSS,JavaScript,PHPをまるごとマスター」を参考にしようかな