「Programming note」カテゴリーアーカイブ

CSS学習のまとめ1(概要とWebfont)

コメントを残す

CSSとは？

Cascading style Sheetsの略

文字の色やサイズ、レイアウトなどを指定できる

HTMLで書かれた構造化された文章のスタイルを指定するための言語

HTMLは文章構造、CSSは見た目と分けるのが常識になっている。

CSSの書式

セレクター（どこの） {

プロパティ(なにを): 値 (どうする);

}

CSSの組み込み方による優先順位

・インライン＞内部参照、外部参照

不具合の温床になるので基本的には
外部参照(外部ファイルにCSSを記載する)を使おう

色の指定
いろいろな指定方法がある16進数表記が多いそう

HTMLの記述

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Document</title>
   <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
<body>
  <h1>CSSで色が変わります。</h1>
</body>
</html>

<link rel="stylesheet" type="text/css" href="style.css" />

↑CSSを読み込む設定

↓フォルダ内の配置図

CSSの記述

h1{
 color: #FF0000;
 color: #F00;
 color: rgb(255,0,0);
 color: rgb(100%,0%,0%) ;
 color: red;
}

このように表示されます

続きを読む →

HTML学習のまとめ2(お問い合わせフォーム作成)

コメントを残す

formタグについて

書式:<from action=”#” method=#post”></form>

action:どこにデータを送信するか。送信された情報を処理するプログラムのURL(サーバーサイド。Rubyなどで記述)

method-フォームを送信する際にブラウザーが使用するHTTPリクエストメソッド(get,post,など)

HTTPリクエストメソッドをさらに詳しく

ブラウザからサーバに対して依頼する処理の種類

HEAD,GET,POST,PUT,DELETE,CONNECT,OPTIONS,TRACE,PATCH等がある。

利用頻度が高いのはGetとPost

お問い合わせフォームを作成してHTMLの理解を深めます。

フォーム作成1

作りたいもの

続きを読む →

HTML学習のまとめ1(HTMLの概要)

コメントを残す

HTML(Hyper Text Markup Languege)とは？

文章構造を記述する仕組みで、
Webページの内容を記述するためのマークアップ言語

分からないことで詰まったら公式リファレンスのMDNを参照する

Google cromeの検証(F12ボタンを押す)も利用する。

文法のチェックができる→https://validator.w3.org

divとspanの違い(概要)

・CSSのdisplayプロパティの値の違い

– div → display:block

– span → display:inline

・幅と高さを指定できるか？

div　→　できる

span →　できない

前後に改行が入るか？

div　→　入る

span →　入らない

属性(Attribute):

タグに何かしらの設定をできるもの(オプションを付けられる)

<a href=””></a>:リンクを表示したいときに使う

<img src=””>imgタグ：画像を表示するときに使う

<p class=””></p>こちらはCSSで

などよく見るもの

表(テーブル)について

<table border="1">
  <tr><!-- tabale row.テーブルの横一行 -->
    <th>姓</th> <!-- table header テーブルの見出しセル -->
    <th>名</th>
  </tr>
  <tr>
    <td>山田</td><!-- table data cell. テーブルのデータセル -->
    <td>太郎</td>
  </tr>
  <tr>
    <td>田中</td><!-- table data cell. テーブルのデータセル -->
    <td>花子</td>
  </tr>
</table>

実際に出力されるもの

<!-- thead・・・table headerの略。テーブルのヘッダ行を定義
tfoot・・・table footerの略。テーブルのフッタ部分を定義
tbody・・・table bodyの略。テーブルのボディ部分を定義。 -->
  <table border="1">
    <thead>
      <tr>
       <th>ヘッダー1</th>
       <th>ヘッダー2</th>
      </tr>
    </thead>
  <tbody>
    <tr>
      <td>データ1</td>
      <td>データ2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>フッター1</td>
      <td>フッター2</td>
    </tr>
 </tfoot>

実際に出力されるもの

<h2>セルの結合</h2>
<h3>横に結合</h3>
<table border="1">
  <tr>
   <th colspan="3">横に結合</th>
  </tr>
  <tr>
   <td>データ１</td>
   <td>データ２</td>
   <td>データ３</td>
  </tr>
</table>

実際に出力されるもの

<h3>縦に結合</h3>
<table border="1">
  <tr>
    <td rowspan="3">縦方向に結合</td>
  <td>データ1</td>
   </tr>
  <tr>
   <td>データ2</td>
  </tr>
    <td>データ3</td>
  </tr>
</table>

実際に出力されるもの

<h2>caption</h2>
<table border="1">
  <caption>
    キャプション
  </caption>
  <tr>
   <td>データ１</td>
   <td>データ２</td>
   <td>データ３</td>
  </tr>
</table>

実際に出力されるもの

その２に続く

オリジナルブログ作成の自分用チートシート

コメントを残す

1:LAMPの基礎知識について調べたいとき

https://suzutukiblog.com/index.php/2020/10/14/lamp1/

2:Linuxのコマンドについて調べたいとき

https://suzutukiblog.com/index.php/2020/05/09/lamp2/

続きを読む →

LAMP環境でブログを作成して学んだこと9(まとめ２)

コメントを残す

オリジナルブログの開発のまとめ

1:CentOS7のインストールとSSH公開鍵認証設定

VPSの標準OSとしてよく採用されているCentOS7で開発した。
VPSにCentOS7をインストールして起動
VPSにログインして、SSHクライアント(MACはターミナル)を使いSSH(Secure Shell)というプロトコルを使って設定作業を行う。
OSをアップデートする(yum update)
rootユーザーだとセキュリティー上マズイので一般ユーザーを作る
一般ユーザーをwheelグループに入れてsudoコマンドで管理者権限を使えるようにする。
SSH公開鍵認証設定する。
SSHのポート番号22から49152~65535の動的使用ポート間に
許可を変える(今回は55555とした)
パスワードリスト攻撃,ブルートフォースアタックなどを防ぐために
空白のパスワード,rootログイン,パスワードログインを禁止する
ファイアウォールでのPort55555の接続の許可設定をする
Port55555のみ接続を許可したいのでsshの許可設定を消去する

2:Apacheのインストールと設定

続きを読む →

LAMP環境でブログを作成して学んだこと8(まとめ)

コメントを残す

そもそもなぜLAMP環境で開発したのか？

おさらいLAMPは以下のものでWordpressも含みます。

L: Linux　　・・・OS(CentOS7)
A: Apache　・・・Webサーバ　(Apache 2.4)
M: MySQL　・・・データベース　(MySQL 5.7)
P: PHP　　・・・プログラミング言語　(PHP 7)
+Wordpress・・・ブログソフトウェア

1:OS（基本ソフトウェア）⇒「Linux」

サーバーでよく使われるOS。オープンソースで無償利用できる
OSがインストールされることで、サーバーはサーバーとして起動することができるため。

続きを読む →

LAMP環境でブログを作成して学んだこと7(保守運用)

コメントを残す

※ご注意！情報が古くなっており(PHPバージョンなど)、うまく動作しない場合があります(追記)

1:さくらのVPSを使ったサーバーの保守運用

サーバーを保守・運用していくには、セキュリティ情報を収集して、迅速に対応することが重要。
セキュリティー対策を怠ると、情報漏えいにつながったり、犯罪の踏み台として使われる恐れがある。

日本語でセキュリティ情報を入手する

信頼性が高い主な情報源

JPCERT コーディネーションセンター
情報セキュリティ対策活動を実施
公式サイトhttps://www.jpcert.or.jp/
Japan Vulnerability Notes
脆弱性対策情報ポータルサイト
公式サイトhttp://jvn.jp/
「IPA 独立行政法人情報処理推進機構」
日本におけるIT国家戦略を技術面、人材面から支えるために設立。
公式サイト https://www.ipa.go.jp/security/index.html

2:アプリケーションをアップデートする

続きを読む →

LAMP環境でブログを作成して学んだこと6(SSL証明書設定)

コメントを残す

さくらのVPS環境からの独自ドメインブログ作成の概要

※ご注意！情報が古くなっており(PHPバージョンなど)、うまく動作しない場合があります(追記)

10:SSL証明書設定

httpsに対応することでサーバーとユーザー間の通信が暗号化される
suzutukiblog.comはドメイン名(このサイト)

sudo vim /etc/httpd/conf.d/blog.suzutukiblog.com.conf

　 #以下のように記述

<VirtualHost *:80>
DocumentRoot /var/www/html
ServerName suzutukiblog.com
</VirtualHost>

apachectl configtest

#Syntax OKと出ればOK

sudo systemctl restart httpd

#再起動して設定を反映

certbotでApacheとCentOS7を選択

sudo yum install certbot python2-certbot-apache

sudo certbot --apache

ブラウザでhttps://各自購入したドメイン名.comとなっていればOK
続きを読む →

LAMP環境でブログを作成して学んだこと5(リポジトリのインストール)

コメントを残す

さくらのVPS環境からの独自ドメインブログ作成の概要

※ご注意！情報が古くなっており(PHPバージョンなど)、うまく動作しない場合があります(追記)

8:EPEL,remiリポジトリのインストール

リポジトリとはソフトウェアが格納されているデータベースのようなもの
EPELリポジトリ,Remiリポジトリ
mysql,PHPの新バージョンを集めているリポジトリ

EPELリポジトリのインストール

sudo yum install epel-release

remiリポジトリをインストール

sudo yum localinstall https://rpms.remirepo.net/enterprise/remi-release-7.rpm

9:PHPのインストール

続きを読む →

LAMP環境でオリジナルブログを作成して学んだこと4(Apachインストール)

コメントを残す

さくらのVPS環境からの独自ドメインブログ作成の概要

※ご注意！情報が古くなっており(PHPバージョンなど)、うまく動作しない場合があります(追記)

６：Apacheインストール方法と設定(利用できるApache(httpd)を確認とインストール)

yum list available | grep httpd
sudo yum install httpd

#apache立ち上げ

sudo systemctl start httpd
systemctl status httpd

#active(running)となっていればOK

httpで使う80とhttpsで接続する時に使う443ポートを開ける

sudo firewall-cmd --add-service=http --zone=public --permanent
sudo firewall-cmd --add-service=https --zone=public --permanent

#設定を反映

sudo systemctl restart firewalld

#http httpsが許可されているのを確認

sudo firewall-cmd --list-all

ここでブラウザに各自のIPアドレスを入力し、ApacheのテストページになっていればOK

#OS再起動の時自動で起動するようにする

sudo systemctl enable httpd

#念の為確認

sudo systemctl list-unit-files -t service | grep httpd

htmlディレクトリにapacheユーザーと
webgroupに所属するreimを読み書き実行できるようにする

cd /var/www/
ls -la

表示されるhtmlディレクトリの中にhtmlファイルを保存することでWebサイトを公開できる。
パーミッションがrootになっているのを確認
グループを追加する(ここではwebgroupとする)
続きを読む →

月	火	水	木	金	土	日
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28

CSSとは？

CSSの書式

HTMLの記述

CSSの記述

formタグについて

お問い合わせフォームを作成してHTMLの理解を深めます。

フォーム作成1

作りたいもの

HTML(Hyper Text Markup Languege)とは？

divとspanの違い(概要)

属性(Attribute):

表(テーブル)について

実際に出力されるもの

実際に出力されるもの

実際に出力されるもの

実際に出力されるもの

実際に出力されるもの

1:LAMPの基礎知識について調べたいとき

2:Linuxのコマンドについて調べたいとき

オリジナルブログの開発のまとめ

1:CentOS7のインストールとSSH公開鍵認証設定

2:Apacheのインストールと設定

そもそもなぜLAMP環境で開発したのか？

1:OS（基本ソフトウェア）⇒「Linux」

※ご注意！情報が古くなっており(PHPバージョンなど)、うまく動作しない場合があります(追記)

1:さくらのVPSを使ったサーバーの保守運用

日本語でセキュリティ情報を入手する

2:アプリケーションをアップデートする

10:SSL証明書設定

httpsに対応することでサーバーとユーザー間の通信が暗号化される suzutukiblog.comはドメイン名(このサイト)

#以下のように記述

#Syntax OKと出ればOK

#再起動して設定を反映

8:EPEL,remiリポジトリのインストール

EPELリポジトリのインストール

remiリポジトリをインストール

9:PHPのインストール

６：Apacheインストール方法と設定(利用できるApache(httpd)を確認とインストール)

httpsに対応することでサーバーとユーザー間の通信が暗号化される
suzutukiblog.comはドメイン名(このサイト)

　 #以下のように記述