GSAPのScrollTriggerのピン留め機能を使用したら簡単に実装できました。 デモ See the Pen GSAPでサイドバーを固定しながらスクロール追従 by miyakezaka (@miyakezaka) on CodePen. GSAPを使う利点 実装が簡単で動作も安定している スクロールの対象のエリアのみ処理が行われるためブラウザ負荷が少ない IE11にも対応している その他の方法で実装した場合 GSAPを使用しないでサイドバーを固定する方法だと主に以下が考えられます。 CSSプロパティのposition: sticky;で実装 position: sticky;を紹介した記事をたくさん目にしますが、使用する場面が限られると思いました。 サイドバーに要素が多いと実装できない IE11に対応していない（ポリフィル読めば対応できるらしい） JS処理を組み合わせて実装 こちらは実装と他コンテンツの考慮などとにかく大変でした。 ページによってコンテンツの有無で高さが異なるなど、上手く設計してメンテしないと表示崩れが起きやすい。 スクロールの対象のエリア外でも常に処理が行われるため負担がブラウザ負荷がかかる コード解説 JS部分のコードの解説に入ります、GSAPの基本的なところは省きます。 まずはGSAP本体とScrollTriggerの２つを読み込みます。 HTML <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script> ScrollTriggerを設定していきます。 ポイントはendTriggerキーに固定を解除したい要素を指定して、endキーに指定要素のどの位置で解除するかを指定します。 マーカーで位置を確認しながら進めるとやりやすいです、狙った箇所で簡単に固定 〜 解除ができました。 JS gsap.to('.sidebar', { scrollTrigger: { trigger: '.sidebar', start: 'bottom 100%', end: 'bottom 100%', endTrigger: 'main', pin: true, markers: true } });
VSCodeでリストを一個一個記述するのが大変な時用のメモ VSCodeのEmmet機能を使う事！ ul>li*3>ul>li*2 これをすくなくとも末尾の2は必ず手打ちでやるってすぐにTabキーを押すと <ul> <li> <ul> <li></li> <li></li> </ul> </li> <li> <ul> <li></li> <li></li> </ul> </li> <li> <ul> <li></li> <li></li> </ul> </li> </ul> 上記の様に変換される 自分の所持しているVSCodeだとコピペにした場合、インデントが生じるだけなので ul>li*3>ul>li*2の末尾だけは手打ちでやった方が良い。
はじめに こんにちは！ 松本 佑大（まつもと ゆうだい）と申します！ 今回はv-showについてアウトプットしていきます！ v-show とは 要素の表示/非表示を切り替えることができます。 v-ifと違うポイントとしてはp要素そのものが削除されるのではなくcssのdisplay プロパティをon/offされるで表示/非表示が繰り返されます。 書き方 HTML <div> <p v-show="toggle"> Good night! </p> </div> Vue.js var app = new Vue({ el:'#app', data:{ toggle:true } ※細かい書き方はv-ifと同じで前記事で解説しているので省略します。 まとめ ・v-showではdisplayプロパティがon/offされる。 ・全体的な書き方はv-ifと一緒。 最後に 今回はv-showについてアウトプットしました。 今回の記事を読んで気になったこと、質問等あればコメント等頂けると幸いです。 今後ともQiitaにてアウトプットしていきます！ 最後までご愛読ありがとうございました！
HTMLの要素の属性 <a href="URL">文字</a> HTML では、<a></a> の形式で書かれている部分を 「要素」 href="" の形式で書かれているものを「要素の属性」と呼ぶ href 属性では、ハイパーリンクのリンク先を a タグに情報として与えることが可能である。 つまり文字をクリックするとコーディングしたURLのところへ飛ぶことが出来る
経緯 偉い人「こんな感じのCSSで調整できるラジオボタンが欲しい」 蝦「はい」 作るもの HTML radio.html <!DOCTYPE html> <html lang="ja"> <body> <h1>CSSでスタイルを設定できるラジオボタン</h1> <div> <label class="radio-label" for="radio-1" ><input type="radio" name="choice-1" class="radio-none-dsplay" id="radio-1" /><span class="dummy-radio" ><span class="dummy-radio-check"></span></span >選択肢1</label > <label class="radio-label" for="radio-2"> <input type="radio" name="choice-1" class="radio-none-dsplay" id="radio-2" /><span class="dummy-radio" ><span class="dummy-radio-check"></span></span >選択肢2</label > <label class="radio-label" for="radio-3"> <input type="radio" name="choice-1" class="radio-none-dsplay" id="radio-3" /><span class="dummy-radio" ><span class="dummy-radio-check"></span></span >選択肢3</label > </div> </body> </html> 以下、重要な点 labelのクリックでinputを選択できるようにする。 input要素のid属性とlabel要素のfor属性を同じにすると、label要素とinput要素を関連付けできる。この場合はlabelをクリックするとinput要素を選択できるようになる。 MDN曰く label要素 を input要素に関連付けるには、 input要素に id 属性を設定しなければなりません。そして label要素 に for 属性を設定して、値を input要素 の id と同じにします。 他の方法として、 input を直接 label の内側に入れることができますが、この場合は関連付けが明確なので、 for および id 属性は> > 必要ありません。 単に関連付けするだけならどちらかでいい。 ダミーのラジオボタンを作るためのspan要素を作る。 input要素の直後に配置してセレクタで選べるようにする。input要素が外にある場合でもセレクタが変わるだけで同じ。 CSS style.css /* HTMLでラジオボタン部分を自作するため隠す。 */ .radio-none-dsplay { display: none; } /* ラベル本体 */ .radio-label { /* 縦に並べてなおかつ中の要素をきれいに中央に配置する */ display: flex; vertical-align: middle; align-items: center; } /* 代わりに表示するラジオボタン部分 */ .dummy-radio { display: inline-block; margin-right: 5px; height: 18px; width: 18px; border: solid 1px black; position: relative; vertical-align: middle; } /* ラジオボタンの中に表示するチェック部分 */ /* 非選択時は非表示 */ .dummy-radio-check { display: none; } /* チェック部分のCSS */ /* 選択時のみチェックを表示する。 */ .radio-none-dsplay:checked + .dummy-radio > .dummy-radio-check { bottom: 3px; left: 3px; display: block; position: absolute; height: 18px; width: 10px; border-bottom: solid 5px black; border-right: solid 5px black; transform: rotate(30deg); } 以下、重要な点 疑似クラスセレクター クラスや要素の後ろに:hogeの形で書くあれ。今回はinput要素が選択されているかどうかの判別に使う。 style.css .radio-none-dsplay:checked{/*ここにスタイル*/} 結合子 今回は+(隣接兄弟結合子)と>(子結合子)を使う input選択時のみチェック部分を表示したいので 「選択されたinput.radio-none-dsplayの直後（隣接兄弟結合子）にある.dummy-radioの中の.dummy-radio-check」 というセレクターを書けばOK style.css .radio-none-dsplay:checked+ .dummy-radio > .dummy-radio-check {/*ここにスタイル*/} おわり なんかあったらコメントください
先日自分のポートフォリオを業務委託先に渡す前に作り直そうと思いました。 しかし、PHPでお問い合わせフォームを実装するのがめんどくさい、、。 PHPファイルにして、MAMP起動して、、って、 今のPFにしてから一時期googleフォームを埋め込むスタイルにしてたのですが、コーダー、エンジニアのPFにするにはダメかしら、、と。 そして調べてみるとhtmlだけでも実装できる方法が。 Simple HTML from your websiteを使ってみる Simple HTML form for your website 必要なのは上記のサイトのCreate Access Keyでアクセスキーを取得して、フォームに入れ込むだけです。 チートです。むしろgoogle formよりチートかもしれない。 見た目だけでも、、って人ならひとまずこの方法でもいいんじゃ無いか、、と思います。（でも一度はphpで作ってみた方が良いとは思いますが） <form action="https://api.staticforms.xyz/submit" method="post"> <input type="text" name="name" placeholder="Your Name"> <input type="text" name="email" placeholder="Your Email" /> <textarea name="message"></textarea> <input type="hidden" name="accessKey" value="取得したアクセスキー"> <input type="hidden" name="redirectTo" value="リダイレクトしたい画面のurl"> <input type="submit" value="Submit" /> </form> 気をつけなければいけないのが、 リダイレクト先を相対パスで書いてしまうと上手くいきません。 https~から書いてあげましょう。 リダイレクト先は私は別でファイルを用意しました。 同じフォルダの中にsuccess.htmlを作り、リダイレクト先のvalueに入れます。 同じホームに戻ってきてJSでアラートなり表示させても良いかと思います。 cssはよしなに書いてみてください。 ご参考までに、、 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Document</title> </head> <body> <h1>お問合せ</h1> <form action="https://api.staticforms.xyz/submit" method="post"> <input type="text" name="name" placeholder="Your Name" /> <input type="text" name="email" placeholder="Your Email" /> <textarea name="message"></textarea> <input type="hidden" name="accessKey" value="取得したアクセスキー" /> <input type="hidden" name="redirectTo" value="リダイレクトしたい画面のurl" /> <input type="submit" value="Submit" /> </form> </body> </html> style.css h1 { text-align: center; } form { display: flex; flex-direction: column; width: 300px; margin: 0 auto; } input, textarea { margin-top: 10px; } success.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>送信完了</title> </head> <body> <p>送信が完了しました</p> <button class="back__btn"> <a href="ホームのurl">戻る</a> </button> </body> </html> 時間がないんだ〜！って時は試してみてください。
前回までのコード index.html <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body> <h1>index</h1> <a href="sample.html"> <img src="gazou.png" height="50px"> </a> </body> </html> sample.html <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body> <h1>sample</h1> <a href="index.html">indexページへ移動</a> </body> </html> 上記の二つのHTMLファイルを同一のフォルダに作成しました。 また、"gzsou.png"というファイルも同じフォルダに入れ、index.htmlで表示させました。 CSSファイルを作成する VSCodeで、control + N を押し、新規ファイルを作成します。 control + S で保存しましょう。 ファイル名は"style.css"としました。 半角小文字英数であれば、どのような名前でも大丈夫です。 HTMLにCSSファイルを適用させる。 ＜link rel="stylesheet" href="ファイル名.css"＞ headタグ内に、link要素を挿入します。 rel属性で、リンクするファイルの種類"stylesheet"（スタイルシート）を指定します。 href属性はアンカー要素でも使いました。cssファイルのファイル名や場所を指定するパスを記入します。 （パスはURLでも可能です。今後説明しますが、ブラウザ毎に表示を同一にするためのリセットCSSを読み込むときなどは、URLで指定することによりyahooなどが提供しているcssを読み込むことができます。） 実際の記述は以下のようになります。 index.html <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>index</h1> <a href="sample.html"> <img src="gazou.png" height="50px"> </a> </body> </html> 要素に名前をつける HTMLの要素にはそれぞれ自分の好きな名前を付けることができます。 そんなときに使うのがid(アイディー）とclass(クラス)です。 id（アイディー） idで指定した名前は、ひとつのHTMLファイルの中でひとつしか存在してはいけないルールです。 他の要素に同じ名前を付けないように気を付けましょう。 class（クラス） クラスは、小学校などのクラスをイメージしてもらうとわかりやすいかもしれません。 クラスメイトの名前、(id)はそれぞれ別ですが、同じクラスメイトなので同じクラス名がついているといった状態です。 ですので、複数の要素が同じclass名を持っていてもよいのです。 具体的にコードでどのように表すのかを見ていきましょう。 例えば、img要素に名前を付けてみましょう。 index.html <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>index</h1> <a href="sample.html"> <img id="gazou" src="gazou.png"> </a> </body> </html> これで、img要素のid名が"gazou"となりました。 前回まで書かれていた、height属性とその属性値"50px"は消しています。 では、style.cssのコードも書いていきましょう。 以下のように記入してください。 style.css #gazou{ width: 300px; } セレクター セレクターとは、HTMLで指定したid名やclass名がある要素をCSS上で選び、 要素の見た目を変えることができます。 上記のコードで見ると、セレクターは、#gazouの部分になります。 セレクターの”＃”は何でしょうか？ これは、idをCSSファイルで指定する、idセレクター（アイディーセレクター）といいます。 index.htmlで、 index.html <img id="gazou" src="gazou.png"> と記述してある要素を変更することができます。 プロパティ と 値 CSSでは、 style.css #gazou{ width: 300px; } のように、idセレクターのあとに記述している { から } の波かっこの中に変更したい内容を記入していきます。 今回はwidth(ウィドゥス?ワイズ?)がプロパティで、 : と ; の間にある。 "300px" が値となります。 プロパティ: 値; という書き方が基本となります。 上記のようにCSSを書き変えてブラウザを更新すると、 このように、画像の大きさを調整することができました。 試しにCSS上で"300px"の値を"500px"にしたりと自分の好きな大きさにしてみてください。 自由に大きさを変えられることが理解できると思います。 classセレクター HTMLで複数の要素に同じclass名を付けることで、一度に要素の設定を行うことができます。 下記のコードのように、img要素をコピー＆ペーストして複数つくり、class名を設定してみましょう。 index.html <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>index</h1> <a href="sample.html"> <img class="gazou" src="gazou.png"> <img class="gazou" src="gazou.png"> <img class="gazou" src="gazou.png"> </a> </body> </html> style.css .gazou{ width: 200px; } CSSで呼び出すときのclassセレクターは、.gazouのように、名前の前にドット"."を付ける決まりです。 このように、同じ名前のclass名のある要素全てにcssの設定が反映されました。 特に意味を持たない要素 ＜div＞（ディブ） divタグは開始タグと終了タグが存在します。 divタグは特に意味を持たないタグです。 このタグで囲まれた要素はブロックレベル要素になります。 <div></div> またclass名やid名を付けてcssで背景色や境界線、縦横の大きさなどを指定することもでき、Webデザインにおいて多様することが多い要素でもあります。 divタグにclass名を付けて、その性質を確認してみましょう。 index.html <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>index</h1> <div class="box"></div> </body> </html> style.css .box{ width: 200px; height: 100px; background-color: blue; } HTMLのbodyタグの中にdivタグを挿入しました。 divタグの開始と終了タグの間には何も記入しませんでした。 class名は"box"としました。 CSSは以下のようにプロパティとその値と指定してみます。 style.css .box{ width: 200px; height: 100px; background-color: blue; } width: 200px; は横幅を200pxにする。 height: 100px; 高さ（ハイト）を100pxにする。 background-color: blue; 背景色（バックグラウンドカラー）をblue（ブルー）青にする。 という意味になります。 かならず、プロパティのあとには : （コロン）を付け、値の後には ; （セミコロン）を記入する決まりになっています。 このような記述のルールや、スペルが間違っていると、エラーとなり、正しく表示されません。 divタグはブロックレベル要素であると説明をしました。 ですので、同じブロックレベル要素をもう一つHTML内に記述すると、縦に積みあがるはずです。 class名を"box2"としてdiv要素を作ってみます。 その際、cssの方では、サイズはそのままに、背景色の設定はbackground-color: red;として、赤色になるように設定してみましょう。 index.html <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>index</h1> <div class="box"></div> <div class="box2"></div> </body> </html> style.css .box{ width: 200px; height: 100px; background-color: blue; } .box2{ width: 200px; height: 100px; background-color: red; } 以上のように、書き変えてみましょう。 この状態でブラウザを更新してみると。 以上のように、boxが縦に積みあがっています。 特別な設定をしない限り、ブラウザは左上に重力があると考えて作業すると良いです。 全ての要素は左上に吸い寄せられるように配置されるようになっています。 左上に重力がある。と覚えましょう。 spanタグ spanタグはdivと同じように特に意味を持たないタグです。 divタグと同じように、CSSでプロパティと値を設定して、要素に変化を与えます。 divタグと違うところは、インライン要素であるということです。 インライン要素なので、ブロック要素のように、縦に積みあがるわけではなく、 左から右へ横へ並んでいきます。しかし、ここでも左上に重力がかかっているということは同じです。 コードで書いて、実際にブラウザで確認してみましょう。 index.html <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>index</h1> <span class="line">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</span> <span class="line2">何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</span> <div class="box"></div> <div class="box2"></div> </body> </html> 上記のように、spanタグには、"line"と"line2"というclass名をつけました。 style.css .line{ background-color: yellow; } .line2{ background-color: pink; } .box{ width: 200px; height: 100px; background-color: blue; } .box2{ width: 200px; height: 100px; background-color: red; } CSSでは"line"には背景色を黄色に指定、"line2"には背景色をピンクにしていしました。 ブラウザを更新して確認してみます。 "line"の横に、"line2"が並びました。 また、"line2"はブラウザのウインドウからはみ出したところは、次行に開業されています。 これが、インライン要素の特徴です。 インライン要素に続き、ブロックレベル要素が指定されています。 ブロックレベル要素は、インライン要素の横には並ばず、下に積みあがるように縦方向に並びました。 このように、CSSを使ったWebデザインでは、ブロックレベル要素、インライン要素の特徴の理解が大切になります。 次回予告 次回は、CSSの様々なプロパティについて見ていきます。
初投稿です。 html、css、Bootstrapを使用したLP形式での広島の紹介ページを作成しました。 Web制作について独学で勉強し始め、初めての成果物です。 いわゆるポートフォリオとは異なりますが、何か感想等いただけたら嬉しいです。 ▼リンク http://www.tamari-web.site/
