独学でプログラミング

独学でプログラミングを勉強します

WordPressの勉強

「HTMLとCSS やりたくない病」を発症し、

しばらく他のことを勉強していました。

図書館で借りてきた「WordPress Perfect Guidebook」です。

3日がかりで今日読み終わりました。

WordPress Perfect GuideBook 4.x対応版

WordPress Perfect GuideBook 4.x対応版

 

内容は基本的な操作の説明が中心で、使い方はアメブロはてなブログに似ています。

ですが、そのことをSEの方に話すと、こんなアドバイスを頂きました。

WordPressのようなソフトには流行り廃りがあるので、今なんでもかんでも手を出してパンクするよりは、まずは基礎となるWebライティングとHTML、CSSをきちんと勉強した方がいい。

とのことでした。

確かにそうですよね。色々情報を集めるうちに、「アレも必要だ、コレも必要だ」となり、PhotoshopIllustratorにも手を出していたので頭がおかしくなりそうでした。

まずは基礎をしっかりと固めたいと思います。

HTMLとCSSの勉強には、オライリー社の本がオススメとのことです。根本から理解できて幅広く深い知識が得られるそうです。とても難しそうですが、今読んでいる本が終わったら読みたいと思います。お高めの本ですが、図書館でも借りられるみたいでとてもラッキーです。

入門 HTML5

入門 HTML5

 

 

先に進まない…

HTML、CSSの勉強を一気にやり過ぎたのか

ここ数日、どうしても続きを勉強する気が起きず、

本を見るのも嫌な状態でした。

今日は代わりに図書館で借りてきた

  • プロになるためのWebデザイン入門講座
  • WordPress Perfect Guide Book

を読んでいました。

 

こちらは、主にPhotoshopIllustratorの説明になります。

昔、別の業種の仕事でCADを使っていたので

取っ付きやすかったです。

 

WordPress Perfect GuideBook 4.x対応版

WordPress Perfect GuideBook 4.x対応版

 

こちらの本は、WordPressの基本的な設定や操作について、説明されています。

無料ブログをやっている人なら誰でも理解出来る程度の内容だと思います。

 

どちらもまだ途中までしか読んでいませんが、

時々ふと、「この歳になって 今頃何やってるの?こんなことしてて役に立つの?」

という雑念が浮かんできてしまいます。

 

持病がある→在宅ワークがやりたい→Web系かな?

という動機で突然始めた勉強なので

この道が正しいのか、ちゃんとお仕事があるのかも分からず。

不安は色々ありますが、そのあたりも含めて勉強していきたいです。

cleafixでボックスを横に並べる?!

今日は、新しい本に挑戦しました。

HTML5&CSS3デザインブック」です。

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)
 

ですが、最初からつまづいています。

<div>で縦に並べたボックスを横に並びかえる方法について書かれているのですが

  1. 親要素にoverflowを適用するやり方
  2. cleafixというテクニックを使うやり方

があり、昨日まで読んでいた本では1のやり方が紹介されていましたが、

この本では2のやり方が載っています。

ですが、イマイチ分かりません…。

流れは、

  • 1. 横に並べたいボックスをグループ化する

<div class="box1">

BOX1

</div>

 

<div class="boxA">

<div class="box2">

BOX2

</div>

 

<div class="box3">

BOX3

</div>

</div>

 

<div class="box4">

BOX4

</div>


f:id:orange_mint:20181003195029j:image

 

  • 2. グループ化したボックスを横に並べる

.box2  {float: left}

.box3  {float: left}


f:id:orange_mint:20181003195352j:image

 

  • 3. box4が入り込まないようにする

.boxA:after  {content: "";

                       display: block;

                       clear: both}

.box2             {float: left}

.box3             {float: left}


f:id:orange_mint:20181003195720j:image

  • 4. box2とbox3の横幅を指定する

.boxA:after  {content: "";

                       display: block;

                       clear: both}

.box2            {float: left;

                      width: 50%}

.box2            {float: left;

                      width: 50%}


f:id:orange_mint:20181003200526j:image

 

だそうですが、

3の工程がイマイチ分かりません。

.boxA:after  {content: "";

                       display: block;

                       clear: both}

  • 「:after」とは?
  • 「display: block」でブロックレベルにして、何をしている?そもそもブロックレベルとインラインの違いがあまりよく分かっていない
  • 「clear:both」とはどういう意味?

あと、4の工程の

「width: 50%」というのは、親要素のboxAの幅に対して50%という意味だと思われます。

 

やはり、「いちばんやさしいHTML5&CSS3」を先に読み終えてからこの本に入るべきでした。

明日からまた「いちばんやさしい」に戻ります。

CSS3の勉強

秋にも花粉症ってあるのでしょうか?最近くしゃみが止まりません。

昨日と今日は「いちばんやさしいHTML5&CSS3の教本」のchapter5を一気に読みました。

かなり難しいですが、一度ドットインストールでCSS3の講義を聞いたので、少しは理解出来たかもしれません。

ですが、いくつか分からないところもありました。

いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方 (「いちばんやさしい教本」シリーズ)
 

 

疑問点

  • ブロックレベルとインラインの違いがイマイチよく分からない
  • displayプロパティとfloatプロパティがよく分からない(displayプロパティはパンくずリストなど小さいものに使用、floatプロパティは大きなものに使用とのこと)
  • positionプロパティの、relative(相対配置)とabsolute(絶対配置)、fixed(固定位置)がそれぞれなんとなくしか分からない

分かったこと

  1. CSSは、HTMLで書かれた文書を装飾したりレイアウトを施すための言語
  2. CSSは、「セレクタ(どこ)」、「プロパティ(何を)」、「値(どうする)」で構成される(例︰p {  color: #ff0000;  font-size: 20px; })
  3. CSSを記述する場所は色々ある(インライン(タグの中に書く)、エンベッド(head要素内のstyle要素の中に書く)など)けれど、CSSを外部ファイルとして扱い、HTMLファイルから参照する「リンク」がよく使われている
  4. リンク方式でCSSを適用すると、1つのCSSを複数のHTMLに適用することができ、メンテナンスが楽になる 
  5. セレクタにはいくつか種類がある
  6. タイプ(要素)セレクタは、HTMLのタグ名をそのまま指定。同じ要素すべてが対象となる。
  7. IDセレクタは、「#+ID名」で指定。主にサイト全体の骨格を形成するような指定に使用。
  8. クラスセレクタは、「.(ピリオド)+クラス名」で指定。
  9. 子孫セレクタ(ピンポイントで指定したい時)、複数セレクタ(異なる要素に対して同じ装飾をしたい時)などもある。
  10. セレクタは、全体から細部へと絞り込むように指定していく(ex. タイプセレクタ→ID・クラスセレクタ→子孫セレクタ)
  11. 同じプロパティが存在する場合、優先順位は「link要素<style要素<インライン指定」となる。
  12. 書いた場所が同じの場合、優先順位は「タイプセレクタ<クラスセレクタ<IDセレクタ」となる。
  13. 文字関連の一部のプロパティ以外は、親から子へスタイルが継承されない。強制的に継承や優先順位を変えたい場合は、「inherit」で強制的に継承、「!important」で強制的に優先順位を上げる。
  14. 文字サイズを設定するには「font-size」プロパティを使用する。
  15. 相対単位は、親要素のサイズに応じてサイズが決まり、px(ピクセル)、%(パーセント)、em(エム)などがある。
  16. 絶対単位は、親要素のサイズには影響されず、指定した値はどんな環境でも均一に見える。mm(ミリメートル)やcm(センチ)、in(インチ)などがある。
  17. フォントの太さを指定するには「font-weight」プロパティを使用する。400を基準にとした±100の値や、boldなどのキーワードで指定する。
  18. 文字の間隔を指定するには、letter-spacingプロパティを使用する。
  19. テキストに上下線や打消し線を付けるには、text-decorationプロパティを使用する。
  20. 文字の位置揃えをするには、text-alignプロパティを使用し、値にleft、center、rightを指定する。
  21. 文字のインデントを指定するには、text-indentプロパティを使用する。
  22. 行間を指定するには、line-heightを使用する。値には単位を付けないことが多い。
  23. 色を指定するには、colorプロパティを使用する。RGB指定、RGBA指定「rgba(赤、緑、青、不透明度)」、HSL指定、HSLA指定「hsl(色相、彩度、明度、不透明度)」がある。
  24. Adobe社が無料で提供している「Adobe Color CC」を利用すると便利
  25. 配色時は色のコントラストに気をつける。画面を白黒印刷してみるとチェックしやすい。
  26. ボックスモデルは、内容(コンテンツ)、パディング、ボーダー、マージンで構成されている。
  27. マージンで、隣合う要素との距離を設定する。(ex.  「margin: 10px 20px;」で上下10px、左右20px)
  28. パディングで、要素の内側の余白を調整する。
  29. ボーダーで、要素の四辺に枠線を付ける。(ex. 「border: solid 1px #8b7348;」左から線種、太さ、色)
  30. 要素の横幅は、widthプロパティで指定する。
  31. 要素の高さはheightプロパティで指定する。自動調整されるので指定しないことも多い。
  32. ボックスのサイズは、左右のマージン+左右のボーダー+左右のパディング+要素の幅(width)で決定する。
  33. Webページのレイアウトは、1カラム、2カラム、3カラム、それ以上がある。
  34. Webサイトは、固定幅か可変幅のどちらかで作成する。
  35. 固定幅はどの環境でも同じデザインになり、幅の単位はpxで主にパソコン向けのページで使用する。
  36. 可変幅は、ブラウザの表示幅に合わせて変動し、幅の単位は%で主にスマホ向けのページで使用する。
  37. 縦方向に並んでいる要素を横並びにしたい時、floatプロパティを使用する。
  38. floatプロパティは、left、right、noneの3つの値を指定する。親要素には、overflowプロパティを指定する。
  39. displayプロパティでインライン、ブロックレベルを調整する。
  40. インラインの要素は、改行を半角スペースとして認識してしまいレイアウトしにくいので、パンくずリストなどの小さなレイアウトに使用し、大きなレイアウトにはfloatプロパティを使用する。
  41. ポジションを使ったレイアウトでは、数値で座標を指定する。
  42. positionプロパティには、relative(相対配置)とabsolute(絶対配置)、fixed(固定配置)がある。

 

沢山覚えることがあって疲れました。でも使いこなせるようになったら面白そうです。

今日は早く寝ます。

HTML5の勉強

「いちばんやさしいHTML5&CSS5の教本」を先週から読んでいて、chapter4まで読み終わりました。

ドットインストールの動画で勉強した所をさらに詳しく勉強できたので良かったです。

chapter5からはCSS3についてです。

疑問点

とても分かりやすかったのですが、

イマイチよく分からないところがいくつかあります。

  • div要素とsection要素、aside要素の違い(それぞれどこにどう使うかがイマイチ分らない)
  • figure要素はどんな時に使うのか?ただimg要素を書くだけではダメなのか?
  • id属性はどういう所に付けるべきなのか?付ける名前もどうやって考えればいいか分からない
  • 入力フォームを作る時のtype属性、name属性、id属性、value属性、それぞれがどういう役割なのか混乱中

理解できたこと

  1. HTMLでWebページ(1枚)の内容を記述する。
  2. CSSでHTMLを装飾する。
  3. Webページ同士が互いにリンクし合い集まったものをWebサイトという。
  4. Webサイトの目的や構成をしっかり考えてから、HTMLを書き始める。
  5. HTMLの1行目は、Doctype宣言 「!DOCTYPE html」と書く。
  6. HTMLの2行目以降は、「<>」(タグという)で囲まれた要素を書き込んでいく。
  7. <html>と</html>の間に、head要素とbody要素を書く
  8. head要素は機械に伝える情報、body要素は人間に伝える情報を書く
  9. head要素の中に書くことは、文字コード「<meta charset="UTF-8>」、文書のタイトル「<title>文書のタイトル</title>」、CSSのリンク「<link rel="stylesheet" href="css/style.css">」
  10. body要素では、まず骨格を作り、その後内容を書き込んでいく
  11. body要素の骨格は、ヘッダー、メインビジュアル、メインエリア、サイドバー、フッターなど
  12. 最初に各Webページの共通部分を作り、後に複製して各ページをアレンジしていく
  13. ディレクトリとはデータのあるフォルダのこと
  14. パスはデータのあるフォルダの場所を表し、絶対パス相対パスがある
  15. 1つのHTML文書内でID名は1回、クラス名は何度でも使える
  16. ol要素は順番のあるリスト、ulは順番のないリスト
  17. グローバルナビゲーションはリンクを張ったリスト(ul)
  18. パンくずリストもリンクを張ったリスト(ol)
  19. リンクは「<a href="">」で張る
  20. 画像を貼る時は「<img src="">」でデータの場所とデータ名を指定、「alt=""」で画像の説明を書く
  21. 表を作る時はtable要素を使い、「<tr></tr>」で1行を、「<th></th>」で見出し列、「<td></td>」でデータ列を書く
  22. フォームとは、ユーザーがサーバを通して管理者に情報を送れる仕組み。
  23. フォームは、form要素を使い、「action=""」で送信先を指定、「method=""」で通信方式を指定。
  24. フォームは、「<form></form>」の中でinput要素を使い、各部品について指定。「type=""」で部品の種類、「name=""」で部品の名前を指定など。

 

などなど。

 

まだ理解しきれていない部分もありますが、これから、CSS3について勉強していきたいと思います。

 

プログラミングの勉強をはじめます。

自己紹介

20代女性です。

趣味は、ハーブ栽培と散歩です。

夢は、アメリカやニュージーランドに行くことと、

自分の庭でバラや果物を育てることです。

ちなみにパソコンはほとんど分かりません笑

 

プログラミングの勉強をはじめたきっかけ

持病があり、体力がないので

在宅で仕事ができるようになりたいと思い

プログラミングの勉強を始めることにしました。

(目指しているのは、ちょっと怪しげな(?)在宅ビジネスとかではなくて、

企業と契約してリモート勤務をするイメージです)

 

何を勉強するか

HTML5

・CSS3

JavaScript

PHP

WordPress

 

何で勉強するか

・ドットインストール

 

・書籍

1.「いちばんやさしいHTML5&CSS3の教本」

2.「HTML5&CSS3 デザインブック」

1→2の順番で勉強しようと思います。

早速買ってきました。

f:id:orange_mint:20180930104929j:plain

 

ほかにも、Amazonで評判の良かった本を

図書館で借りてきました。

 

f:id:orange_mint:20180930104713j:plain