勉強会でうまくいかなかったこと、その他

■9月21日
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="inu.css" rel="stylesheet">
　　→てまりさん
　　この css へのリンク1行が抜けていたため css が効かなかった
</head>
<body>
<div class="zentai">

</div> 　→華さん
　　　　　この終了タグが抜けていたが表示に影響はない
</body>
</html>

半角などのスペースをわかりやすくする方法
半角などのスペースをわかりやすくする方法
半角などのスペースをわかりやすくする方法2
抜粋
タイプ別設定→　カラー　→　「半角空白」の１文字前に☑を入れてOK。「U」の下半分が表示される。
全角も同様で、「日本語空白」の１文字前に☑を入れてOK。「□」が表示される。
また、同じ「カラー」で背景色を付けることも可能。

「半角スペース」と「タブ」は特別な箇所以外は書いても無視される。

ページを作るために大きな枠を作ってその中にいろんな部品を配置していく、これがページ作りです。
部品とは画像や写真、文章などのこと。
この部品がちゃんと配置されているかを調べるのに、
画像は枠の幅より小さく（ページの幅が 800px なら、画像の横幅は 500px とか 600px とか）、
文章も枠の幅よりも小さくなるように工夫しておく（ <br> を使って1行の文章を短くする、最終的には解除します）

同じ <div> の中に margin と text-align が共存しても同時に処理できるということが判りましたが、
今回はナビゲーション以降に中央配置がないかも知れないので、すべてを中央にとはいきません。
なので、 margin は "zentai" で、 text-align は個々の <div> で処理します。

前回作ったナビゲーションのリンク部を消してもう一度作り直す。今回は早い目に枠線を使ったので少しわかりやすかったと思います。

ナビゲーター部分の枠線がうまく表示されない。
　　→華さん
　　.navi1 {
display:flex;　　　　　　　/*横並びにする＊/
border:solid 2px #00f;
padding:5px;
width:550px;
margin:0 auto;
}
display:flex; のコメントの最後「*/」が「＊/」と全角になってるため、このコメントが終了していなくて次の行以降もコメントと解釈された。半角にすれば直った。

左側の各ページへのリンク、今回 <div> ～ </div> で説明しましたが、以前はリストで説明していました。年明けにはリストに戻して説明します。

<ul class="hidari">
<li class=""><a href="inu1.html">topページ</a></li>
<li class=""><a href="inu1.html">topページ</a></li>
<li class=""><a href="inu1.html">topページ</a></li>
</li>

本文左側のリンク部、それぞれを <div>～</div> でくくったが、改行の処置などが不要なのでリストで作り直します。

普通に作るとリスト記号が左側にできます。また、リスト記号を表示しなくしてもリスト全体が少し右寄りな感じです。
それで少し左に寄せるのに margin-left:-20px; を使いました。数値に「-」が入っているので違和感がありますが、そのまま使います。

勉強会当面のルール
・欠席者が3名以上の場合、ページ作成はやめてHTMLタグ・属性などを勉強する
・欠席者が1～2名の場合、次回も同じ勉強をする

今日は画像の加工の勉強
ウェブアートデザイナーを使って写真の切り抜きをする
切り抜いたら横幅をページ幅に合わせて保存する
このときにキャンパスもオブジェクトのサイズに合わせるのに練習が必要

別に送った作成手順書
・9行目の「 Windows LS 」は間違いで「 HTML LS 」が正しい。
・55行目の<div>は間違いで<ul>が正しい。

もう一度、ページを作る手順書に基づいて作成する。
画像の切り抜きはパス。ページ全体の枠線作成から開始。
枠線の中央配置、画像の中央配置を行う。
ナビゲーション部の書き込みまで終了。

トラブル（華さん）
今までに作ったページを残しながら新しく作るため、ファイル名を新しくするところで「 inu2.css 」を「 inu.2css 」としてしまった。
css のファイル名が新しくなったのに、index.html のリンクが前のままだった。

今回作成したソースは、html が、
<div class="honbun">
<div class="hidari">
<ul class="list1">
<li class="a01"><a href="">トップページ</a></li>
<li class="a01"><a href="">チワワ</a></li>
<li class="a01"><a href="">フレンチブルドッグ</a></li>
<li class="a01"><a href="">マルチーズ</a></li>
<li class="a01"><a href="">ミニチュアダックス</a></li>
</ul>
</div>
<div class="migi">本文
</div>
</div>

css が、
.list1　{
　　border:solid 1px #f00;
　　list-style:none;
}
.a01　　{
　　border:solid 1px #00f;
　　margin-left:-20px;　/*左枠線との隙間*/
}

■ index.html
<div class="honbun">　　　→→→　この「honbun」の中に「hidari」と「migi」が入る
<div class="hidari">
<ul class="list1">
<li class="a01"><a href="">トップページ</a></li>
<li class="a01"><a href="">チワワ</a></li>
<li class="a01"><a href="">フレンチブルドッグ</a></li>
<li class="a01"><a href="">マルチーズ</a></li>
<li class="a01"><a href="">ミニチュアダックス</a></li>
</ul>
</div>
<div class="migi">本文
</div>
</div>

■ inu.css
.honbun {
display:flex;　　　→→→　複数の div を横に並べる
}
.hidari {　　　　　→→→　左の div
}
.migi {　　　　　→→→　右の div （ honbun の中に div は全部で2個しかないが右側最後の div となる）
border:solid 1px #00f;　　　→→→　境界線（ border ）を書く
padding:5px;　　　　　　　→→→　「本文」との隙間をあける
flex:1;　　　　　　　　　　→→→　この div が一番右にあるのでここで横幅いっぱいにして右まで詰めてくれる
/* この<div class="migi">で padding:*px; とリストとの隙間を調整しようとしてもうまくいかない（ a01 で指定）*/
}
.list1 {　　　　　　　　　　→→→　ul タグに指定
margin-top:5px;　　　　　→→→　上の隙間を調整する
list-style:none;　　　　　→→→　先頭の記号をなくす
padding-right:8px;　　　→→→　リンク文章末尾の文字と境界線の隙間を調整
}
.a01 {　　　→→→　list タグに指定
margin-left:-25px; /*左枠線との隙間*/
/* list1 に指定してもうまくいかない */
}

フォントを指定するには css で font-family を指定します。今後下記だけは指定するようにしましょう。
body　　{
　　font-family:sans-serif;　/* ←これはゴシック体。明朝体の場合は「sans-serif」→「serif」 */
}

①旧犬のページのトップページの本文の文章を全部コピーする。
コピーの中に写真が含まれていても気にせずコピー。
それを今回の「本文」の代わりに貼り付ける。
sukura はテキストエディタなので写真は貼り付かず、文章だけが貼り付く。
上1行で改行する。上2行の下に水平線を書く。
ブロック（段落で区切られている）を<p>～</p>でまとめていく。最後のブロックだけは<div>～</div>にする。
（<p>～</p>を使うと最後に1行あいてしまう）

②写真を張り付ける位置が決まったら、

犬の種類分のサムネイル写真があるので、その処理を先に行う。
写真を小さくして（後で小さくします）横に5枚、縦に2段、合計10枚とする。
写真のサイズは今回スタイルシートで決める。

<div>
　　<div><img src="写真1のurl" alt=""></div>
　　<div><img src="写真2のurl" alt=""></div>
　　<div><img src="写真3のurl" alt=""></div>
　　･･･････
</div>

大雑把に上記のように作り、class指定を追加していく。

<div class="sam1">
　　<div class="sam2"><img src="写真1のurl" alt="" class="sam3"></div>
　　<div class="sam2"><img src="写真2のurl" alt="" class="sam3"></div>
　　<div class="sam2"><img src="写真3のurl" alt="" class="sam3"></div>
　　･･･････
</div>

class="sam1"では個々の div を横並びにし、右端にきたら自動的に改行させるために、display:flex; と flex-wrap:wrap; を指定する。（この部分、ソースを思い出せずに勉強会では後回しになってしまった）

class="sam2"は写真と写真の隙間とかを調整するのに使う。

<img *** class="">の書き方は間違っているかどうか判らない。
でも写真のサイズをスタイルシートで決めれるから今回は使う。
（複数のサイトを確認したが使っても大丈夫そうだった）

前回から4週目になるのでもう一度復習した。
内容は5月17日と同じ。

トップページと犬の各ページを合わせるため、共通なものを揃える。
・ワンちゃんたちの写真サイズ
・ナビ部分のリンク
・左側の各ページへのリンク
・トップページ（ index.html ）のみ本文中のサムネイル写真をリンクさせるかどうか。
・ index.html 以外のページの写真の配置。
・一番下（ボトム部分）の Copyright ････････の追加。

各ページやリンク部分が完成したら、ページを開いて正しくリンクしているかどうかを確認する。

次週（7月19日）インターネットにアップロードする準備をします。
全ページが完成していなくてもいいです。一部でもアップロードの練習をします。

残念ながらアップロードするまでには至りませんでした。
3年も間が空いたFFFTPの使い方をほとんど忘れてしまっているという問題が浮上しました。
次回までに何とか説明できる資料を作ってみたいと思います。

≪１日目≫
下記のとおり特に難しいタグの部分をうまく表示させる。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="eat.css">
</head>
<body>

</body>
</html>

このタグの部分を表示させるには特殊記号に置き換える必要があります。
sakura の「検索」→「置換」を使って特殊記号に置き換えます。（「<」→「<」、「>」→「>」）

裏技としてはページを作るソフト、例えばホームページビルダーなどに全部貼り付けて「ソース」を見るとできています。

うまくできないようでしたら、下記をそのまま使ってください。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="eat.css">
</head>
<body>

</body>
</html>

置換してできたソースの上下に基本のソースを貼り付ければ完成です。
charset="utf-8" にして「名前を付けて保存」時にも文字コードを「UTF-8」にし、「kihon2025」フォルダに保存すれば、保存は完了。
FFFTPを起動させ、トップページと同じところに「kihon2025」フォルダごとアップロード。

自分のドメイン「https://****.******.***/kihon2025」と入力すれば見れます。

本日の作業はできていませんが、自主勉強では下記のとおりにお願いします

≪２日目≫
1日目の「 index.html 」の下部に何行か空けて追加する

各タグを説明していきます
見やすいようにしてください
・テーブル <table><tr><td> を使う
・説明リスト <dl><dt><dd> を使う
・その他
方法は任せます

ー－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<!doctype html>
html5 では先頭にこのように書きます。「 html5 」で書くよっと宣言していると思ってください。
<html>
このページは html 文書ですと宣言しています。
<head>
情報の開始タグで、ここからはページの情報を書きます。
<meta charset="utf-8">
メタタグと呼ばれるもので、この場合は使用する文字コードセットを「 utf-8 」にしますと宣言しています。
<title></title>
情報の中でも最重要で、このページのタイトルを書きます。
<link rel="stylesheet" href="eat.css">
リンクのタグで、「 eat.css 」というスタイルシートを読み込んで使いますということです。
</head>
情報の終了タグで、<head>～</head> の間にページの情報を書きます。
<body>
いよいよここからがページの内容になります。文章や画像、写真などを配置していきます。
</body>
これで文章などの中身は終了です。<body>～</body> の間に文章などを書きます。
</html>
html 文書を終了しますと宣言。ページソースの終了です。
ー－－－－－－－－－－－－－－－－－－－－－－－－－－－－

「kihon2025」フォルダの中の「index.html」ですから
「index.html」のアップロードだけで完了です

自分のドメイン「https://****.******.***/kihon2025」と入力すれば見れます

私のミス

１日目にソースの基本の部分を特殊記号の変換を使って仕上げました。
その後、２日目の作業は「１日目の以下の部分に貼り付けて作る」を勉強会で説明しました。

上記のように説明しましたが間違いでした。
上記は１日目を回答して完成したページに表示される内容で、この部分に２日目を貼り付けても正解になりません。
ページに表示される内容ではなく、「ソースに貼り付け」します。
つまり、

結果以下のようになります。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="eat.css">
</head>
<body>

説明リスト（<dl>）部分が何故かちゃんとできていません。色々調べているんですがよく判りません。
間違っていたことの報告ですから、とりあえずアップします。

また今回の作業でよく判りましたが、このようなややこしいテーマはもうやめにしましょう。私も混乱してきました。

メンバーの足並みがそろわず、報告書も約2か月遅れていました。
まとめを報告書にアップしています。
ここにも同じ内容を書いておきます。

9月13日～12月20日　HTML勉強会
9月13日、20日
10月11日、18日
11月8日、15日
12月13日、20日　計8回

FFFTPを使いこなす（使い慣れる）
そのためにアップロードや修正などを繰り返す
その都度インターネットでページを確認する

１日目
「kihon2025」というフォルダを作り、その中に「index.html」を作る
２日目
作った「index.html」にタグを説明する文章を追加する
３日目
「index.html」と同じ階層に新しく「top.html」を作る
「index.html」から「top.html」に行けるリンクを作る
４日目
「top.html」に文章、画像を追加する

今回は参加がバラバラだったので、
２日目参加中の人、３日目が完了した人などと結果が別れています

①写真を選ぶ（1200×800くらいの大きさに加工）
②文章を作る
③各ページのリンク部分を書く
　今見ているページの表示も忘れずに
④index.htmlのサムネイル画像の部分を作る
　三段目の左に配置するには
⑤カレーのページを作る

ざっとした手順ですが、前後しても構いません。

勉強会でうまくいかなかったこと（ Not going well ）、その他 2024/09/21～

私のミス

結果以下のようになります。

勉強会でうまくいかなかったこと（ Not going well ）、その他　　2024/09/21～