https://shirakawa.weblike.jp/blog-page/2021/04/14… の続き。
練習場
https://oldcygwin.web.fc2.com/ (FC2 server)
https://oldcygwin.web.fc2.com/ (Linux local server)
file:///d:/oldcygwin/index.html (Win local file)
(生成物はSDカードに入れる。Firefox/Winでのfileアクセスだとlinkを処理できない(Linuxも?)
ので、Psデータを入れるDirだけlinkを外す事にした。fileフォーマットはexFatにした。NTFSだと
Linux側からRWでmountできない事がある。今のところWinにはPsを使う以外に用事はないので、
XAMPとかWin用のツールは入れない。GimpとVSCodeは入れた。2023.07)
exFATでフォーマットされた外部ストレージを任意のパーミッションでマウントする
https://qiita.com/local0125/items/40f47550ea0f1e415275
(/dev/mmcblk0p1 /myproj exfat defaults,uid=xxx 0 0 とした)
Psで作った画像はWP化したHPに入れる予定。内容はOldCygwinではなくCygwin64とする。(2023.07)
https://oldcygwin.fc2.page/ (FC2 server)
https://slack150memo.blog.example.com/homepage2/ (Linux local server)
\
FC2の編集はログインしてからftp
https://web.fc2.com/
localのDBを直接操作
https://slack150memo.blog.example.com/phpMyAdmin/ (Linux local MariaDB)
Emacs標準のファイラdiredの基本的な使い方と便利なTipsいくつか (2023.10)
https://qiita.com/mtmtcode/items/8665122e01f6f5ef502f
(やっぱ、gitが入ってないサーバとかにデプロイするのはemacsが楽だ～。ファイルが多いとそう
でもないが)
ncftpでdir以下全部を転送 (2023.10)
https://qiita.com/sky_y/items/3234971bddfb203181f3
(‘-p’はうまくいかないので使わない)
ディレクトリごと削除：(2025.04)
サーバーによっては、rm -r が制限されている場合があります。その場合は、FTP クライアント（例: lftp）
やサーバーのシェルから削除する必要があります。(->DeepSeek)
$ lftp -e “rm -r ディレクトリ名; quit” ftp://ユーザー:パスワード@サーバー
emacsの方が速そうだが、emacsでやると削除中は作業できなくなってしまう。使ってみたらスゲー便利。
$ lftp -e “ls -l; quit” ftp://ユーザー:パスワード@サーバー
$ lftp -e “ls -l; quit” sftp://ユーザー:パスワード@サーバー

/*************************************************************************************/
サボっていたHTML/CSSを１回くらいはマジメに基礎から練習するか。
Web制作に必要な 知識、作業、ツール：(参考書籍１)

CHAPTER１～ CHAPTER３：
サイトマップ作成ツール。ワイヤーフレーム作成ツール。
先にワイヤーフレーム作成ツール 無料、でググるとphotoshopがヒットする事がある。そこで、
サイトマップ作成 gimp、でググったらgimpの使い方サイトばかりがヒットした。
しかし、ワイヤーフレームではヒットしているので、多分gimpでこっちも使えるんだろう。
できる限りgimpでやってみよう。以下でgimpをinstallした。
https://shirakawa.weblike.jp/blog-page/2022/09/25…
gimpを使ってやった事は以下にまとめる。Ps,Ai,XD,Fig,のコーダーとしての使い方を追加。(2023.02)
https://shirakawa.weblike.jp/blog-page/2022/10/16…
サイトマップ作成ツールはフローチャート?書ければよいのでgnumericでも入れるか。(2022.11 2週目)
と思ったがpkgには無いしクラウドにしよう。JSでできてるとこがまたいい。重くて結局はbinにした。
linux フローチャート作成ツール、でググった：
【2022年版】クラウド型フローチャート作成ツールおすすめ5選を徹底比較！（無料あり） https://notepm.jp/blog/6399
フローチャート作成ツール https://qiita.com/karcenciel0113/items/f8c7adfb1c0…
draw.ioのデスクトップ版 https://github.com/jgraph/drawio-desktop/releases…
draw.ioのInstと実行 https://shirakawa.weblike.jp/blog-page/2023/06/23…
ワイヤーフレームでのデザインカンプとしてはAdobeXDが使われることが多いらしいが、32Bit_
Win7/2GBRamではAdobeXDは動かない(ちょうど全部１ランク下のPCだ)。いずれにしろgimp/Linux
で見たいのでこっちでファイル形式を変換する。(2022.12 2週目) https://shirakawa.weblike.jp/blog-page/2022/10/16…
\
Web制作に必要な知識はこれまでHTML/CSSについてはほぼネットの情報ばかりだったので、穴だらけ
だったりピンポイントで過剰だったりした。タグだって覚える順番があるわな本来は。
コストと素材の機能性第一の自分にとって、「デザイン」はムズカシイな～。(2022.10)

CHAPTER４：
フルスクリーンのWebサイトを制作する。
いよいよマジメに正式ホムペを作る。OldCygwinはWin上の話だけど、Slackでも同じ様な使い方を
している(両方共、startxで起動して簡素なWMを使用)ので、Slackでもクリーンショットが要るなぁ
と思い、linux スクリーンショット、でググったが、
https://viva-linux.jp/linux-screen-capture-286…
GNOMEもKDEもXfceも入れてねえよ。がしかし画像絡みならgnomeにできることはgimpにもできるはず。
https://shirakawa.weblike.jp/blog-page/2022/10/16…
\
Slack-15$ free
\ total used free shared buff/cache available
Mem: 1971756 1426784 175596 64140 369376 325864
Swap: 2000056 305996 1694060
うおっ、Firefox,Emacs,Gimp使ったらswapメモリ300MBくわれた。やばい、ディスクがポカンと行く
前にBackUp取ろう。というかいいかげんメモリ4GBにするかぁ?。BackUp取った、ポカンしても大丈夫。
(後から分かったが、どうやらFirefoxを長時間いじってるとメモリ消費量増えてくなぁ)
\
本書から代えて制作するのは無添加の素材を使った財布と中古PCにやさしい開発環境「CygwinとSlack
ware」のWebサイト。
ロゴは、Cygwinのを使う。Slackのも使うか。
ナビゲーションはそのまま。中身は関連しそうな物に入れ替える。
キャッチコピーは、「Cygwinで開発と制作」。または、「OldCygwinのメモとまとめ」、「Cygwinと
Slackwareで開発と制作」、「CygwinとSlackwareの適当レシピ、案外長寿だった件」、
「Cygwin <-> Slackware 横断レシピ」。
文書は、「Life with Unix から、Full Remote Life with Slack たまに Cygwin を目指して」。
または、「Cygwinで組み込み開発してたけど、一旦まとめ、Web系で Full Remote したい」、
「Cygwinで組み込み開発してたけど、一旦まとめ、SlackwareでWeb系の副業したい」。
ボタンはそのまま。
背景画像は、Win上のCygwin(kterm+emacs+時計)+Firefox、とSlackware。
\
cygwin アイコン、でググってロゴのjpegファイルを拾ってきたがsvgファイルに変換したい。
gimpではjpegで読み込んだファイルをsvgで保存できなかったので、こっちで変換した。
https://shirakawa.weblike.jp/blog-page/2022/10/13…
本書のロゴは(マーク+文字)になっていて、cygwinのマークに文字(Cygwin(Old))を付けなければ
ならない。こっちでやった。https://shirakawa.weblike.jp/blog-page/2022/10/16…
CygwinとSlackwareを１つの画像にしたい。上のリンクでやった。
フルスクリーンのTopPageができた。https://oldcygwin.web.fc2.com/
\
Slack-15$ free (2023.03)
\ total used free shared buff/cache available
Mem: 8014852 1348280 5714080 262628 952492 6155076
Swap: 9269408 0 9269408
PC買い換えた(メインメモリ2GB->8GB)ら、Firefox,Emacs,Xterm,Gimp使ってもswapメモリ全く
くってない。swapが9GBはもったいないな。Win10でも1.3GBくらいだったし。
Win10$ free
\ total used free shared buff/cache available
Mem: 8265856 6193472 2072384 0 0 2072384
Swap: 2246456 156316 2090140
Firefox,Emacs,Xterm,AdobeXDを動かした。Win10ではswapは可変させてるのか。2.2GBに増えた。
\
よく見ると、下部画像が欠けていてxclockが見えなくなってる。直すか。background-size: cover;
変更で縦横比変えてでも表示するか?。https://www.nishishi.com/css/background-size-css3.html
がしかし、SPコーディング?変更してスマホは維持しないとならなくなる。background-size: cover;
だと縦スクロールしないのはやっぱおかしい。FC2だとタグ追加されてスクロールできローカル環境
だと画像はみ出しだけだからスクロールできない?。background-size:を使うと親要素からはみ出さ
ないからだった。https://csshtml.work/scroll-bad/#htmlbodyoverflowhidden https://magazine.techacademy.jp/magazine/9428
あと、1266×660に固定して見ていたためで、background-size: cover; background-position: center top;
の場合はWindowを小さくすれば全体を見れる。これがViewポイントか～と今さら実感。

CHAPTER５： (2022.10)
２カラムのWebサイトを制作する。
半分に割って、左をCygwin、右をSlackっていいねぇ。後の楽しみに取っておこう、と思ったが、
やっぱ、割り方はCHAPTER４と同じでいいや。フルスクリーンではなくカラムを入れる、というか
CHAPTER４～CHAPTER７までで１つのサイトということか。
NEWSの背景画像はSlackの背景を３つ並べた。https://shirakawa.weblike.jp/blog-page/2022/10/16…
NEWSにはちょっと遅いけど、Slack-15がリリースされたことをTopに入れよう。
\
NEWSのバックにSlack(http://www.slackware.com/ )の背景画像を使ったが、画像検索してみると似た
ようなのは沢山ヒットするが全く同じのは無かった。ネットにある画像はどこまで使っていいのか。
ネットの画像がどこまで流用していいか、ネットで拾った画像 著作権、でググった：
https://kigyobengo.com/media/useful/148.html
著作権法32条1項は、特別に一定のルールに従った「引用」に限り承諾を不要としました。
https://wepot.jp/blog/webdesign/2021/09/1495/
(Slackの批評やNEWSを載せるから、明記すれば使っていいのかな?)
\
一から書くとやっぱりCSSのスペルミスする。FirefoxだとインスペクターでHTMLに対応するCSS
を見れてある程度チェックもできる(機能がないと取消し線)が一行づづで結構ダルい。そうい
うものか?。PCのブラウザにはレスポンシブデザインモードがあるのか～、これは使える、確か
にスマホと見え方が同じだ。Ctrl+Shift+M、画面を切り替えることでviewportやCSSのメディア
クエリーが効いているのかが分かって便利。

CHAPTER６：
タイル型のWebサイトを制作する。
Menuのバックは、ぱくたそから夏の木漏れ日の写真素材をもらってきた。画像でかいかpngに
するか?。gimpでpngに変換したらファイルサイズ大きかった。明る過ぎるか?。Newsもバック明る
いしいいか。MenuをMemoに変更した。メモの内容はCHAPTER７が終わってからゆっくり書くか。

CHAPTER７： (2022.11)
外部メディアを利用する。
地図は昔メイドが来る前、秋葉原でSlackのCDを売ってた店があった辺りの場所を入れよう。
http://www.htmq.com/html5/section.shtml
<section>タグは汎用セクションを表しますが、その定義が漠然としていて使いどころが分かりにくいものの一つです。 <article>、<aside>、<nav>もセクション要素ですが、それぞれ記事、補足情報、ナビゲーションという、より具体的な意味を持っています。 それに対して<section>は一般的なセクションを表します。
Facebook(メタ)、Twitter、Youtube、GoogleMapのカスタマイズ、はカットした。

「レイアウト」とは、複数のページで再利用できる、Webページデザインにおける固定パターンです：
(参考書籍４) (2024.03)
ChatGPT：
Web開発やWeb制作において、複数のページで再利用できるWebページデザインの固定パターンを「レイアウト」と呼びます。
レイアウトは、ヘッダー、フッター、ナビゲーションバー、サイドバーなどの共通のデザイン要素を定義し、それらを異なるWebページで再利用することで、サイト全体の一貫性を保ち、開発効率を高めます。
レイアウトを使用することで、Webサイトのメンテナンスや更新が容易になります。たとえば、ナビゲーションバーのリンクを変更する必要がある場合、レイアウトを更新するだけで、サイト全体に変更が適用されます。これにより、個々のページを一つずつ手動で更新する手間が省けます。
Web開発では、HTMLテンプレート言語やCSSフレームワーク、Web開発フレームワークなどを使って、効率的にレイアウトを作成し管理することが一般的です。これらのツールを利用することで、開発者はより迅速に、かつ一貫性のあるWebサイトを構築することが可能になります。
(サイト内検索すると、レイアウトはWordPressでもReactでも出てた。どの言語もHTMLテンプレートを持っている。そりゃそうか、たまには復習するか)

やはり基本は大事だし、いつもの様に途中寄り道多すぎてイマイチ集中できてなかったので、
もう一周するかな。(2022.11)

jQuery入門のCSS： (2023.06)
https://shirakawa.weblike.jp/blog-page/2022/06/20…
flexのショートハンドプロパティ (CSS flex: 1 1 auto;、でググった)
https://miyattiblog.com/explanation-of-flex-property/#flex_1
https://coliss.com/articles/build-websites/operati
flex …… フレックスコンテナ内のアイテムの幅についてまとめて指定する
https://www.htmq.com/css/flex.shtml
align-self …… コンテナ内の個別アイテムの縦方向の揃え位置を指定する
https://www.htmq.com/css/align-self.shtml
CSS MediaQueryのmin-widthとmax-widthどちらを使う？
https://blog.tomoyukikashiro.me/ja-JP/post/media-query-min-max

github you don’t have any public ssh keys in your github account： (2024.04)
GitHubユーザーのためのsshの公開鍵と秘密鍵の作成方法
https://diveintohacking.com/how-to-generate-ssh-keys-for-github-users/
https://qiita.com/floginal/items/32b60c495d2792f9bbdb

/*************************************************************************************/
HTML/CSSの基礎だけでページが一杯になりそう、CSS設計も多そうな気がするので、
CSS設計はこっちにメモ
https://shirakawa.weblike.jp/blog-page/2024/06/22…

/*************************************************************************************/

 

参考書籍：
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 2019.03
https://www.sbcr.jp/product/4797398892/
https://www.sbcr.jp/support/15097/
https://www.sbcr.jp/product/4815618469/ ［第2版］ 2024.03
現場のプロから学ぶ CSSコーディングバイブル (Compass Web Development) 2021.08
https://book.mynavi.jp/ec/products/detail/id=123749
CSS設計完全ガイド ~詳細解説+実践的モジュール集 2020.02
https://gihyo.jp/book/2020/978-4-297-11173-1
Goプログラミング実践入門 標準ライブラリでゼロからWebアプリを作る 2017.03
https://book.impress.co.jp/books/1115101145

参考情報：
ReactやVueを使っていても、HTMLの基本は大事
https://www.youtube.com/watch?v=zpR487JQ8bE
マイクロソフト、Bing Chatで手書きの画像からHTML/CSSを生成可能に、(2024.01)
https://www.publickey1.jp/blog/23/bing_chatinspire_2023.html

参考URL：
セルフチェック (2025.10)
https://shirakawa.weblike.jp/blog-page/2025/10/12…
LPとは？ホームページやトップページとの違い
https://www.profuture.co.jp/mk/column/36210 (webサイト ランディングページ とは、でググった)
ワイヤーフレームってどんなもの？
https://m-tt.jp/recruit/?page_id=1421
ワイヤーフレーム作成 gimp、でググった：
http://neganin.com/blog/web/website-design-flow-1/
https://baigie.me/sogitani/2016/04/goodbye-wireframe/
https://gimp-howtouse.net/gimp%E5%AE%9F%E8%B7%B5/p…
https://tayori.com/blog/design-comp/
Blender (gimpをググるとたまに付いてくるOSS)：
https://ja.wikipedia.org/wiki/Blender
https://freelance-hub.jp/column/detail/37/
\
WebP（ウェッピー）は、米Googleが開発しているオープンな静止画像フォーマット。 ファイルの拡張子は「.webp」：
https://ja.wikipedia.org/wiki/WebP
URLパラメータとは？パラメータ使用URLでの注意点
https://www.seohacks.net/blog/988/
GTM（Google Tag Manager）とは？ (2023.07)
https://www.hideandseek.co.jp/archives/4531
https://satori.marketing/marketing-blog/gtm-basic/
OGP（Open Graph Protocol）とは (2023.09)
https://www.e-webseisaku.com/column/marketing/3947/
【初心者向け】Googleアナリティクスとは | 使い方や設定方法を解説 (2023.09)
https://moltsinc.co.jp/media/knowledge/6311/

installまたは展開時のメッセージ：
# ncftp (ftp client)
# NcFTP is a user interface to the Internet standard File Transfer
# Protocol. This program allows a user to transfer files to and from a
# remote network site, and offers additional features that are not found
# in the standard interface for ftp.
# Homepage: http://www.ncftp.com/ncftp/
#
# lftp (command line file transfer program)
# lftp is a program that allows sophisticated ftp and http connections
# to other hosts. lftp can handle many file access methods including
# ftp, ftps, http, https, hftp, fish and file. Every operation in lftp
# is reliable, that is any non-fatal error is ignored and the operation
# is retried. lftp has shell-like command syntax. lftp has a built in
# mirror feature which can download or upload a whole directory tree.
# Homepage: http://lftp.tech