木曜日, 9月 24, 2020

HTML_CSS_08 
コーディングはショートカットが命

HTML、CSSを作成しながら画面確認は色々面倒ですが、最低限の環境を整えれば意外とスムースに処理する事が出来ます。

上はモニターに対してピンクがCSSファイル、ブルーがHTMLファイル。そしてブラウザはHTMLファイルを表示しています。CSSとHTMLはWindowsデフォルト環境のメモ帳を利用して居ます。ここで重要なのは修正を行ったらCSS、HTMLのファイルでは必ず[Control S]で保存を実行する癖を付けます。そのままブラウザでリドロー[Control R]を実行します。これで修正箇所が反映された状態を直ぐに確認出来るようになります。CSS、HTMLのどちらも修正箇所は[Control S]で保存し、ブラウザ側で[Control R]しなければ反映されません。また、タイプミスが致命傷となるので、フォントサイズは18ポイントぐらいに設定しておくと良いでしょう。小さいとビリオドとカンマ、コロンとセミコロンなどの判別を見誤ってしまうことがあります。

更に可読性を重視したい場合はフォントをーんこうする方法もあります。


また、以下の様なテキストエディターを使うと自動的に色分けされてエラーを発見しやすくなります。

Atom(Windows、macOS、Linux)

Brackets(Windows、macOS、Linux)

Visual Studio Code(Windows、macOS、Linux)

Sublime Text(Windows、macOS、Linux)

サクラエディタ(Windows)

Notepad++(Windows)

TeraPad(Windows)

TCDW6709 
ご飯との相性はネバネバ三兄弟

納豆にキウイをいれてみたら意外といい感じでビックリ。ただし、ご飯との相性は微妙なので、ノンライスで食べるに限るです。ご飯との相性バッチリなのは、納豆、山芋、オクラを混ぜたネバネバ三兄弟ですね。

水曜日, 9月 23, 2020

HTML_CSS_07 
配置トラブルと調整

前回(05)の続きで、3行のキャッチコピーを<div id="content">の中に入力します。

<!-- index.html -->

<div id="content">

<h2>大自然に囲まれた素敵なお店です</h2> 

        <!-- 追加 -->

<p>素材を吟味した自然の味わいを大切にした<br> 

        <!-- 追加 -->

マスター自慢のパンとお菓子をお楽しみ下さい。</p> 

        <!-- 追加 -->

<div id="main_picture">    

</div>

</div>

<!-- index.html -->


Hタグ(<H1>~<H6>)はHeadingの略で、見出しを意味し< <H1>が最上位の大見出し。 Pタグ(<P>)はParagraphの略で、<P>~</P>で囲まれた部分がひとつの段落。



上は処理結果です。特に指定を指定内のもテキストは左上から表示されてしまいます。そこでセンター合わせにします。またタイトルに予め用意しているpng形式で背景が透明なロゴタイプを配置します。


ロゴイプの表示指定


<!-- index.html -->

<div id="header">

<img src="links/title.png"> 

     <!-- linksフォルダーにあるtitle.pngを表示-->

</div>

<!-- index.html -->


CSSで再設定したh2とpタグを利用

<!-- index.html -->

<div id="content">

<h2 class="main_text">大自然に囲まれた素敵なお店です</h2>

        <!-- CSSでClass指定したh2を利用 -->

<p class ="sub_text">素材を吟味した自然の味わいを大切にした<br>

マスター自慢のパンとお菓子をお楽しみ下さい。</p>

        <!-- CSSでClass指定したpを利用 -->

<div id="main_picture">

</div>

</div>

<!-- index.html -->



h2とpタグをCSSで再設定


/* rule.css */

h2.main_text {    /* main_textという名前のClass宣言 */

margin: 20px auto -5px;

font-size: 20px;

color: #ba08b0;

text-align: center;    /* センター合わせ */

}

p.sub_text {    /* sub_textという名前のClass宣言 */
margin-top: auto;
font-size: 14px;
color: #000000;
text-align: center;    /* センター合わせ */

}

/* rule.css */


処理結果はロゴタイプがセンター合わせになっていません。そこでCSSのheaderの設定を変更します。


/* rule.css */
div#header {
height: 80px;
width: 100%;
text-align: center;    /* テキストは中央 */
vertical-align: middle;    /* 縦方向は中央 */
background: #f8844e;
}
/* rule.css */

処理結果です。これで一応体裁が整いましたが、テキストの状況に下のmain_pictureの配置が影響されてしまうので、固定させることにします。


CSSで新規追加したボックスを宣言


<!-- index.html -->

<div id="content">

<div id="message">  

                <!-- 新たなボックスを宣言 -->

<h2 class="main_text">大自然に囲まれた素敵なお店です</h2>

<p class="sub_text">素材を吟味した自然の味わいを大切にした<br>

マスター自慢のパンとお菓子をお楽しみ下さい。</p>

</div>    <!-- 新たなボックスの宣言終了 -->

<div id="main_picture">

</div>

</div>

<!-- index.html -->


CSSに以下の命令を追加


/* rule.css */

div#message {

margin: 0px auto;

height: 120px;

width: 600px;

text-align: center;

vertical-align: middle;

background: #ffffff;

}

/* rule.css */

処理結果は隙間が発生してしまいました。これは恐らくmain_boxに対してのheaderの時とは異なり、配置すべきcontentの位置が複雑だからなのかもしません。そこでfloatで強制的にはいちしてみます。


/* rule.css */

div#message {

float: left;    /* 左合わせですが、rightで問題ありません */

margin: 0px auto;

height: 120px;

width: 600px;

text-align: center;

vertical-align: middle;

background: #ffffff;

}

/* rule.css */

処理結果です。隙間はなくなりましたが、今度はmain_pivtureがfloatに反応して食い込んでしまいました。そこでmargin指定で上の空きをお大きく取ることにしました。

/* rule.css */

div#main_picture {

margin: 135px auto;    /* 24pxから135pxに変更 */

height: 360px;

width: 480px;

background: #ffffff;

}

/* rule.css */

処理結果です。やっとまともな感じに成りましたが、テキストブロックが少し上過ぎるので調整します。


/* rule.css */

h2.main_text {

margin: 30px auto -5px;    /* 20pxから30pxに変更 */

font-size: 20px;

color: #ba08b0;

text-align: center;

}

/* rule.css */


処理結果です。これで問題解決です。あとは手バッグ用に指定したmessageぶろつくの白をオフにします。


/* rule.css */

div#message {

float: left;

margin: 0px auto;

height: 120px;

width: 600px;

text-align: center;

vertical-align: middle;

/*background: #ffffff;*/ 

 /* 削除せずにコメント文として残すことで後々修正が発生したときに便利 */

}

/* rule.css */

処理結果です。今回は個々までとします。個々までのHTMLとCSSのは以下の通りです。


<!-- index.html -->

<html lang="jp">

<head>

<title>森のお菓子屋さん</title>

<meta charset="utf-8"/>

<link rel="stylesheet" type="text/css" href="rule.css">

</head>

<body>

<div id="main_box">

<div id="header">

<img src="links/title.png">

</div>

<div id="side_menu">

<div class="menu_button">

</div>

<div class="menu_button">

</div>

<div class="menu_button">

</div>

<div class="menu_button">

</div>

</div>

<div id="content">

<div id="message">

<div class="main_text">大自然に囲まれた素敵なお店です</div>

<div class="sub_text">素材を吟味した自然の味わいを大切にした<br>

マスター自慢のパンとお菓子をお楽しみ下さい。</div>

</div>

<div id="main_picture">

</div>

</div>

</div>

</body>

</html>

<!-- index.html -->


rule.cssはこれで感性とします。以降はhtmlファイルの修正だけです。

/* rule.css */

@charset "UTF-8";

   

* {

margin: 0px;

padding: 0px;

}

    

body {

background: #edfd8e;

}


div#main_box {

height: 600px;

width: 800px;

background: #ff69b4;

margin: 0px auto;

}


div#header {

height: 80px;

width: 100%;

text-align: center;

vertical-align: middle;

background: #f8844e;

}


div#side_menu {

float: left;

height: 520px;

width: 25%;

background: #63dada;

}


div.menu_button {

margin: 24px auto;

height: 100px;

width: 100px;

background: #ffffff;

}


div#content {

float: right;

height: 520px;

width: 75%;

background: #4ff1ae;

}


div#main_picture {

margin: 135px auto;

height: 360px;

width: 480px;

background: #ffffff;

}


div#message {

float: left;

margin: 0px auto;

height: 120px;

width: 600px;

text-align: center;

vertical-align: middle;

/*background: #ffffff;*/

}


h2.main_text {

margin: 30px auto -2px;

font-size: 20px;

font-weight: bold;

color: #ba08b0;

/*text-align: center;

vertical-align: middle;*/

}


p.sub_text {

margin-top: auto;

font-size: 14px;

color: #000000;

/*text-align: center;

vertical-align: middle;*/

}

/* rule.css */