jQueryでボタン連打制御 これまで覚えてきたHTMLとCSSに加え、jQueryを使って簡単なWebページを作ってみた。ナポレオンの画像を動かすという本当にちょっとした動きをつけてみたのだが、ボタンを連打すると、ナポレオンが暴走してしまったので、ナポレオンの一連の動きが終わってからでないとクリックが有効にならないようにしてみた。 考え方 まずは、キャンセルフラグという変数を0と定義し、ボタンがクリックされた時に、キャンセルフラグが0ならばフラグを1にし、その後の処理を実行後、setTimeoutによって一定時間後にキャンセルフラグを0に戻すという流れ。 <script> $(function(){ var cancelFlag = 0; $('.btn').click(function(){ if( cancelFlag == 0 ){ cancelFlag = 1; $('#napo').toggle(1500); $('#napo').toggle(1500); setTimeout(function(){ cancelFlag = 0; },3000); } }); }); </script> 修正完了後のWebページ こちら 参考 【jQuery】ボタン連打の対策をする（処理中は追加処理をキャンセルする）
これまで覚えてきたHTMLとCSSに加え、jQueryを使って簡単なWebページを作ってみた。ナポレオンの画像を動かすという本当にちょっとした動きをつけてみたのだが、ボタンを連打すると、ナポレオンが暴走してしまったので、ナポレオンの一連の動きが終わってからでないとクリックが有効にならないようにしてみた。
まずは、キャンセルフラグという変数を0と定義し、ボタンがクリックされた時に、キャンセルフラグが0ならばフラグを1にし、その後の処理を実行後、setTimeoutによって一定時間後にキャンセルフラグを0に戻すという流れ。
<script> $(function(){ var cancelFlag = 0; $('.btn').click(function(){ if( cancelFlag == 0 ){ cancelFlag = 1; $('#napo').toggle(1500); $('#napo').toggle(1500); setTimeout(function(){ cancelFlag = 0; },3000); } }); }); </script>
こちら
【jQuery】ボタン連打の対策をする（処理中は追加処理をキャンセルする）
はじめに 前回作成した記事の続きです。 長押しボタンを作ってみた【初期実装】 今回やりたいこと 長押しボタンの進捗表現の方法として、ボタンの周りに進捗状況が表示されて、 ボタンの中心にカウントが表示されるようなやつを作りたいと思います。 ※Fortniteより参照 作る 進捗の表示 ボタンの周りに進捗をつけるために調べた結果、 conic-gradient というのが使えることがわかりました。 conic-gradient() cssの関数らしく、特定の点を中心にグラデーションを表現できるようなものらしいです。 例えば、 conic-gradient.css { width: 100px; height: 100px; border-radius: 50%; background: conic-gradient(red 90deg, green 90deg 180deg, yellow 180deg 270deg, blue 270deg 360deg); } こんな感じで指定すると、 こんな感じの円が表現できます。 なので、このcssの値をjavascriptで動的に変化させることで進捗を表現します。 index.html <script> var LIMIT = 10000; var progress = 0; ・・・ progress = progress + (360 / (LIMIT / 100)); var outerCircle = document.getElementById('outer-circle'); outerCircle.style.background = 'conic-gradient(red ' + progress + 'deg, white 0deg 360deg)'; </script> javascript内で conic-gradient の値を動的に変化させてます。 残り時間の表示 円の中心に残り時間を表示させるために、カウントの処理を修正しました。 今まで setInterval を使ってカウントアップさせ、そのカウントを使っていましたが、 setInterval は、ブラウザ負荷などによって正確には指定した秒数毎に呼ばれないため、 時間を取得してそれを利用するように変更しました。 index.html <script> var LIMIT = 10000; var INTERVAL = 100; var button1 = document.getElementById('button1'); var sec = document.getElementById('sec'); ・・・ var start = function () { startTime = new Date().getTime(); if (!timer) { timer = setInterval(counter, INTERVAL); } } ・・・ var counter = function() { var now = new Date().getTime(); var sec = document.getElementById('sec'); sec.innerText = ((LIMIT - (now-startTime)) / 1000).toFixed(1); if (LIMIT < now-startTime) { sec.innerText = 'OK'; clearInterval(timer); timer = 0; count = 0; } } </script> 完成 動画が貼れないので、リンクを置いておきます。 https://www.youtube.com/watch?v=nqjS81ull1k&feature=youtu.be ソースコードは、以下にあります。 https://github.com/takuhou/smart-ui/blob/feature/circle-progress/index.html 結構ぬるぬる動きます。 今後の対応として、実は、 conic-gradient がchrome以外の他ブラウザでほぼ動かないので、ブラウザ対応をやります。 Can I use 今回の記事で書いたプログラミングの様子をYoutube上にアップロードしておりますので、是非ご覧ください。 【実況】長押しボタンをプログラミング【円ボタン対応】 えんじにぁ〜TV
前回作成した記事の続きです。 長押しボタンを作ってみた【初期実装】
長押しボタンの進捗表現の方法として、ボタンの周りに進捗状況が表示されて、 ボタンの中心にカウントが表示されるようなやつを作りたいと思います。
※Fortniteより参照
ボタンの周りに進捗をつけるために調べた結果、 conic-gradient というのが使えることがわかりました。 conic-gradient()
conic-gradient
cssの関数らしく、特定の点を中心にグラデーションを表現できるようなものらしいです。
例えば、
{ width: 100px; height: 100px; border-radius: 50%; background: conic-gradient(red 90deg, green 90deg 180deg, yellow 180deg 270deg, blue 270deg 360deg); }
こんな感じで指定すると、
こんな感じの円が表現できます。 なので、このcssの値をjavascriptで動的に変化させることで進捗を表現します。
<script> var LIMIT = 10000; var progress = 0; ・・・ progress = progress + (360 / (LIMIT / 100)); var outerCircle = document.getElementById('outer-circle'); outerCircle.style.background = 'conic-gradient(red ' + progress + 'deg, white 0deg 360deg)'; </script>
javascript内で conic-gradient の値を動的に変化させてます。
円の中心に残り時間を表示させるために、カウントの処理を修正しました。
今まで setInterval を使ってカウントアップさせ、そのカウントを使っていましたが、 setInterval は、ブラウザ負荷などによって正確には指定した秒数毎に呼ばれないため、 時間を取得してそれを利用するように変更しました。
setInterval
<script> var LIMIT = 10000; var INTERVAL = 100; var button1 = document.getElementById('button1'); var sec = document.getElementById('sec'); ・・・ var start = function () { startTime = new Date().getTime(); if (!timer) { timer = setInterval(counter, INTERVAL); } } ・・・ var counter = function() { var now = new Date().getTime(); var sec = document.getElementById('sec'); sec.innerText = ((LIMIT - (now-startTime)) / 1000).toFixed(1); if (LIMIT < now-startTime) { sec.innerText = 'OK'; clearInterval(timer); timer = 0; count = 0; } } </script>
動画が貼れないので、リンクを置いておきます。 https://www.youtube.com/watch?v=nqjS81ull1k&feature=youtu.be
ソースコードは、以下にあります。 https://github.com/takuhou/smart-ui/blob/feature/circle-progress/index.html
結構ぬるぬる動きます。
今後の対応として、実は、 conic-gradient がchrome以外の他ブラウザでほぼ動かないので、ブラウザ対応をやります。 Can I use
今回の記事で書いたプログラミングの様子をYoutube上にアップロードしておりますので、是非ご覧ください。 【実況】長押しボタンをプログラミング【円ボタン対応】 えんじにぁ〜TV
-demo https://codepen.io/gnjo/pen/wZrNaY -左にスクロールを付ける。 -即文字方向を戻す。 body{direction: rtl;} *:not(body){direction: initial;} body{margin:4rem auto;width:640px} div{background-color:orange;height:200vh} <div>abcde</div>
-demo https://codepen.io/gnjo/pen/wZrNaY -左にスクロールを付ける。 -即文字方向を戻す。
body{direction: rtl;} *:not(body){direction: initial;} body{margin:4rem auto;width:640px} div{background-color:orange;height:200vh}
<div>abcde</div>
下記のページを参考にほぼ未経験から独学でプログラミングを学ぶ https://qiita.com/saboyutaka/items/1a8c40e105e93ac6856a#python%E3%81%98%E3%82%83%E3%81%AA%E3%81%84%E3%81%AE ひとまず最初は学習日記の様に使わせていただきます。 まずはProgateのHTML&CSSを初級から上級まで1周目 何となく写経感が否めないが続けていれば自分で書けるようになると信じて1日目終わり 2019/04/15 5時間
下記のページを参考にほぼ未経験から独学でプログラミングを学ぶ https://qiita.com/saboyutaka/items/1a8c40e105e93ac6856a#python%E3%81%98%E3%82%83%E3%81%AA%E3%81%84%E3%81%AE
ひとまず最初は学習日記の様に使わせていただきます。
まずはProgateのHTML&CSSを初級から上級まで1周目 何となく写経感が否めないが続けていれば自分で書けるようになると信じて1日目終わり
2019/04/15 5時間
未来電子テクノロジー](https://www.miraidenshi-tech.jp/intern-content/program/)でインターンをしているtatsukichi0803です。 □背景画像の指定 ➤background-image:url(画像のurl); □背景画像の大きさの指定 ➤background-size:cover; □要素を中央に配置する ➤margin:auto; ※必ずwidthもつける □変化の対象や変化にかかる時間の指定 ➤transition:all 1s; ※多くの場合hoverと組み合わせる □縦方向の中央に文字を配置する ➤要素の高さとline-heightプロパティの高さを同じ値にすると、中央に配置される ➤line-height:65px; □aタグで全体をクリックする ➤aタグをブロック要素にする ➤display:block; □影をつける ➤box-shadow:水平方向 垂直方向 色; ➤box-shadaow:10px 10px white; プログラミング初心者であるため、内容に誤りがあるかもしれません。 もし、誤りがあれば修正するのでどんどん指摘してください。
未来電子テクノロジー](https://www.miraidenshi-tech.jp/intern-content/program/)でインターンをしているtatsukichi0803です。
□背景画像の指定 ➤background-image:url(画像のurl);
□背景画像の大きさの指定 ➤background-size:cover;
□要素を中央に配置する ➤margin:auto; ※必ずwidthもつける
□変化の対象や変化にかかる時間の指定 ➤transition:all 1s; ※多くの場合hoverと組み合わせる
□縦方向の中央に文字を配置する ➤要素の高さとline-heightプロパティの高さを同じ値にすると、中央に配置される ➤line-height:65px;
□aタグで全体をクリックする ➤aタグをブロック要素にする ➤display:block;
□影をつける ➤box-shadow:水平方向 垂直方向 色; ➤box-shadaow:10px 10px white;
プログラミング初心者であるため、内容に誤りがあるかもしれません。 もし、誤りがあれば修正するのでどんどん指摘してください。
対象読者 これからHTML、CSSを学ぶ人 初めに ProgateのHTML&CSSレッスン初級編を終了したので復習のために内容をまとめてみました。 分かりやすくなるように随時更新する 初心者なので間違い等あれば是非ご指摘ください。 今回勉強に用いたのはProgate、無料で始められるプログラミング学習サイトです。 難易度は低く、初学者に優しいサイトでした。 今まで知らずにいたのがもったいない… 環境構築 この記事を流し読みするだけでおおよそのイメージはつきますが、 実際に自分で手を動かして学習したいなら環境構築が必要です。 環境構築のやり方については次の記事を参考にしてください。 すごくわかりやすくまとまっています。 Windowsの環境構築(Progate) Macの環境構築(Progate) この記事も上と同じ環境で実行しています。 HTML HTMLの基本 今回はHTMLとCSSを用いてサイトを作成しました。 index.htmlというファイルがトップページになるらしいのでそうしておきます。 次のような状態から少しずつ書き加えサイトを作っていきます。 index.html <!DOCTYPE html> <html> <head> <!--ここにページの情報を書きます--> </head> <body> <!--ここにページの本文を書きます--> </body> </html> カッコがいっぱいある…見づらい。 この状態だとページはまっさらです。 なんのこっちゃ分からないと思いますが一つずつ見ていきましょう。 ここで説明するのはheadとbodyの部分です。 <!--ここにページの情報を書きます-->という文字がありますね。 これはコメントといいます。 HTMLでは分の中に書いたものを素直に全部表示してしまうので、 「表示しなくていいよ！」というところはコメントで書いておきます。 メモ書きによく使われます。 タイトルと本文 index.html <head> <!--ここにページの情報を書きます--> </head> この部分に注目しましょう。 <head>と</head>、何が違うのか？ 実はこれセットで使うものです。 <head>は「ここからページの情報を書きますよ！」 </head>は「ここまでがページの情報ですよ！」 という意味です。 それぞれ開始タグ、終了タグと呼びます。 この書き方はHTMLでは何度も何度も使うので絶対に覚えておくべきところ。 ページの情報として何を書くのかといえば代表的なものはページのタイトルです。 ページのタイトルというのはこのページで言えば「HTML&CSS超入門1:HTML入門編」を指します。 ブラウザのタブに書いてある文字のことですね。 次のように書いてみます。 index.html <!DOCTYPE html> <html> <head> <!--ここにページの情報を書きます--> <title>ページのタイトル</title> </head> <body> <!--ここにページの本文を書きます--> </body> </html> そうすると、 タブのところの文字が変わったのがわかりますか？ index.html <body> <!--ここにページの本文を書きます--> </body> 次はこっちを見てみましょう。 さっきと同じように考えればいいでしょう。 <body>は「ここから本文を書きますよ！」 </body>は「ここまでが本文ですよ！」 という意味です。 bodyは本文を意味します。 今書かれているこの文章もbodyの中に書いてあります。 作るページの種類にもよりますが、一番長々と書かれるところです。 実際に書いてみます。 index.html <!DOCTYPE html> <html> <head> <!--ここにページの情報を書きます--> <title>ページのタイトル</title> </head> <body> <!--ここにページの本文を書きます--> Hello World </body> </html> そうすると、 本文に文字が！ これだけでいろいろ書けますが物足りないですね。 まだまだ機能はいっぱいあるので見ていきますよ。 改行 index.html <!DOCTYPE html> <html> <head> <!--ここにページの情報を書きます--> <title>ページのタイトル</title> </head> <body> <!--ここにページの本文を書きます--> Qiita最高！ Progate最高！ </body> </html> これで改行してくれと思うんですが… 御覧の通り、横並びになってしまいます。 改行するには<br>を使います。 index.html <!DOCTYPE html> <html> <head> <!--ここにページの情報を書きます--> <title>ページのタイトル</title> </head> <body> <!--ここにページの本文を書きます--> Qiita最高！<br> Progate最高！ </body> </html> これで改行されます。 ほらこの通り！ 見出し 長い文章を書くときに必須なのが見出しです。 見出しがなければ見づらくてしょうがない。 index.html <!DOCTYPE html> <html> <head> <!--ここにページの情報を書きます--> <title>ページのタイトル</title> </head> <body> <!--ここにページの本文を書きます--> <h1>h1の見出し</h1> <h2>h2の見出し</h2> <h3>h3の見出し</h3> <h4>h4の見出し</h4> <h5>h5の見出し</h5> <h6>h6の見出し</h6> </body> </html> そうすると、 これで簡単に見出しを作ることができます。 h1が最も大きく、h6が最も小さくなっています。 リスト 見出しのほかにもリストを作ることができます。 index.html <!DOCTYPE html> <html> <head> <!--ここにページの情報を書きます--> <title>ページのタイトル</title> </head> <body> <!--ここにページの本文を書きます--> <ul> <li>Google</li> <li>Apple</li> <li>Facebook</li> <li>Amazon</li> </ul> </body> </html> そうすると、 リストを作るにはまず<ul>要素を作り、その中に<li>要素を作ります。 index.html <ul> <li>Google</li> <li>Apple</li> <li>Facebook</li> <li>Amazon</li> </ul> ここまで読んで気づいた方もいるかもしれませんが、 <>のような要素の中にさらに要素を入れるときはインデント(字下げ)をします。 Tabキーを用いるかスペースキーを何回か押すことでインデントをすることになります。 サイトのリンク 今度はサイトへのリンクを貼る方法です。 index.html <!DOCTYPE html> <html> <head> <!--ここにページの情報を書きます--> <title>ページのタイトル</title> </head> <body> <!--ここにページの本文を書きます--> <a href="https://qiita.com/">Qiitaへのリンク</a> </body> </html> そうすると、 このような画面が現れ、リンクをクリックするとQiitaのページへ飛びます。 index.html <a href="https://qiita.com/">Qiitaへのリンク</a> <a>要素を使ってリンクを作成できます。 hrefのように開始タグに入れるものは属性と呼ばれます。 ""の中にurlを書くことでリンクでどこのサイトに飛ぶかを指定できます。 画像の表示 文字ばかりでは寂しいので画像も入れてみましょう。 index.html <!DOCTYPE html> <html> <head> <!--ここにページの情報を書きます--> <title>ページのタイトル</title> </head> <body> <!--ここにページの本文を書きます--> <img src="https://japaclip.com/files/internet-flaming-laptop.png"> </body> </html> そうすると、 index.html <img src="https://japaclip.com/files/internet-flaming-laptop.png"> 今回も属性を追加していますね。リンクを作成するときはhrefでしたが今回はsrcです。 これも""の中に画像のurlを指定することで画像を表示できます。 最後に ここまでHTMLの書き方をお見せしました。 主に文字を書いたり、画像を入れたりなど画面の要素を作っていくことが中心でした。 しかし、HTMLだけでサイトを作るとデザインが20年前のサイトみたいになります。 もっとサイトを見やすく作るためにCSSも学んでいきましょう！ 次回CSS入門(執筆中)
これからHTML、CSSを学ぶ人
ProgateのHTML&CSSレッスン初級編を終了したので復習のために内容をまとめてみました。 分かりやすくなるように随時更新する 初心者なので間違い等あれば是非ご指摘ください。
今回勉強に用いたのはProgate、無料で始められるプログラミング学習サイトです。 難易度は低く、初学者に優しいサイトでした。 今まで知らずにいたのがもったいない…
この記事を流し読みするだけでおおよそのイメージはつきますが、 実際に自分で手を動かして学習したいなら環境構築が必要です。 環境構築のやり方については次の記事を参考にしてください。 すごくわかりやすくまとまっています。 Windowsの環境構築(Progate) Macの環境構築(Progate) この記事も上と同じ環境で実行しています。
今回はHTMLとCSSを用いてサイトを作成しました。 index.htmlというファイルがトップページになるらしいのでそうしておきます。 次のような状態から少しずつ書き加えサイトを作っていきます。
<!DOCTYPE html> <html> <head> <!--ここにページの情報を書きます--> </head> <body> <!--ここにページの本文を書きます--> </body> </html>
カッコがいっぱいある…見づらい。 この状態だとページはまっさらです。
なんのこっちゃ分からないと思いますが一つずつ見ていきましょう。
ここで説明するのはheadとbodyの部分です。 <!--ここにページの情報を書きます-->という文字がありますね。 これはコメントといいます。 HTMLでは分の中に書いたものを素直に全部表示してしまうので、 「表示しなくていいよ！」というところはコメントで書いておきます。 メモ書きによく使われます。
<head> <!--ここにページの情報を書きます--> </head>
この部分に注目しましょう。 <head>と</head>、何が違うのか？ 実はこれセットで使うものです。 <head>は「ここからページの情報を書きますよ！」 </head>は「ここまでがページの情報ですよ！」 という意味です。 それぞれ開始タグ、終了タグと呼びます。 この書き方はHTMLでは何度も何度も使うので絶対に覚えておくべきところ。 ページの情報として何を書くのかといえば代表的なものはページのタイトルです。 ページのタイトルというのはこのページで言えば「HTML&CSS超入門1:HTML入門編」を指します。 ブラウザのタブに書いてある文字のことですね。 次のように書いてみます。
<head>
</head>
<!DOCTYPE html> <html> <head> <!--ここにページの情報を書きます--> <title>ページのタイトル</title> </head> <body> <!--ここにページの本文を書きます--> </body> </html>
そうすると、
タブのところの文字が変わったのがわかりますか？
<body> <!--ここにページの本文を書きます--> </body>
次はこっちを見てみましょう。 さっきと同じように考えればいいでしょう。 <body>は「ここから本文を書きますよ！」 </body>は「ここまでが本文ですよ！」 という意味です。 bodyは本文を意味します。 今書かれているこの文章もbodyの中に書いてあります。 作るページの種類にもよりますが、一番長々と書かれるところです。 実際に書いてみます。
<body>
</body>
body
<!DOCTYPE html> <html> <head> <!--ここにページの情報を書きます--> <title>ページのタイトル</title> </head> <body> <!--ここにページの本文を書きます--> Hello World </body> </html>
そうすると、 本文に文字が！ これだけでいろいろ書けますが物足りないですね。 まだまだ機能はいっぱいあるので見ていきますよ。
<!DOCTYPE html> <html> <head> <!--ここにページの情報を書きます--> <title>ページのタイトル</title> </head> <body> <!--ここにページの本文を書きます--> Qiita最高！ Progate最高！ </body> </html>
これで改行してくれと思うんですが… 御覧の通り、横並びになってしまいます。 改行するには<br>を使います。
<br>
<!DOCTYPE html> <html> <head> <!--ここにページの情報を書きます--> <title>ページのタイトル</title> </head> <body> <!--ここにページの本文を書きます--> Qiita最高！<br> Progate最高！ </body> </html>
これで改行されます。 ほらこの通り！
長い文章を書くときに必須なのが見出しです。 見出しがなければ見づらくてしょうがない。
<!DOCTYPE html> <html> <head> <!--ここにページの情報を書きます--> <title>ページのタイトル</title> </head> <body> <!--ここにページの本文を書きます--> <h1>h1の見出し</h1> <h2>h2の見出し</h2> <h3>h3の見出し</h3> <h4>h4の見出し</h4> <h5>h5の見出し</h5> <h6>h6の見出し</h6> </body> </html>
そうすると、 これで簡単に見出しを作ることができます。 h1が最も大きく、h6が最も小さくなっています。
h1
h6
見出しのほかにもリストを作ることができます。
<!DOCTYPE html> <html> <head> <!--ここにページの情報を書きます--> <title>ページのタイトル</title> </head> <body> <!--ここにページの本文を書きます--> <ul> <li>Google</li> <li>Apple</li> <li>Facebook</li> <li>Amazon</li> </ul> </body> </html>
そうすると、 リストを作るにはまず<ul>要素を作り、その中に<li>要素を作ります。
<ul>
<li>
<ul> <li>Google</li> <li>Apple</li> <li>Facebook</li> <li>Amazon</li> </ul>
ここまで読んで気づいた方もいるかもしれませんが、 <>のような要素の中にさらに要素を入れるときはインデント(字下げ)をします。 Tabキーを用いるかスペースキーを何回か押すことでインデントをすることになります。
<>
Tabキー
スペースキー
今度はサイトへのリンクを貼る方法です。
<!DOCTYPE html> <html> <head> <!--ここにページの情報を書きます--> <title>ページのタイトル</title> </head> <body> <!--ここにページの本文を書きます--> <a href="https://qiita.com/">Qiitaへのリンク</a> </body> </html>
このような画面が現れ、リンクをクリックするとQiitaのページへ飛びます。
<a href="https://qiita.com/">Qiitaへのリンク</a>
<a>要素を使ってリンクを作成できます。 hrefのように開始タグに入れるものは属性と呼ばれます。 ""の中にurlを書くことでリンクでどこのサイトに飛ぶかを指定できます。
<a>
href
""
文字ばかりでは寂しいので画像も入れてみましょう。
<!DOCTYPE html> <html> <head> <!--ここにページの情報を書きます--> <title>ページのタイトル</title> </head> <body> <!--ここにページの本文を書きます--> <img src="https://japaclip.com/files/internet-flaming-laptop.png"> </body> </html>
<img src="https://japaclip.com/files/internet-flaming-laptop.png">
今回も属性を追加していますね。リンクを作成するときはhrefでしたが今回はsrcです。 これも""の中に画像のurlを指定することで画像を表示できます。
src
ここまでHTMLの書き方をお見せしました。 主に文字を書いたり、画像を入れたりなど画面の要素を作っていくことが中心でした。 しかし、HTMLだけでサイトを作るとデザインが20年前のサイトみたいになります。 もっとサイトを見やすく作るためにCSSも学んでいきましょう！
次回CSS入門(執筆中)
未来電子テクノロジーでインターンをしているtatsukichi0803です。 □float プロパティ ➤指定した要素を並びにすることができる 左並び|float:left; 右並び|float:right; □border プロパティ ➤枠線を付けることができる 書き方|線の種類 種類 色 border:5px solid red □input要素とtextarea要素 ➤input要素:1行のテキスト入力を受け取る要素 ➤textarea要素:複数行のテキスト入力を受け取る要素 ・送信ボタンを作るには ・ボタンに表示させるテキストを変えるには プログラミング初心者であるため、内容に誤りがあるかもしれません。 もし、誤りがあれば修正するのでどんどん指摘してください。
未来電子テクノロジーでインターンをしているtatsukichi0803です。
□float プロパティ ➤指定した要素を並びにすることができる
左並び|float:left; 右並び|float:right;
□border プロパティ ➤枠線を付けることができる
書き方|線の種類 種類 色
border:5px solid red
□input要素とtextarea要素 ➤input要素:1行のテキスト入力を受け取る要素 ➤textarea要素:複数行のテキスト入力を受け取る要素
・送信ボタンを作るには
・ボタンに表示させるテキストを変えるには
実現したいこと Wepアプリ開発していると、Google mapを使う時があるかと思います。 そんな時に、ただただマップコードを埋め込むとせっかくのレスポンシブデザインを意識したサイトが崩れてしまいます。 なので、今回はレスポンシブデザインに対応させる方法を共有したいと思う。 解決方法 <iframe>を<div class="gmap">でカッコって上げることで解決できる。 <div class="gmap"><%== @user.map %></div> .gmap{ position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .gmap iframe, .gmap object, .gmap embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
Wepアプリ開発していると、Google mapを使う時があるかと思います。 そんな時に、ただただマップコードを埋め込むとせっかくのレスポンシブデザインを意識したサイトが崩れてしまいます。 なので、今回はレスポンシブデザインに対応させる方法を共有したいと思う。
<iframe>を<div class="gmap">でカッコって上げることで解決できる。
<iframe>
<div class="gmap">
<div class="gmap"><%== @user.map %></div>
.gmap{ position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .gmap iframe, .gmap object, .gmap embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
