HTMLとCSS (中級編）②
こんにちは。一様、ProgateのHTML&CSSレッスンは全て終え、大まかに理解したような感じですが、やはり実際に間違えながら自分でサイトを作ってみる事が一番自分の物になるような気がします・・・今日は前回の続き、HTML＆CSS（中級編）のまとめです。
★text-align → テキストの配置プロパティーでインライン要素とインラインブロック要素の配置指定。（CSS)
例： text-aligan:left; （左寄せ）
text-aligan:center;（中央寄せ）
text-align:right; （右寄せ）
※上記の様にテキストやボタンのようなインライン要素やインラインブロック要素には
text-align:center; を使うが、containerクラスの様に広い範囲を囲うようなブロック要素には → magin: 0 auto;'を使う。
★アイコン表示方法
- まずは沢山のアイコンが用意されているfont awesomeでアイコン取得可能。実際に自分のサイトにアイコンを表示したい場合はFont awesomeのCSSファイルを読み込む。以下が読み込みか方 ↓
<head> <link rel="stylesheet" href="font awesome.css> </head>
- <span>タグにfaクラスとfaアイコン名を指定する。(Font awesomeにアイコンごとのクラス名が載っている。）
例：<span class="fa fa-facebook"></span>
<span class="fa fa-twitter"></span>
★opacity → 要素の中身を全て透明にする。
★raba → ＊要素の背景のみ透明にする。
＊4つの値なっていて、最後の値が透明度を表す値
＊コンマでそれぞれの値を区切る
※ raba学ぶ前に理解しておくべきrgb（色指定：3つの値の組み合わせ）
例：① background-color:rgb(225,147,30);
② background-color:#ff931e;
①と②は同じ色！
★transition
- 多くの場合hoverと組み合わせて使う。
- アニメーションをつける事が出来る。
- 変化の対象や変化にかかる時間などの指定ができる。
- 変化の対象にcolorなどのプロパティーを使うがall指定すると全てに適応される。
例：trasnsition: all 1s;
all=変化の対象
1s=変化の時間
★line-height → 行間指定プロパティーで値が大きいほど行間が大きくなる。
例： line-height: 10px;
以上、これでHTML&CSS（中級編）は終わりです。次回は上級編です。つづく～
HTMLとCSS (中級編）①
こんにちは。おばちゃんですが順調にHTML中級編学習も完了し、なかなか楽しくお勉強させて貰っています。それでは以下がサマリーです。
★まずはWebページ全体のレイアウトにheaderとfooterを用いた一般的な方法。(HTML)
例： <body>
<header></header>
<div class="top-wrapper"></div>
<footer></footer>
</body>
★Webページトップ部分のレイアウト。（CSS)
- background-image:url(画像URL); → 背景画像を指定
- background-size:cover; → 1枚の画像で表示範囲を埋め尽くす。
★要素を中央に配置する（CSS)
- marginの左右をautoにすると画面の中央に配置できる
- marginをauto指定する際には必ず幅（width）を指定する。
- margin autoでは上下は指定できない。
例：.box{
width:300px;
margin: 0 (上下） auto（左右）;
}
★透明度や文字の間隔を調整
- opacity → 要素を透明するプロパティーで、透明度は0.0（完全に透名） 0.1（完全に不透明）。
- letter-spacing → 文字の間隔を指定するプロパティー
★<a>はボタンを作る要素だが、<a>はインライン要素のためwidthやheightが指定できない。
ブロック要素 (<div>など）
- width, height（指定可）
- margin, padding（指定可）
- 配置 （縦並び）
インラインブロック要素
- width, height（指定可）
- margin, padding（指定可）
- 配置 （横並び）
インライン要素（<a>タグなど）
- width, height（指定不可）
- margin, padding（左右のみ指定可）
- 配置 （横並び）
★ display → <a>タグは初期状態でインライン要素になっているが、displayプロパティーを使う事でインラインブロック要素に変更する。
display
- block（ブロック要素）
- inline-block （インラインブロック要素）
- inline （インライン要素）
★複数クラスの設定は半角スペースで区切る。(HTML)
例：<div class="btn blue"></div>
★レイアウトを整える (CSS)
:hover → カーソルを乗せた時に色を変える。
例： div:hover{
backfround-color"red"
}
★border-radius:値px; → ボタンの角を丸める。（CSS)
例：.box{
border-radius: 10px;
}
以上、今日はここまで。毎回の事ですがこうして要約してアウトプットする方が時間がかかる・・・それでは、to be continued....
HTMLとCSS（初級編）②
こんにちは。休日の雨・・・たまにはいいですね。こうして一日中コンピューターの前にいても罪悪感がわかないので。
HTMLのページデザイン（色・大きさ・配置など）として使うCSSの基本的な式は↓
h,div,a,span,etc....要素 ｛色 : 赤;}
尚、CSSでもブラウザに表示されないメモのタグは→ /*コメント */ です。
ちなみにHTMLは→ <!-- --コメント-- -->
１）実際の色、大きさ、配置などのプロパティは以下↓
color = 色
font-size = フォントサイズ
font-family = フォントの種類 （※フォント名にスペースがある場合は " フォント名 " をダブルクォーテーションで囲む）
background = 背景
background-color = 背景色
width = 横幅
height = 高さ
float = 要素を横並びにする
２）HTML内の特定の要素にCSS適用する方法
例：<li></li>内の一つだけを赤くしたい場合
<li class="selected"></li> (HTML)
.selected{ ~~~~~~} (CSS) ※Class名の前にドットをつける
classにはドット有でタグにはドット無（CSS)
３）HTMLの全体構造
まずははじめにHTMLバージョン宣言→ <DOCTYPE.html>
<html>には<head>と<body>が必要！
<head> : ページに関する情報
<head>ブラウザには表示されない</head>
<head>内には3つの要素を指定
①文字コード指定 <meta charset="utf-8">
②ページタイトル指定 <title></title>
③CSSの読み込み指定 <link rel="stylesheet" href="stylesheet.css">
4）レイアウトは<div>要素で構成
例： <div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
※タブ名＋tabキーで補完される。
5）ヘッダーの作り方： ヘッダーロゴとヘッダーメニューの作り方。
ヘッダーロゴ： <div class="header-logo">ヘッダーロゴ名</div>
ヘッダーメニュー： <div class="header-list">
<ul>
<li></li>
</ul>
</div>
※<li>+noneで黒点がなくなる
CSS で li { list-style:none;}
6）余白の調整： CSS内で padding(top, bottom, left, right) を使う。
例：padding: 20px(top) 30px(right) 10px(bottom) 70px(left) ※時計回り
padding: 20px(top&bottom) 30px(right&left)
７）footerを作る
入れ子のセレクト方法：.header-list li { }
★leader-list の li にのみCSSが適用される。
8）mainの構造
mainはcopy-container, contents, contents-formで構成されている。
文中の一部にCSSを適用したい場合は<span></span>タグを使う。
★HTMLには
① ブロック要素： <div>, <p>
② インライン要素： <span>, <a>
9）コンテンツ部分：各言語目に使うcontents-item
例： <div classs="contents-item">
<img src=" リンク ">
<p>名前</p>
</div>
10）ボーダーを作る
CSSでボーダーの太さ、種類、色を指定する。
例： border-top:10px(f太さ) solid(種類) color(色)
※それぞれをスーペースで区切る
borderの内側→ padding
外側→ margin
11) ボックスモデルはborder, padding, marginから出来ていて（CSS)
※全ては時計回りで表示
例）margin: 20px(top) 10px(right) 20(bottom) 10px(left)
12) 問い合わせフォームの作り方
レイアウト
<imput>: 1行入力用 ※終了タグ無
<textarea></textarea>: 複数行入力欄
13）送信ボタンは→ <input type="submit">
例）<input type="submit" valu="保存”>
※valuをつける事でブラウザ上のボタンには送信ではなく保存が表示される。
14）複数のセレクトに同じCSSを指示するには( , ) で区切る。
例）h1, p, { color, font-size, }
なんだか、私だけがわかる学習ノートになってしまいましたが・・・私的にはこうしてアウトプットした事でかなり学習になりました。（自己満足でごめんなさい・・・）
HTMLとCSSの初級編はこれで終わりです。次はHTMLとCSSの中級編になります。
to be continued...
HTMLとCSS（初級編）①
こんにちは。早速私がProgateで学んだHTML・CSSの初級編①のまとめは以下の通りです↓
HTMLとは？
HyperText Markup Languageの略で、ウェブページを作成するために開発された言語です。 現在、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されています。
CSSとは？
Cascading Style Sheetの略で、HTML文章の視覚的表現をコントロールする役割を果たします。具体的にはテキストの色を変更する、表の枠線の太さを変える、リスト項目の間を広げる等が可能になります。（簡単に言うと、HTML要素に対して色・大きさ・配置などを指定し、ページデザインを行う）
<h></h>: Headingと言う意味で、Web上の見出しに使うタグ。<h1>～<h6>まであり数字が大きくなるにつれWeb上の見出しの大きさが小さくなる。（HTML)
例→<h1>見出し</h>
<p></p>: Paragraphと言う意味で、Web上の見出し以外に使うタグ。（HTML)
例→<p>見出し以外に</p>
<a></a>: Anchorと言う意味で、リンクを作成するために使うタグ。(HTML)
例→<a href="URL">Google</a>
<img>: Imageと言う意味で、画像表示タグ。※終了タグ無 （HTML)
例→<img src="URL">
<li></li>: Listと言う意味で、リストを作るときに使うタグ。（HTML)
＊この<li>タグを<ul></ul>で囲むと文頭に黒点が付く。
＊この<li>タグを<ol></ol>で囲むと文頭に数字が付く。
＊<ul>や<ol>＝親要素で<li>が子要素。
＊親要素と子要素を区別するためにインデント（字下げ）をする。字下げ方法はtabキーを使う。
例→<ul>
<li>リスト</li>
</ul>
今日はここまで、インプット（学ぶ）ことよりもこうしてアウトプット（要約して書き出す）方に時間がかかる・・・これにもなれるのかな！？
to be continued.....
まずは自己紹介です。
こんにちは。
私、海外在住、44歳の会社勤務18年目にして
私の人生このままボーとして終わらせて良いのだろうか！？
このままではAI時代に取り残された過去の人になってしまうのでは！？
もう誰かのために仕事をすることはアホらしい！
自分の好きな時間に自分のやりたい仕事をやりたいだけしてお金を稼ぎたい！
こんな思いからここ数カ月間、仮想通貨やら、ブログやら、翻訳やらオンラインで出来る事を試した結果、たどり着いたのがプログラミングでした。こんな44歳のおばちゃんに果たして出来るのか出来ないのかはやってみなくちゃわからないのでとりあえず、やってみる事にしました。
そこでおばちゃんの私が効率良く理解を深めていく方法としてインプット（学んで）してアウトプット（吐き出す）と言う方法が一番良いのではと言う自己判断に基づいて、このブログは要するに私の学習ノートという事です。
- プログラミングって何？：コンピュータープログラムを作成することにより、人間の意図した処理を行うようにコンピューターに指示を与える行為である。
実際に、私達が使っているいる沢山の物がプログラミングされていることにより便利に使いやすくなっていることが良くわかる。そしてこのコンピュータにお願いする処理を伝える言語が存在する。そのプログラム言語の代表的なものが→ Java、C、C++、PHP、Pyton、C#、Objective-C などなどまずは想像を絶するほどの種類のプログラム言語のがある。
そこで私のような初心者がオンライン上で学べるサイトが以下です。
頭使い過ぎでこめかみ痛いわ～ 今日はここまで。
