Study record

未経験2児ママのプログラミング勉強記録

HTML/CSS_ll

opacity

要素の中身全てを透明にする

rgba

背景色のみを透明にする

rgbaは4つの値をコンマ(,)区切りで入れる。
4つ目の値が透明にする度合いで、0 ~ 1の数値で指定する(値が小さいほど透明になる)。

/* 0.5が透明度 */
.box{
   Background-color:rab(255,147,30,0.5);
}

rgb

rgbは色の指定の仕方の1つで、3つの値の組み合わせで表示する色を決める。
色を指定するときは今まで使用してきた#ffffffのような記法を使ってもrgbを使っても構わない。

/* 以下は同じ色 */
.box{
   Background-color:rab(255,147,30);
}
.box{
   Background-color:#ff931e;
}

transitionとhover

transitionを使うと「変化の対象」や「変化にかかる時間」などを指定しアニメーションをつけることができる。
「変化の対象」にはcolorなどのプロパティを指定するが、allを指定すると全てのプロパティに適用出来る。

/* all=変化の対象,1s=変化の時間 */
Div{
Transition:all 1s;
}
Div:hover{
 Background-color:red;
}

position: absolute;

HTMLの要素同士は通常重なって表示されることはないが、position: absolute;を使うと、要素同士を重ねて表示することが出来る。
サイト全体の左上部分を基準とし、そこからの位置をtopleftを用いて指定する。また、rightbottomを併用することも可能。

:active

セレクタactiveを用いることで、要素がクリックされている間だけCSSを適用することができる。
セレクタ:activeというように指定する。

画面上に要素を固定する

position: fixed;を使うと、常に要素を画面上の指定した位置に固定させておくことができる。
位置は、topleftrightbottomを使って指定する。

<img src=“aaa.png”
    class=“fixed-img”>

.

.fixed-img{
        position:fixed;
        top:10px;
        left:40px;

要素の重なりの順序を指定する

  • z-indexプロパティは、要素の重なりの順序を指定する。
  • z-indexは整数値で指定し、値が大きいほど上に表示される。
  • z-indexプロパティは必ずpositionプロパティと併用する必要がある。


 /* <header>のpositionプロパティをfixedに、topを0に指定→固定 */
header {
  position:fixed;
  top:0;
  
  /* z-indexを10に指定→最前面 */
  z-index:10;
}

HTML/CSS_ll ボタン

Progate「HTM &CSS中級編」ボタン作成時に覚えておきたいポイントがあったのでメモしておく。

インライン要素

  • aタグなど
  • width・height:指定できない
  • margin・padding:左右のみ指定できる
  • 配置:横並び

ブロック要素

  • width・height:指定できる
  • margin・padding:指定できる
  • 配置:縦並び

インラインブロック

ブロック要素とインライン要素の特徴を併せ持つ。

  • width・height:指定できる
  • margin・padding:指定できる
  • 配置:横並び

display

aタグは初期状態でインライン要素になっているが、displayプロパティを使うと、インラインブロック要素に変更することができる。
displayプロパティはblock(ブロック要素), inline-block(インラインブロック要素), inline(インライン要素)を指定することができる。

クリック時にボタンがへこんで見えるようにする

  • box-shadowを
noneにする
  • position: relative;と
topによって影の分だけ位置を下げる

.

/* messageクラスのボタンをクリック時にへこんで見えるように */
.message:active{
  box-shadow:none;
  position:relative;
  top:7px;
}

HTML/CSS_l

Progateで「HTM &CSS 初級編」をした。見返したいポイントがあったのでメモしておく。

class

要素にはclassを使って名前をつけることができる。classをつけることにより、それぞれの要素を識別し別々のCSSを適用することができる。
class名でCSSを指定する場合、先頭に「.」が必要なので注意する。

    <div class="header"> </div>

.

    .header {
      background-color: #26d0c9;
      color: #fff;
      height: 90px;
 }

ブロック要素・
インライン要素

HTMLの要素には、改行される要素と改行されない要素がある。

前後で改行が入り、親要素の幅一杯に広がる要素をブロック要素という。

  • ブロック要素:div要素、h1要素、p要素
  • インライン要素(改行されない要素):span要素、a要素

paddingとmargin

  • padding:borderの内側の余白を作る
  • margin:
borderの外側に余白を作る
padding_margin

ボックスモデル

border, padding, marginは、ボックスモデルという概念に基いている。

HTMLの全ての要素には、border(初期状態では表示されない)があり、その外側の余白はmargin, 内側の余白はpadding。

input,textarea

  • input要素:1行のテキスト入力を受け取るための要素(終了タグが不要)
  • textarea要素:複数行のテキスト入力を受け取るための要素


学習ロードマップ|PHP独学

はじめに

このブログはPHPを独学で習得するための学習内容を記録していく。

なぜPHPを学習するのか
  • 多くの企業が開発に採用している言語のためスキルを身に付けておきたい
  • メジャーなプログラミング言語のため情報が多く学習を進めやすいと考えた
短期目標

PHPスキルを身につける(その他付随する知識も含めて)

長期目標

PHPエンジニアとして就職する

学習ロードマップ

現在、学習ロードマップは下記の流れを考えている。

実際に学習を進めていく中で不足している知識を補えるようにプラスαする予定だ。

  1. HTML/CSS/JavaScriptの基礎を学ぶ
  2. PHPの基本文法を学習
  3. PHPの環境構築
  4. ファイル操作・HTTPリクエストを学習
  5. データベースを学習
  6. フレームワークに触れる
1.HTML/CSS/JavaScriptの基礎を学ぶ

PHPの文法に入る前に、まずはHTML/CSS/JavaScriptの基礎を(基本的な記述方法や文法がわかる程度に)学習する。

ポイントPHPでサーバー側の処理を行っても、実際にユーザーの目に触れるのはブラウザ側の処理。最終的に出力されることになるHTML/CSS/JavaScriptの基礎が理解できないと、PHPを使いこなすことはできない。

2.PHPの基本文法を学習

基本的な文法を理解する。抑えておきたいポイントは下記だ。

  • PHPの宣言、基本的な記述方法
  • 変数の書き方
  • 関数の書き方
  • データ型、演算子
  •  if文
  • 配列、連想配列
  • ループ処理の書き方
3.PHPの環境構築

オンライン学習サービスProgateを用いて学習予定なのでこの環境構築はひとまずいらない。学習を進めていくといずれ必要になるのでチャレンジする予定。

PHPの環境は「Windows」「Mac」「Linux」といった色々なOS上への構築が可能。

環境構築の方法は主に3つ。

  1. PHPApacheをインストールする(WindowsLinuxなど)
  2. MAMPを使う(Mac
  3. XAMPPを使う(WindowsLinuxなど)

初心者にオススメの構築方法は、OSがMacなら1.MAMP、OSがWindowsLinuxなら3.XAMPPでの構築です。MAMPやXAMPPはWebサーバ・データベース・プログラミング言語がセットになっているパッケージソフト。インストールするだけで全て使えるようになるため、初心者にも始めやすい構築方法。

4.ファイル操作・HTTPリクエストを学習

ファイル操作とは、データを読み込み、書き込みをすることで、データを保存したり、利用する時に必要となる処理。ファイル操作を行うときは必ず「開く」→「閉じる」という流れが必要。

  • ファイルを「開く」:fopen
  • ファイルを「読み込む」:fgets または ファイルを「書き込む」:fwrite
  • ファイルを「閉じる」:fclose

HTTPリクエスとは、Webページを取得する際に、サーバーに対して「ページを表示して!」と要求すること。

  • GET送信
  • POST送信

これら2つのリクエストを使い分けることにより、たとえば検索機能を作ったり、お問い合わせフォームやログインフォームを作ることが可能。

これらは実務で頻出する知識なので、ログインフォームなどを実際に1から実装してみて、GET送信、POST送信の概要と違いを掴んでみることをおすすめ。

5.データベースを学習

データベースの知識は、バックエンドエンジニアには必須の知識と言える。

データベースは、送信した情報を保存したり情報を取り出したりすることができる箱のようなもの。特に、一般的に使われているのがリレーショナルデータベース(RDB、表の結合が可能なDB)で、その管理システムの代表的なものがMySQL

MySQLを使用して、PHPでのデータベースの使い方について学んでいく。

6.フレームワークに触れる

フレームワークとは、効率的に開発を進めるためにさまざまな処理を自動化、パッケージ化したソフトウェア。フレームワークを使うことで、1からサービスを構築するよりも、格段に早く効率的に開発が可能になる。

代表的なPHPフレームワーク

  • Laravel(ララベル)
  • CakePHP(ケイクピーエイチピー)
  • FuelPHP(ヒューエルピーエイチピー)

中でも全世界で最も人気が高いPHPフレームワークは、『Laravel(ララベル)』。まずはこのLaravalに触れてみる予定。