今日の学習時間 1.25h (トータル 9.25h) 今日の学習内容 デイトラ初級編 DAY10 Bootstrapの基本を学ぼう① bootstrapでできること *文字色、背景色 *文字の大きさ *文字の太さ *文字の位置 html <h1 class="text-white bg-primary text-center font-weight-bold display-1">Hello, world!</h1> DAY11 Bootstrapの基本を学ぼう② width heightは25%区切り margin paddingは0-5の六段階 gridレイアウト 必ず<div class="container"></div>の中にいれる <div class="row"></div>が１行 <div class="col"></div>が一つのブロック 1行12分割した幅で操作できる gridレイアウトはよく使われるそうなのできちんとマスターしたい！
1.25h (トータル 9.25h)
bootstrapでできること *文字色、背景色 *文字の大きさ *文字の太さ *文字の位置
<h1 class="text-white bg-primary text-center font-weight-bold display-1">Hello, world!</h1>
width heightは25%区切り margin paddingは0-5の六段階
gridレイアウト 必ず<div class="container"></div>の中にいれる <div class="row"></div>が１行 <div class="col"></div>が一つのブロック 1行12分割した幅で操作できる
<div class="container"></div>
<div class="row"></div>
<div class="col"></div>
gridレイアウトはよく使われるそうなのできちんとマスターしたい！
今日の学習時間 Day4 1.5h Day5 1.5h (トータル 8.0h) 今日の学習内容 デイトラ初級編 DAY9 HTML/CSSコーディング復習② 前回作ったLPサイトを、レッスン動画を見ずに自力コーディングで制作しました。 スマホ版のレスポンシブ対応も完了！ お手本コードと答え合わせして気づいた相違点 1.ディスクリプションの記述のし忘れ html <meta name="description" content="ディスクリプションです。"> 2.ファビコン設定し忘れ html <link rel="icon" href="favicon.ico"> 3.buttonタグにtypeを設定し忘れ html <button type="submit" class="btn btn-register">無料ではじめる</button> 4.ナビメニューの項目の左側の余白をPaddingでつけてしまっていた。正解はmargin 目標は４時間と書いてありましたがトータル３時間でレスポンシブまで仕上げることができました！ 色は見た目で近い色を選択したので若干違いますが、その他はパーフェクトピクセルで仕上げることができました。 所々立ち止まりましたが基本的には悩まずサクサクできたのではないかと思います。
Day4 1.5h Day5 1.5h (トータル 8.0h)
前回作ったLPサイトを、レッスン動画を見ずに自力コーディングで制作しました。 スマホ版のレスポンシブ対応も完了！
お手本コードと答え合わせして気づいた相違点 1.ディスクリプションの記述のし忘れ
<meta name="description" content="ディスクリプションです。">
2.ファビコン設定し忘れ
<link rel="icon" href="favicon.ico">
3.buttonタグにtypeを設定し忘れ
<button type="submit" class="btn btn-register">無料ではじめる</button>
4.ナビメニューの項目の左側の余白をPaddingでつけてしまっていた。正解はmargin
目標は４時間と書いてありましたがトータル３時間でレスポンシブまで仕上げることができました！ 色は見た目で近い色を選択したので若干違いますが、その他はパーフェクトピクセルで仕上げることができました。 所々立ち止まりましたが基本的には悩まずサクサクできたのではないかと思います。
どうも7noteです。z-indexがうまく効かない時の注意点について。 重なり順を変更することができるz-indexですが、正しく記述しないと効かない場合があるので書き方には注意が必要です。 position指定がない z-indexはposition: static;（初期値のこと）だと効かない。 positionを、「relative」・「absolute」・「fixed」・「sticky」のいずれかに指定する必要があります。 /*効かない例*/ position: static; /* （もしくは指定なし） */ z-index: 10; /*←効かない*/ /*効く例*/ position: relative; z-index: 10; /*←効く*/ まとめ 結構陥りがちのミスなので、気をつけたいところ。 あとはz-indexは設定していなければ0と同じなので、後ろにもっていきたい時はマイナスの値を設定すると良い。 おそまつ！ （コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）
重なり順を変更することができるz-indexですが、正しく記述しないと効かない場合があるので書き方には注意が必要です。
z-index
z-indexはposition: static;（初期値のこと）だと効かない。
position: static;
positionを、「relative」・「absolute」・「fixed」・「sticky」のいずれかに指定する必要があります。
/*効かない例*/ position: static; /* （もしくは指定なし） */ z-index: 10; /*←効かない*/ /*効く例*/ position: relative; z-index: 10; /*←効く*/
結構陥りがちのミスなので、気をつけたいところ。 あとはz-indexは設定していなければ0と同じなので、後ろにもっていきたい時はマイナスの値を設定すると良い。
（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）
JavaScriptを使った10秒ちょうどで止めるやつを作った プログラミング初心者なので、とりあえずフロントエンドからやろうということで、本を参考にしながら何か作ってみました。 最初はネットにある情報だけでなんとかしようとしたけど全然ダメで、やっぱり本は買うべきだなーと感じました。 参考文献 これからWebをはじめる人のHTML＆CSS、JavaScriptのきほんのきほん まだ最後らへんはやってないですけど、めちゃくちゃ良書だと感じました。他の本をやっていないため比較することはできませんが、気になっていたBootstrapやjQuery、Vue.jsまで入っているのでお得感あります。 開発環境 Windows 10 Home Visual Studio Code 1.44.2 Google Chrome コード HTML index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>10秒ピッタリで止めるやつ</title> <link type="text/css" rel="stylesheet" href="style.css"> <script type="text/javascript" src="10seconds.js"></script> </head> <body> <div class="container"> <p id="timer">00:00</p> <button id="button" class="start" onclick="clicked(this)">START</button> <p id="comment"></p> </div> </body> </html> HTMLに関しては、どういう機能があるかとかはだいたい理解できた気がします。ただ、一般的にどう使うかみたいなのはまだ全然分からないので、どんどん作っていくしかないかなと思います。 CSS style.css .container{ text-align: center; max-width: 600px; margin: 50px auto; } #timer{ background-color: black; color: rgb(16, 245, 46); font-size: 128px; margin: 0 auto; width: 600px; } #button{ margin-top: 30px; font-size: 64px; width: 600px; color: white; text-align: center; border: solid white; } #comment{ font-size: 64px; color: black; text-align: center; } .start{ background-color: rgba(0, 119, 255, 0.651); } .stop{ background-color: rgba(255, 0, 0, 0.87); } .reset{ background-color: rgba(0, 255, 21, 0.87); } これも一応ルールとかについては理解できましたが、まだまだ知らないことが多すぎるので、これは知識を増やすことが必要かなって感じですね。 JavaScript 10seconds.js //グローバル変数の宣言 var start; var display; var timer_id; var milli; //keta関数 //桁合わせをする関数 function keta(value) { //値が10より小さい場合 if(value < 10) { //桁合わせをするために0を追加 value = '0' + value; } return value; } //check関数 //タイマー表示のための関数 function check() { //Dateオブジェクトの生成 var count = new Date(); //1970年1月1日からの経過時間をミり秒単位で取得 milli = count.getTime(); //時間差を計算 milli -= start; //1/1000を整数で表示するため、10で割り、1/100秒単位をmilliに入れる milli = Math.floor(milli/10); //milliを100で割り、1秒単位を計算し、secondに入れる var second = Math.floor(milli/100); //milliが0~99以外の値を取らないようにする //表示する文字列を作るdisplay display = keta(second) + ':' + keta(milli - second * 100); //タイマーに表示する document.getElementById('timer').innerHTML = display; } //clicked関数 //クリックされたときに実行される function clicked(ele) { //ボタンの文字がSTARTのとき if(ele.innerHTML === 'START') { //Dateオブジェクトの生成 var now = new Date(); //1970年1月1日からの経過時間をミり秒単位で取得 start = now.getTime(); //0.01(10/1000)秒ごとにcheck()関数を実行 timer_id = setInterval(check,10); //ボタンの文字をSTOPにする ele.innerHTML = 'STOP'; //classからstartを外す ele.classList.remove('start'); //classにstopを加える ele.classList.add('stop'); } //ボタンの文字をSTOPのとき else if(ele.innerHTML === 'STOP') { //タイマーを止める clearInterval(timer_id); document.getElementById('timer').innerHTML = display; //符号用の変数 var sign; //差を計算 var diff = milli - 1000; //符号を調べる if(diff > 0) sign = '+'; else sign = '-' //時間差を計算する document.getElementById('comment').innerHTML = sign + keta(Math.floor(Math.abs(diff)/100)) + ':' + keta(Math.floor(Math.abs(diff)%100)); //ボタンの文字をRESETにする ele.innerHTML = 'RESET'; //classからstopを外す ele.classList.remove('stop'); //classにresetを加える ele.classList.add('reset'); } else { //タイマーをリセット document.getElementById('timer').innerHTML = '00:00'; //時間差の表示を消す document.getElementById('comment').innerHTML = null; //ボタンの文字をSTARTにする ele.innerHTML = 'START'; //classからresetを外す ele.classList.remove('reset'); //classにstartを加える ele.classList.add('start'); } } 一応C、C++についての基礎知識があったので、関数とかif文とかについてはすんなり理解できました。ただ、グローバル変数をかなり多く使ってしまったり、計算式が分かりづらかったりしたのはもう少し改善できたのかなって感じがします。 感想と反省 本に書いてあったのは普通のタイマーだけだったので、ボタンの切り替えなんかは自分で考えてやってみたので、もしかしたら変なことをしているのかもしれません。もっと他の人のコードを見て勉強しようと思います。 結構時間をかけてしまったので、もっとスピーディにやっていこうと思いました。
プログラミング初心者なので、とりあえずフロントエンドからやろうということで、本を参考にしながら何か作ってみました。 最初はネットにある情報だけでなんとかしようとしたけど全然ダメで、やっぱり本は買うべきだなーと感じました。
これからWebをはじめる人のHTML＆CSS、JavaScriptのきほんのきほん
まだ最後らへんはやってないですけど、めちゃくちゃ良書だと感じました。他の本をやっていないため比較することはできませんが、気になっていたBootstrapやjQuery、Vue.jsまで入っているのでお得感あります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>10秒ピッタリで止めるやつ</title> <link type="text/css" rel="stylesheet" href="style.css"> <script type="text/javascript" src="10seconds.js"></script> </head> <body> <div class="container"> <p id="timer">00:00</p> <button id="button" class="start" onclick="clicked(this)">START</button> <p id="comment"></p> </div> </body> </html>
HTMLに関しては、どういう機能があるかとかはだいたい理解できた気がします。ただ、一般的にどう使うかみたいなのはまだ全然分からないので、どんどん作っていくしかないかなと思います。
.container{ text-align: center; max-width: 600px; margin: 50px auto; } #timer{ background-color: black; color: rgb(16, 245, 46); font-size: 128px; margin: 0 auto; width: 600px; } #button{ margin-top: 30px; font-size: 64px; width: 600px; color: white; text-align: center; border: solid white; } #comment{ font-size: 64px; color: black; text-align: center; } .start{ background-color: rgba(0, 119, 255, 0.651); } .stop{ background-color: rgba(255, 0, 0, 0.87); } .reset{ background-color: rgba(0, 255, 21, 0.87); }
これも一応ルールとかについては理解できましたが、まだまだ知らないことが多すぎるので、これは知識を増やすことが必要かなって感じですね。
//グローバル変数の宣言 var start; var display; var timer_id; var milli; //keta関数 //桁合わせをする関数 function keta(value) { //値が10より小さい場合 if(value < 10) { //桁合わせをするために0を追加 value = '0' + value; } return value; } //check関数 //タイマー表示のための関数 function check() { //Dateオブジェクトの生成 var count = new Date(); //1970年1月1日からの経過時間をミり秒単位で取得 milli = count.getTime(); //時間差を計算 milli -= start; //1/1000を整数で表示するため、10で割り、1/100秒単位をmilliに入れる milli = Math.floor(milli/10); //milliを100で割り、1秒単位を計算し、secondに入れる var second = Math.floor(milli/100); //milliが0~99以外の値を取らないようにする //表示する文字列を作るdisplay display = keta(second) + ':' + keta(milli - second * 100); //タイマーに表示する document.getElementById('timer').innerHTML = display; } //clicked関数 //クリックされたときに実行される function clicked(ele) { //ボタンの文字がSTARTのとき if(ele.innerHTML === 'START') { //Dateオブジェクトの生成 var now = new Date(); //1970年1月1日からの経過時間をミり秒単位で取得 start = now.getTime(); //0.01(10/1000)秒ごとにcheck()関数を実行 timer_id = setInterval(check,10); //ボタンの文字をSTOPにする ele.innerHTML = 'STOP'; //classからstartを外す ele.classList.remove('start'); //classにstopを加える ele.classList.add('stop'); } //ボタンの文字をSTOPのとき else if(ele.innerHTML === 'STOP') { //タイマーを止める clearInterval(timer_id); document.getElementById('timer').innerHTML = display; //符号用の変数 var sign; //差を計算 var diff = milli - 1000; //符号を調べる if(diff > 0) sign = '+'; else sign = '-' //時間差を計算する document.getElementById('comment').innerHTML = sign + keta(Math.floor(Math.abs(diff)/100)) + ':' + keta(Math.floor(Math.abs(diff)%100)); //ボタンの文字をRESETにする ele.innerHTML = 'RESET'; //classからstopを外す ele.classList.remove('stop'); //classにresetを加える ele.classList.add('reset'); } else { //タイマーをリセット document.getElementById('timer').innerHTML = '00:00'; //時間差の表示を消す document.getElementById('comment').innerHTML = null; //ボタンの文字をSTARTにする ele.innerHTML = 'START'; //classからresetを外す ele.classList.remove('reset'); //classにstartを加える ele.classList.add('start'); } }
一応C、C++についての基礎知識があったので、関数とかif文とかについてはすんなり理解できました。ただ、グローバル変数をかなり多く使ってしまったり、計算式が分かりづらかったりしたのはもう少し改善できたのかなって感じがします。
本に書いてあったのは普通のタイマーだけだったので、ボタンの切り替えなんかは自分で考えてやってみたので、もしかしたら変なことをしているのかもしれません。もっと他の人のコードを見て勉強しようと思います。 結構時間をかけてしまったので、もっとスピーディにやっていこうと思いました。
line-height: 要素の高さ;で上下中央揃えになる。 例えば、<a>タグでログインボタン作成するとき、<a>タグの高さ(height)と同じに指定すると、上下中央揃えのボタンが作成できる。
line-height: 要素の高さ;
FontAwesomeとは Webフォントの一種。facebookやtwitterのロゴなどに使用できる。 FontAwesome用のgemをインストール Gemfile gem 'font-awesome-sass' #最下部に追加する Gemfileに追記したら、bundle installしてサーバーを再起動 HTMLで使用する場合 head内にリンクを記述 任意の場所にアイコンの記述 application.html.erb #head内 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> ###中省略 <div class="iconのクラス名"> <i class="fas fa-acorn"></i> #FontAwesomeからコピーしたコードを挿入 </div> 以下のリンクから飛んで使いたいWebフォントを探そう！ https://fontawesome.com/icons?d=gallery
Webフォントの一種。facebookやtwitterのロゴなどに使用できる。
gem 'font-awesome-sass' #最下部に追加する
Gemfileに追記したら、bundle installしてサーバーを再起動
#head内 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> ###中省略 <div class="iconのクラス名"> <i class="fas fa-acorn"></i> #FontAwesomeからコピーしたコードを挿入 </div>
以下のリンクから飛んで使いたいWebフォントを探そう！ https://fontawesome.com/icons?d=gallery
