経済学・統計学 オンライン指導

大学院・編入試験、公務員試験他資格試験、統計検定、卒論・単位取得対策等

HTML 本文(main body <div class="main"></div>)の構成例

2020-04-26 11:36:21 | 日記

次のような三部構成にします。

(div class="copy-container")(/div)   ①見出し

(div class="contents")(/div)      ②詳しい説明

(div class="contact-form")(/div)    ③問合せフォーム

 

➀ 見出し

----- HTML -----

(h1)ようこそ(span)弁当屋(/span)へ(h1)      見出し

(h2)地元食材を使った安心弁当を食べよう(/h2)   小見出し

----- CSS -----

.copy-container h1 {
   font-size:140px;
}

.copy-container h2 {
   font-size:60px;
}

.copy-container span {              (span)で囲った文字色の変更
   color:#ff4a4a;

}

② 詳しい説明

----- HTML -----

(h3 class="section-title") 選べるメニュー (/h3)

(div class="contents-item")

  (img src="https://...")   画像貼り付け

  (p) カレー (/p)      メニュー表示

  (img src="https://...")

  (p) 焼肉 (/p)

  (img src="https://...")

  (p) ラーメン (/p)

(/div)

----- CSS -----

.contents {
height:500px;
}

.section-title {               「選べるメニュー」に下線を入れる
border-bottom: 2px solid #dee7ec;
}
.contents-item {               メニューをヨコ並び・左詰めにする
float:left;
}

③問合せ

----- HTML -----

(div class="contact-form")
        (h3 class="section-title")お問い合わせ(/h3)
           (p)メールアドレス(必須)(/p)
           (input)                 入力欄
           (p)お問い合わせ内容(必須)(/p)
           (textarea)(/textarea)           入力欄
           (p)※必須項目は必ずご入力ください(/p)
           (input class="contact-submit" type="submit" value="送信")  送信ボタン
(/div)

----- CSS -----

input, textarea {
    width: 400px;
    margin-top:10px;     外側余白
    margin-bottom:30px;
    padding:20px;      内側余白
    font-size:18px;
    border:1px solid #dee7ec;
}

 

コメント

HTMLとは

2020-04-23 23:42:43 | 日記

⓪ WEBページ全体の構造

----- HTML -----

(!DOCTYPE html  HTML5)

(html)
   (head)    WEBページの設定情報(表示されない)

      (meta charset="utf-8")

      (title) Hello (/title)

      (link rel="stylesheet" href="stylesheet.css")

   (/head) 

   (body)    表示される部分

      (div class="header")(/div) ①ヘッダー

      (div class="main")(/div)  ②メイン

      (div class="footer")(/div)   ③フッター

   (/body) 
(/html)

----- CSS -----

body {          body全体の設定

   font-family: "Avenir next";

}

li {

   list-style: none;   リストから「・」をとる

   float: left;

}

 

※よく使われるタグ

(h1)(/h1) 見出し

(p)(/p) 段落


(a href="https://~")(/a)  リンク
(img src="https://~")  画像ー終了タグ不要

(li)(/li) リストの一要素
(ul)(/ul) リストー「・」表示
(ol)(/ol) リストー付番

(!-- --) コメント用タグ

 

➀ヘッダー

----- HTML -----

(div class="header-logo")今日のメニュー(/div)

(div class="header-list")

 (ul)  

  (li)カレー(/li)

  (li)ラーメン(/li)

  (li)焼肉(/li)

 (/ul)

(/div)

----- CSS -----

.header-logo {

   padding: 20px; 「今日のメニュー」の上下左右に余白追加

}

.header-list li {

   float: left;    ヨコ並び・左詰め

}

 

 

③ フッター

----- HTML -----

(div class="footer-logo")弁当屋(/div)

(div class="footer-list")

 (ul) 

  (li)会社概要(/li)

  (li)採用情報(/li)

  (li)お問合せ(/li)

 (/ul)

(/div)

----- CSS -----

.footer {      footer全体の指定

 background-color: #2f5167;

 color: #fff;

 height: 120px;

 padding: 40px;

}

.footer-logo {    footer-logoの指定

 font-size: 32px;

 float: left;     左詰め

}

.footer-list {     footer-listの指定

 float: right;    右詰めヨコ並び

}

.footer-list li {      footer-list li の指定

 padding-bottom: 20px;

}

 

コメント

CSSとは

2020-04-23 23:21:07 | 日記

CSS (cascading style sheet) とは、HTMLの要素に対して大きさ配置などを指定し、ページをデザインするための言語です。
HTMLだけでは文字と画像が羅列されているだけですが、CSSを組み合わせて、多様なレイアウトを作るることができます。

 

要素(<h1><h2><p>等)やクラスに対して { } の中で属性を指定します。

(例)文字色を赤色に 

   h1 {

    color: #ff0000;

   }  

{ }の中で様々な属性を指定できます。        

 font-size: 10px;      文字の大きさ

 font-family: serif;     文字の種類(フォント)

 background-color: #ffd800;  背景の色

 width: 600px;       幅

 height: 100px;       高さ

 

 

コメント

プログラミング学習法

2020-04-17 18:43:15 | 日記

素人がエンジニアになるためにとりあえず何をやるかというと、これはもう Progate 一択だと思います。

メジャーな言語はひととおり揃っています。本を読むより早いです。

しかも基礎編なら無料、応用・実践編でも月額税込1078円です。気合い入れてやるなら以下のメジャー言語を3ヵ月くらいでマスターできるでしょう。

 

[フロントエンド言語]

 HTML&CSS  ウェブサイト表示

 JavaScript     ウェブサイトの機能拡張

 jQuery                JavaScriptのライブラリ

 

[サーバーサイド言語]

 Ruby      Web開発用

 Ruby on Rail5  Rubyフレームワーク

 PHP     Web開発用

 Java     汎用的プログラミング言語

 Python    科学演算・機械学習にも強み

 SQL                   データベース言語

 

コメント

高校数学Ⅱ:三角関数

2020-04-12 16:06:17 | 日記

数Ⅱで学習する三角関数の公式一覧です。

たくさんありますが、➀と③から残りの式は全部出てきます。

加法定理

➀ sin(α+β) = sinα cosβ + cosα sinβ     「サイタコスモス コスモスサイタ」

② sin(α-β) = sinα cosβ - cosα sinβ     

③ cos(α+β) = cosα cosβ - sinα sinβ     「コスモスコスモス サイタサイタ」

④ cos(α-β) = cosα cosβ + sinα sinβ

⑤ tan(α+β) = (tanα + tanβ) / (1 - tanα tanβ)    ➀÷③

⑥ tan(α-β) = (tanα - tanβ) / (1 + tanα tanβ)    ②÷④

倍角の公式

⑦ sin 2α = 2sinα cosβ

⑧ cos 2α = cos²α - sin²α                                         = 2cos²α - 1 = 1 - 2sin²α 

⑨ tan 2α = 2tanα / (1 - tan²α)    

和積・積和の公式

⑩ 2 sinα cosβ = sin(α+β) + sin(α-β)       ➀+②

⑪ 2 cosα cosβ = cos(α+β) + cos(α-β)      ③+④

⑫ 2 sinα sinβ = -cos(α+β) + cos(α-β)       -③+④

⑬ sinA + sinB = 2 sin (A+B)/2 cos (A+B)/2     ⑩より α+β=A, α-β=B ⇔ (A+B)/2 = α, (A-B)/2 = β

※ sinA - sinB = 2 cos (A+B)/2 sin (A+B)/2

⑭ cosA + cosB = 2 cos (A+B)/2 cos (A-B)/2     ⑪より

⑮ -cosA + cosB = 2 sin (A+B)/2 sin (A-B)/2     ⑫より

コメント