- 投稿日:2021-01-17T20:42:00+09:00
Vue.jsの基本的な使い方 備忘録
Vue.jsを使うには
HTMLファイルでVue.jsをCDNを用いて直接読み込む場合、ソースコードは上から下に読み込まれて行くのでbodyタグの一番最後の記述する。
HTML<body> <div id="app"> ⇦ divタグにid=appと指定することでappの部分は任意の文字でOKです。 <!-- 今回の場合このdivタグ内がVue.jsが影響を及ぼす範囲です。--> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script src="js/main.js"></script> </body>jsファイルで「 var app = new Vue 」と変数化することでコンソールからアクセスすることができる。
jsvar app = new Vue({ el: '#app', })v-if
真偽値を用いて要素を表示・非表示の切り替えを行う。要素自体を生成/破棄している
HTML<div id="app"> <p v-if="toggle"> ⇦ ここでtoggleのfalseをv-ifが受け取り要素を非表示にしています Hello </p> </div>jsvar app = new Vue({ el: '#app', data: { toggle: false ⇦ この場合pタグの要素が非表示になる。trueにすると再表示されます。 } })v-show
CSSのdisplayをnoneにすることで表示している要素を消しているためデベロッパーツールで該当の箇所を箇所を確認すると要素は残っている。
HTML<div id="app"> <p v-show="toggle"> ⇦ ここでtoggleのfalseをv-ifが受け取り要素を非表示にしている。 Hello </p> </div>jsvar app = new Vue({ el: '#app', data: { toggle: false ⇦ この場合pタグの要素(Hello)が非表示になる。trueにすると再表示されます。 } })v-on
DOM要素にイベントリスナーを登録する
HTML<div id="app"> <button v-on:click="onClick"> ⇦ ここでv-on:clickにイベントハンドラのメソッド名を入れて呼ぶ クリック </button> <p> {{ now }} ⇦ 現在日時がnowに代入されて表示される </p> </div>jsvar app = new Vue({ el: '#app', data: { now: '' }, methods: { onClick: function() { this.now = new Date().toLocaleString(); ⇦ nowに現在時刻を代入するメソッド } } })v-for
"color in colors"とすることで、colorsの配列に入っている値を繰り返し処理でcolorに代入している。その後liタグ内でcolorを呼び出すことで
1. Red
2. Green
3. Blue
と表示される。HTML<div id="app"> <ol> <li v-for="color in colors">{{ color }}</li> </ol> </div>jsvar app = new Vue({ el: '#app', data: { colors: ['Red', 'Green', 'Blue'] } })v-model
双方向データバインディングが行えるディレクテブ。
入力フォームに値を入れた場合、リアルタイムでプロパティを変更することができる。HTML<div id="app"> <p> <input type="text" v-model="message"> ⇦ 双方向データバインディングがしたいプロパティをv-modelに入れる </p> <!-- 下記のようにすることでmessageオブジェクトの値が変わって行くことを確認できる --> <pre>{{ message }}</pre> ⇦ 入力フォームで変更を加えた場合messageの値も同じように変更される </div>jsvar app = new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } })v-bind
属性へのデータバインディングを使用する場合は、マスタッシュ構文ではなくv-bindを使用する。
v-bindを下記のようにインプットタグで使う場合、属性の値にはプロパティ名を使用する。
下記のように記述することで入力欄に「Hello Vue.js」と表示される。HTML<div id="app"> <input type="text" v-bind:value="message"/> </div>jsvar app = new Vue({ el: '#app', data: { message: 'Hello Vue.js' } })
- 投稿日:2021-01-17T19:07:56+09:00
【初心者でもわかる】お知らせマークや未読件数をつける方法2選
どうも7noteです。新着のお知らせなどがあった時に丸いアイコン等を付けてクリックやタップを促す方法
スマホの普及もあり、画像に小さいアイコンがつくようなデザインを多く見かけるようになりました。
さっそく丸いアイコンを付けたいと思います。また数字が入る場合は桁数が増えるも考慮して考えます。文字や記号入る場合の綺麗な作り方の例(疑似要素を使用)
index.html<div class="news"> <a href="#">お知らせ</a> </div>style.css.news { /* ボタンっぽいデザインを入れる */ width: 70px; padding: 3px 5px; border: solid 1px #000; border-radius: 5px; position: relative; /* 基準値とする */ } .news::after { content: "!"; /* 表示する記号や文字を入れる(1文字) */ position: absolute; /* 相対位置を指定 */ top: -10px; /* 表示位置を上から-10pxの位置にする */ right: -10px; /* 表示位置を右から-10pxの位置にする */ color: #FFF; /* 文字色を白色に指定 */ line-height: 20px; /* 行の高さを指定 */ font-weight: bold; /* 太文字にする */ text-align: center; /* 文字を中央揃えにする */ width: 20px; /* 幅を20pxに指定 */ background: #F00; /* 背景色を赤に指定 */ border-radius: 50%; /* 角丸を50%に指定 */ }文字数や桁数が変動する可能性がある場合の作り方の例
index.html<div class="news"> <a href="#">お知らせ<span class="notice">3</span></a> </div>style.css.news { /* ボタンっぽいデザインを入れる */ width: 70px; padding: 3px 5px; border: solid 1px #000; border-radius: 5px; position: relative; /* 基準値とする */ } .news span { position: absolute; /* 相対位置に指定 */ top: -10px; /* 表示位置を上から-10pxの位置にする */ left: calc(100% - 10px);/* 表示位置を右から内側に10pxの位置 */ color: #FFF; /* 文字色を白に指定 */ font-weight: bold; /* 太文字にする */ line-height: 20px; /* 行の高さを指定 */ text-align: center; /* 文字を中央揃えにする */ background: #E68031; /* 背景色をオレンジに指定 */ border-radius: 10px; /* line-heightの半分の角丸を指定 */ min-width: 20px; /* 最低幅を指定 */ padding: 0 3px; /* 左右に少しだけ余白を設定 */ box-sizing: border-box; /* 計算しやすいように */ }このように、複数桁になった場合でも、左右に半円がついているような見た目をキープすることができます。
もし
border-radius:50%;
を指定してしまうと、桁数が大きくなり横長になったときに楕円形になってしまい美しくありません。見栄えが悪い例
まとめ
ちょっとアイコンをつけたりなんかはよくあるので、作り方を覚えておき、
文字数によって違う手法でのアプローチがあることさえ理解していれば綺麗にコーディングすることができます。参考になれば。
おそまつ!
~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ
- 投稿日:2021-01-17T18:42:06+09:00
デイトラWeb制作コース初級編DAY6の学び
【この記事に書いてあること】
プログラミング学習6日目⏩
— ふりっく?トリプルゼロの(これから)Webマーケター (@FuRiC_twi) January 17, 2021
Web制作コース 初級編DAY6?
学習時間:3時間23分⏳
学習内容:ゼロからサイトを作る②✏
学び?
・altには画像の説明を入れる
・CSSは共通部分から記述していく
・inputは属性を付けて指定する
・送信ボタンはsubmit#デイトラ #プログラミング初学者 #プログラミング pic.twitter.com/F2uUWcn899【目標】
「ゼロからサイトを作ってみる②」
【学習時間】
時間分
【学び】
1 altには画像の説明を入れる
index.html<img src="" alt=""> <!-- altには画像の説明を入れる-->2 wrapperとは包むという意味
例では、<div class="course-item"></div>
を包み込んでいるindex.html<div class="course-wrapper"> <div class="course-item"></div> <div class="course-item"></div> <div class="course-item"></div> </div>3 CSSは共通部分から記述していく
4 親クラスやブロックで囲って、そこにfloatなどを記述していく
そうすることで後から<p>
タグなどを追加しても反映される
<p>
などの子要素に直接float
を書かないindex.html<div class="about-left"> <img src="./img/about.png" alt="デイトラとは"> <!-- altには画像の説明を入れる--> </div> <div class="about-right"> <p>デイトラとは、無料で・迷わず・楽しく学べるプログラミング学習アプリです。 毎日設定された課題をこなしていくだけで、未経験から30日でプログラミングスキルが身につきます。 1日1題30日でプロのWebエンジニアを目指しましょう! </p> </div>style.css.about-left { float: left; width: 48%; } .about-right { float: right; width: 48%; }5
placeholder="〇〇"
の属性を使えば、後ろの影として表示できる
例index.html<input type="email" name="email" id="email" placeholder="メールアドレス">6 枠の調整
style.cssinput[type="email"] { width: 600px; /*枠の横の長さ*/ border: 3px solid #d8d8d8; /*枠線の細さ、傍線、色*/ font-size: 18px; /*フォント(メールアドレス)のサイズ*/ display: block;/*要素が横までいっぱいに広がり、縦に並んでいく*/ margin: auto;/*要素を中央へ持ってくる*/ padding: 15px;/*枠内の余白の調整*/ border-radius: 990px;/*枠角の調整*/ margin-bottom: 20px;/*下余白の調整*/ }7
input
は似ている枠を追加することがよくあるので、属性を付けて指定するstyle.cssinput[type="email"] { }8 送信ボタンを作成する
index.html<input type="submit">9 ボタンは複数使うことがあるから、クラスを2つ作成して分ける
style.css.btn { /*ベースのボタンクラス*/ padding: 20px 60px; display: inline-block;/*幅や高さが変更できるインライン要素*/ background-color: #082B48; color: #fff; font-size: 24px; font-weight: bold; border-radius: 4px; } .btn-register {/*ベースのボタンクラスに後付で各ボタンで仕様変更をする*/ background-color: #ec6d64; display: block; margin: auto; }10 CSSのclass名で付けては行けないNGワード
・日本語や全角英数字
・数字から始めない
・ハイフン(-)とアンダースコア(_)以外の記号を使わない11 CSSのclass名で気をつけること
・誰が見てもわかりやすい名前をつける
・書き方を統一する
・役割や場所、見た目がイメージしやすい
- 投稿日:2021-01-17T17:46:02+09:00
inputタグのrangeの値が文字列でドハマりした話
<input type="range" min="0" max="100" value="100" step="1" oninput="hogeValueChanged()">
こいつの
value
を使っているときに、意図しない動作に遭遇し、追っかけてみたら、文字列でした・・・(;・∀・)
仕様はちゃんと読みましょう。ってことですね。。。
input
タグのrange
のイメージ仕様記載
<input type="range"> - HTML: HyperText Markup Language | MDN
value 属性は、選択された数値を表す文字列が入った DOMString です。
- 投稿日:2021-01-17T17:46:02+09:00
inputタグのrangeの値(value)が文字列でドハマりした話
<input type="range" min="0" max="100" value="100" step="1" oninput="hogeValueChanged()">
こいつの
value
を使っているときに、意図しない動作に遭遇し、追っかけてみたら、文字列でした・・・(;・∀・)
仕様はちゃんと読みましょう。ってことですね。。。
input
タグのrange
のイメージうまくいかなかった箇所をさらしてみる
curHue1 = hue1.value;
とか代入しています。let diffHue = newHue0 - curHue0; curHue0 = newHue0; console.log("diff hue:"); console.log(diffHue); console.log("hue1 before:"); console.log(curHue1); curHue1 = (curHue1+diffHue+360)%360; console.log("hue1 after:"); console.log(curHue1); // ここで NaN になることがある curHue2 = (curHue2+diffHue+360)%360;仕様記載
<input type="range"> - HTML: HyperText Markup Language | MDN
value
属性は、選択された数値を表す文字列が入った DOMString です。と
選択された数値を表す文字列を含む DOMString。 Number として値を取得するには valueAsNumber を使用する。
- 投稿日:2021-01-17T16:38:02+09:00
Angular の Binding 備忘録
~BindingはAngularの重要な概念の1つです~
AngularのBindingについて改めて調べることがあったので、備忘録として。
ざっくり大筋のイメージを書いてあるので粗さには目をつぶってほしい。AngularにおけるBindingとは
component(TypeScript)とtemplate(HTML)間で情報を渡すこと。
AngularのBindingは他のフレームワークと比べて簡単。
ビューモデルなど難しい定義は必要ない。Angularには大きくわけて3つのBindingタイプがある。
1.Data Binding
2.Event Binding
3.Two-way Binding1.Data Binding:データバインディング
TypeScriptからHTMLにデータを単方向に送るバインディング。
Data BindingにはInterpolation(補間) Binding とProperty(プロパティ) Bindingがある。〇Interpolation Binding (補間バインディング)
Interpolation Bindingはstringのみを対象とし、データを含めることができない。
つまりboolean(true/false)だとかが無効になってしまう。
全てstringとしてレンダリングされる。
そしてテンプレートリテラルとして参照されるので、連結・足し算・メソッド適用などが可能。使い方.
バインドには二重波括弧 {{}} を使用する。例.
TypeScriptname = "Alice"; message = "Hello";HTML<p>{{message}}</p> // Hello <p>{{" Hello " + name }}</p> // Hello Alice <p>{{name.length}}</p> // 5 <p>{{ 2 + 3 }}</p> // 5〇Property Binding
Property Bindingはstring + dataの情報をバインドをしてくれる。
Property Bindingの場合、属性やクラス、スタイルなどにもバインディングができる。
間違えてInterpolation Binding{{}}で書くと無視されるので注意する。使い方.
バインドには角括弧 [] を使用する。HTMLでは、バインド対象の属性等に角括弧で囲み、
ダブルクオーテーションで囲まれたプロパティをイコールでつなぐ。
TypeScriptでは、対応するプロパティを値を定義する。例.
disabled属性がtrueになり、テキストボックスが非活性になる。HTML<input type = "text" [disabled]="isDisabled">TypescriptisDisabled = true;これにはもう少し細かい話があるが今回は割愛。
([attr.xxx] , [class.xxx] , [style.xxx]など)2.Event Binding:イベントバインディング
HTMLからTypeScriptにデータを単方向に送るバインディング。
Event BindingはHTML上のeventの情報をバインドしてくれる。
つまりHTML上で起こった変化(event : input,submit,blur...)をTypeScriptに送ってくれる。使い方.
バインドには丸括弧()を使用する。
HTML上でイベント名を書く際に丸括弧で囲み、
ダブルクオーテーションで囲んだTypeScript上の呼び出したいメソッド名をイコールでつなぐ。
TypeScriptには対応するメソッドを書いておく。例.
1.Clickボタンだけ表示される
2.Clickボタンを押す
3.HelloがClickボタンの下に表示されるHTML<button (click)="change()"> Click </button> <p>{{message}}</p>Typescriptmessage = ""; //初期値 change(){ this.message="Hello"; //Clickボタン押下時にmessageプロパティの中身を"Hello"にする }$eventを使うことでイベントに関する情報を取得出来て~という話も今回は割愛。
3.Two-way Binding:双方向バインディング
HTMLとTypeScriptにデータを双方向に送るバインディング。
つまりHTMLとTypeScriptでデータが同期される。
双方向バインディングを有効にするには ngModel ディレクティブが必要。
また、ngModelを有効にするにはFormModuleのインポートが必要。使い方.
バインドには [( )] を使用する。(よくバナナ in ボックスと呼ばれる)
HTMLでは、イベントタグ内に[(ngModel)]を書き、
ダブルクオーテーションで囲んだ同期したいプロパティをイコールでつなぐ。
TypeScriptでは、FormModuleをapp.module.tsにインポートしておく。
下記例の場合、もし初期値を設定したければ設定しておく。なくてもいい。例.
1.テキストボックス及びその下に Hey が表示されている
2.テキストボックスの文字を変化させる
3.1文字ずつテキストボックス下の文字も変化する = 同期している!HTML<input [(ngModel)]="message" > <p>{{message}}</p>Typescriptmessage = "Hey"; //初期値(なくてもいい)Typescript(app.module.ts)import { FormsModule } from '@angular/forms'; //忘れないこと ... @NgModule({ imports: [ FormsModule //忘れないこと ] ...注:イベントが発生 ⇒ プロパティが更新 ⇒ 補間で表示 という流れになっている。
あくまでTwo-way Binding = Property Binding + Event Binding
- 投稿日:2021-01-17T15:06:10+09:00
【HTML】コピペでできるHTML(入力フォーム編)
記事の対象者
- HTMLをあまり触ったことがない人
- とりあえずHTMLの雛形が欲しい人
- これからフロントエンドの勉強がしたい人
コピペでできるHTML
HTML雛形
index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>サンプル</title> <meta name="sample" content="サンプル"> </head> <body> <h1>Hello World!</h1> </body> </html>見出し
見出しは、
<h1>~<h6>
のタグが用意されています。hの数が大きくなるほど、文字が小さく表示されます。index.html<body> <h1>Hello World!</h1> <h2>Hello World!</h2> <h3>Hello World!</h3> <h4>Hello World!</h4> <h5>Hello World!</h5> <h6>Hello World!</h6> </body>段落
文章を書くときに、段落を付けたいときに使用します。
index.html<body> <p>私は猫が大好きです。</p> <p>また、亀も大好きです。</p> </body>画像の挿入
画像を挿入するには、
img
タグを使用し、src
属性とalt
属性を指定します。
- src:htmlファイルから見た、画像のパスを指定
- 絶対パスの例:http://xxxxxx.com/images/pc.png
- 相対パスの例:images/pc.png
- alt:画像が読み込めなかった場合に表示される文字列
index.html<body> <img src="images/pc.png" alt="PCの画像です"> </body>リンク
ハイパーリンクを挿入するには、
a
タグを使用し、href
属性でリンク先のURLを指定します。
必須項目ではありませんが、target
属性に「_blank」と指定すれば、別タグで開かれます。
- href:WebサイトのURLを指定
- Webサイトの例:https://www.yahoo.co.jp
- メールアドレスの例:mailto:<メールアドレス>
index.html<body> <!-- 文字クリックでサイトに飛ぶ --> <a href="https://www.yahoo.co.jp">yahoo</a> <!-- 改行 --> <br> <!-- 画像クリックでサイトに飛ぶ --> <a href="https://www.google.com"> <img src="images/pc.png" alt="PCの画像です"> </a> <!-- 改行 --> <br> <!-- メールアドアレスを指定する例 --> <a href="mailto:xxxxx@example.co.jp">メール</a> </body>「yahoo」の文字をクリックすれば、yahooのサイトに、画像をクリックすれば、googleのサイトに飛びます。
「メール」の文字をクリックすれば、メールソフトが起動し、送信先に指定したメールアドレスが自動で入力されます。リスト
リストには2種類のリストがあります。
1. 箇条書きリスト
2. 番号付きリスト箇条書きリストを表示するには、
ul
タグを使用し、ulタグの間にli
タグを使用し、項目を挙げます。
ul:Unordered List(順序のないリスト)
li:List Item(リストの項目)番号付きリストを表示するには、
ol
タグを使用し、ulタグの間にli
タグを使用し、項目を挙げます。
ol:Ordered List(順序のあるリスト)
li:List Item(リストの項目)index.html<body> <!-- 箇条書きリスト --> <ul> <li>Google</li> <li>Apple</li> <li>Facebook</li> <li>Amazon</li> </ul> <!-- 番号付きリスト --> <ol> <li>お湯を沸かす</li> <li>カップ麺にお湯を入れる</li> <li>3分まつ</li> <li>食べる</li> </ol> </body>表(テーブル)
表を作成するには、以下のタグを合わせて使用します。
- tableタグ:表を表すタグで、表を全体をtableタグで囲む
- borderで枠線を指定する
- trタグ:表の行を表す(Table Rowの略)
- thタグ:表の見出しを表す(Table headの略)
- colspanで横方向にセルを結合する
- tdタグ:表のセルを表す(Table Dataの略)
- rowspanで縦方向にセルを結合する
index.html<body> <!-- 表1(基本) --> <table border="1"> <tr> <th>名前</th> <th>性別</th> <th>特技</th> </tr> <tr> <td>のび太</td> <td>男</td> <td>寝ること</td> </tr> <tr> <td>しずか</td> <td>女</td> <td>ピアノ</td> </tr> <tr> <td>ジャイアン</td> <td>男</td> <td>歌</td> </tr> </table> <br> <!-- 表2(セルを横方向に結合) --> <table border="1"> <tr> <th colspan="3">プロフィール</th> </tr> <tr> <td>のび太</td> <td>男</td> <td>寝ること</td> </tr> </table> <br> <!-- 表3(セルを縦方向に結合) --> <table border="1"> <tr> <th>名前</th> <th>特技</th> </tr> <tr> <td rowspan="2">のび太</td> <td>射撃</td> </tr> <tr> <td>あやとり</td> </tr> </table> </body>入力欄
入力欄には大きく2種類あります。
- 1行テキストボックス
- 複数行テキストエリア
1行テキストボックスは、
input
タグを使用し、type
属性でtext
を指定します。
type属性には、text以外にも様々なタイプを指定できます。そのタイプによって、入力された内容がブラウザでサポートしている書式として正しい内容かをチェックしてくれます。
- text:1行のテキスト
- search:検索するときのテキスト
- email:メールアドレス
- tel:電話番号
- url:WebサイトのURL
placeholder属性を使用することで、あらかじめテキストボックスに中身を書くことができます。
文字を入力すると、プレースホルダーは非表示になります。複数行テキストエリアは、
textarea
タグを使用します。1行テキストボックス同様にplaceholderも使用できます。index.html<body> 名前:<input type="text"> <br> 性別:<input type="text" placeholder="男"> <br> お問い合わせ:<br> <textarea placeholder="お問い合わせ"></textarea> </body>ラジオボタン
ラジオボタンは、
input
タグを使用し、type
属性でradio
を指定します。
その他の属性としては以下があります。
- name:ラジオボタンの名前(選択肢をグループで統一させる)
- value:送信される選択肢の値
- checked:デフォルトで選択しておく項目
ラジオボタンは、複数ある選択肢の中から1つだけを選択させたいときに使用します。
index.html<body> <input type="radio" name="gender" value="man"> 男 <input type="radio" name="gender" value="woman" checked> 女 <input type="radio" name="gender" value="other"> その他 </body>チェックボックス
チェックボックスは、
input
タグを使用し、type
属性でcheckbox
を指定します。
その他の属性としては以下があります。
- name:チェックボックスの名前(選択肢をグループで統一させる)
- value:送信される選択肢の値
- checked:デフォルトで選択しておく項目
チェックボックスは、複数ある選択肢の中から複数の項目を選択させたいときに使用します。
index.html<body> <input type="checkbox" name="color" value="red"> 赤 <input type="checkbox" name="color" value="blue" checked> 青 <input type="checkbox" name="color" value="green"> 緑 </body>セレクトボックス
セレクトボックスは、
select
タグとoption
タグを使用します。
selectタグには、以下の属性があります。
- name:セレクトボックスの名前
- multiple:複数の項目を選択可能にする
optionタグには、以下の属性があります。
- value:送信される値
- selected:デフォルトで選択しておく項目
index.html<body> <select name="blood-type"> <option value="A">A</option> <option value="B">B</option> <option value="AB">AB</option> <option value="O" selected>O</option> </select> </body>送信ボタン(入力データの送信)
送信ボタンとは、テキストボックスやラジオボタン、チェックボックスなどの入力データを送信するボタンです。
送信ボタンは、input
タグを使用し、typeにsubmit
を指定します。
属性としては、以下があります。
- name:HTML内部で使用するボタンの名前
- value:画面に表示されるボタンの名前
ボタンに画像を使用したい時は、typeに
image
を指定し、画像の挿入と同様に、src
属性とalt
属性を指定します。index.html<body> <input type="submit" value="送信!"> <br> <input type="image" src="images/button.png" alt="送信ボタン"> </body>ラベル
ラベルは、
label
タグを使用し、for
属性で部品の紐付けを行います。
for属性で紐付けるのは、部品のid
属性(部品固有となる識別子)になります。
ラベルを押すと、紐付けた部品にフォーカスがあたります。index.html<label for="name">名前:</label> <input type="text" id="name">フォーム
フォームは、
form
タグを使用し、フォームで使用する全ての部品(テキストボックスやボタンなど)を囲みます。
主な属性としては、以下があります。
- action:データの送信先のページやURLを指定する
- method:データの送信方法(get, postなど)を指定する
- name:フォームの名前を指定する
index.html<body> <form> <label for="name">名前:</label> <input type="text" id="name"> <br> <label for="mail-address">メールアドレス:</label> <input type="email" id="mail-address"> <br> <label>性別:</label> <input type="radio" name="gender" value="man"> 男 <input type="radio" name="gender" value="woman"> 女 <input type="radio" name="gender" value="other"> その他 <br> <label for="content">お問い合わせ:</label> <br> <textarea id="content"></textarea> <br> <input type="submit" value="送信"> </form> </body>最後に
コピペでできる入力フォームを紹介しました。
HTMLは、あくまでの各部品を用意するものです。見栄えなどの装飾はcssやbootstrapでやります。
- 投稿日:2021-01-17T15:06:10+09:00
【HTML】コピペでできる入力フォーム
記事の対象者
- HTMLをあまり触ったことがない人
- とりあえずHTMLの雛形が欲しい人
- これからフロントエンドの勉強がしたい人
コピペでできるHTML
HTML雛形
index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>サンプル</title> <meta name="sample" content="サンプル"> </head> <body> <h1>Hello World!</h1> </body> </html>見出し
見出しは、
<h1>~<h6>
のタグが用意されています。hの数が大きくなるほど、文字が小さく表示されます。index.html<body> <h1>Hello World!</h1> <h2>Hello World!</h2> <h3>Hello World!</h3> <h4>Hello World!</h4> <h5>Hello World!</h5> <h6>Hello World!</h6> </body>段落
文章を書くときに、段落を付けたいときに使用します。
index.html<body> <p>私は猫が大好きです。</p> <p>また、亀も大好きです。</p> </body>画像の挿入
画像を挿入するには、
img
タグを使用し、src
属性とalt
属性を指定します。
- src:htmlファイルから見た、画像のパスを指定
- 絶対パスの例:http://xxxxxx.com/images/pc.png
- 相対パスの例:images/pc.png
- alt:画像が読み込めなかった場合に表示される文字列
index.html<body> <img src="images/pc.png" alt="PCの画像です"> </body>リンク
ハイパーリンクを挿入するには、
a
タグを使用し、href
属性でリンク先のURLを指定します。
必須項目ではありませんが、target
属性に「_blank」と指定すれば、別タグで開かれます。
- href:WebサイトのURLを指定
- Webサイトの例:https://www.yahoo.co.jp
- メールアドレスの例:mailto:<メールアドレス>
index.html<body> <!-- 文字クリックでサイトに飛ぶ --> <a href="https://www.yahoo.co.jp">yahoo</a> <!-- 改行 --> <br> <!-- 画像クリックでサイトに飛ぶ --> <a href="https://www.google.com"> <img src="images/pc.png" alt="PCの画像です"> </a> <!-- 改行 --> <br> <!-- メールアドアレスを指定する例 --> <a href="mailto:xxxxx@example.co.jp">メール</a> </body>「yahoo」の文字をクリックすれば、yahooのサイトに、画像をクリックすれば、googleのサイトに飛びます。
「メール」の文字をクリックすれば、メールソフトが起動し、送信先に指定したメールアドレスが自動で入力されます。リスト
リストには2種類のリストがあります。
1. 箇条書きリスト
2. 番号付きリスト箇条書きリストを表示するには、
ul
タグを使用し、ulタグの間にli
タグを使用し、項目を挙げます。
ul:Unordered List(順序のないリスト)
li:List Item(リストの項目)番号付きリストを表示するには、
ol
タグを使用し、ulタグの間にli
タグを使用し、項目を挙げます。
ol:Ordered List(順序のあるリスト)
li:List Item(リストの項目)index.html<body> <!-- 箇条書きリスト --> <ul> <li>Google</li> <li>Apple</li> <li>Facebook</li> <li>Amazon</li> </ul> <!-- 番号付きリスト --> <ol> <li>お湯を沸かす</li> <li>カップ麺にお湯を入れる</li> <li>3分まつ</li> <li>食べる</li> </ol> </body>表(テーブル)
表を作成するには、以下のタグを合わせて使用します。
- tableタグ:表を表すタグで、表を全体をtableタグで囲む
- borderで枠線を指定する
- trタグ:表の行を表す(Table Rowの略)
- thタグ:表の見出しを表す(Table headの略)
- colspanで横方向にセルを結合する
- tdタグ:表のセルを表す(Table Dataの略)
- rowspanで縦方向にセルを結合する
index.html<body> <!-- 表1(基本) --> <table border="1"> <tr> <th>名前</th> <th>性別</th> <th>特技</th> </tr> <tr> <td>のび太</td> <td>男</td> <td>寝ること</td> </tr> <tr> <td>しずか</td> <td>女</td> <td>ピアノ</td> </tr> <tr> <td>ジャイアン</td> <td>男</td> <td>歌</td> </tr> </table> <br> <!-- 表2(セルを横方向に結合) --> <table border="1"> <tr> <th colspan="3">プロフィール</th> </tr> <tr> <td>のび太</td> <td>男</td> <td>寝ること</td> </tr> </table> <br> <!-- 表3(セルを縦方向に結合) --> <table border="1"> <tr> <th>名前</th> <th>特技</th> </tr> <tr> <td rowspan="2">のび太</td> <td>射撃</td> </tr> <tr> <td>あやとり</td> </tr> </table> </body>入力欄
入力欄には大きく2種類あります。
- 1行テキストボックス
- 複数行テキストエリア
1行テキストボックスは、
input
タグを使用し、type
属性でtext
を指定します。
type属性には、text以外にも様々なタイプを指定できます。そのタイプによって、入力された内容がブラウザでサポートしている書式として正しい内容かをチェックしてくれます。
- text:1行のテキスト
- search:検索するときのテキスト
- email:メールアドレス
- tel:電話番号
- url:WebサイトのURL
placeholder属性を使用することで、あらかじめテキストボックスに中身を書くことができます。
文字を入力すると、プレースホルダーは非表示になります。複数行テキストエリアは、
textarea
タグを使用します。1行テキストボックス同様にplaceholderも使用できます。index.html<body> 名前:<input type="text"> <br> 性別:<input type="text" placeholder="男"> <br> お問い合わせ:<br> <textarea placeholder="お問い合わせ"></textarea> </body>ラジオボタン
ラジオボタンは、
input
タグを使用し、type
属性でradio
を指定します。
その他の属性としては以下があります。
- name:ラジオボタンの名前(選択肢をグループで統一させる)
- value:送信される選択肢の値
- checked:デフォルトで選択しておく項目
ラジオボタンは、複数ある選択肢の中から1つだけを選択させたいときに使用します。
index.html<body> <input type="radio" name="gender" value="man"> 男 <input type="radio" name="gender" value="woman" checked> 女 <input type="radio" name="gender" value="other"> その他 </body>チェックボックス
チェックボックスは、
input
タグを使用し、type
属性でcheckbox
を指定します。
その他の属性としては以下があります。
- name:チェックボックスの名前(選択肢をグループで統一させる)
- value:送信される選択肢の値
- checked:デフォルトで選択しておく項目
チェックボックスは、複数ある選択肢の中から複数の項目を選択させたいときに使用します。
index.html<body> <input type="checkbox" name="color" value="red"> 赤 <input type="checkbox" name="color" value="blue" checked> 青 <input type="checkbox" name="color" value="green"> 緑 </body>セレクトボックス
セレクトボックスは、
select
タグとoption
タグを使用します。
selectタグには、以下の属性があります。
- name:セレクトボックスの名前
- multiple:複数の項目を選択可能にする
optionタグには、以下の属性があります。
- value:送信される値
- selected:デフォルトで選択しておく項目
index.html<body> <select name="blood-type"> <option value="A">A</option> <option value="B">B</option> <option value="AB">AB</option> <option value="O" selected>O</option> </select> </body>送信ボタン(入力データの送信)
送信ボタンとは、テキストボックスやラジオボタン、チェックボックスなどの入力データを送信するボタンです。
送信ボタンは、input
タグを使用し、typeにsubmit
を指定します。
属性としては、以下があります。
- name:HTML内部で使用するボタンの名前
- value:画面に表示されるボタンの名前
ボタンに画像を使用したい時は、typeに
image
を指定し、画像の挿入と同様に、src
属性とalt
属性を指定します。index.html<body> <input type="submit" value="送信!"> <br> <input type="image" src="images/button.png" alt="送信ボタン"> </body>ラベル
ラベルは、
label
タグを使用し、for
属性で部品の紐付けを行います。
for属性で紐付けるのは、部品のid
属性(部品固有となる識別子)になります。
ラベルを押すと、紐付けた部品にフォーカスがあたります。index.html<label for="name">名前:</label> <input type="text" id="name">フォーム
フォームは、
form
タグを使用し、フォームで使用する全ての部品(テキストボックスやボタンなど)を囲みます。
主な属性としては、以下があります。
- action:データの送信先のページやURLを指定する
- method:データの送信方法(get, postなど)を指定する
- name:フォームの名前を指定する
index.html<body> <form> <label for="name">名前:</label> <input type="text" id="name"> <br> <label for="mail-address">メールアドレス:</label> <input type="email" id="mail-address"> <br> <label>性別:</label> <input type="radio" name="gender" value="man"> 男 <input type="radio" name="gender" value="woman"> 女 <input type="radio" name="gender" value="other"> その他 <br> <label for="content">お問い合わせ:</label> <br> <textarea id="content"></textarea> <br> <input type="submit" value="送信"> </form> </body>最後に
コピペでできる入力フォームを紹介しました。
HTMLは、あくまでの各部品を用意するものです。見栄えなどの装飾はcssやbootstrapでやります。
- 投稿日:2021-01-17T15:04:36+09:00
laravel 背景画像を固定化させる方法
はじめに
- 今回、久々にHTML CSSを編集して画像を背景にしたいと思い備忘録で投稿させて頂きます。
- 画面をスクロールしても背景は固定化されている。
- 背景の大きさは画面一杯に設定します。
- Asset関数を使用してフォルダを参照します。
- 写真素材はこちらでDLしました。写真AC
HTMLの編集
HTMLとCSSを結びつけるasset関数を記述して下さい。
<link rel="stylesheet" href="{{ asset('css/sample.css') }}">
これをhead内に記述して下さい。sample.blade.php<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Sample Title</title> <link rel="stylesheet" href="{{ asset('css/sample.css') }}">//これを記述して下さい </head> <body> </body>Asset関数とは
laravel独自のヘルパ関数の一つです。
画像やCSS、JavaScriptといったリソースデータの読み込みをする際に使います。
極論に言うと、publicフォルダの中を確実に参照させるために使います。
因みに{{}}
の意味は、xssの対策です。CSSの編集
sample.cssbody { width: 100%; height:100vh; background-image: url(../images/4317917_m.jpg); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; }background-imageを使って画像を呼び出し
background-image: url(../images/4317917_m.jpg);
..
は一つ上の階層フォルダを参照しているという意味になります。
/images
imagesというフォルダ(CSSと同じ位置に作ったフォルダ)を参照する。
最後に画像の名前をコピペ+拡張子
も必ず記述。background-position: center center
画像を常に上下左右の中央に配置させる。
background-repeat: no-repeat;
画像を繰り返し表示しないようにする。
background-attachment: fixed;
ページなどのコンテンツの高さが画像より大きい場合は自動で調整してくれる。
background-size: cover;
画面、ブラウザのサイズに基づいて、背景画像を調整。
このように画像いっぱいに画面を調整してくれます。以上です。
参考にしたURL
- 投稿日:2021-01-17T10:34:02+09:00
デイトラWeb制作コース 初級編DAY5の学び
【この記事に書いてあること】
プログラミング学習5日目⏩
— ふりっく?トリプルゼロの(これから)Webマーケター (@FuRiC_twi) January 16, 2021
目標:Web制作コース 初級編DAY5?
学習時間:2h27min⏳
学習内容:ゼロからサイトを作る✏
学び?
・リセットCSSの下にスタイルシートを記述する
・クラス名は基本「親要素の名前+用途」にする
・floatさせたら親要素の高さが0になってズレる
→解決方法あり#デイトラ pic.twitter.com/CxqZzAfEYa【目標】
「ゼロからサイトを作る①」
【学習時間】
2時間27分
【学び】
1.Emmentを使ったdescriptionの簡略化
index.htmlmeta:desc → <meta name="description" content="">2.command+方向キーで行を入れ替えることができた
3.リセットCSSの下にスタイルシートを記述する
リセットCSSの上にスタイルシートが来るとそれもリセットされてしまうからstyle.css<link rel="stylesheet" href="css/reset.css">リセットCSS <link rel="stylesheet" href="css/style.css">スタイルCSS4.クラス名は基本「親要素の名前+用途」にする
index.html<body> <header> <div class="container clear"> <div class="header-left"> <h1 class="header-title">30DAYSトライアル</h1>5.・floatさせたら親要素の高さが0になってズレる→.clear::after を使う
style.css.clear::after { /*clearのクラスをつけた要素の後ろ(after)を変更したい*/ content: ""; /*afterとbeforeの疑似要素にはcontentが必要*/ clear: both; /*空白を作る*/ display: block; } /*これらはセットで覚える!*/6.思い通りの見た目にならない時の☑チェックリスト
① コロン(:)とセミコロン(;)を間違えていないか
② 全角スペースが入っていないか
③ つなげる文字を書き忘れてないか。例えば、アンダーバー(_) ハイフン(-) ドット(.)など
④ 「閉じタグ」の数が不足してないか
⑤ classを定義するときに「ドット(.)」を書き忘れてないか
⑥ 単純なスペルミス
- 投稿日:2021-01-17T10:31:10+09:00
デイトラWeb制作コース 初級編DAYの学び
【この記事に書いてあること】
プログラミング学習5日目⏩
— ふりっく?トリプルゼロの(これから)Webマーケター (@FuRiC_twi) January 16, 2021
目標:Web制作コース 初級編DAY5?
学習時間:2h27min⏳
学習内容:ゼロからサイトを作る✏
学び?
・リセットCSSの下にスタイルシートを記述する
・クラス名は基本「親要素の名前+用途」にする
・floatさせたら親要素の高さが0になってズレる
→解決方法あり#デイトラ pic.twitter.com/CxqZzAfEYa【目標】
「ゼロからサイトを作る①」
【学習時間】
2時間27分
【学び】
1.Emmentを使ったdescriptionの簡略化
index.htmlmeta:desc → <meta name="description" content="">2.command+方向キーで行を入れ替えることができた
3.リセットCSSの下にスタイルシートを記述する
リセットCSSの上にスタイルシートが来るとそれもリセットされてしまうからstyle.css<link rel="stylesheet" href="css/reset.css">リセットCSS <link rel="stylesheet" href="css/style.css">スタイルCSS4.クラス名は基本「親要素の名前+用途」にする
index.html<body> <header> <div class="container clear"> <div class="header-left"> <h1 class="header-title">30DAYSトライアル</h1>5.・floatさせたら親要素の高さが0になってズレる→.clear::after を使う
style.css.clear::after { /*clearのクラスをつけた要素の後ろ(after)を変更したい*/ content: ""; /*afterとbeforeの疑似要素にはcontentが必要*/ clear: both; /*空白を作る*/ display: block; } /*これらはセットで覚える!*/6.思い通りの見た目にならない時の☑チェックリスト
① コロン(:)とセミコロン(;)を間違えていないか
② 全角スペースが入っていないか
③ つなげる文字を書き忘れてないか。例えば、アンダーバー(_) ハイフン(-) ドット(.)など
④ 「閉じタグ」の数が不足してないか
⑤ classを定義するときに「ドット(.)」を書き忘れてないか
⑥ 単純なスペルミス
- 投稿日:2021-01-17T10:15:58+09:00
デイトラWeb制作コース初級編DAY4の学び
【この記事に書いてあること】
プログラミング学習4日目⏩
— ふりっく?トリプルゼロの(これから)Webマーケター (@FuRiC_twi) January 15, 2021
目標:Web制作コース 初級編 DAY4 ?
学習時間:2h15min⏳
学習内容:VSCodeの環境構築・検証機能✏
学び?
・Live Serverは変更がリアルタイムで反映される
・検証で変更したソースコードは保存できる
・Emmentを使えばコーディングスピードが上がる#デイトラ pic.twitter.com/UX0al6tQOh【目標】
「VSCodeの環境構築・検証機能を知る」
【学習時間】
2時間15分
【学び】
Live Serverは変更がリアルタイムで反映されるから便利
要素「hover」はその要素の上にカーソルが乗っている場合の見え方を変更する
プロパティ「opacity」は透明度を変更する
1だとそのままで、0に近づくほど完全な透明になっていくコーディングするときは検証画面を開いて確認しながら進める
Chromeの検証で変更したソースコードは、そのままファイルにして保存できる
<方法>
・変更する
・sourceタブを開く
・変更したファイルを右クリックし、「save as」
・保存完了Emmentを使えばコーディングスピードが上がる!
参考サイト: Emmetの使い方とよく使うパターン集
- 投稿日:2021-01-17T10:01:15+09:00
デイトラWeb制作コース 初級編DAY3の学び
【この記事に書いてあること】
プログラミング学習3日目⏩
— ふりっく?トリプルゼロの(これから)Webマーケター (@FuRiC_twi) January 8, 2021
目標:デイトラDAY3?
学習時間:3時間16分⏳
学習内容:CSSの基本的な書き方とルール✏
学び?
①CSSファイルは相対パスで指定するのが一般的
②セレクタ・プロパティ・バリューという三つの要素
③特定の箇所のスタイルを変更する場合はclassを活用#デイトラ pic.twitter.com/enwhlBvzJj【目標】
「CSSの基本的な書き方とルールを覚える」
【学習時間】
3時間16分
【学び】
1.
CSSファイルは相対パスで指定するのが一般的
絶対パスだと作業しているフォルダを動かしたときやサーバーにアップしたときなどにパスがズレてリンクが切れてしまう
なので相対パスを使うようにする2.
セレクタ・プロパティ・バリューという三つの要素
セレクタ { プロパティ: バリュー; }
どこの→セレクタ
何を→プロパティ
どうするか→バリュー
よくある間違いとして、プロパティの右は:(コロン)、値の右は;(セミコロン)であることに注意する3.
特定の箇所のスタイルを変更する場合はclassを活用4.
「 > 」で繋げて書くことで、直属の子孫要素だけを指定することができる5.
font-sizeの値は
px・%・ em がある
font-size 16pxを倍の大きさにしたいときは
32px ・200%・ 2em と書く6.
CSSでよく使うプロパティ・fontの基本「プロパティ」
font-size:文字の大きさ
font-weight:文字の太さ
color:文字の色
font-family:文字のフォント
・テキストの基本「プロパティ」
line-height:行間
text-align:水平位置
vertical-align:垂直位置
text-decoration:テキストの装飾
letter-spacing:文字間のスペース・背景の基本「プロパティ」
background-image:背景画像
background-size:背景画像のサイズ
background-repeat:背景画像の繰り返し
background-attachment:背景画像の固定・移動
background-color:背景の色・positionの基本「バリュー」
fixed:スクロールしたらひっついて来る
relative+方向指定:本来表示される位置からどのくらい動かすか
absolute:親要素からどのくらい動かすか
absoluteとrelativeはセットで使う
- 投稿日:2021-01-17T05:57:37+09:00
【初学者向け】プラグインなし。Carousel Slider 自作してみた。
カルーセルスライダーを自作しました。また初学者用に図解化してみたので是非参考にして下さい。
完成イメージ
箱が小さくて申し訳ないのですが、こんな感じです。
ごく一般なカルーセルスライダーです。ちなみにカルーセルとスライダーの違いですが、カルーセルは別名メリーゴーランドというのですが、簡単に言ってしまうと同じところをグルグル回ってるという意味です。
対してスライダーは上下左右にスライドしていれば、それはスライダーです。
正直ループするかしないかの違いで機能自体に大きな違いはなく、意味的なくくりもないみたいです。
下準備
準備として、以下のことをします。
※コードを書かない場合は読み飛ばして下さい。【準備するもの】
・画像(以下にリンク貼ります)
・html/css/jsファイル(インラインで書いても良いけど分けた方がわかりやすいよ!)コーディング
マークアップ
html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Google font --> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap" rel="stylesheet"> <!-- FontAwesome --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous"> <!-- Original CSS --> <link rel="stylesheet" href="./css/style.css"> </head> <body> <!-- header --> <header> <h1>Carousel Slider</h1> <p>center line<br>↓</p> </header> <!-- carousel slider --> <div class="carousel"> <ul> <li><img src="./img/img1.png"></li> <li><img src="./img/img2.png"></li> <li><img src="./img/img3.png"></li> </ul> <!-- prev next button --> <span class="prev">←</span> <span class="next">→</span> </div> <!-- JQuery CDN --> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <!-- Original JS --> <script src="./js/main.js"></script> </body> </html>・
GoogleFont
とFontAwesome
はCDN書いていますが、今回は使いません。
・JQuery
は絶対使うので最新版を入れましょう。
・body
内の説明ですが、headerのp
は中心が、わかりやすい様に↓
をつけています。あとあと説明に使うのでとりあえず着けときましょう。
・div.carousel
ですが、大きく2つのブロックに分かれいます。まずul
には画像を3枚並べる様にli
を3つ並べています。あとはボタンとしてspan
を2つ書いています。画面はこんな感じになれば良いと思います。
レイアウト変更
次にCSSを書いていきます。ここは何回かに分けて説明します。
まずReset
を書き、header
は中央寄せだけ書きます。css@charset "utf-8"; /* Reset */ html,body,h1,p,ul,li{ padding: 0; margin: 0; } ul{ list-style: none; } img{ border: none; vertical-align: bottom; max-width: 100%; } /* header --------------------------------------- */ header{ text-align: center; }こんな感じになったかと思います。
次に、carousel slider
部分を整えます。
まずやるべきは中央寄せです。今回はブロック要素を中央寄せなのでmargin
を使えば良いですね。css(追加分のみ記載).carousel{ width: 100px; margin: 0 auto; }こんな感じです。
ここで冒頭でも触れた、headerのp
のセンターライン(↓)の出番です。
画像3枚がちゃんとこの、ラインのど真ん中に来てることを確認しましょう。次に、横並べをします。
横に並べたい要素はimg
ではなくli
なのでul
にflex
をかけます。
※ul
がflexコンテナ、li
がflexアイテムです。css(追加分のみ記載).carousel > ul{ display: flex; }とりあえずflexかけました。画面を確認します。
画像ちっさw
はい、これはflexの特性が関係してます。flexは、flexアイテムを横並べにするのですが、親要素の幅に対して均等配置する特性もあります。
つまり今回で言う親要素とは
ul
のことを指しています。そしてそのul
の幅と言うのは、100px
になります。ん?と思った人もいるかも知れません、
ul
に幅指定なんかしてないのに、なぜ100px
なのか?初心に戻って、CSSの略称はなんだったでしょうか?Cascading Style Sheetsです。Cascad=滝、つまり上から下へ流れることを示しています。もっと言うと、親から何かを受け継ぐと考えても良いでしょう。
では今回は「どこから」「何を受け継いでいるか」と言うと
ul
の親である.carousel
から幅を受け継いでると言うことになります。つまり100px
です。話を戻します。
クイズです。・100px内に画像が3つ収納されています。
・画像の元々の幅は100pxです。
・元の画像サイズのまま、横に並べたいです。どうしたら良いでしょうか・・・
答えは簡単です。flexアイテムで自動的に均等化されることは回避できないので、flexコンテナ自体を大きくします。
ではどれだけ大きくするかと言うと、画像の枚数分、倍にします。今回は3枚なので3倍にします。
CSSで3倍にする方法は、2通りあります。純粋に300%と書くか
calc(100% * 3)
と書くかです。
後者は一見メンドそうに見えますが、おそらく玄人になればなるほど後者を選ぶでしょう。
理由は明示的に3倍してるとわかるからです。現場に出れば、複数人でコードを管理します。パッと他人のコードを見た時にどう言う意図でコードを書いたかが伝わるのは後者の気がします。なので今回は
calc
を使います。css.carousel > ul{ width: calc(100% * 3); display: flex; }画面はこんな感じです。
画像サイズも元通りで、横並べになりました。
ただ注目すべき点は、センターラインの位置ですね。一番最初の要素が中心にいて、そこから右に後続の要素が並んでいます。なんか変な気がしますが、カルーセルなので問題ありません。最終的にはこのセンターラインにいる要素しか表示しないので後続がどこにいようが関係ないです。
では続きを書いていきます。
次にやるべきは、ボタンを作成し、適正な位置に配置します。
まずボタンの見た目だけやります。css(追加分のみ記載).carousel > span{ border-radius: 50%; background: orange; color: white; font-size: 30px; }こんな感じです。難しいことはありませんね。
次に配置です。配置といえばposition
ですが、今回は特定の要素を基準にして、ボタンを配置したいです。今回の場合、特定の要素と言うのは、このカルーセル大元である
.carousel
です。こう言った、特定の要素に対して配置をしたい場合、親要素に
relative
、子要素にabsolute
を使います。では親要素は
.carousel
、子要素はspan
とうことになるのでコードを追加していきます。css.carousel{ width: 100px; margin: 0 auto; position: relative; } .carousel > span{ position: absolute; top: 50%; border-radius: 50%; background: orange; color: white; font-size: 30px; } .carousel > span.prev{ left: 0; } .carousel > span.next{ right: 0; }こんな感じですね。順番に解説します。
まず.carousel
は先程も言った通り、span
の基準点にしたいのでposition: relative;
をかけてます。次に、基準点を作ったので、この基準点に対して、絶対配置をおこないます。
もちろん絶対配置の対象は
span
なので.carousel > span
にposition: absolute;
をかけています。ただ
position: absolute;
をかけるだけだと、効力が発揮されないので、プラスアルファーとしてtop: 50%;
をつけています。これは親要素の50%の位置に配置することを意味しています。そして、prevボタンは左に、nextボタンは右に配置したいので、それぞれ個別に
left: 0;
,right: 0;
をかけています。ここまで出来たら画面を確認します。
いろいろ問題がありますね・・・
2箇所あります。
まずは、ボタンの形が歪んでます。これはabsolute
の特性が関係しています。
absolute
をかけると、float
の様に、元居た階層から離れ(浮いてしまい)、別の階層(上の階層)に要素が移動してしまいます。と同時にblock要素になります。結果から先に言うと、block要素になったことで、
line-height: 1.5;
が付与されました。
span
はインライン要素です。インライン要素にはline-height: 1.0;
が初期値としてあります。対してblock要素には、
line-height: 1.5;
が付与されています。ここまでくるとなんとなく想像つくかと思いますが、
absolute
をかけたことで、block要素になり、line-height: 1.0;
から1.5
になったと言うことになります。なので縦長なレイアウトになってしまったと言うことですね。2つ目の問題として、ボタンが中央に配置されてないことですが、これは、
position
の配置方法が、要素の中心ではなく、左上だからです。なので、要素の半分のサイズ分、上にズラす必要があります。css(変更セレクタ全体を記載).carousel > span{ position: absolute; top: 50%; border-radius: 50%; background: orange; color: white; font-size: 30px; margin-top: -15px; line-height: 1.0; }これで、良い位置に配置されたかと思います。
これでレイアウト完成です!
次はJSを書いていくのですが、JSを書く上で重要なのは、テストや検証をどれだけやるかです。なので先にテストと検証をやっていきます。
JQuery
なにをテストしていくかと言うと、今回のメイン機能である、スライドです。
まず手作業で実装したい機能を実現させます。
以下のコード2行を追加します。css.carousel > ul{ width: calc(100% * 3); display: flex; margin-left: -100%; transition: .3s; }画面はこうです。今回は検証を使うので画面全体を撮ってます。
では検証の部分を見ていきます。以下の通りにしましょう。Elementsの中から
ul
を選び、Stylesの中から指定のポイントをクリックします。
以下の動画を見ながらやっってみて下さい。
margin-left: -100%;
についてる、チェックボックスをつけたり消したりすることで、擬似的にスライダーを実装することが出来ます。これは検証ツール上でCSSのオンオフが出来ることを利用した手法です。
この様に、目的を明確にする為に検証ツールは使うべきです。さて、話を戻しますが、ここまでやって、
margin-left: -100%;
をつけたり消したりすることで、スライダー実装することが出来ることがわかりました。なのでこれをJSに落とし込みます。では機能の概要はなんとなくわかりました。「●●をしたらxxをする」と言うのがJSイベントの基本なのですが、●●とxxなにが当てはまるでしょうか?
スライダーなので「ボタンを押したらスライドする」がただしそうですが、いまいち具体性にかけます。とはいえ考えても進まないので、今言った「ボタンを押したらスライドする」をコードに落とし込みます。
main.js$(function(){ $('.carousel > span').on('click', function(){ console.log($(this)); }); });こんな感じです。これも鉄則ですが、必ず1手順づつ
console
で確認しましょう。ここで
console
することで、このクリックイベントは動くことを証明出来るので後々エラーになった場合に、エラー原因の候補から外れます。
ではボタンクリックでconsole
ログを確認します。この様に、prevを押したら
span.prev
がnextを押したらspan.next
がconsole
ログに表示されましたか?
$(this)
と言うのは、自身の要素と言う意味があり、今回の場合イベントの発火元を$('.carousel > span')
と曖昧なセレクタしています。
$('.carousel > span')
はnext
とprev
の2つ存在することは理解できるかと思います。
ただしどちらがクリックされるかはわからないので、あえて$('.carousel > span')
とすることで、どちらがクリックされてもイベントが発火する様な設計になっています。ただ
prev
とnext
で別々の動きをするので$(this)
を使用することで、クリックされた要素のみを取得できる様にしてます。では次に、処理を分岐させましょう。
当たり前ですが、まずconsole
ログで確認します。
コードとしてはif文を使います。prev
が押されたら左
、next
が押されたら右
と表示します。main.js$(function(){ $('.carousel > span').on('click', function(){ if($(this).hasClass('prev')){ console.log('左'); } else{ console.log('右'); } }); });こんな感じで、ボタンを押した分
console
ログに表示されます。
ここで注意したいのが、右と左がちゃんとボタンの向きとマッチしてるか確認します。左右を逆転して書いてしまうことはありがちです。ここで不穏因子は徹底的に排除しましょう。ここから本番です。先程検証ツールを使って手動でスライド実装した時のコードが残ってます、まずこれを消しましょう。
css.carousel > ul{ width: calc(100% * 3); display: flex; /* margin-left: -100%; transition: .3s; */ }これが出来たら、消した2行と同じ意味を持つ、JSのコードを書いていきましょう。
main.js$(function(){ $('.carousel > span').on('click', function(){ if($(this).hasClass('prev')){ console.log('左'); $('.carousel > ul').animate({'margin-left':'-100%'}, 1000); } else{ console.log('右'); } }); });この様に動けば良いかと。
ただし現状問題があります。これは左ボタンを押したら、左に要素1つ分スライドすると言うコードなのですが、逆に言うと元いた位置から、1つ分以上動けないと言うことになります。実際にやってみると、何度クリックしても最初の1回以上は動かないはずです。
ではどうするか、一旦の打開策としてmargin-left: 0;
を続けてかけてみましょう。main.js$(function(){ $('.carousel > span').on('click', function(){ if($(this).hasClass('prev')){ console.log('左'); $('.carousel > ul').animate({'margin-left':'-100%'}, 1000, function(){ $('.carousel > ul').css('margin-left', '0'); }); } else{ console.log('右'); } }); });ここでポイントがあります。
animate関数
に続けて、処理を書く場合は、上記の様に関数をネスト化する必要があります。
かなり複雑な書き方ですが、正直慣れなので今は我慢しましょう。では動きを確認します。
無限にクリックできる様になったのですが、毎回初期の位置に戻ってしまいます。
次はこれを解決する方法を考えましょう。
ちょっと難しいのですが、カルーセル自体がループするものなので、移動した要素、末尾に配置すれば解決します。main.js$(function(){ $('.carousel > span').on('click', function(){ if($(this).hasClass('prev')){ console.log('左'); $('.carousel > ul').animate({'margin-left':'-100%'}, 1000, function(){ $('.carousel > ul').css('margin-left', '0'); $('.carousel > ul').append($('.carousel > ul > li:first-child')); }); } else{ console.log('右'); } }); });こんな感じです。順に解説します。
まずセレクタ末尾に追加するメソッドとして、.append()
があります。これは既存の要素、今回であればli
ですが、既存要素があれば動作的には追加ではなくカット&ペーストになります。つまり
.animate()
で左にズレたと同時に、先頭のli
をカット、末尾にペーストしてます。そして重要なのが、先頭がカットされ、末尾に追加されたと言うことは、元いた位置から押し出しで2つ分移動したと言うことになります。
そして、
margin-left: 0;
を追加した時の挙動を思い出して欲しいのですが、左にスライドしたと思ったら瞬間的に右に移動しましたよね?これを合わせることで、2つ左に移動して、右に1つ移動した結果、左に1つスライドした、となります。
ここら辺はややこしいので、図解化したので合わせてみて下さい。
では動作を確認します。
こんな感じでループが組めたら左側は完成です。
右側は左とおんなじ様なロジックで出来てるので自身で解読してみて下さい。以下に完成形コード載せときます。
※console.log
は邪魔なので消しました。main.js$(function(){ $('.carousel > span').on('click', function(){ if($(this).hasClass('prev')){ $('.carousel > ul').animate({'margin-left':'-100%'}, 1000, function(){ $('.carousel > ul').css('margin-left', '0'); $('.carousel > ul').append($('.carousel > ul > li:first-child')); }); } else{ $('.carousel > ul').prepend($('.carousel > ul > li:last-child')); $('.carousel > ul').css('margin-left', '-100%'); $('.carousel > ul').animate({'margin-left':'0'}, 1000); } }); });仕上げ
ではJSが完成したところで仕上げと行きます。
現状全てのli
要素が剥き出しになっているので、センターラインのエリアのみ表示できる様にしましょう。css.carousel{ width: 100px; margin: 0 auto; position: relative; overflow: hidden; }大元の親要素
.carousel
にoverflow: hidden;
をかけるだけです。.carousel > ul
にwidth: calc(100% * 3);
をかけていて、親要素からはみ出る様に設計したので、はみ出た分を隠すCSSを適用させます。これで目的通り、Carousel Sliderの完成です!
まとめ
長時間ありがとうございました。作成に8時間もかかってしまいました?
ただ機能と言うよりは、開発までの工程を学んで欲しくて、ひたすらに書き続けました。8時間あっという間でした。将来的にマネジメント・教育する立場になりたいと思っております。もし何かご意見、修正等あれば遠慮なくどうぞ!
2021/1/17追記
imgサイズどのサイズにも対応できる様に、cssを追記。
css@charset "utf-8"; /* Reset */ html,body,h1,p,ul,li{ padding: 0; margin: 0; } ul{ list-style: none; } img{ border: none; vertical-align: bottom; max-width: 100%; } /* header --------------------------------------- */ header{ text-align: center; } /* carousel slider --------------------------------------- */ .carousel{ /* ここの幅、高さを変える事でどのサイズにも対応させることが可能。imgのサイズ指定は不要。 */ width: 100%; height: 50vh; margin: 0 auto; position: relative; overflow: hidden; } .carousel > ul{ width: calc(100% * 3); display: flex; } .carousel > ul > li{ width: calc(100% / 3); } .carousel img{ width: 100%; height: 100%; object-fit: cover; } /* prev next button */ .carousel > span{ position: absolute; top: 50%; border-radius: 50%; background: orange; color: white; font-size: 30px; margin-top: -15px; line-height: 1.0; } .carousel > span.prev{ left: 0; } .carousel > span.next{ right: 0; }・冗長なセレクタを変数化。
・自動実行コードを追加。main.js$(function(){ let carUl = $('.carousel > ul'); $('.carousel > span').on('click', function(){ if($(this).hasClass('prev')){ carUl.animate({'margin-left':'-100%'}, 1000, function(){ carUl.css('margin-left', '0'); carUl.append($('.carousel > ul > li:first-child')); }); } else{ carUl.prepend($('.carousel > ul > li:last-child')); carUl.css('margin-left', '-100%'); carUl.animate({'margin-left':'0'}, 1000); } }); // 自動実行 setInterval(function(){ $('.carousel > span.next').click(); },3000); });