css学習のまとめ5(ホバーで色や影の変わるボタンの作成)

コメントを残す

1:ホバーで色が変わるボタンを作成する

HTML

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
 <div id="container">
   <button class="btn">Button</button>
 </div>
 </body>
 </html>

CSS

#container {
  text-align: center;
 }
 .btn {
  background-color: white;
  color: black;   border: 1px solid black;
  padding: 10px 40px 10px 40px;
  font-weight: 600;   cursor: pointer;
  margin: 50px 0;
  transition: color 0.3s ease 1s,
  background-color 0.3s ease 2s;  }  .btn:hover {
  background-color: black;
  color: white;
 }

※ポイント

transition: color 0.3s ease 1s,

background-color 0.3s ease 2s;

ここでアニメーションの指定をしている

続きを読む →

SCSSの基本(変数とネスト)

コメントを残す

SCSSでできること

共通の部分を変数で設定できて、変更する必要が出たときに共通部分が一括で変更できて便利

変数の設定方法の例:$cBlack: black;

$cBlack: black;

$cWhite: white;
.btn {

 background-color: $cWhite;

 color: $cBlack;

 border: 1pxsolid$cBlack;

 padding: 10px40px10px40px;

 font-weight: 600;

 cursor: pointer;

 margin: 50px0;

 transition: color0.3sease1s, background-color0.3sease2s;

&:hover {

 background-color: $cBlack;

 color: $cWhite;

 }

}

上のようにネストすることもできてコードが見やすくなる。

CSS学習のまとめ4(カフェのフロント作成)

コメントを残す

応用編

HTMLの記述

<!DOCTYPE html>
 <html lang="ja">
 <head>
  <meta charset="utf-8">
    <title>Ota Cafe</title>
     <meta name="description" content="Ota Cafeの公式Webサイトです。商品情報、店舗紹介、アクセス、会社情報など。">
     <meta name="keywords" content="Cafe, カフェ, コーヒー">
      <link rel="stylesheet" href="html5reset-1.6.1.css">
     <link rel="stylesheet" href="css/base.css">
   </head>
    <!-- header begin --> 
    <!-- 一番上の茶色の部分 --> 
     <header id="top">
      <body id="home">
     <h1>Cafe</h1>
       <nav>
     <!-- ナビバーの部分-->
       <ul class="clearfix">
         <li class="current">
          <a href="index.html">ホーム</a></li>
         <li><a href="#">商品情報</a></li>
         <li><a href="#">店舗紹介</a></li>
         <li><a href="#">アクセス</a></li>
         <li><a href="#">会社情報</a></li>
         <li><a href="#">お問い合わせ</a></li>
       </ul>
     </nav>
     </header>
     <!-- header end -->
      <!-- main begin -->
     <main class="clearfix">
       <div id="main_image">  
       <img src="images/cafe.jpg" alt="Ota Cafe">
       </div> 
  <!-- main_content begin -->
     <div id="main_content">
      <section id="info">
           <h2>お知らせ</h2>
           <!-- 説明リストを使ってみるliでもOK -->
           <dl>       
      <dt>2020年4月10日</dt>
             <dd>リニューアルオープンしました。</dd>
             <dt>2020年4月15日</dt>
             <dd>4/27（金）は設備メンテナンスのため休業いたします。</dd>
             <dt>2020年4月20日</dt>
             <dd>ゴールデンウィークは休まず営業いたします</dd>
           </dl>
         </section>
         <section id="campaign">
           <h2>キャンペーン情報</h2>
           <ul>
             <li>日頃の感謝を込めて、パスタ全品がいつもよりお得に！</li>
             <li>平日11時から14時までお得なランチタイムを実施中。</li>             <li>バイオリン演奏付きのスペシャルディナーイベントの早期予約受付中。</li>
           </ul>
         </section>
       </div>
       <!-- main_content end -->
       <!-- sidebar begin -->
       <!-- サイドバーの部分でダミー画像表示 -->
       <aside id="sidebar">
         <ul>
           <li>
             <a href="#">
               <img src="http://via.placeholder.com/300x200" alt="バナー1">
             </a>
           </li>
           <li>
             <a href="#">
               <img src="http://via.placeholder.com/300x200" alt="バナー2">
             </a>
           </li>
         </ul>
       </aside>
       <!-- sidebar end -->
     </main>
     <!-- main end -->
     <!-- footer begin -->
     <!-- フッターの部分 -->
     <footer>
       <ul> 
        <li><a href="index.html">ホーム</a></li>
         <li><a href="#">商品情報</a></li>
         <li><a href="#">店舗紹介</a></li>
         <li><a href="#">アクセス</a></li>
         <li><a href="#">会社情報</a></li>
         <li><a href="#">お問い合わせ</a></li>
       </ul>
       <!-- 著作権表示の部分 -->
     <small>© 2020 Cafe</small>
     </footer>
     <!-- footer end -->
   </body>
 </html>

CSSの記述

@charset "utf-8";
 body {
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
 } /* header 一番上の茶色の部分 */
 header {
  border-top: 8px solid #614226;
 }
 /*Ota Cafeの部分で中央寄せにする*/
 header h1 {
   font-size: 2.0em;
   margin: 40px 0 30px 0;
   text-align: center;
 } 
/*ナビバーの部分,横幅を940px,下の部分と30pxあける,●を消す*/
 header nav ul {
   width: 940px;
   margin: 0 auto 30px auto;
   padding-left: 0;
   list-style-type: none;
 }
 /*フロートレイアウトで155px,左寄せ,右に2pxあける,字は中央寄せ*/
 header nav ul li {
   float: left;
   width: 155px;
   margin-right: 2px;
   text-align: center;
 } 
/*最後の部分のマージンを0にしてお問い合わせの部分が下の段に行かないようにする*/
 header nav ul li:last-child {
   margin-right: 0;
 } /*ナビバーのフロートを解除する。内容を空に指定して、ブロックレベルに設定して、フロートを解除する*/
 .clearfix:after {
   content: '';
   display: block;
   clear: both;
 } /*ナビバーっぽくする背景茶色,テキスト白*/
 header nav ul li a {
   display: block;
   padding: 10px 0;
   text-decoration: none;
   color: #fff;
   background-color: #614226;
 }
 /*hover:マウスオーバーした時,active:クリックした時,現在表示しているところの背景を黒にする*/
 header nav ul li a:hover,
 header nav ul li a:active,
 header nav ul li.current a {
   background-color: #000;
 } /* mainの幅を指定している。940px */
 main {
   width: 940px;
   margin: 0 auto;
 }
 /*h2の指定。中央寄せにする*/ main h2 {
   font-size: 1.5em;
   margin-bottom: 50px;
   text-align: center;
 } /*下と間を空ける*/ #main_image {
   margin-bottom: 30px;
 } 
/*幅を600pxに指定してフロートレイアウトで左に位置させる*/
 #main_content {
   float: left;
   width: 600px;
 } 
/*幅を300pxに指定してフロートレイアウトで右に位置させる*/
 #sidebar {
   float: right;   width: 300px;
 } /*お知らせ,キャンペーン情報部分のボーダー部分をいい感じにする*/
 #home h2 {
   font-size: 1.5em;
   margin-top: 0;
   margin-bottom: 30px;
   padding: 5px 10px;
   text-align: left;
   border-bottom: 1px solid #614226;
   border-left: 10px solid #614226;
 } /*お知らせ部分コンテンツの部分の下と左を空ける*/
 #info dl {
   margin-bottom: 30px;
   margin-left: 20px;
 } /*フロートレイアウトの左部分にして、幅を8emに指定*/
 #info dt {   float: left;
   width: 8em;
 }
 /* 行間を指定 */
 #info dt,
 #info dd {
   line-height: 1.5;
 }
 /*●を消して行間と位置の指定*/ #campaign li {
   line-height: 1.5;
   margin-left: 20px;
   list-style-type: none;
 } /*マージンとパディングを0に指定*/
 /* sidebar */
 #sidebar ul {
   margin: 0;
   padding: 0;
 } /*●を消して下の間を開ける*/
 #sidebar ul li {
   margin-bottom: 20px;
   list-style-type: none;
 } /* footer部分文字を中央寄せ,字を白に指定,背景茶色に指定 */
 footer {   padding: 15px;
   text-align: center;
   color: #fff;
   background-color: #614226;
 } /*下の間を開ける*/
 footer ul {
   margin-bottom: 20px;
 } /*要素が平に横に並んでいくようにする*/
 footer ul li {
   display: inline;
 } 
/*色を白に指定*/
 footer ul li a {
   color: #fff;
 }
 /*通常時の下線を消す*/
 footer ul li a:link {
   text-decoration: none;
 }
 /*マウスオーバーとクリックした時下線を表示*/
 footer ul li a:hover,
 footer ul li a:active {
   text-decoration: underline;
 }

CSS学習のまとめ3(フロート)

コメントを残す

フロートレイアウトとは？

HTMLの記述

<!DOCTYPE html>
<html lang="ja">
  <head>
   <meta charset="utf-8" />
   <title>フロートの練習</title>
   <link rel="stylesheet" href="css/float.css" />
  </head>
 <body>
  <h1>フロートの練習</h1>
    <div id="wrap">
     <div id="box1">BOX1</div>
     <div id="box2">BOX2</div>
     <div id="box3">BOX3</div>
    </div>
 </body>
</html>

CSSの記述

#wrap {
  width: 100%;
}
#box1 {
  background-color: red;
  color: white;
  width: 70%;
  float: left;
}
#box2 {
  background-color: green;
  color: white;
  width: 30%;
  float: right;
}
#box3 {
  background-color: blue;
  color: white;
  clear: both;
}
このようになる

ポイントはまず<div id="wrap">で全体の幅を指定してあげる(width: 100%;)

次に横並びにしたい要素にfloatプロパティーを指定してフロートさせる

#box1(width: 70%;float: left;) #box2(width: 30%;float: right;)

clearプロパティでフロートを解除する

#box3(clear: both;)

ダミー画像を使う

https://placehold.jp/

↑こちらでダミー画像を生成できるので使います

その4に続く

CSS学習のまとめ2(セレクター)

コメントを残す

セレクターとは？

セレクター（どこの） {

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

下線の部分でセレクターには3種類ある

1:エレメント（要素）セレクター:　h1～h6,p,li,ul,ol,など

2:IDセレクター

HTMLの記述(テンプレートの部分は省略)

<p id="hello">こんにちは</p>

CSSの記述

#hello { 
 color:# blue; 
}

※HTMLではid=””で指定し、CSSは#をつける.ページ内で一意の名前をつけられ、そこにCSSを当てる

3:クラスセレクター

HTMLの記述(テンプレートの部分は省略)

<p class="hello">こんにちは</p>

CSSの記述

.hello {
  color:# blue;
}

※HTMLではclass=””で指定し、CSSは.をつける

続きを読む →

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タグ：画像を表示するときに使う

<link rel=”” href=””>head内に書きBootstrapやフォントオーサムを使うときなどお世話になる

<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>

実際に出力されるもの

その２に続く

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

コメントを残す

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

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

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

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

続きを読む →