- 投稿日:2021-01-03T22:00:47+09:00
【フロントエンド学習②】インライン要素とブロックレベル要素
HTMLタグの種類について
bodyタグ内で使用するHTMLタグには、
大きく分けて「インライン要素」と「ブロックレベル要素」がある。インライン要素の特徴
- 自動で改行されない(ヨコに並ぶ)
- 横幅・縦幅を指定ができない
- 中央揃え(右寄せ)の時は、親要素に「text-align: center(right);」を記述する
ブロックレベル要素の特徴
- 自動で改行される(タテに並ぶ)
- 横幅・縦幅の指定ができる
- 中央揃えの時は、自身に「margin: 0 auto;」を記述する
デモ
See the Pen YzGaWYK by 転職活動中の なーちゃん@Webエンジニアに転職2020 (@tanakatarou590) on CodePen.
おまけ(初めて見るタグの判別方法)
index.html<span>あいうえお</span> <span>かきくけこ</span> <span>たちつてと</span>上記のように記述して、ブラウザで表示してみる(文章はなんでもOK)
- 改行される→ブロックレベル要素
- 改行されない→インライン要素
ちなみにspanタグはインライン要素なので、改行されません。
おわり
- 投稿日:2021-01-03T19:54:49+09:00
CSSで「net::ERR_FILE_NOT_FOUND」エラー
HTML.CSS勉強時のエラー履歴として記載します。
[トラブル内容]
HTML/CSSの復習中にHTMLへCSSが一切反映されないエラーが発生しました。
index.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>入会申し込み</title> <link rel="stylesheet" href="css/sanitize.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="content"> <h1>入会申し込み</h1> <p>入会するには、次の入会フィームに必要事項をご記入ください</p> <p>メールアドレス:<input type="email" name="mymail"> </p> <p>パスワード:<input type="password" name="password"> </p> <button type="submit">送信</button> </div> </body> </html>style.cssh1 { font-size: 24px; margin: 0; } p { font-size: 14px; } .content { background-color: #fcc; width: 600px; }●対応
デベロッパーツールにて、エラー内容の確認
GET index.html:8op/sample.01/step.04/css/
net::ERR_FILE_NOT_FOUND
どうやら、step.04内cssファイルを探しているのが原因のようでした。
変更前
<link rel="stylesheet" href="css/sanitize.css">
<link rel="stylesheet" href="css/style.css">
変更後
<link rel="stylesheet" href="../css/sanitize.css">
<link rel="stylesheet" href="../css/style.css">
変更後、HTMLファイルにCSSが反映されました。
途中の対応方法や他の要因解析については下記サイトを参考にしました。
https://www.sejuku.net/blog/100015
- 投稿日:2021-01-03T19:54:49+09:00
HTML.CSSで「net::ERR_FILE_NOT_FOUND」エラー
HTML.CSS勉強時のエラー履歴として記載します。
[トラブル内容]
HTML/CSSの復習中にHTMLへCSSが一切反映されないエラーが発生しました。
index.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>入会申し込み</title> <link rel="stylesheet" href="css/sanitize.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="content"> <h1>入会申し込み</h1> <p>入会するには、次の入会フィームに必要事項をご記入ください</p> <p>メールアドレス:<input type="email" name="mymail"> </p> <p>パスワード:<input type="password" name="password"> </p> <button type="submit">送信</button> </div> </body> </html>style.cssh1 { font-size: 24px; margin: 0; } p { font-size: 14px; } .content { background-color: #fcc; width: 600px; }●対応
デベロッパーツールにて、エラー内容の確認
GET index.html:8op/sample.01/step.04/css/
net::ERR_FILE_NOT_FOUND
どうやら、step.04内cssファイルを探しているのが原因のようでした。
変更前
<link rel="stylesheet" href="css/sanitize.css">
<link rel="stylesheet" href="css/style.css">
変更後
<link rel="stylesheet" href="../css/sanitize.css">
<link rel="stylesheet" href="../css/style.css">
変更後、HTMLファイルにCSSが反映されました。
途中の対応方法や他の要因解析については下記サイトを参考にしました。
https://www.sejuku.net/blog/100015
- 投稿日:2021-01-03T18:52:51+09:00
ポートフォリオサイトでの画像を少し面白く
おひさしぶりです。
最近、WEBエンジニアとして企業にインターンしていて調子がいいAkizukiAkiです。本日は、自分のポートフォリオサイトを少し面白くするための、特に自分の画像(プロフィール画像)を面白くするためのCSSアニメーションについて紹介・解説していきたいと思います。
しかも、駆け出しの方がコピペで簡単に実装できるアニメーションです。
ちなみに、成功すると以下のような効果ができます。
ソース
まずもう、ソースコードを貼り付けておきます。ですので、せっかちな方は貼り付けて後で解説を見てください。
sample.css.icon { animation: SlideIn 1.6s; } @keyframes SlideIn { from { opacity: 0; transform: translateX(-250px); } 50% { opacity: 0.5; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } }iconのクラスはimgタグにそのままつけて構いません。
↓<img src="../img/example.com" class="icon">解説(前提)
まず、
sample.css.icon { animation: SlideIn 1.6s; }でhtmlのiconタグにSlideInというアニメーションを1.6秒間行うということを指定しています。
sample.css@keyframes SlideIn { from { opacity: 0; transform: translateX(-250px); } 50% { opacity: 0.5; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } }その後、@keyframesで、アニメーションの流れに合ったキーフレームや中間地点のスタイルを定義します。
簡単に言ったら、流れを制御するための規則ということを表しているということですね。fromというのは開始地点を指します。0%でも問題なく動作します。
toというのは終了地点を指します。100%でも問題なく動作します。
50%というのは、中間地点のことですね。もう一度このGIFを確認してください。
この三つの動作を説明すると、
from→開始地点は中心より左に位置する。
50%→中心より少し右にずれる。
to→中心に位置する。ということになります。
解説(transformに着目)
コードのtransformというプロパティに着目してみましょう。
sample.css@keyframes SlideIn { from { opacity: 0; transform: translateX(-250px); } 50% { opacity: 0.5; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } }fromの時点で、translateXがマイナスになっていますね。これは、fromの時点で中心=X座標0pxよりも開始地点のX座標が-250pxということを指しています。
50%の時点で、translateXが0pxを超えていますね。これは、50%の時点で中心=X座標0pxよりも開始地点のX座標が100pxプラスということを指しています。
toの時点で、translateXが0pxになっていますね。これは、toの時点で中心=X座標0pxと同じ座標に位置するということを指しています。
解説(opacityに着目)
今まで、transformというプロパティに着目してきました。
次にopacityというプロパティに着目していきたいと思います。そもそも、opacityというプロパティは透明度を表します。
勘の良い方はわかったかもしれませんが、簡単に言ったら透明度を操作することで単なるスライドインというだけでなく、フェードを加えたスライドインにするということができます。
sample.css@keyframes SlideIn { from { opacity: 0; transform: translateX(-250px); } 50% { opacity: 0.5; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } }opacityのプロパティは0.0(真っ白)~1.0(普通)まで指定できます。
ですのでこちらを駆使して綺麗にフェードを含めたスライドインを実装することができます。以上でこの記事は終わります。
質問等あればお気軽にどうぞ!
- 投稿日:2021-01-03T18:52:51+09:00
【初心者向け】ポートフォリオサイトでの画像を少し面白く
おひさしぶりです。
最近、WEBエンジニアとして企業にインターンしていて調子がいいAkizukiAkiです。本日は、自分のポートフォリオサイトを少し面白くするための、特に自分の画像(プロフィール画像)を面白くするためのCSSアニメーションについて紹介・解説していきたいと思います。
しかも、駆け出しの方がコピペで簡単に実装できるアニメーションです。
ちなみに、成功すると以下のような効果ができます。
ソース
まずもう、ソースコードを貼り付けておきます。ですので、せっかちな方は貼り付けて後で解説を見てください。
sample.css.icon { animation: SlideIn 1.6s; } @keyframes SlideIn { from { opacity: 0; transform: translateX(-250px); } 50% { opacity: 0.5; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } }iconのクラスはimgタグにそのままつけて構いません。
↓<img src="../img/example.com" class="icon">解説(前提)
まず、
sample.css.icon { animation: SlideIn 1.6s; }でhtmlのiconタグにSlideInというアニメーションを1.6秒間行うということを指定しています。
sample.css@keyframes SlideIn { from { opacity: 0; transform: translateX(-250px); } 50% { opacity: 0.5; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } }その後、@keyframesで、アニメーションの流れに合ったキーフレームや中間地点のスタイルを定義します。
簡単に言ったら、流れを制御するための規則ということを表しているということですね。fromというのは開始地点を指します。0%でも問題なく動作します。
toというのは終了地点を指します。100%でも問題なく動作します。
50%というのは、中間地点のことですね。もう一度このGIFを確認してください。
この三つの動作を説明すると、
from→開始地点は中心より左に位置する。
50%→中心より少し右にずれる。
to→中心に位置する。ということになります。
解説(transformに着目)
コードのtransformというプロパティに着目してみましょう。
sample.css@keyframes SlideIn { from { opacity: 0; transform: translateX(-250px); } 50% { opacity: 0.5; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } }fromの時点で、translateXがマイナスになっていますね。これは、fromの時点で中心=X座標0pxよりも開始地点のX座標が-250pxということを指しています。
50%の時点で、translateXが0pxを超えていますね。これは、50%の時点で中心=X座標0pxよりも開始地点のX座標が100pxプラスということを指しています。
toの時点で、translateXが0pxになっていますね。これは、toの時点で中心=X座標0pxと同じ座標に位置するということを指しています。
解説(opacityに着目)
今まで、transformというプロパティに着目してきました。
次にopacityというプロパティに着目していきたいと思います。そもそも、opacityというプロパティは透明度を表します。
勘の良い方はわかったかもしれませんが、簡単に言ったら透明度を操作することで単なるスライドインというだけでなく、フェードを加えたスライドインにするということができます。
sample.css@keyframes SlideIn { from { opacity: 0; transform: translateX(-250px); } 50% { opacity: 0.5; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } }opacityのプロパティは0.0(真っ白)~1.0(普通)まで指定できます。
ですのでこちらを駆使して綺麗にフェードを含めたスライドインを実装することができます。以上でこの記事は終わります。
質問等あればお気軽にどうぞ!
- 投稿日:2021-01-03T17:52:27+09:00
生のCSSでレスポンシブ(メディアクエリ)を書く
はじめに
こんにちは。記事を閲覧いただきありがとうございます。
知り合いの方から頼まれていたWeb制作がひと段落したので、その中で個人的に重宝した
レスポンシブの書き方についてまとめたいと思います。本当ならSASS、SCSSで以下のようにスッキリ書けるらしいのですが、
styles.css.card-columns { @include media-breakpoint-only(md) { column-count: 2; } @include media-breakpoint-only(xl) { column-count: 5; } }コンパイルというのが難しく。。。。笑
約2日におよぶ激闘の末、、、、CSSでそのまま書く事にしました。。。。(・Д・)ユルセ....teratailでも質問させて頂きました。
ご回答いただいた方、ありがとうございました。。。!!!CSSによるメディアクエリ(レスポンシブ)の書き方
以下のように
768px
から991px
まで、という感じで画面幅の範囲を指定し、
範囲ごとにCSSを記載していきます。styles.css/* sm */ @media screen and ( max-width:767px) { h1 { font-size: 32px; } } /* md */ @media screen and (min-width:768px) and ( max-width:991px) { h1 { font-size: 48px; } } /* lg */ @media screen and (min-width:992px) and (max-width:1199px) { h1 { font-size: 56px; } } /* xl */ @media screen and (min-width:1200px) { h1 { font-size: 56px; } }Bootstrapのcard表示列数
以下のように画面の幅に合わせてcardの列数を変更したい場合は、
それぞれのcardの親要素
.card-columns
に対してcolumn-count
を指定
あと、文字がcardからはみ出ちゃったりしたので、cardもheight
を適宜指定styles.css@media screen and ( max-width:767px) { /* sm */ .card-columns { column-count: 1; } } @media screen and (min-width:768px) and ( max-width:991px) { /* md */ .card { height: 280px; } .card-columns { column-count: 2; } } @media screen and (min-width:992px) and (max-width:1199px) { /* lg */ .card { height: 260px; } } @media screen and (min-width:1200px) { /* xl */ .card { height: 300px; } }Bootstrapの
card
コンポーネントについてはこちら
公式ドキュメントからコードをそのままコピペできるのでBootstrap好きです。(´∀`)文字の改行ポイントを指定
まず、テキストの改行タグにクラスを付ける
index.html<div class='top-msg' id='msg-1st'> <h1 class='text-light'>あなたの <br class='br-1st'>「実家」は <br class='br-2nd'>「空き家」になって <br class='br-3rd'>いませんか? </h1> </div>画面幅ごとに改行タグへ
display: none;
を付与する。styles.css@media screen and ( max-width:767px) { /* sm */ .top-msg h1 { font-size: 32px; } } @media screen and (min-width:768px) and ( max-width:991px) { /* md */ .br-1st{ display: none; } .top-msg h1 { font-size: 56px; } } @media screen and (min-width:992px) and (max-width:1199px) { /* lg */ .br-1st, .br-3rd{ display: none; } .top-msg h1 { font-size: 56px; } } @media screen and (min-width:1200px) { /* xl */ .br-1st, .br-3rd{ display: none; } }余談ですが、Bootstrapのナビゲーションバーは画面が小さくなると
自動でハンバーガーメニュー化してくれるのもいいよね!
今回作った作品
ご紹介できるのはデモページのみですが、このようなページをvue.jsで作成し、firebaseにてwebホスティングしました。
田端の空き家相談所(デモページ)
※あくまでデモページなので、田端の空き家相談所
は実在しません!!笑githubはこちら
おわりに
今回、初めて個人でWeb制作を頼まれて作成した事を通じて、
「webページ作ってよ!」と頼まれたら
「あいよ〜?」と言えるくらいにはなったのではないかと思っています。今後はSEO対策や、もっとオシャレな見た目を求められる気がするので、
そこらへんも出来るように腕を磨いていこうと思います!頑張るぞー(・∀・)
- 投稿日:2021-01-03T17:45:20+09:00
JavaScriptで文字がはみ出している時に自動横スクロールする
目標
完成形
function StartScroll(target_id){ const ele = document.getElementById(target_id); var style = ele.style; style.overflowY = "scroll";//横スクロールする style.whiteSpace = "nowrap";//改行しない style.setProperty("-ms-overflow-style","none"); style.setProperty("scrollbar-width","none"); style.setProperty("-webkit-scrollbar","none"); /** * この値がno以外になったらスクロールを終了する */ let scroll_exit = "no"; function scroll(){ if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認 if(!ele.scrollWidth == 0){//スクロールが必要な場合 let lastLeft = ele.scrollLeft;//現在のスクロール位置を記録 function move_left(){//実際にスクロールする関数 ele.scrollLeft++;//1スクロールする if(lastLeft == ele.scrollLeft){//最後までスクロールした事を確認 setTimeout(function(){//1000ms(1秒)後に一番左に戻す ele.scrollLeft = 0;//1000ms(1秒)後に一番左に戻す setTimeout(scroll,2000);//一番左に戻してから2000ms(2秒)後にスクロールを再開する },1000);//1000ms(1秒)後に一番左に戻す }else{//最後までスクロールしていない場合 lastLeft = ele.scrollLeft;//現在のスクロール位置を更新 setTimeout(move_left,20)//20はスクロール速度(値が小さい方が早くスクロール) }; }; move_left();//最初の一回を実行 }else{//スクロールが不要な場合 setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認 }; }; }; new Promise(() => {//非同期で scroll();//最初のスクロールを開始する }); return function(){ scroll_exit = "yes"; }; };作り方
複数の要素をスクロールできるように関数を作ります。
function scroll(target_id){ }まず
getElementById
をします。function scroll(target_id){ const ele = document.getElementById(target_id); }次に
style
を設定します。function scroll(target_id){ const ele = document.getElementById(target_id); var style = ele.style; style.overflowY = "scroll";//横スクロールする style.whiteSpace = "nowrap";//改行しない style.setProperty("-ms-overflow-style","none"); style.setProperty("scrollbar-width","none"); style.setProperty("-webkit-scrollbar","none"); }自動でスクロール
ここから自動でスクロールできるようにします。
まず、スクロールを終了できるようにします。
function scroll(target_id){ const ele = document.getElementById(target_id); var style = ele.style; style.overflowY = "scroll";//横スクロールする style.whiteSpace = "nowrap";//改行しない style.setProperty("-ms-overflow-style","none"); style.setProperty("scrollbar-width","none"); style.setProperty("-webkit-scrollbar","none"); /** * この値がno以外になったらスクロールを終了する */ let scroll_exit = "no"; }スクロールする関数を作ります。
function scroll(target_id){ const ele = document.getElementById(target_id); var style = ele.style; style.overflowY = "scroll";//横スクロールする style.whiteSpace = "nowrap";//改行しない style.setProperty("-ms-overflow-style","none"); style.setProperty("scrollbar-width","none"); style.setProperty("-webkit-scrollbar","none"); /** * この値がno以外になったらスクロールを終了する */ let scroll_exit = "no"; function scroll(){ }; }
scroll_exit
がno
の時以外実行しないようにします。function scroll(){ if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認 }; };スクロール可能な横幅が
0
になっているか確認して、スクロールが必要か確認します。function scroll(){ if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認 if(!ele.scrollWidth == 0){//スクロールが必要な場合 }else{//スクロールが不要な場合 }; }; };スクロールが不要な場合2秒後にもう一度スクロールが不要か確認します。
function scroll(){ if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認 if(!ele.scrollWidth == 0){//スクロールが必要な場合 }else{//スクロールが不要な場合 setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認 }; }; };スクロールが必要な場合の処理
ここからスクロールが必要な場合の処理です。
初めに、現在どのくらいスクロールしているか取得しておきます。
function scroll(){ if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認 if(!ele.scrollWidth == 0){//スクロールが必要な場合 let lastLeft = ele.scrollLeft;//現在のスクロール位置を記録 }else{//スクロールが不要な場合 setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認 }; }; };左にスクロールする関数を作ります。
function scroll(){ if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認 if(!ele.scrollWidth == 0){//スクロールが必要な場合 let lastLeft = ele.scrollLeft;//現在のスクロール位置を記録 function move_left(){//実際にスクロールする関数 }; }else{//スクロールが不要な場合 setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認 }; }; };左に1スクロールします。
function scroll(){ if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認 if(!ele.scrollWidth == 0){//スクロールが必要な場合 let lastLeft = ele.scrollLeft;//現在のスクロール位置を記録 function move_left(){//実際にスクロールする関数 ele.scrollLeft++;//1スクロールする }; }else{//スクロールが不要な場合 setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認 }; }; };現在のスクロール位置を取得して、事前に取得しておいた位置と同じか比較する事で最後までスクロールしたか確認します。
function scroll(){ if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認 if(!ele.scrollWidth == 0){//スクロールが必要な場合 let lastLeft = ele.scrollLeft;//現在のスクロール位置を記録 function move_left(){//実際にスクロールする関数 ele.scrollLeft++;//1スクロールする if(lastLeft == ele.scrollLeft){//最後までスクロールした事を確認 }else{//最後までスクロールしていない場合 }; }; }else{//スクロールが不要な場合 setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認 }; }; };最後までスクロールしていない場合
次のスクロールを開始する前に、現在のスクロール位置を事前に取得しておきます。
function scroll(){ if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認 if(!ele.scrollWidth == 0){//スクロールが必要な場合 let lastLeft = ele.scrollLeft;//現在のスクロール位置を記録 function move_left(){//実際にスクロールする関数 ele.scrollLeft++;//1スクロールする if(lastLeft == ele.scrollLeft){//最後までスクロールした事を確認 }else{//最後までスクロールしていない場合 lastLeft = ele.scrollLeft;//現在のスクロール位置を更新 }; }; }else{//スクロールが不要な場合 setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認 }; }; };
20ms
待機してからもう一度スクロールします。function scroll(){ if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認 if(!ele.scrollWidth == 0){//スクロールが必要な場合 let lastLeft = ele.scrollLeft;//現在のスクロール位置を記録 function move_left(){//実際にスクロールする関数 ele.scrollLeft++;//1スクロールする if(lastLeft == ele.scrollLeft){//最後までスクロールした事を確認 }else{//最後までスクロールしていない場合 lastLeft = ele.scrollLeft;//現在のスクロール位置を更新 setTimeout(move_left,20)//20はスクロール速度(値が小さい方が早くスクロール) }; }; }else{//スクロールが不要な場合 setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認 }; }; };最後までスクロールできた時
一番右で
1000ms
待機してから一番左に移動します。function scroll(){ if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認 if(!ele.scrollWidth == 0){//スクロールが必要な場合 let lastLeft = ele.scrollLeft;//現在のスクロール位置を記録 function move_left(){//実際にスクロールする関数 ele.scrollLeft++;//1スクロールする if(lastLeft == ele.scrollLeft){//最後までスクロールした事を確認 setTimeout(function(){//1000ms(1秒)後に一番左に戻す ele.scrollLeft = 0;//1000ms(1秒)後に一番左に戻す },1000);//1000ms(1秒)後に一番左に戻す }else{//最後までスクロールしていない場合 lastLeft = ele.scrollLeft;//現在のスクロール位置を更新 setTimeout(move_left,20)//20はスクロール速度(値が小さい方が早くスクロール) }; }; }else{//スクロールが不要な場合 setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認 }; }; };
2000ms
(2秒)待機してからスクロールを再び開始します。function scroll(){ if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認 if(!ele.scrollWidth == 0){//スクロールが必要な場合 let lastLeft = ele.scrollLeft;//現在のスクロール位置を記録 function move_left(){//実際にスクロールする関数 ele.scrollLeft++;//1スクロールする if(lastLeft == ele.scrollLeft){//最後までスクロールした事を確認 setTimeout(function(){//1000ms(1秒)後に一番左に戻す ele.scrollLeft = 0;//1000ms(1秒)後に一番左に戻す setTimeout(scroll,2000);//2000ms(2秒)後にスクロールを再開する },1000);//1000ms(1秒)後に一番左に戻す }else{//最後までスクロールしていない場合 lastLeft = ele.scrollLeft;//現在のスクロール位置を更新 setTimeout(move_left,20)//20はスクロール速度(値が小さい方が早くスクロール) }; }; }else{//スクロールが不要な場合 setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認 }; }; };関数の
1回目
を実行する関数の中から関数を実行していますが、最初の1回は関数の外から実行しないといけないので最初の一回を実行します。
function scroll(){ if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認 if(!ele.scrollWidth == 0){//スクロールが必要な場合 let lastLeft = ele.scrollLeft;//現在のスクロール位置を記録 function move_left(){//実際にスクロールする関数 ele.scrollLeft++;//1スクロールする if(lastLeft == ele.scrollLeft){//最後までスクロールした事を確認 setTimeout(function(){//1000ms(1秒)後に一番左に戻す ele.scrollLeft = 0;//1000ms(1秒)後に一番左に戻す setTimeout(scroll,2000);//一番左に戻してから2000ms(2秒)後にスクロールを再開する },1000);//1000ms(1秒)後に一番左に戻す }else{//最後までスクロールしていない場合 lastLeft = ele.scrollLeft;//現在のスクロール位置を更新 setTimeout(move_left,20)//20はスクロール速度(値が小さい方が早くスクロール) }; }; move_left();//最初の一回を実行 }else{//スクロールが不要な場合 setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認 }; }; };同じように
scroll()
も最初の一回を外から実行します。
これは非同期で実行します。function scroll(){ if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認 if(!ele.scrollWidth == 0){//スクロールが必要な場合 let lastLeft = ele.scrollLeft;//現在のスクロール位置を記録 function move_left(){//実際にスクロールする関数 ele.scrollLeft++;//1スクロールする if(lastLeft == ele.scrollLeft){//最後までスクロールした事を確認 setTimeout(function(){//1000ms(1秒)後に一番左に戻す ele.scrollLeft = 0;//1000ms(1秒)後に一番左に戻す setTimeout(scroll,2000);//一番左に戻してから2000ms(2秒)後にスクロールを再開する },1000);//1000ms(1秒)後に一番左に戻す }else{//最後までスクロールしていない場合 lastLeft = ele.scrollLeft;//現在のスクロール位置を更新 setTimeout(move_left,20)//20はスクロール速度(値が小さい方が早くスクロール) }; }; move_left();//最初の一回を実行 }else{//スクロールが不要な場合 setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認 }; }; }; new Promise(() => {//非同期で scroll();//最初のスクロールを開始する });スクロールを終了する
最後にスクロールを止められるようにします。
function scroll(){ if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認 if(!ele.scrollWidth == 0){//スクロールが必要な場合 let lastLeft = ele.scrollLeft;//現在のスクロール位置を記録 function move_left(){//実際にスクロールする関数 ele.scrollLeft++;//1スクロールする if(lastLeft == ele.scrollLeft){//最後までスクロールした事を確認 setTimeout(function(){//1000ms(1秒)後に一番左に戻す ele.scrollLeft = 0;//1000ms(1秒)後に一番左に戻す setTimeout(scroll,2000);//一番左に戻してから2000ms(2秒)後にスクロールを再開する },1000);//1000ms(1秒)後に一番左に戻す }else{//最後までスクロールしていない場合 lastLeft = ele.scrollLeft;//現在のスクロール位置を更新 setTimeout(move_left,20)//20はスクロール速度(値が小さい方が早くスクロール) }; }; move_left();//最初の一回を実行 }else{//スクロールが不要な場合 setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認 }; }; }; new Promise(() => {//非同期で scroll();//最初のスクロールを開始する }); return function(){ scroll_exit = "yes";//スクロールを止める };実際に使ってみる
今作成した関数を実行する事でスクロールを開始できます。
StartScroll("display");//スクロールを開始する StartScroll("ココはスクロール対象のid");//スクロールを開始するスクロールを終了するには、関数実行時に取得した関数を実行する事で、一番左に戻ったタイミングでスクロールが終了します。
var end = StartScroll("display");//スクロールを開始する //終了ボタンが押されたときの処理 document.getElementById("exit").onclick = function(){ end(); };例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id='display'> ああああああああああああああああああああああああああああああああ </div> <button id="exit"> スクロール終了 </button> <style> #display{ width: 100px; } </style> <script> function StartScroll(target_id){ const ele = document.getElementById(target_id); var style = ele.style; style.overflowY = "scroll";//横スクロールする style.whiteSpace = "nowrap";//改行しない style.setProperty("-ms-overflow-style","none"); style.setProperty("scrollbar-width","none"); style.setProperty("-webkit-scrollbar","none"); /** * この値がno以外になったらスクロールを終了する */ let scroll_exit = "no"; function scroll(){ if(scroll_exit == "no"){//スクロールが終了に設定されていない事を確認 if(!ele.scrollWidth == 0){//スクロールが必要な場合 let lastLeft = ele.scrollLeft;//現在のスクロール位置を記録 function move_left(){//実際にスクロールする関数 ele.scrollLeft++;//1スクロールする if(lastLeft == ele.scrollLeft){//最後までスクロールした事を確認 setTimeout(function(){//1000ms(1秒)後に一番左に戻す ele.scrollLeft = 0;//1000ms(1秒)後に一番左に戻す setTimeout(scroll,2000);//一番左に戻してから2000ms(2秒)後にスクロールを再開する },1000);//1000ms(1秒)後に一番左に戻す }else{//最後までスクロールしていない場合 lastLeft = ele.scrollLeft;//現在のスクロール位置を更新 setTimeout(move_left,20)//20はスクロール速度(値が小さい方が早くスクロール) }; }; move_left();//最初の一回を実行 }else{//スクロールが不要な場合 setTimeout(scroll,2000)//2000ms(2秒)後にもう一度スクロールが必要か確認 }; }; }; new Promise(() => {//非同期で scroll();//最初のスクロールを開始する }); return function(){ scroll_exit = "yes"; }; }; var end = StartScroll("display");//スクロールを開始する //終了ボタンが押されたときの処理 document.getElementById("exit").onclick = function(){ end(); }; </script> </body> </html>
- 投稿日:2021-01-03T17:00:37+09:00
【フロントエンド学習①】フロントエンドとバックエンド
これは?
フロントエンドの学習をして、その理解のアウトプットとして作りました。
初学者にもわかりやすい文章を心がけます。
理解に間違いがありましたら、ご指摘いただけると幸いです。フロントエンドとは
主にHTML、CSS、JavaScriptで構成されている
サーバーとの通信や、ブラウザに表示されるもの
HTML・・・規則に則ってコンテンツを記述する
→文章、画像、動画、などCSS・・・HTMLで記述されたものにデザインを付与する
→文字や画像の色や大きさ、コンテンツの配置、などJavaScript・・・ページに機能を持たせる場合に使用する
→ボタンを押した時の動作、サーバーとの通信の定義、など
→ブラウザ上で動作するほぼ唯一のプログラミング言語!(ここ重要)
→ライブラリやフレームワークが豊富(jQuery、Bootstrap、React.js、Vue.js、Node.js、など)バックエンドとは
フロントエンドと比べて、使用できる言語は多い。(PHP、Java、Python、Ruby、など)
大きく「静的メージ」と「動的ページ」に分けられる
静的ページ
→リクエストに応じてサーバーに用意されているファイルを返却、ブラウザに表示される動的ページ
→リクエストに応じてサーバーにあるプログラムがページを生成して返却、ブラウザに表示されるおわり
- 投稿日:2021-01-03T12:23:49+09:00
nth-child()とnth-of type()の違い
結論
順番を数えるときに指定した要素のみを数えるかどうか
それぞれの挙動の違い
例として以下のようなコードを使用します。
<body> <h1>国民の祝日</h1> <h2>1月</h2> <p>元日</p> <p>成人の日</p> <h2>2月</h2> <p>建国記念の日</p> <p>天皇誕生日</p> <h2>3月</h2> <p>春分の日</p> </body>今回はpタグに対して指定をしていきたいと思います。
nth-child()とnth-of type()共に3番目を指定して色を変えてみます。p:nth-child(3) { color: red; } p:nth-of-type(3) { color: blue; }結果としてブラウザの表示は以下のようになりました。
nth-child
は3番目の要素であるpタグに対してプロパティが適用されています。
これは上から数えて3番目がpタグだったためcolor: red;
が適用されて色が赤くなっています。
これをp:nth-child(1) { color: red; }とすると1番目の要素は
h1
タグで囲まれているためプロパティは適用されず文字は赤くなりません。それに対して
nth-of-type
はpタグの3番目にプロパティが適用されています。
このことからnth-of-type
は指定した型で順番を数えるという特徴があります。以上、nth-child()とnth-of type()の違いでした。
- 投稿日:2021-01-03T10:48:55+09:00
JavaScript のコードを整形する
以下のサイトを利用した。
Online JavaScript Beautifier (v1.13.0)
https://beautifier.io/コードを貼って、 Beautifully Code で整形
いろいろできる
フォーマットが指定できる
JavaScript, CSS, HTML に対応しているっぽ
以上。
- 投稿日:2021-01-03T00:07:21+09:00
CSS素人の僕が考える最強の左寄せ右寄せCSS
CSSは簡単にかじった程度の者ですが、ブロック要素を1行に左寄せおよび右寄せに配置したい場合のCSSってどう書くのが一番最強なのか検討してみました。
※ここでの「最強」とは私が考え・感じる「いい感じ」な表現方法になります。
もっと素敵な方法があるかもしれません。皆様他素敵な方法あったら教えてください。発端
プロジェクトで作成された 1 行に左寄せ右寄せができるようになったスタイルテンプレートが読みにくくて仕方ない気がして気になってしまった。
やりたいこと
次のように、div タグの中に左寄せ右寄せができる領域を表現する div タグがあり(以下例であればalign-leftとalign-right)。そこにボタンなどを追加していけば左寄せの領域は左に、右寄せの領域は右にボタンが配置される。
HTML<div class="parent-box"> <div class="child-box align-left"> <div>左寄せ領域</div> <button class="btn">ボタンA</button> <button class="btn">ボタンB</button> </div> <div class="child-box align-right"> <div>右寄せ領域</div> <button class="btn">ボタンC</button> </div> </div>■ 作りたい画面イメージ
この画面のように、左寄せの領域・右寄せの領域をもったテンプレートを作成して各実装者は作成する画面の設計に応じてボタン等を配置すればOK!みたいな画面を作成する。なお、以降見やすさのため特に言及しないが以下cssを適応しているものとする。
※全体の領域をグレー、右寄せ左寄せの領域をブラックにして見やすくするためのみに利用しております。CSSdiv { margin: 5px; } .parent-box { background: gray; width: 100%; } .child-box { background: black; color: white; }実装方法
1. float で頑張る
正直私は調査前は恥ずかしながらこの「float」でやる方法しか知りませんでした。
これは、私のような旧時代の人間が使う方法で、いたる所にわかりにくさが隠されている方法になります。実装する場合は例えば以下のようになります。HTML<div class="parent-box float"> <div class="child-box align-left"> <div>左寄せ領域</div> <button class="btn">ボタンA</button> <button class="btn">ボタンB</button> </div> <div class="child-box align-right"> <div>右寄せ領域</div> <button class="btn">ボタンC</button> </div> </div> <div class="clear"></div>CSS.float { overflow: hidden; } .float .align-left { float: left; } .float .align-right { float: right; } .clear { clear: both; }■画面
コードを見ていただけばわかる通り謎のclearが必要だったり、overflowを書かないとうまく動かなかったり、考えただけで吐き気がしますね。当然簡単ではないためこれは最強のcssではありません。詳細を知りたい方はfloatを使ったブロック要素の右寄せ、左寄せとclearの方法を参考にしてください。2. FlexBoxのFlexアイテムを調整する
これが私が参画しているプロジェクトで使われていた方法です。そもそもflexBox?となっていた私からすると異常にハードルが高く、「右寄せ・左寄せ」という概念からすると全く「直感的にわからない」というのが問題です。そもそも、私と同じくflexBox?となった方は【備忘録】Flexboxを知り、未だにfloatを使っていたことを恥じる男などを参考にしてください。
私のプロジェクトの実際のコードは以下のようなものでした。HTML<div class="parent-box flex-box"> <div class="child-box align-left"> <div>左寄せ領域</div> <button class="btn">ボタンA</button> <button class="btn">ボタンB</button> </div> <div class="child-box align-right"> <div>右寄せ領域</div> <button class="btn">ボタンC</button> </div> </div>CSS.flex-box { display: flex; } .flex-box .align-left { flex: 1 0 auto; } .flex-box .align-right { flex: 0 1 auto; }■画面
ポイントはflex-boxの子要素である Flex アイテム用のプロパティである。「flex-grow」「flex-shrink」「flex-basis」を以下 1 行で表現し、左寄せ右寄せを実現している所になります。こうすることで、上記画面からもわかるようにalign-leftクラスのdivタグが使えるだけ領域を占領し、残りの領域をalign-rightクラスのdivタグが使うようになります。
※margin や padding と同じく flex は以下のようにスペース区切りで記載することで grow,shrink,flex の順で定義することができます。flex: 1 0 auto;flex-grow, flex-shrink, flex-flexそれぞれは以下を表します。
flex プロパティ .align-left .align-right flex-grow Flex アイテムの横幅の比率 1 0 flex-shrink Flex アイテムが縮小されるときにどういう比率で縮小されるか 0 1 flex-basis Flex アイテムの幅を直接指定 auto auto このとき、flex-growにおいてalign-leftは1でalign-rightは0なので、可能な限りalign-leftは領域を使おうとします。flex-shrinkでalign-leftは0なので縮小されませんがalign-rightは1のため縮小されます。
そのため、左寄せ右寄せが実現できるようになります。そうです。なぜ左寄せ右寄せをするだけのために「比率」だの「縮小率」だの考えなければならないのか・・・
結果的に左寄せ右寄せになっているだけであって直感的ではない。それが私の感じた事でした。そのためこの方法も最強の css にはなりません。3. FlexBox の justify-content: space-between をつかう
これが、僕が考える最強の左寄せ右寄せ CSS です。
恐ろしいことに、スタイルの指定はたったの 2 つのプロパティを指定すれば完了になります。(ほら最強でしょう笑)<div class="parent-box flex-box-between"> <div class="child-box"> <div>左寄せ領域</div> <button class="btn">ボタンA</button> <button class="btn">ボタンB</button> </div> <div class="child-box"> <div>右寄せ領域</div> <button class="btn">ボタンC</button> </div> </div>.flex-box-between { display: flex; justify-content: space-between; }
これの解説は簡単です。justify-contentのspace-betweenがそういう仕様だからです。
そもそもspace-betweenは1つ目と1番後ろのFlexアイテムは両端、残りは等間隔に配置するという仕様です。
そのため、Flexアイテムが2つの場合は勝手に左寄せ右寄せになります。欠点
最強かに思える本スタイルにも欠点があります。
それは「html 上で左寄せ右寄せしていることを表現できていない」ということです。
space-between が優秀過ぎて「align-left」「align-right」のクラスが必要ではないため、html を見ただけでは左寄せ右寄せになっている div タグがどれなのか判断つきません。
class にマーカクラスとして「align-left」「align-right」を追加しておくことで一応の回避はできますが少し悩ましい所ではあります。
また、当然ですが「justify-content: space-between」を知らないメンバーが保守をした場合、おそらく子要素のdivタグを最初に確認し、なぜ左寄せ右寄せになっているのかと相当な時間をかけた後、親要素のdivタグに設定しているスタイルを見なければわからず、誰でも簡単にわからない実装になっている可能性があります。この点は他の方法であれば子要素のスタイルを参照すればなんとなくわかるので比較的メンバスキルに依存しない実装にはなるかと思います。総括
ブロック要素を1行に左寄せおよび右寄せに配置したい場合はjustify-content: space-betweenを使うことでかなり良い感じに記述できるが、メンバーのレベルやコード規約に準じて実装方法は検討する必要がある。