20211012のCSSに関する記事は6件です。

GSAPでサイドバーを固定しながらスクロール追従

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の2つを読み込みます。 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 } });
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

CSS calc( )

@mixin font($fSize) { font-size: calc((750 / 640) * $fSize / 2); } @include font(24px); //14.0625px
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

HTMLのラジオボタンをいい感じに自作する。

経緯 偉い人「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 {/*ここにスタイル*/} おわり なんかあったらコメントください
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【第九回】コロナ禍だから何かできることをー 自宅療養者連絡ツール ー

前回までのあらすじ 【第八回】コロナ禍だから何かできることを 実装イメージ図 LINEを利用して保健所の担当者の負担を軽減するとともに、自宅療養者はいつでもつながっている安心感を持たせるためのツールイメージです。 今回が最後なので、まとめていきたいます。 イメージ動画 まずは、第1回でも公開したイメージ動画です。 このアプリで期待できる効果 ・コロナ感染した自宅療養者の不安や寂しさを解消 LINEで担当者(保健所職員)とつながっていることや、 自動でシステムに管理してもらっていることから、 今までより格段に速く異常を察知できます。 そのため、一人という不安から解消されるはずです。 ・担当者(保健所職員)の負担軽減 第5波の時、自宅療養者が格段に増えたとき、担当者は毎日確認の連絡や訪問を行っていました。 それにより、1人辺りの担当人数がキャパシティをオーバーし、長時間労働をする形になりました。 今回、初めて知ったのですが、緊急時の場合は36協定等が適用外になるそうです。 つまり、緊急事態が解除されるまで働き続けることもありうるそうです。 そのため、このシステムで管理することにより、本当に連絡が必要な人を判断するこができ、 無症状の人を含めた全員に連絡をする必要がなくなるのです。 このことで、病院の手配や他の必要な業務にまわることができます。 システム構成まとめ 構成自体はシンプルです。 地区ごとに作業者と利用者を登録し、利用者の状態を履歴で保存し、異常を検知したら連絡をする。 いまさらながら、システムの流れ 地区と作業者は登録されているものとします。 1.陽性が判明すると、病院などから保健所へ連絡がきます(ここは憶測) 2.連絡を受けた保健所の担当者はこのシステムに利用者の登録をします。 3.保健所の担当者は陽性者へ連絡をします。   この時に、2で登録したユーザーコードを渡します。   ※メールでも、QRでもなんでもOK(ここは未実装) 4.陽性者はLINEのチャンネル登録後に伝えられたコードを入力します(ここで連携済) 5.陽性者は自宅待機中は常に症状の報告をします。 6.保健所の担当者は陽性者の登録パターンによって変えます。    ・LINEの連携がない場合は今まで通り    ・LINEの連携がある場合は異常になるか状態が変化するまで待機 7.保健所の担当者は陽性者の状態が変化したら状態を更新する。    ・未連絡、自宅待機、入院、その他    未連絡・自宅待機は管理対象    入院・その他は管理対象外 8,今回は、管理対象の陽性者から12時間以上連絡がない場合は注意喚起、   24時間以上連絡がない場合は警告を画面上に表示するとともにメールを送信   ※LINE連携がない陽性者は保健所の担当者が電話連絡や訪問を行い、画面上から登録します。 さいごに ニュースとかみてて、孤独死や保健所の担当者が大変な場面を見ました。 この時、自分には何ができるのかと思ったのですが、システム開発しかできません。 なので、ITの力で解決できるためにはを考えていたらこの仕組みを思いつきました。 この仕組み自体、だれでも思いつくし、だれでも実装できるのでもっと世の中に広まればいいのにって思いで公開に至りました。 第6波が来るのか来ないのかはわからないですが、仮に来たら第5波以上になることは確実です。 医療崩壊もそうですが、役所崩壊にならないことを祈るばかりです。 コロナ禍だから何かできることをー 自宅療養者連絡ツール ー 【第一回】実装イメージ図と動画 【第二回】LINEからデータを取得して返すまでの流れ 【第三回】LINEからデータベースまでの流れ 【第四回】データベースへの更新までの流れ 【第五回】ユーザー登録の仕組み-LINEbotの設定部分 【第六回】ユーザー登録の仕組みLIFFで表示する画面の開発 【第七回】データベースの構造 【第八回】WEB画面上でできる機能 ->>【第九回】まとめ
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

HTMLの基本4 CSSとの関係

前回までのコード 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の様々なプロパティについて見ていきます。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【成果物】旅日記

初投稿です。 html、css、Bootstrapを使用したLP形式での広島の紹介ページを作成しました。 Web制作について独学で勉強し始め、初めての成果物です。 いわゆるポートフォリオとは異なりますが、何か感想等いただけたら嬉しいです。 ▼リンク http://www.tamari-web.site/
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む