青色プログラム。

0からプログラミングを学ぶ記録

【HTML・CSS #2】全体構造を理解する

 

こんにちは、人をダメにするビーズチェア Lサイズを買ってみました、すごく良い...変な姿勢で腰がダメにならないように気を付けます。

 

今回は、HTMLの全体構造の基礎を学びました。

私の復習になりますが、レイアウト部分は検索して例など実際にどんな感じに書いてどのようになるのかを見て理解しないとタグだけだと理解度に天と地ほどの差があるかもしれません。


 

<head> ページに関する情報

<body> 実際に表示したい内容

HTML要素の中には<head>要素と<body>要素が必要
 <!DOCTYPE html>
 <html>
  <head>
   ¦
  </head>
  <dody>
   ¦
  </dody>
 </html>

 

※ブラウザに表示されるのは<body>のみ

 

・HTMLバージョンを指定 DOCTYPE宣言

どのHTMLバージョンで記述されたファイルなのかを冒頭で宣言する

 最新のHTML5 <!DOCTYPE html>

 

 

<head>要素 

webページの設定に関する情報を書きます。

 <head>
  <meta charset="utf-8">
  <title>青色プログラム。</title>
  <link rel="stylesheet" href="stylesheet.css">
 </head>

 

文字コードの指定 <meta>

文字コードを指定すると文字化けを防げる

HTMLで推奨されている文字コードの場合 <meta charset="UTF-8">

 

・ページのタイトル <title>

ブラウザのタブに表示されてるやつです。

 

CSSの読み込み <link rel="stylesheet.css">

 href属性で読み込むCSSファイルを指定します。

 

 

<body>要素

第一回のページで書いた事は、この<body>要素に書いていく事になります。

第一回 → 【HTML・CSS #1】基礎を学ぶ


 

 レイアウト

 ・<div>要素

要素をグループ化する事の出来るタグです。『division』の略

 水平方向の位置をまとめて指定したり、指定した範囲にスタイルシートを適用したりすることがでる。

 

・floatプロパティ 『froat: left;

要素を横並びにする事が出来ます。

left(左寄せにする) right(右寄せにする)

 

・paddingプロパティ 『padding: 数値;

上下左右に余白を指定する事が出来ます。

値を2つ指定 → padding: 30px 50px;(これで上下に30px.左右に50px)

値を3つ指定→上記のpxを増やす(上、左右、右)

値を4つ指定→さらに増やす(上、右、下、左)

 上、下、左、右だけの場合:padding-top padding-bottom padding-left padding-right

 

・boderプロパティ 『border: 数字px 種類 色;

要素の上下左右に枠線を付ける事が出来ます。

特定の場所のみならborder-top   -bottom  -left  -right

 

・marginプロパティ 『margin: 数字px;

余白、paddingはborderの内側なので外側の余白。


 

・<span>要素

本文の一部にCSSを適用させたい場合

例:HTML
 <h1>
  ブログのタイトルは</span>青色プログラム。<sapn>です
 </h1>
  CSS
 span {
  color: #ff0000;
 }

 これで 青色プログラム。 の部分のみにCSSが適用されます。


 

ブロックレベル要素、インライン要素

・ブロックレベル要素

イメージとしてはブロック

<h1>見出しや<p>段落などは1つのブロックとして認識される。

 

・ インライン要素

ブロックレベル要素の内容の要素で文章の一部

段落のなかの一部を強調するような使われ方をする<strong>要素など

<strong>の例:今日は、いい天気ですよ (いい天気の部分)


 

・input要素 <input>

一行のテキスト入力を受け取る為の要素。この要素には終了タグが不要

 

・textarea要素 <textarea></textarea>

複数行のテキスト入力を受け取る為の要素

 

・type属性、balue属

 <input type="submit" value="保存">

 <input>要素にはtype属性を指定でき、submitを指定すると入力欄ではなく送信ボタンになる。

value属性でボタンのテキストを変更する事が出来る。


 

とりあえずここまで、実際に学習サービスで全体見ながらコードを書いてみると混乱してきます・・というか最初は全員なるでしょこれ!大体CSSの書き方のせい

独学で理解し白紙から複雑なレイアウトを作れる人なんてどれくらいいるのでしょうか..学習法を教えて欲しいです。ここらあたりの実際のコードの書き方は何度も見て理解していこうと思います、スクールでパッと理解出来ればいいんですけどね。

例えると機械の部品を勉強しても組み立て方を理解しなければ形にならないよねって話

頑張ります!

【HTML・CSS #1】基礎を学ぶ

 

第一回、『HTML』『CSSの記事です。

5月からのスクールに向けて独学で勉強している物の復習として書いていきます。

 

この記事を見る人は、 ある程度の知識がある人だと思うので確認程度にゆるく見てください

知らない、勉強中の人はこんなのあるんだ程度にどうぞ!


 

HTMLハイパーテキストマークアップ・ランゲージ)

HTMLはプログラミング言語ではなくマークアップ言語といい要素の集まりで出来ており、どのように見えるか動くかを表現するためのタグで囲まれたまとまり

 

<h1></h1> 見出し h2→h6となるほどに文字の大きさが小さくなる

<p></p> 段落 <h2>や<p>タグで囲むとテキストは改行して表示される

<!-- コメント --> コメント 表示されなくなりメモ用に

<a href="URL">ここに文字</a> リンク 『スペース、" "』忘れずに

<img src="画像のURL">  画像を表示  img(イメージ)、src(ソース)

<li></li> リスト <ul>要素で囲むと黒点が付き <ol>だと数字が付く

  • こんにちは
  • こんばんは
  • おやすみ
 <ul>
 <li>こんにちは</li>
 <li>こんばんは</li>
 <li>おやすみ</li>
 </ul>

囲む方の要素を親要素<ul>、囲まれる要素<li>を子要素と呼ぶ。 

 

インデント 入れ子構造の要素がある場合、複雑でも分かりやすくなります。

上の例でいうと<li>を改行と左の空き、必須ではないが大事。

 

このタグは100個以上ある模様。


 

CSS(カスケーディング・スタイル・シート)

CSSはHTMLの要素に色.大きさ.配置などを指定しページをデザインする言語です。

ウェブページのデザインやレイアウトなどの見栄えですね!

 

・文字の色を変える 『color

例:HTML <h1>おはようございます</h1> の場合(あいさつ部分は適当)

  CSS

 h1{
 color: 色を指定;
 }
※インデントを忘れずに、コロン『:』セミコロン『;』も必要なので注意! 
※色は『色 コード』で検索
 
 
 ・文字の大きさを変える 『font-size
例:HTML <h1>おやすみなさい</h1> の場合
  CSS
 h1{
 color: 色を指定;
 font-size: 数字px;
 }
※px(ピクセル)単位で指定
 
 
・文字の種類を変える 『font-family
例:HTML <h1>HELLO WORLD</h1>
        <p>HELLO WORLD</p>
  CSS
 h1{
 font-family:フォント名;
 }
 p{
 fomt-family:"Avenir Next";
 }
※色んなフォントを指定する事ができ、名前は覚える必要は無い
※スペースがある二つ目のフォント名みたいな場合、ダブルクォーテーションで囲む
 
 
・コメント 『/*  */
HTMLと同じくCSSファイルにもコメントが出来る
 h1{
  /* 文字の色を赤色に指定 */
  color: #ff0000;
 }
※書いてるコードは例です。コメントは/* */の部分
 
 
・背景色を変える 『background-color
例:HTML <h1>今日はいい天気</h1>
  CSS
 h1{
  background-color: 色を指定;
 }
 
 
・横幅、高さを変える 『width』『height
 width 幅・・・ウィドゥス、ウィズなど
 height 高さ・・・ハイト
例:HTML <h1>これは飼っている犬と猫です</h1>
        <img src="画像のURL">
  CSS
 h1{
 width: 数字px;
 height: 数字px;
 background-color: 色を指定;
 }
 img{
 width: 数字px;
 height: 数字px;
 }
 

 
・特定の要素にCSSを適用する 『class
HTMLで書いた<li>要素みたいにリストが複数ある場合すべての色が変わるので、
要素にclassを使って名前を付け、それぞれの要素を識別し別々のCSSを適用する。
例:HTML
 <ul>
 <li class="selected">こんにちは</li>
 <li>こんばんは</li>
 <li>おやすみ</li>
 </ul>
  CSS
 .selected {
 color:red;
 }
※classでCSSを指定する場合、先頭にドット『.』が必要なので忘れずに。
これでリストの・こんにちは だけを赤色に出来た。
 
※classに同じCSSを適用する
上記HTMLの <li>こんばんは</li> にも同じ名前のclassを付けた場合、・こんばんは も赤色にする事が出来ます。

 

・まとめ

という事で『HTML』『CSSの基本を学びました。

もし誤字があればすみません、かなり見やすく書いたつもりですが記事作成に時間が掛かってしまい長いコードになってくると細かくまとめられないかもしれません...。

でも時間を掛けた分、良く身につけられた気がします。

 

プロフィール絵を描いてみた。

プロフィールの画像に困ったので描いてみました。

このブログの看板娘という事に!名前はブログIDのカトレアさんで(適当)

 

使った物:フリーペイントツール『FireAlpaca』と2000円のペンタブ『FAVO F-430

やっぱり長々と書いてるだけのブログでも少し目に止まる物があるだけで印象が生まれ記憶に残りやすく堅苦しさも和らぐと思うんです。

 

好きな色の青色PC作業のブルーライトカットメガネ個性出す為にリボン

f:id:aocattleya:20180414100215j:plain

・作業風景

f:id:aocattleya:20180416025648j:plain

 

分かる人には分かると思います誰かに似ていると思った方、流石にプロでは無いのでベースに目と輪郭だけ某AIのyoutuberから借りています。

二次創作OKだし自分もスポンサーになってるほどのファンなので細かい事は(ry 


 

プラグラミングの方は5月からスクールなので、それまでに独学で勉強しています。

 

とりあえず初めのHTMLCSSのところをやったのですが英単語が難しい!

例えば『height』『width』など、日本語読みしずづらい単語です、

何度か書いたので覚えてきていますが色んな要素に組み合わせていくには大変ですね慣れって感じ、やってる事自体は楽しいのでどんどん頑張ります!

 

※height(高さ)width(幅)

 

ブログ開始

 

ブログを始めてみました!

ハンドルネームはとりあえず書きやすく好きな色のaoにしてみました。

 

● PCを触ってる事が好きで、この好きを仕事に生かしたい

自分は好きという力の原動力はこの世で最も強いものだと思っており、つまりIT業界にここ最近すごく興味を持ちプログラミングスクールに5月から通う事にしました。

 

正直、もっとこの業界を早く知って学んでいたらと後悔していますが、まだ20台前半!と他に負けないくらい頑張って行こうと思います。

現在、スクール前に初歩的な物から独学で勉強しているのですが人生で一番勉強が楽しく感じています。

 

f:id:aocattleya:20180416030830j:plain

MacBook Air 買ってみた。

このブログの更新と勉強の為に活躍してもらいます!


 

・中学生時代

現在は完全に削除してどんな物だったかあまり覚えていませんが、中学生の時に一度ブログを作った事があり、伸びる為の知識を集めて試行錯誤していた記憶があります。

 

例えば、

タイトルは命、検索されるワードで作る

ブログ名でどんなサイトか分かる

日記ブログは伸びない

相互リンクやランキングサイトなどに登録しリンクを増やす

書く記事の需要度、どんな人が見るのかを想定する

沢山あり細かい物だと『右利きが多いのでリンクバーは右に置く』など今思うと中学生なのに良くやってたと思います部活のテニス部で副キャプテンもやってましたから、好きな事をやる原動力って凄い!

 

初めは趣味でやっていたゲームや日常の日記だったのですがランキングやアクセス数にとらわれてイチ早く情報を毎日更新する感じになり

アメブロのカテゴリ順位一桁に入っていたあたりで受験と更新に追われ閉鎖、余裕の無さに鬱一歩手前だった気がします。今ではトラウマ

最高で月間36万PVだったか、なおブログで稼ぐなんて中学生の私には1mmも興味が無かったので1円も稼いでいません。


 

このブログではあまり気にせず、更新頻度も不定期でIT業界に足を踏み入れた自分が取り入れた物を記録して0から挑戦する日記を書いていければと思います。

 

よろしくお願いします!