20191112のHTMLに関する記事は14件です。

投稿日：2019-11-12T21:09:09+09:00

初心者によるプログラミング学習ログ 158日目

100日チャレンジの158日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

158日目は、

おはようございます
158日目

Udemyで架空のwebサイトコーディング

メンターさんの課題やろうと思ったら眠くなったからやめた#早起きチャレンジ #100DaysOfCode #駆け出しエンジニアとつながりたい
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) November 11, 2019

　 Tweet
Qiitaで続きを読む

投稿日：2019-11-12T18:58:11+09:00

[jQuery]コピペで簡単！ホームページによく使うアニメーション集

jQueryって何？

jQueryはJavaScriptで書かれたライブラリ（使用頻度の高い機能を持つプログラムをまとめたもの）です。
もちろんjQueryを利用せず、JavaScriptだけでプログラムを書くことも可能です。しかし、短いコードで簡単に機能を実装できるため、JavaScriptで何十行もコードを書かなければならないときも、jQueryを使えば数行で済むことがあります。

jQueryを読み込む方法

jQueryを使用する際には、まずダウンロードする必要があります。
[Download the compressed, production jQuery 3.4.1]をダウンロードすることをお勧めします。
以下のURLからダウンロードが可能です。
https://jquery.com/download/

HTMLファイルでjQueryを読み込む際には、ダウンロードしたjQueryを任意の場所(ここではjsディレクトリ)に保存して、そこから<head>内に読み込みます。
sample.html
<head>
<script src="/js/jquery-1.12.4.min.js"></script>
</head>
アニメーション一覧

以下にホームページ制作でよく使われるアニメーションの実装例を紹介します。
すべてシンプルな仕様であるのでぜひ実装して確かめてみてください。

１．ハンバーガーメニュー

実装結果
ドロワーナビはウインドウ上端に隠れていて、ボタンを押すと上端から出てくる仕様になっています。×ボタンを押すことでドロワーナビは閉じます。
以下にハンバーガーメニューの実装例を示します。

[ボタン押下前]

[ボタン押下後]

実装項目
・コンテンツとナビゲーションを用意
・ドロワーナビの表示設定
・jQueryで開閉を制御する

・コンテンツとナビゲーションを用意

最初に、コンテンツとナビゲーションを用意します。HTMLファイルにハンバーガーメニューを記述し、ドロワーナビが開いたときに表示されるリストを作成する。
sample.html

<div>
    <div class="navToggle text-white d-flex">
    <span></span><span></span><span></span><br>
    <a class="mt-4 pt-2">MENU</a>
</div>


<nav class="globalMenuSp">
　　
    <ul>
        <li><a href="index.html">ホーム</a></li>
        <li><a href="food_menu.html">お品書き</a></li>
        <li><a href="drink_menu.html">お飲み物</a></li>
        <li><a href="party.html">ご宴会</a></li>
        <li><a href="positional_information.html">店舗情報</a></li>
    </ul>
</nav>
</div>
・ドロワーナビの表示設定

ハンバーガーボタンの位置や色についての設定を行います。
また、ハンバーガーボタンは、CSSによりXボタンに変化するようになっています。横並びになっている3本の線のうち、一番上の線と一番下の線が45度傾き、真ん中の線が消えることでXボタンになるように設定してあります。
sample.css
nav.globalMenuSp {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    background: #fff;
    color: #000;
    text-align: center;
    transform: translateY(-100%);
    transition: all 0.6s;
    width: 100%;
}

nav.globalMenuSp ul {
    background: #ccc;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

nav.globalMenuSp ul li {
    font-size: 1.1em;
    list-style-type: none;
    padding: 0;
    width: 100%;
    border-bottom: 1px dotted #333;
}

/* 最後はラインを描かない */
nav.globalMenuSp ul li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

nav.globalMenuSp ul li a {
    display: block;
    color: #000;
    padding: 1em 0;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
    transform: translateY(0%);
}

.navToggle {
    display: block;
    position: fixed;    /* bodyに対しての絶対位置指定 */
    right: 20px;
    top: 20px;
    width: 42px;
    height: 51px;
    cursor: pointer;
    z-index: 3;
    text-align: center;
}

.navToggle span {
    display: block;
    position: absolute;    /* .navToggleに対して */
    width: 30px;
    border-bottom: solid 3px #fff;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    left: 6px;
}

.navToggle span:nth-child(1) {
    top: 9px;
}

.navToggle span:nth-child(2) {
    top: 18px;
}

.navToggle span:nth-child(3) {
    top: 27px;
}


/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
    top: 18px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
・jQueryで開閉を制御する

最後にjQueryで開閉を制御します
sample.js
$(function() {
    $('.navToggle').click(function() {
        $(this).toggleClass('active');

        if ($(this).hasClass('active')) {
            $('.globalMenuSp').addClass('active');
        } else {
            $('.globalMenuSp').removeClass('active');
        }
    });
});
２．スライドショー

実装結果
一定間隔でスライドを繰り返すだけのシンプルなスライドショーが実装されます。
実装例としてスライドショーを用いているホームページを紹介します。
以下のURLから参照できるホームページ上部に配置されているものです。

参考：新大宮の焼き鳥は居酒屋「熟成鶏とことこ」
(http://www.tokotoko-nara.com/)

実装項目
・初期表示imgに表示用クラス「showSlide」を付与
・スライドショーの見た目を整える
・スライド切替に関するスクリプトを書く

・初期表示imgに表示用クラス「showSlide」を付与

初期表示imgに表示用クラス「showSlide」を付与します。
本例では、画像を3枚使用する場合で考えています。
sample.html
<ul id="slideshow" class="slideshow">
  <li class="showSlide"><img src="https://myscreate.com/wp-content/uploads/2018/09/slide1.jpg"></li>
  <li><img src="https://myscreate.com/wp-content/uploads/2018/09/slide2.jpg"></li>
  <li><img src="https://myscreate.com/wp-content/uploads/2018/09/slide3.jpg"></li>
</ul>
・スライドショーの見た目を整える

スライドショーの配置場所や、大きさなどを設定します。
sample.css
.slideshow {
width: 50%; /* スライドショー幅（PC）*/
list-style-type: none;
position: relative;
}

.slideshow > li {
opacity: 0;
position: absolute;
transition: opacity 3s ease-in-out; /*フェード時間・イージング*/
}

.slideshow > li.showSlide{
opacity: 1;
}

.slideshow > li > img {
width : 100%;
height: auto;
}

/* スマートフォン用メディアクエリ */
@media screen and (max-width:600px){
.slideshow{
width: 100%; /* スライドショー幅（SP）*/
}
}
・スライド切替に関するスクリプトを書く

用意した画像がうまく切り替わるようにスクリプトを書きます。
また、数字を変えることで画像切り替えのタイミングを設定できます。
sample.js
$(function(){
  var imgs = $("#slideshow > li");
  var imgLen = imgs.length;
  var count = 0;
  function changeImg(){
    //スライド切替のポイント（配列を順番に処理し終わったら配列の先頭に戻る計算式）
    count = (count + 1) % imgLen; 
    imgs.removeClass("showSlide").eq(count).addClass("showSlide");
  }
  setInterval(changeImg, 5000); //切替の間隔（ミリ秒）
})
参考：コピペで簡単！超シンプルスライドショー［HTML / CSS / jQuery］
(https://myscreate.com/pure-slide/)

３．スクロール幅によりヌルっと出てくる「トップに戻る」ボタン

実装結果
スクロール幅に合わせてこのようなボタンがサイトの右下にヌルっと現れます。

実装項目
・ボタンをマークアップ
・ボタンの見た目を整える
・スクロールとクリックに関するスクリプトを書く

・ボタン部分をマークアップ

ボタンをフッター近くに配置します。
文字の代わりに画像を使っても大丈夫です。
sample.html
<p id="page-top"><a href="#">PAGE TOP</a></p>
・ボタンの見た目を整える

ボタンは灰色にしていますが、ここにイラストやアイコンを配置して個性を出すのもアリですね。
sample.css
/*ボタンを固定する位置を決める*/
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 80%;
}

/*ボタンの色やサイズを設定する*/
#page-top a {
    display: block;
    background: #666;
    color: #fff;
    width: 100px;
    padding: 25px 0;
    text-align: center;
    text-decoration: none;
    border-radius: 10px;
}

/*マウスオーバーした際に色を変化させる*/
#page-top a:hover {
    background: #999;
    text-decoration: none;
}
・スクロールとクリックに関するスクリプト

jQueryで書いていきましょう。(※jQueryを忘れずに埋め込んでおいてください。)
まずボタンをマークアップしておいたidの#page-topを指定しておきます。
次にスクロールの処理ですが、最初にボタンは隠しておくので、topBtn.hide(); を先に書いておき、スクロールが500pxに達したらボタンを表示するような記述をします。
数字は変更可能で、表示させたい位置に指定できます。
sample.js
$(function () {
    var topBtn = $('#page-top');
    topBtn.hide();
    //スクロールが500に達したらボタンを表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 500) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    //スルスルっとスクロールでトップへもどる
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});
クリックした時の処理をスクロールの処理の下に書いていきます。アニメーションでスルスルっとトップに戻る処理です。数字は戻る速さですので、お好みで変えることが可能です。

参考：[jQuery]スルスルっとトップへ戻るボタンを設置しよう
(http://pilgrim-guild.com/scroll-top_button/)

4．マウスオーバーで画像を切り替える

実装結果
画像にマウスを乗せたら違う画像に切り替わる。
（ボタンなどによく使用される。）

実装項目
・画像ファイルの作成
・サイトに画像を配置する
・jQueryで画像を切り替える

・画像ファイルの作成

まず、通常時に表示される画像（元画像）とマウスオーバー時に表示される画像（切替後の画像）の2種類を用意します。
※以下の説明では、ファイル名の末尾に元画像は_off、切替後の画像には_onを付けています。

元画像：images/hover_off.png
切り替え画像：images/hover_on.png

・サイトに画像を配置する

HTMLファイルに元画像のパスを指定します。
sample.html

<img src="images/hover_off.png" alt="クリック！">
・jQueryで画像を切り替える

マウスを画像に乗せた場合とマウスを離した場合の2パターンの命令を記述します。
sample.js
$(function() {

  //画像にマウスを乗せたら発動
  $('img').hover(function() {

    //画像のsrc属性が別画像のパスに切り替わる
    $(this).attr('src', 'images/hover_on.png');

  //ここにはマウスを離したときの動作を記述
  }, function() {

    //画像のsrc属性を元の画像のパスに戻す
    $(this).attr('src', 'images/hover_off.png');

  });
});
参考：jQueryのhover()でマウスオーバーの処理
(https://www.flatflag.nir87.com/hover-1691)

おわりに

今回の記事は、webサイト作成のための備忘録です。他にもwebサイト作成に関わる知識があれば教えてもらえると嬉しいです！

　 Tweet
Qiitaで続きを読む

投稿日：2019-11-12T17:42:58+09:00

CSSセレクタの詳細度 (優先順位)

CSSセレクタの詳細度とは

ある要素へのCSSの指定が競合した場合、どのセレクタが優先されるかということ。

CSSセレクタの優先順位 (強さ順)

HTMLのstyle属性

id

class、擬似クラス、属性

要素型、擬似要素

⚠️ 同じ優先順位の場合は後に書いたCSSが優先される。

例
<body>
  <div class="red">
    <h1>あああ</h1>
  </div>
</body>
.red {
  color: red;
}
div {
  color: black;
}
classの方が要素型よりも強いので文字がredになる。

　 Tweet
Qiitaで続きを読む

投稿日：2019-11-12T17:33:06+09:00

[Firebase]Storage上のファイル名一覧を表示する

前提条件・環境

Firebase を JavaScript プロジェクトに追加するで、SDKの追加と初期化が完了している
Storageのデフォルトパケット作成済
ファイルアップロード済
バケットURL指定済
SDKのインポートはCDNを使用

手順

1. ルールの書き換え

ListAPIの使用にはFirebase Storage Rules バージョン２が必要なため、Storageにルールを加えます。デフォルトではFirebaseにログインしないと読み書きできないので、必要に応じて書き換えます。今回はテスト用に特に制限を設けません。

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read;
    }
  }
}

2. SDKインポート

<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-storage.js">

※上記SDKを追加しないと下記エラーになります。
　"firebase.storage is not a function"

3. 参照の取得

var storage = firebase.storage();
var storageRef = storage.ref();

4. リスト表示

listAPIを使ってファイル参照一覧を取得します。

storageRef.listAll().then(function(result) {
  result.items.forEach(function(ref) {
  // 処理
  });
}).catch(function(error) {
  console.error(error);
});

デモコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>TEST</title>
  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-storage.js"></script>
</head>
<body>
  <p>Storageファイル一覧</p>
  <div id="table"></div>
  <script>
    var firebaseConfig = {
      ===== 省略 =======

      =================
    };

    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    // Get a reference to the storage service, which is used to create references in your storage bucket
    var storage = firebase.storage();

    // Create a storage reference from our storage service
    var storageRef = storage.ref();

    document.addEventListener('DOMContentLoaded', function() {
      var table = document.createElement( 'table' );
      var tableBody = document.createElement("tbody");

      storageRef.listAll().then(function(result) {
        result.items.forEach(function(ref) {
          var row = document.createElement("tr");
          var cell = document.createElement("td");
          cell.appendChild(document.createTextNode(ref.name));
          row.appendChild(cell);
          tableBody.appendChild(row);
          table.appendChild(tableBody);
        });
        document.getElementById("table").appendChild(table);
      }).catch(function(error) {
        console.error(error);
      })
    });
  </script>
</body>
</html>

結果

参考サイト

ウェブでファイルのリストを取得する
 How to get a list of all files in Cloud Storage in a Firebase app?

　 Tweet
Qiitaで続きを読む

投稿日：2019-11-12T16:15:22+09:00

HTML＆CSSまとめ

簡単なHTMLは知っているけど、実際のテンプレートファイルとかを見るとよくわからなくなる人向けの記事です。HTMLとCSSの最低限の知識をつけるのが目標で、自分の勉強も兼ねてまとめています。

詳細なHTMLの仕様説明が欲しい方はそれ専用のサイトをご覧ください。この記事を書くにあたって参考にさせてもらっています。

http://www.htmq.com/html5/br.shtml
http://www.tohoho-web.com/html/index.htm

この記事では、テンプレとかでよく見るけどいまいちよく分からないタグに話を絞って書きます。正直こういう記事を見るよりも自分で書いて動かすのがいちばん覚えるので、ぜひ一緒にどうぞ。最初に自分が作ったhtmlファイルの確認の仕方を説明します。

HTMLファイルの見方

まずは好きなところにexample.htmlというファイルを作ってください。中身はhelloとか適当な文字列を書いておきましょう。これをブラウザ（SafariでもChromeとか）で開きます。入れるのは以下。

file:///(htmlファイルまでのパス)/example.html

デスクトップにexample.htmlを作った田中さんとかなら
file:///User/tanaka/Desktop/example.html
みたいな感じです。（ここら辺は正直適当）

これでそのブラウザで開くとhelloという文字列が表示されているはずです。エラーが出るときは基本的にパスが間違っているはずなので、よく見直してください。

↑こんな感じのシンプルな表示。表示ができたら、あとは適当にいろんなタグを試しましょう。

HTMLタグ

まずは用語の説明。タグ内で指定するものを属性という。
属性の例としては、<img>タグのsrc属性。これは写真を表示するファイルを示す。

例　<img src="example.png">

属性の中には、ほとんどのタグが持つグローバル属性というものもあり、id属性とかstyle属性とかがある。（これについては後述）

ここから、テンプレートとかでよく見るけど、意味がわかりづらいHTMLタグを中心に紹介します。

<meta>

その文章のメタ(meta)情報を示すもの。charset属性は文字エンコーディングの指定。name属性とcontent属性では、セットでその文章の説明を入れます。例えばnameが"auther"ならcontentには著者名を入れる、nameが"keywords"ならcontentにその文章を説明したキーワードを入れる、という感じ。他にもnameとcontentの組み合わせはあるがここでは省略。あとはhttp-equiv属性もある。

コード例
<meta charset="Shift_JIS">
<meta name="author" content="tanaka">

<h1>

見出し(heading)。h1からh6まであって数字が小さいほど大きい。h7は存在しないので、無視されて普通の文字サイズになる。

コード例
<meta charset="utf-8">   ←文字化けする人はこれを入れる
<h1>h1 あいうえお</h1>
<h2>h2 あいうえお</h2>
<h3>h3 あいうえお</h3>
<h4>h4 あいうえお</h4>
<h5>h5 あいうえお</h5>
<h6>h6 あいうえお</h6>
<h7>h7 あいうえお</h7>
表示例

<br>

改行(break)を表す。htmlファイル上の改行は反映されないことに注意(下の例だと、aiueoと123の間にコード上では改行が入っているが、表示では改行されていない)。

コード例
aiueo
123
<br>
hello
表示例

<ul>

順序のないリスト(unsorted list)を表す。<li>で要素を示す。ちなみに順序のあるリスト(ordered list)は<ol>を使う。使い方はほぼ一緒。

コード例
<meta charset="utf-8">  ←文字化けする人はこれを入れる
<ul>
  <li>みかん
  <li>りんご
</ul>
表示例

一旦タグの紹介を止めて、CSSについて説明します。

CSSについて

簡単にいうと、その文章のレイアウトや見栄えをよくするコンピュータ言語。文章の見栄えをよくするための言語をスタイルシート言語（スタイリング言語）というが、CSSはその中で代表的な言語の一つ。

HTMLでCSSを使う方法にはいくつか種類がある。代表的なのは<style>タグを用いる方法。

<style>

スタイルシートを記述するのに使う。

コード例
<style>
h5 { color:red }
</style>

<h4>h4 あいうえお</h4>
<h5>h5 あいうえお</h5>
<h6>h6 あいうえお</h6>
このように<style>タグで囲まれた中にスタイルシート言語を書く。今回の例はh5 { color:red }の行がCSSで書かれていて、文章内の<h5>タグは赤色にするという意味。

表示例

<h5>の部分だけ赤くなっているのがわかる。

次にスタイルシートを記述する方法として、タグの中に埋め込むという方法がある。

<div>

区分(division)。style属性を用いて、このタグで囲まれた範囲のページレイアウトやスタイルを指定する。

コード例
<div style=" background-color:black; color:white;">あいうえお</div>

表示例

また多くのタグは、idやclassという属性（グローバル属性）を持っている。これらはそのタグを名前づけており、これをCSSで指定してスタイリングすることが可能。

コード例
<style>
#id1 { color:red }
.class1 { background-color:black; color:white; }
</style>

<div id="id1">あいうえお</div>
<div id="id2">かきくけこ</div>
<div class="class1">さしすせそ</div>
<div class="class2">たちつてと</div>
表示例

style内で、id名を使うときは#をclass名を使うときは.を使用していることに注意（#id1と.class1）。この例ではid1というidを持つものや、class1というclass名を持つものだけにCSSが適用されている。

<p>

段落(pragraph)を表す。<p>から</p>で囲まれた部分を一つの段落とみなす。これもstyle属性を持つのでその段落だけにスタイルを適用することが可能だし、id属性やclass属性なども持つ。

コード例
<style>
p.class1 { background-color:black; color:white; }
</style>

<p class="class1">あいうえお</p>
<div class="class1">かきくけこ</div>
表示例

CSSの指定方法として、タグ名.クラス名(コード上ではp.class1)という指定の仕方も可能で、これにより同じクラス名前でもタグによって指定を変えることが可能。

<link>

文章に関連するリンク(link)を示す。rel属性にその文章の関係を示し、href属性にその文章のリンクをおく。例えば、rel="icon"ならhrefにアイコンの写真ファイルを置いたり、rel="stylesheet"ならhrefにその文章に適用したいCSSファイルを置いたりなど。

コード例
<link rel="icon" href="example.ico">
<link rel="stylesheet" href="example.css">

<a>

リンクを貼る。anchor（アンカー：船を繫ぎ止めるやつ）の略です。

コード例
<a href="index.html">目次に戻る</a>

表示例

<script>

JavaScriptなどのスクリプトやデータブロックを組み込むのに使う。type属性にはスクリプト言語やデータ形式を指定する。デフォルトはtype="text/javascript"で、JavaScriptを使う際は省略可能。src属性でスクリプトファイルを指定。

コード例　<script src="./sample.js"></script>

JavaScriptなんかでは、例えばクリックしたら動作するもの（投票ボタンを押して、投票結果が出てくるアプリとか）が作れます。これをjsファイルで作ってこのタグで記述することで、ホームページ上にそのアプリを埋め込むことが可能になります。

まだまだタグはありますが、とりあえずはここまで。時間があればまた追記します。

　 Tweet
Qiitaで続きを読む

投稿日：2019-11-12T14:51:12+09:00

padding によるレイアウトの崩れ

問題点

要素の幅を100%に設定している時に、その要素にpaddingを設定してしまうと、要素の幅の合計が100%を超えてしまいレイアウトが崩れてしまう。

改善策
* {
  box-sizing: border-box;
}
全ての要素に対してbox-sizing: border-box;を適用し、要素の幅の合計(width)にpadding,borderを含めるようにすることでレイアウトの崩れを防ぎ、この問題を解決することができる。

　 Tweet
Qiitaで続きを読む

投稿日：2019-11-12T14:40:28+09:00

クリックしたときに別タブで開くように設定する方法

htmlで、aタグの中にhrefと合わせて「target="_blank"」を追記。
例
<a href="リンク先のURL" target="_blank">ここをクリックすると別タブで開きます</a>
これでクリックすることで別タブにを開いてジャンプするようになります。

また、aタグの中にimgタグを入れることで、画像をクリックして別タブで開くように設定することもできます。
例
<a href="リンク先のURL" target="_blank"><img scr="画像ファイル">
</a>
※画像ファイルは絶対参照(http://testdirectory/test.png)
でも相対参照(test/ping)でもどちらでもOK。

　 Tweet
Qiitaで続きを読む

投稿日：2019-11-12T14:18:20+09:00

受託開発サイト作成の反省

テンプレートをいじって簡単なサイトを作成しようとしたけど、表示ズレがひどくなってしまったのでとりあえずの反省

まずは要素を動かさずに文字だけ書いてしまう。要素いじらない。

エディタでいちいち手直しするのではなく、検証ツールで変更してみて正解が出たらそれをエディタ上に採用するとミスも少なくなるし、楽。

最初のテンプレートがbootstrapが採用されているので、少し要素をいじるといろんなところの要素が同時に崩れてしまうことが多かったので、大きいブロックごとの枠組みを把握しておく必要がある。

要素のどこにプロパティを指定したらいいか問題

例えば画像のリサイズするときは画像の要素をdivで囲む必要があるとか。

　 Tweet
Qiitaで続きを読む

投稿日：2019-11-12T13:16:54+09:00

Rails ビューファイルのHTMLにRubyのコードを書く時の<% %>と<%= %>の違い

目的

あんまりわかっていないビューファイル(HTML)内にRubyのコードを書く時の<% %>と<%= %>の違いをまとめる

簡単に言うと？

ビューファイルが司るWebページ(以降、Webページと記載する)内に表示したいものは<%= %>の中に記載する。

Webページに表示したくないものは<% %>の中に記載する。

ちょっとだけ詳しく言うと？

<%= %>は中に書かれた内容を実行し、結果を評価し、文字として出する。

<% %>は中に書かれた内容を実行する。

使い分けは？

あまり難しい事は考えず、ビューファイルに記載するRubyのメソッドやコードの結果をそのWebページに表示したいのか、表示したくないのかで判断する。

例えば、とあるテーブル情報をモデル名.allで取得し、each文で取得内容を全て出力したいときの変数名A.each do |変数名B|の処理はWebページに出力する必要はないので<% %>で囲む。

前述の処理で変数Bに入った内容をWebページに出力したいときは<%= %>で囲む。

書き方の例
変数Aにはとあるデータベースのとあるデータが格納されているものとする。

変数Bの内容をWebページに出力したい。
each文を使用した書き方の例を下記に記載する。
 
<% each.変数A do |変数B| %>

  
  <%= 変数B %>


<% end %>
より具体的な例
usersにはuserテーブルのすべてのデータが格納されているものとする。(users = User.allを実行した状態)

userの内容をWebページに出力したい。
each文を使用した書き方の例を下記に記載する。
 
<% each.users do |user| %>

  
  <%= user %>


<% end %>

　 Tweet
Qiitaで続きを読む

投稿日：2019-11-12T13:16:30+09:00

HTML/CSS 基本の復習

ポイントポイント自分に必要なとこだけをただただ書き出し。

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

ブロックレベル要素は並べると、改行される。
インライン要素は並べると、改行されない。
しょっちゅう出てくる<div>はブロックレベル要素

曖昧なイメージで、ブロックライン要素はhtml作成に必ず必要な分。
インライン要素は必ずしも必要でないが、見た目を整えるのに寄与している。

セレクタとプロパティと値

cssの書き方
セレクタ {
   プロパティ : 値 ;
}
class
class1.html
<p class="class1">class1</p>
class1.css
.class1{
  color: red;
}
id
id.html
<p id=id1>id1</p>
id1.css
#id1{
  color: red
}
classの方が一般的なので、とりあえずclass使っておけばOK

リセットCSS

ブラウザ毎の変化を抑えるために必要。

float

要素を指定位置表示。

clearfix

floatの副作用を解決。
clearfix.html
<div class="aaa clearfix"></div>
clearfix.css
.clearfix::after {
  content: "";
  clear: both;
  display: block;
}
リスト

ul 順序なしリスト
ol 順序ありリスト
li リスト中のブロック
list-style: none; 先頭の記号消し

表

table 一番外
th 見出し
tr 横定義
td ブロック

GUI

form 操作フォーム
input 入力フォーム
textarea 広い入力フォーム
placeholder 仮表示文字列
label 見出し

Flexbox(floatと同じ)

justify-content: *; 横並びのしかた
align-items: *; 縦並びのしかた

ブロック配置位置

position: absolute; 要素の絶体位置指定
position: relative; 要素の絶体位置基準

　 Tweet
Qiitaで続きを読む

投稿日：2019-11-12T12:49:16+09:00

WordPressをやりたいのでローカルに環境構築した（インストールから設定）

この記事は

WordPressの勉強がしたくなったので、ローカルで環境構築をしてみたぞ。
いまのところWordPressの知識はゼロで、CMSってことだけわかっている状態。

このサイトを元にやってみた（わかりやすい）
→初心者でも簡単にWordPressのローカル環境を構築する方法

まずはWordPressをダウンロードする

ここからダウンロード
→ダウンロード | WordPress.org 日本語


真ん中のダウンロードボタンをポチッとな。

ダウンロードの中身はこんなかんじ

ダウンロードしたら、ほっといておk。

Local by Flywheelをダウンロード

WordPressをローカル環境で動かすのに必要なツールっぽい。
MAMPでもいいらしいがこっちの方が格段に簡単らしいということで、使ってみる。

ここからダウンロード
→Local by Flywheel | Local WordPress development made simple

Applicationsに入れるぞ。

Local by Flywheelの設定

アプリを立ち上げると、この画面に移るので、
「CREATIVE A NEW SITE」ボタンをクリック

サイトの名前を自分で考えてテキトーにつけて（testとかでおk）、
「CONTINUE」ボタンをクリック

WordPressでつかう、UsernameとPasswordを入力して「ADD SITE」ボタンをクリック。
（これがWordPressログインに必要なID,PASSになるお。Emailはそのままでおkぽい）

WordPressのサイトが紐づいた。

そしたら、右にある「ADMIN」ボタンをクリックじゃ

そうすると・・・・

WordPressのログイン画面に飛んだ。
さっき作ったID,PASSを入力してログインしよう。

WordPress設定

WordPressログイン後の画面はこんな感じだぞ。

日本語設定

英語マジでわからないこわいので「Settings」に飛ぶ
「Site Language」で「日本語」を選択
画面下にある「変更を保存」ボタンをクリック

日本語になった！！！！！！！！！

＼( 'ω')／ウオオオオアアーーーッッ！！！

まとめ

ローカルに環境作ること自体は難しくはないね。
次回もたぶんWordPressとたたかう

　 Tweet
Qiitaで続きを読む

投稿日：2019-11-12T03:21:41+09:00

0からプログラミングの勉強を始めて100日が経った。どんな変化があったか振り返りをしてみる。

2019年8月にプログラミングを勉強しようと決めて始めてから、今日でちょうど100日目。
完全に何も知らない0の未経験な状態から、プログラミングの勉強を続けてきて、何ができるようになったのか、よかったことや改善点をまとめた。

わたしの前提

IT企業にてフルタイムで働いているビジネス職（カスタマーサクセス）

プログラミングは完全に未経験

やったことあるのは、Paizaとドットインストールくらい。どちらも途中で挫折している。

自分が欲しいサービスを作りたいと思って、2019年8月からプログラミングスクールに通い出す。

こんな人に読んでほしい

これからプログラミングの勉強を0から始めるひと

同じように0からプログラミングの勉強を初めてがんばっているひと

20代後半でプログラミングを勉強し始めると、どんな変化があるのか知りたいひと

100日間で学んだこと

HTML/CSS

Ruby

Ruby on Rails

Jaba Script

Git,GitHub

SQL

主に100日間で学んだことは下記の通り。
全て同じ量をやっているわけではなく、HTML/CSS、Ruby、Railsをやっている割合がほとんどだった。

100日間でできるようになったこと

ターミナルがつかえるようになった！

テキストエディタが使えるようになった！

めっちゃ簡単なHTML/CSSの実装ができるようになった！

めっちゃ単純なRubyのプログラムを書けるようになった！

Railsのエラーが出たら何が原因か仮説を立てられて50%くらいはあってる！

GitHubでマージとかプルリクとかできるようになった！

はじめたての頃は、

ターミナルとテキストエディタって何が違うんだ・・・そもそもどっちにコード書くの？

テキストエディタにどうやってファイル開くの？

コマンド多すぎ…メソッド多すぎ…カタカナ多すぎ無理…

という状態だったので、著しい成長を遂げた（笑）

ただ、未だにわからないことばかりなので、
もっと勉強してできることを増やしていきたい。

よかったこと

100日間勉強を続けてこれは良かったなと思うことが3つあるのでシェア。

1.周りに宣言＆毎日output

プログラミングの勉強を始めると決めた際に、自社のエンジニア全員が入ってるslackチャンネルに入り、「今日から毎日勉強します。見ててください！」と勝手に宣言をした。

私は自分に甘いので、誰かに宣言することで継続できると思ったからだ。
そこから毎日、勉強したことをエンジニアのアウトプットチャンネルで投稿し続けた。

誰かに見られているという緊張感で継続できたし、どんなレベルの低いことでもoutputすると学びの整理になったのでよかった。

初めて書いたQiitaはタイミングよくトレンド入りしてくれた。
【Ruby】今日のプログラミング学習時間を入力すると、学習進捗を教えてくれるプログラム - Qiita

2.パラシュート学習法「まずやってみる」

私の通っているプログラミング教室が提唱しているパラシュート学習法。
パラシュート勉強法のやり方

教科書の1ページ目からこつこつとやるのではなく、作りたいもの（ピンポイント）に的を絞ってやりたいことから学習していく方法。まずやりたいことからやってみて、詳細は後から学んでいくというやりかただ。

具体的にいうと、HTMLやCSSの大枠をざっと学んだあと、やりたいビューを実装していると、自然とBEMやリファクタリングの概念がわかってきたのがよかった。

多分BEMやリファクタリングをコツコツ学んでても理解にかなり時間がかかったと思う。プログラミングにおいても「まずやってみる」という大事さがわかった。

3.一緒に勉強する仲間をつくる

一緒にプログラミングをする仲間ができたのは、プログラミング教室に通ってよかったことのひとつだ。
辛い時も、モチベーションが下がってる時も、仲のいい同期が頑張っているといい焦りになった。

たまたま一番仲良くなった女の子が、アウトプットをめちゃくちゃがんばる子なので私もそれに触発されている。一人じゃ頑張れないので一緒に頑張る仲間がいると心強い。

改善したいこと

いいことばかりじゃなくて、反省点もいっぱいある。

1.わからないことを調べず進めた。

パラシュート学習法を意識して、どんどん次に進めようとするあまり、ひとつひとつをしっかり理解していないまま次の学習に移っていた。
例えばRubyのクラスとインスタンスや引数に関して、しっかり理解しないまま進めていたので、今絶賛つまづき中。

基礎ができていないのに応用はできないので、今必死にProgateで基礎をやり直している最中だ。
もし１００日前に戻れるならちゃんと基礎をやれ！と言いたい。

2.時間の確保

フルタイムで働いているのでなかなか平日の学習時間の確保が難しかった。100時間/月の学習目標に対してだいたい80〜90時間/月しか勉強ができなかった。

朝から起きてやればいいんだけど、それもなかなか続かず。。
朝から早起きして一緒にプログラミングの勉強をしてくれる人を募集しています。

3.自分で何のサービスも作れなかった。

自分の欲しいサービスを作りたい！と言って始めたわりには、なにもアウトプットするものを作れなかった。
自分の欲しいものから作るともっとプログラミングの勉強が楽しくだろうとわかっているのに…！

プログラミングの学習時間を計測する簡単なWebアプリくらいは年内に作りたいとおもう。

総括

プログラミング向いていないなと思うこともあるが、前に比べるとできることが多くなっているのが嬉しい。私でもちょっとはコードが書けるようになったので、ホリエモンがいう通り「プログラミングは簡単、だれでもできるもの」なのかもしれない。

ねむいのでここまで！引き続きがんばる！

　 Tweet
Qiitaで続きを読む

投稿日：2019-11-12T03:21:41+09:00

0からプログラミングの勉強を始めて100日。どんな変化があったか振り返りをしてみた。

2019年8月にプログラミングを勉強しようと決めて始めてから、今日でちょうど100日目。
完全に何も知らない0の未経験な状態から、プログラミングの勉強を続けてきて、何ができるようになったのか、よかったことや改善点をまとめた。

わたしの前提

IT企業にてフルタイムで働いているビジネス職（カスタマーサクセス）

プログラミングは完全に未経験

やったことあるのは、Paizaとドットインストールくらい。どちらも途中で挫折している。

自分が欲しいサービスを作りたいと思って、2019年8月からプログラミングスクールに通い出す。

こんな人に読んでほしい

これからプログラミングの勉強を0から始めるひと

同じように0からプログラミングの勉強を初めてがんばっているひと

20代後半でプログラミングを勉強し始めると、どんな変化があるのか知りたいひと

100日間で学んだこと

HTML/CSS

Ruby

Ruby on Rails

Jaba Script

Git,GitHub

SQL

主に100日間で学んだことは下記の通り。
全て同じ量をやっているわけではなく、HTML/CSS、Ruby、Railsをやっている割合がほとんどだった。

100日間でできるようになったこと

ターミナルがつかえるようになった！

テキストエディタが使えるようになった！

めっちゃ簡単なHTML/CSSの実装ができるようになった！

めっちゃ単純なRubyのプログラムを書けるようになった！

Railsのエラーが出たら何が原因か仮説を立てられて50%くらいはあってる！

GitHubでマージとかプルリクとかできるようになった！

はじめたての頃は、

ターミナルとテキストエディタって何が違うんだ・・・そもそもどっちにコード書くの？

テキストエディタにどうやってファイル開くの？

コマンド多すぎ…メソッド多すぎ…カタカナ多すぎ無理…

という状態だったので、著しい成長を遂げた（笑）

ただ、未だにわからないことばかりなので、
もっと勉強してできることを増やしていきたい。

よかったこと

100日間勉強を続けてこれは良かったなと思うことが3つあるのでシェア。

1.周りに宣言＆毎日output

プログラミングの勉強を始めると決めた際に、自社のエンジニア全員が入ってるslackチャンネルに入り、「今日から毎日勉強します。見ててください！」と勝手に宣言をした。

私は自分に甘いので、誰かに宣言することで継続できると思ったからだ。
そこから毎日、勉強したことをエンジニアのアウトプットチャンネルで投稿し続けた。

誰かに見られているという緊張感で継続できたし、どんなレベルの低いことでもoutputすると学びの整理になったのでよかった。

初めて書いたQiitaはタイミングよくトレンド入りしてくれた。
【Ruby】今日のプログラミング学習時間を入力すると、学習進捗を教えてくれるプログラム - Qiita

2.パラシュート学習法「まずやってみる」

私の通っているプログラミング教室が提唱しているパラシュート学習法。
パラシュート勉強法のやり方

教科書の1ページ目からこつこつとやるのではなく、作りたいもの（ピンポイント）に的を絞ってやりたいことから学習していく方法。まずやりたいことからやってみて、詳細は後から学んでいくというやりかただ。

具体的にいうと、HTMLやCSSの大枠をざっと学んだあと、やりたいビューを実装していると、自然とBEMやリファクタリングの概念がわかってきたのがよかった。

多分BEMやリファクタリングをコツコツ学んでても理解にかなり時間がかかったと思う。プログラミングにおいても「まずやってみる」という大事さがわかった。

3.一緒に勉強する仲間をつくる

一緒にプログラミングをする仲間ができたのは、プログラミング教室に通ってよかったことのひとつだ。
辛い時も、モチベーションが下がってる時も、仲のいい同期が頑張っているといい焦りになった。

たまたま一番仲良くなった女の子が、アウトプットをめちゃくちゃがんばる子なので私もそれに触発されている。一人じゃ頑張れないので一緒に頑張る仲間がいると心強い。

改善したいこと

いいことばかりじゃなくて、反省点もいっぱいある。

1.わからないことを調べず進めた。

パラシュート学習法を意識して、どんどん次に進めようとするあまり、ひとつひとつをしっかり理解していないまま次の学習に移っていた。
例えばRubyのクラスとインスタンスや引数に関して、しっかり理解しないまま進めていたので、今絶賛つまづき中。

基礎ができていないのに応用はできないので、今必死にProgateで基礎をやり直している最中だ。
もし１００日前に戻れるならちゃんと基礎をやれ！と言いたい。

2.時間の確保

フルタイムで働いているのでなかなか平日の学習時間の確保が難しかった。100時間/月の学習目標に対してだいたい80〜90時間/月しか勉強ができなかった。

朝から起きてやればいいんだけど、それもなかなか続かず。。
朝から早起きして一緒にプログラミングの勉強をしてくれる人を募集しています。

3.自分で何のサービスも作れなかった。

自分の欲しいサービスを作りたい！と言って始めたわりには、なにもアウトプットするものを作れなかった。
自分の欲しいものから作るともっとプログラミングの勉強が楽しくだろうとわかっているのに…！

プログラミングの学習時間を計測する簡単なWebアプリくらいは年内に作りたいとおもう。

総括

プログラミング向いていないなと思うこともあるが、前に比べるとできることが多くなっているのが嬉しい。私でもちょっとはコードが書けるようになったので、ホリエモンがいう通り「プログラミングは簡単、だれでもできるもの」なのかもしれない。

ねむいのでここまで！引き続きがんばる！

　 Tweet
Qiitaで続きを読む

投稿日：2019-11-12T03:21:41+09:00

0からプログラミングの勉強を始めて100日が経ったので、できるようになったこと/よかったこと/改善点。

2019年8月にプログラミングを勉強しようと決めて始めてから、今日でちょうど100日目。
完全に何も知らない0の未経験な状態から、プログラミングの勉強を続けてきて、何ができるようになったのか、よかったことや改善点をまとめた。

わたしの前提

IT企業にてフルタイムで働いているビジネス職（カスタマーサクセス）

プログラミングは完全に未経験

やったことあるのは、Paizaとドットインストールくらい。どちらも途中で挫折している。

自分が欲しいサービスを作りたいと思って、2019年8月からプログラミングスクールに通い出す。

ちなみにtwitter（プログラミング垢）はこちら↓
ぴろり@プログラミング勉強103日目 (@piro_gramming) / Twitter

こんな人に読んでほしい

これからプログラミングの勉強を0から始めるひと

同じように0からプログラミングの勉強を初めてがんばっているひと

20代後半でプログラミングを勉強し始めると、どんな変化があるのか知りたいひと

100日間で学んだこと

HTML/CSS

Ruby

Ruby on Rails

Java Script

Git,GitHub

SQL

主に100日間で学んだことは下記の通り。
全て同じ量をやっているわけではなく、HTML/CSS、Ruby、Railsをやっている割合がほとんどだった。

100日間でできるようになったこと

ターミナルがつかえるようになった！

テキストエディタが使えるようになった！

めっちゃ簡単なHTML/CSSの実装ができるようになった！

めっちゃ単純なRubyのプログラムを書けるようになった！

Railsのエラーが出たら何が原因か仮説を立てられて50%くらいはあってる！

GitHubでマージとかプルリクとかできるようになった！

はじめたての頃は、

ターミナルとテキストエディタって何が違うんだ・・・そもそもどっちにコード書くの？

テキストエディタにどうやってファイル開くの？

コマンド多すぎ…メソッド多すぎ…カタカナ多すぎ無理…

という状態だったので、著しい成長を遂げた（笑）

ただ、未だにわからないことばかりなので、
もっと勉強してできることを増やしていきたい。

よかったこと

100日間勉強を続けてこれは良かったなと思うことが3つあるのでシェア。

1.周りに宣言＆毎日output

プログラミングの勉強を始めると決めた際に、自社のエンジニア全員が入ってるslackチャンネルに入り、「今日から毎日勉強します。見ててください！」と勝手に宣言をした。

私は自分に甘いので、誰かに宣言することで継続できると思ったからだ。
そこから毎日、勉強したことをエンジニアのアウトプットチャンネルで投稿し続けた。

誰かに見られているという緊張感で継続できたし、どんなレベルの低いことでもoutputすると学びの整理になったのでよかった。

初めて書いたQiitaはタイミングよくトレンド入りしてくれた。
【Ruby】今日のプログラミング学習時間を入力すると、学習進捗を教えてくれるプログラム - Qiita

2.パラシュート学習法「まずやってみる」

私の通っているプログラミング教室が提唱しているパラシュート学習法。
パラシュート勉強法のやり方

教科書の1ページ目からこつこつとやるのではなく、作りたいもの（ピンポイント）に的を絞ってやりたいことから学習していく方法。まずやりたいことからやってみて、詳細は後から学んでいくというやりかただ。

具体的にいうと、HTMLやCSSの大枠をざっと学んだあと、やりたいビューを実装していると、自然とBEMやリファクタリングの概念がわかってきたのがよかった。

多分BEMやリファクタリングをコツコツ学んでても理解にかなり時間がかかったと思う。プログラミングにおいても「まずやってみる」という大事さがわかった。

3.一緒に勉強する仲間をつくる

一緒にプログラミングをする仲間ができたのは、プログラミング教室に通ってよかったことのひとつだ。
辛い時も、モチベーションが下がってる時も、仲のいい同期が頑張っているといい焦りになった。

たまたま一番仲良くなった女の子が、アウトプットをめちゃくちゃがんばる子なので私もそれに触発されている。一人じゃ頑張れないので一緒に頑張る仲間がいると心強い。

改善したいこと

いいことばかりじゃなくて、反省点もいっぱいある。

1.わからないことを調べず進めた。

パラシュート学習法を意識して、どんどん次に進めようとするあまり、ひとつひとつをしっかり理解していないまま次の学習に移っていた。
例えばRubyのクラスとインスタンスや引数に関して、しっかり理解しないまま進めていたので、今絶賛つまづき中。

基礎ができていないのに応用はできないので、今必死にProgateで基礎をやり直している最中だ。
もし１００日前に戻れるならちゃんと基礎をやれ！と言いたい。

2.時間の確保

フルタイムで働いているのでなかなか平日の学習時間の確保が難しかった。100時間/月の学習目標に対してだいたい80〜90時間/月しか勉強ができなかった。

朝から起きてやればいいんだけど、それもなかなか続かず。。
朝から早起きして一緒にプログラミングの勉強をしてくれる人を募集しています。

3.自分で何のサービスも作れなかった。

自分の欲しいサービスを作りたい！と言って始めたわりには、なにもアウトプットするものを作れなかった。
自分の欲しいものから作るともっとプログラミングの勉強が楽しくだろうとわかっているのに…！

プログラミングの学習時間を計測する簡単なWebアプリくらいは年内に作りたいとおもう。

総括

プログラミング向いていないなと思うこともあるが、前に比べるとできることが多くなっているのが嬉しい。私でもちょっとはコードが書けるようになったので、ホリエモンがいう通り「プログラミングは簡単、だれでもできるもの」なのかもしれない。

ねむいのでここまで！引き続きがんばる！

　 Tweet
Qiitaで続きを読む