レンタルサーバー

作成したホームページを、インターネット上に発表する場はレンタルサーバーを利用する。
ホームページ作成ではエディターが不可欠。エディターは VS Code が使いやすい。

その1　画像を横に複数枚並べる 要css

代用品
アスパラ肉巻き
アスパラ肉巻き
アスパラ肉巻き
代用品
===================================================
HTMLに書くこと
<figure class="gazo-box">
<img src="cooking_img/substitute.jpg" alt="" width="100"
height="50">
<figcaption>代用品</figcaption>
</figure>
<figure class="gazo-box">
<img src="cooking_img/asupara.jpeg" alt="" width="100" height="50">
<figcaption>アスパラ肉巻き</figcaption>
</figure>
<h5>========================================</h5>
style.cssに書くこと
figure.gazo-box {
float: left;
padding-right: 20px;
}
h5 {
clear: both;
}

その２　画像と文字配置

①画像の下に文字を配置するには、文字を<p>で囲む

<img src="サンプル" alt="例">
<p>画像の下に文字の例 </p>
sample

画像の下に文字の例


②画像配置を左右指定し、その余白に文字を流し込むには　style="float: left;"
HTMLの記述---------------
<img src="images/aa_top/121.jpg" width="200" height="160" alt="" style="float:left;">
革新的な技術で世の中を動かす企業を目指します。

<img src="images/aa_top/121.jpg" width="200" height="160" alt="" style="float:right;">
テレビチャンネルを変える学習リモコンはPCからのコマンドで

左（右）寄せ指定の解除は
<br clear="all">
------------------------------------------
革新的な技術で世の中を動かす企業を目指します。

途中で流し込みをやめ、画像下に文字を入れる場合

<br clear="all">続いて文字を<p>で囲む

テレビチャンネルを変える学習リモコンはPCからのコマンドで
流し込みの終了は↓
<br clear="all">
文字サイズの部分的変更
<span style="font-size:20px; color:blue;"></span>

区切り線
<hr>区切り線の例↓↓　注ページを左から右まで分割するものではない
段落くぎりのようなもの。流し込みの解除は上記の <br clear="all">

その３　画像を横に２枚並べる css不要

スマホ対応の場合は画像の横サイズを１５０pxにすると2枚が並ぶ。
style="float:left;"を書かなければ、文字は画像の下に配置される
<img src="images/nejiki.jpg" width="150">
<img src="images/asebi.jpg" width="150"> -------------------------------------------------
nejiki 　 asebi

（左）ネジキの花は下垂、（右）アセビは葉上

　

画像間にmarginで隙間をつくる方法

<div style="float:left; margin: 10px;">
<img src="images/nejiki.jpg" width="150">
</div>
<div style="float:left; margin: 10px;">
<img src="images/asebi/asebi5.jpg" width="150">
</div>
<br clear="both"/>

nejiki
asebi

（左）ネジキの花は下垂、（右）アセビは葉上

テーブル（１行に２枠の例）

設立 メールアドレス
平成10年1月10日 info@example.com

***** HTMLの記述 *****
<head>内に記述すること--------------
<style>
　　　　table{
　　　　　　border-collapse: collapse; /*２重線を1本線に*/
　　　　}
　　　　th, td{
　　　　　　border: 1px solid black;
　　　　　　text-align: center;
　　　　　　padding: 5px; /*セル内の余白*/
　　　　}
</style>


<body>内に記述すること--------------
<table>
　　<tr>
　　　　<th style="width: 15%;"> 設立 </th>
　　　　<th style="width: 85%;">メールアドレス </th>
　　</tr>
　　<tr>
　　　　<td >平成10年1月10日 </td>
　　　　<td>info@example.com </td>
　　</tr>
</table>



セルの背景色を変える

CSSの記述
table th{/*見出し行に対して*/
color: #ff9800;
background: #fff5e5;
}

余白の調整 margin padding

種類 意味 図解
margin 要素の外側の余白で、枠からの距離 margi
padding 要素の内側の余白で、枠までの距離 pad

padding 10px [top bottom left right]
padding 10 20px [top bottom] [left right]
padding 10 20 30px [top][left right][bottom]
padding 10 20 30 40px [top][right][bottom][left]

特定の場所、ページへジャンプする方法　

<a href="#top">このページのはじめに戻る</a>

<a href="aerial_img/bousai1.png">特定の写真へ</a>

サイト内の特定の場所にジャンプするには、

ジャンプ先に<a name="Aerial photos">と「ラベル名」を書いておき、

ジャンプ元には<a href="aerial.html#Aerial photos"> 空撮写真へ</a>
と飛び先を示して、「同じラベル名」を書く

　　

注釈の入れ方　「!-- jump先の書き方 --」　

ページの任意の位置に文字を書き込む　

HTMLの記述
<p class="absolute">表示文字</p>

CSSの記述
.absolute{ position: absolute; top: 1350px; right: 20; width: 260px; height: 100px; border: solid 1px #ff00ff; }

かぎかっこの記述

かぎ括弧はじめは　<、おわりは>

iPadのスクリーンショットの取り方　　　

iPadの画面をコピーするには
ホームボタン＜○＞とスリープボタン＜□＞とを一緒に押す
写真は「写真」アプリのカメラロールに保存される

リンク先をボタンで表示　

<button type="button" onclick="window.open('blossom3.html')" style="background-color:salmon;">樹皮の特徴 </button>

説明ページへのリンク先

http://yume.hacca.jp/koiki/form/button-link.htm

文字サイズ、色を替える

<span style="font-size: 18px; color:black;">サイズを変えたい文字</span>

文字化け解消

メモ帳、ワードパッドで文字化けが直らないときは、ブラウザにdrag and dropして、ブラウザで開く。文字化けが解消されたら、文章全部をコピーandペイストでメモ帳に貼り付け、名前を付けて保存する。

HTMLのコメント記述

「<!--」と「-->」で囲む
cssのコメント記述は「/*」と「*/」で囲む

HTML/css　解説講座へリンク

RGBコード

RGB

複数のHTMLページを１つに繋げる

１）連結するHTMLファイルをフォルダーにコピーする
２）$ cat ./htmls/*.html > out.html

HTMLの不要な行をVs Codeで削除

１）編集ー置換ー（検索欄3つ目）正規表現ー置換欄は空白
２）（含む行を削除） ^.*mojiretsu.*\n
（空白行を削除）^\n

Paintでサムネイル作成

１）残したい部分を「選択」
２）トリミング後、下側の↓でキャンバスを引き延ばす
３）空白ができたら、そのまま名前を付けて保存

RGB RGB RGB

1枚の画像に複数のリンクを張る

１）「HTML ImageMap Generator」にアクセス
２）画像をDrag & Drop
３）ボタン形状を選び、望みの場所でDrag
４）ボタンの位置と大きさを調整
５）自動生成されたHTMLソースを「raw」ーcopy
６）画像表示するHTMLにpaste
７）HTMLのimg src= width= height= で画像サイズを調整
　　　　※画像のプロパティでサイズを確認する

ボタン要素を横並びにするCSS

ボタン１ ボタン２

HTML
<table>
<tr>
<td><button1>ボタン１</button1></td>
<td><button2>ボタン２</button2></td>
</tr>
</table>

css
button2 {
display:inline-block;
background: goldenrod;
padding:10px 30px;
text-align: center;
color:aquamarine;
margin:5px;
border:1px solid;
cursor:pointer;
}
table {
margin:auto;
}

Sakura Serverにサイト内検索CGIを設置

１）key searchを利用。Webサーバー上のファイルから、特定の文字を含むファイルを検索するCGI スクリプト。
　　AND/ OR検索できる。INDEX作成タイプ。優秀
　　Software URL: kent-web.com/data/ksearch.html

　　INDEX更新
　　　URL: jk3tjn.sakura.ne.jp/ksearch/admin.cgi PassWordは「0123」
　　　検索対象ディレクトリのURL記入　http://jk3tjn.sakura.ne.jp ２）設置手順
　　エディタ秀丸でksearch.cgiを開き、「改行=LF」「BOMチェックをはずす」として上書き保存
hidemaru
３）Serverに指示通りのフォルダを作成後、ファイルを転送する
　　/home/jk3tjn/www/ksearch/ksearch.cgi
　　　　　　　　　　　　　　　/lib
　　　　　　　　　　　　　　　/data等
４）転送後ファイルを選択して右クリック。プロパティで属性変更する
５）検索窓へのアクセス
　　　https://jk3tn.sakura.ne.jp/ksearch/ksearch.cgi

行末に一括で改行コード<br>をいれる

１）VS Codeにテキストを書く。
２）改行コード<br>をつけたい複数行を選択する。
３）Shift + Alt + I
４）すべての行末にカーソルが点滅するので
５）<br>を記入する
６）最後の行の末尾でEnterキーを打つ。

指定範囲のタグ<　>を文字列に変換する

１）VS Codeー 変換エリアを範囲指定
２）EditーReplaceー「２」の部分をクリック
３）置換する文字列を記入＜　＆ｌｔ；　　＞　＆ｇｔ；
４）「３」の部分をクリック

台本

警察官　これが銀行口座凍結通知書です。

自分　　そんなに早く発行されるものなんですか。銀行口座が凍結されたら生活できなくなります。何とかできませんか。とても困ります。

審議官 「こちらは審査会のカトウカズヤです。ドコモショップ新宿南口店で、宮原さん名義の携帯から大量の不正メールが送信されています。放置するとすべての通信が停止されてしまいます。０８０－２４８２－６９４６は宮原さんの携帯ですか」

自分　　「いいえ違いますが、ちょっと待ってください、調べます・・・。 家族のでもないです。」

審議官 「分かりました。それでは新宿警察署の担当につなぎますから、これから申し上げる内容を伝えて、即刻被害届を受理してもらうようにしてください。では文面を言いますから、書きとってください。」

画像の位置情報をマップにピン止め

Google Photoで画像を開き、右上「！」インフォメーションiconをクリックする

画像に他の図形等を重ねる

****** htmlの記述 *******

　　　　<div class="overlay-container">
　　　　　　<img src="images/aa_top/121_9_5.jpg" alt="main-img">
　　　　　　<div class="text-overlay">
　　　　　　------- 重ねたい図形等------
　　　　　　　　<form action="./ksearch/ksearch.cgi" method="post">
　　　　　　　　　　<label for="site-search">
　　　　　　　　　　　　<input type="search" id="site-search" name="q" style="width:200px; height:40px;">
　　　　　　　　　　　　<button>検索</button>
　　　　　　　　　　</label>
　　　　　　　　</form>
　　　　　　----------------------------
　　　　　　</div>
　　　　</div>


****** cssの記述 *******

.overlay-container { /*親要素*/
position: relative;
display: inline-block;
}
.overlay-container img{
display: block;
width: 100%;
}
.overlay-container .text-overlay {
position: absolute;
top: 85%;
left: 50%;
transform: translate(-50%, -50%);
color:aqua;
font-size: 20px;
font-weight: bold;
padding: 10px;
}

コンテナwrapperの考え方


　　　　　.cont1 {　....　height: 35vh; /*このコンテナの高さを35％に*/}
　　　　　.container1 {　....　overflow: hidden; /*画像imgが大きすぎる部分は非表示にする*/}


フレキシブル　４カラムページ作成

例　「徒然なるまま」のページ

4カラム
1090px未満で３カラム
480px未満で２カラム
フレキシブル対応


　　<div id="wrapper">
　　　　<div class="col_4">
　　　　　　<div>
　　　　　　　　　ここにサムネイル画像とリンクを記入
　　　　　　</div>
　　　　</div>
　　</div>


　　

style cssは　875行目あたりに class "col_4"の記述

中央に♡マークが入った区切り線

　　htmlの記述　 <hr class="cp_hr07" />
　　cssの記述　.cp_hr07 と.cp_hr07::after

margin　　 padding　　 border

<div class="container2">
<div class="block1">

　　　　要素の中身１　背景色灰だけ指定　マージン（外部余白）がないのでボーダーに接している

</div>

<div class="block2">

　　　　要素の中身２　背景色青　マージン（外部余白）30ｐｘ指定　青帯の外側に30ｐｘの余白

</div>

<div class="block3">

要素の中身３　背景色橙　パディング（内部余白）　文字の周囲に20pxの余白　　マージンは０なので上の要素に接している

</div>