positionとは position は CSS のプロパティで、文書内で要素がどのように配置されるかを設定します。 top, right, bottom, left の各プロパティが、配置された要素の最終的な位置を決めます。 引用：MDN Web Docs top, right, bottom, leftで要素の位置を決めたい時に設定が必要 static top, right, bottom, leftによる位置設定が適用されなくなる <div id="red" class="box"></div> <div id="blue" class="box"></div> <div id="green" class="box"></div> #red { background: red; position: static; top: 40px; } #blue { background: blue; top: 40px; } #green { background: green; } #red, #blueはstaticが設定されるためtop: 40pxは適用されない ※#blueのようにposition自体を設定していない場合はstaticと同じ挙動になる relative 周りの要素を基準にして位置設定を行う #red { background: red; } #blue { background: blue; position: relative; left: 40px; } #green { background: green; } 上記の場合、#redの要素を基準に40px空けて#blueの要素をに配置する absolute 親要素を基準にして要素を配置する。 周りの要素に位置が被る場合は重ねて前面に表示される。 #red { background: red; } #blue { background: blue; position: absolute; left: 40px; } #green { background: green; } 上記の場合、親要素（画面左端）を基準に40px空けて配置される。 位置が被っている#redは背面に表示 fixed 常に画面端を基準に要素が配置される 画面サイズを変更した場合も設定した間隔を維持して配置され続ける。 #red { background: red; } #blue { background: blue; } #green { background: green; position: fixed; right: 40px; } #greenの要素は画面右を基準に40px空けて配置される。画面サイズを変更しても位置は変わらない。 fixed 補足 親要素にtransform, perspective, filterが設定されている場合、親要素を基準に配置される <div class="container"> <div id="red" class="box"></div> <div id="blue" class="box"></div> <div id="green" class="box"></div> </div> .container { background: gray; width: 400px; transform: translate(100px); /* X方向へ100px移動 */ } #red { background: red; } #blue { background: blue; } #green { background: green; position: fixed; right: 40px; } 上記の場合、親要素にtransform: translateが設定されているため、配置の基準は画面右ではなく親要素(灰色の部分)になる。 sticky スクロールなどで要素が指定の位置(top, right, bottom, leftの設定値)を超えると固定で表示される。 .box { width: 100px; height: 100px; position: sticky; top: 10px; margin-bottom: 50px; } #red { background: red; } #blue { background: blue; } #green { background: green; } 上記の場合、赤青緑ブロックの上部が10px以下になると画面上に固定されるようになる。 参考サイト

CSSでぷかぷか浮かぶタイトルを作りたい！ //css .title, .title span { position: relative; display: inline-block; } .title span { padding: .65em 4em; background: -webkit-linear-gradient(#fe5f95 , #ff3f7f); background: linear-gradient(#fe5f95 , #ff3f7f); border: 1px solid #fe3276; border-radius: 4px; color: #fff; box-shadow: 10px 10px 15px -10px; /* text-decoration: none; */ text-align: center; animation: 3s float ease-in-out infinite; animation: 3s float ease-in-out infinite; } .title::after { position: absolute; bottom: -15px; left: 50%; z-index: -1; content: ''; width: 100%; height: 24px; background-color: rgba(0, 0, 0, 0.3); box-shadow: 10px 10px 15px -10px; border-radius: 50%; transform: translateX(-50%); transform: translateX(-50%); animation: 3s shadow ease-in-out infinite; animation: 3s shadow ease-in-out infinite; } @-webkit-keyframes float { 50% { transform: translateY(-10px); } } @keyframes float { 50% { transform: translateY(-10px); } } @-webkit-keyframes shadow { 50% { width: 70%; height: 18px; } } @keyframes shadow { 50% { width: 70%; height: 18px; } } //HTML <h1 class="title"><span>タイトル</span></h1>

どうも7noteです。スクロールしたら途中でピョコッと出てくる画像の作り方を解説 ここ数年でwebのバナー広告がとても増えたように思います。その中でもスクロールしていたら急に出てくるバナー系。 個人的には視線を奪われるのでストレスになり嫌いなのですが、ちゃんと欲しい情報が出てるのならいい仕組みだなと思います。 今回は簡易的に「一定距離スクロールしたら画面の下から出てくるバナー画像」を作っていきます。 スクロールしたら出てくるバナー画像の作り方 index.html 〜〜〜〜省略〜〜〜〜 <div class="banner"> <img src="banner.png" alt=""> </div> 〜〜〜〜省略〜〜〜〜 style.css .banner { width: 100%; background: #aaa; display: none; /* 最初は非表示にする */ position: fixed; /* 表示位置を固定 */ bottom: 0; left: 0; padding: 5px; box-sizing: border-box; } .banner img { width: 100%; } script.js $(window).scroll(function () { var pos = 800; // ①上からの距離(px)で指定する場合 var pos = document.body.clientHeight / 3; // ②上からの割合(%)で指定する場合 if ($(this).scrollTop() > pos) { $('.banner').fadeIn(); } else { $('.banner').fadeOut(); } }); ※①か②は好きな方を指定してください。 解説 バナーを出すタイミングを決めるために、スクロール量を計測します。 スクロール量の設定方法としては大きく2つの選択があり、 ・上からXXpx進んだら、もしくは下からXXpxのところまできたら ・ページ全体の何割スクロールしたか 上のような2つの方法があります。割合で決めるのか、上、もしくは下からの距離で指定をすることができます。 またorを使って両方の仕様を適応させて、「50%のところまでスクロールされたら、もしくはページが長いときには上から1500pxスクロールされたら、、、」みたいな書き方も可能です。 バナー画像を出すタイミングのスクリプトが書けたら、次は画像を表示する処理を書きます。 今回はfadein、fadeoutを使って表示を切り替えていますが、クラスを付与したら出てくるように表示時用のCSSを書きわける方法もあります。 これで完成ですね。 まとめ 今回は自作で作る方法を解説しましたが、多くのサイトは専用のツールを導入しているのかな？と思います。 ツールを導入することで、実際にどれくらいの年代や性別の人がどの割合でクリックしたのかなどの計測ができるツールとして売られています。 最初にも書きましたが、個人的にはユーザーの動きに反する広告なのでそのうち廃れるのでは。。。なんて勝手に考えています。(※個人の感想です) webの業界は流行り廃りが激しいので、また新しい手法がどんどん出てくるでしょう。 時代に合わせたwebが作れるようになりたいものですね。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ

Holy Grail layout is CSS layout. Body is 3part divided. It's has header and footer.

アクセシビリティーの理解 アクセシビリティーとは 「ユーザーが快適にWebを使えるようにすること。」 マウスの故障でキーボード操作でページの閲覧をしている方、視覚障害などで音声ブラウザを使用している方など、色んなユーザーにとって優しいサイトである必要があります。 意識することで結果的に綺麗なコードになり、seo的にも役に立ちます。 今回指摘されたポイント ・role属性の必要性 <a>タグでボタンを実装した場合はrole属性で役割を明示してあげる必要があります。 <a class="btn btn-primary" href="#" role="button">Link</a> ・<button>タグにはtypeも指定する必要がある 初期値がsubmitの為フォームで使用しない場合は、typeを指定してあげた方がいい <button type="button" class="btn btn-primary">Primary</button> ・読み上げが必要ない部分にはarea-hiddenを使用 aria-hidden="true" を使用することによって読み上げをスキップできます。 style='display:none' を指定している部分に使ってあげるみたいです。 jsのプレフィックスは必ず必要 jsで操作する場合jsを接頭辞につける必要があります。 $('.hoge').toggleClass('hogehoge') こういった部分は必ず、.js-hogeで指定してあげた方がいいみたいです。 タグの使い方 ・空の要素にbackgroundなどでデザインをつけるもはよくない。もし必要なら<span>タグで行う。 ・文字として意味を持たないものはタグで囲んで使うのではなく擬似要素などで表現する。 <p>テキストテキスト<span>＞</span></p> こういう場合 ＞　は擬似要素で表現する。 細かいメモ ・reset.cssは触らない ・font-sizeをremで指定したら余白もremを使用しないと意味がない。 ・alt属性や英語を大文字で指定すると読み上げソフトを使う際、変な読み上げになる。小文字で記載してcssなどで調整する(一文字目は大文字でも問題なし) ・<tr>で囲んでいる場合<th>が一番上。テキスト上<th>にしたくない場合は、cssで変更する。 初めてコードレビューしていただいて独学だと気にしない点が多々ああたのでいい気づきになりました。

はじめに Vuforia Studioでは、よく使うウィジェットに、スライダーウィジェットがある。そのスライダーウィジェットのスタイルの変更例を備忘録としておく。 前提 Vuforia Studioで、ARコンテンツを独力で作成できる人が対象。 スライダーを配置する スライダーウィジェットをドラッグ＆ドロップで 2Dキャンパスの下部パネルに配置する。スタイル確認用に2つ配置しておく。 個々のスライダーのスタイルを変更する 色を変更する（背景色） 画面左の「アプリケーション」をクリックしてスタイル編集を開き、以下のコードを追加する。 // スライダーウィジェットのスタイル設定 .slider1 { background: rgba(0, 255, 255, 1.0); // 背景色 } そして、スライダーウィジェットのクラスにこの「slider1 」を入力して保存する。これで背景色が変わる。 rgbaの a の透明度を 0.5 にして半透明にしてみる。 // スライダーウィジェットのスタイル設定 .slider1 { background: rgba(0, 255, 255, 0.5); // 背景色 } プレビューで見ると、半透明になっている。 色を変更する（つまみ部分） スタイルに、以下のようにつまみ部分の設定を追加すると、つまみ部分の色を変更できる。 // スライダーウィジェットのスタイル設定 .slider1 { background: rgba(0, 255, 255, 0.5); // 背景色 input[type=range]::-webkit-slider-thumb { // つまみ部分 background: rgba(224, 255, 255, 0.7); // つまみの色 } } 色を変更する（枠を追加する） スタイルに、以下のように borderスタイル設定を追加すると、指定色で枠を追加できる。 // スライダーウィジェットのスタイル設定 .slider1 { background: rgba(0, 255, 255, 0.5); // 背景色 border-width: 4px; // 枠幅 border-style: solid; // 枠線 border-color: rgba(224, 255, 255, 0.7); // 枠の色 input[type=range]::-webkit-slider-thumb { // つまみ部分 background: rgba(224, 255, 255, 0.7); // つまみの色 } } 左右のアイコンを変更する スライダーのアイコンは、左側のアイコン、右側のアイコン、のそれぞれを設定できる。 例えば、左側アイコンに「ion-arrow-left-a」、右側アイコンに「ion-arrow-right-a」を入力して保存すると、図のように左向き矢印、右向き矢印が表示される。スライダーを 3D などの座標値にバインドして水平移動させる場合に使えそうだ。 尚、このアイコンは色の変更ができる。スタイルに、以下のようにアイコンの色を設定する。 // スライダーウィジェットのスタイル設定 .slider1 { background: rgba(0, 255, 255, 0.5); // 背景色 border-width: 4px; // 枠幅 border-style: solid; // 枠線 border-color: rgba(224, 255, 255, 0.7); // 枠の色 input[type=range]::-webkit-slider-thumb { // つまみ部分 background: rgba(224, 255, 255, 0.7); // つまみの色 } i.icon{ // 左右アイコン color: rgba(255, 127, 0, 0.7); // アイコンの色 } } 尚、例えば以下のように、使用しているアイコンを指定して、個別にスタイルを設定することも可能。 i.icon.ion-arrow-left-a{ // 指定アイコン color: red; // アイコンの色 } i.icon.ion-arrow-right-a{ // 指定アイコン color: green; // アイコンの色 } どのようなアイコンが利用できるかは、ioniconのページ で確認できる。 サイズを変更する（幅） 今度は、スライダーのサイズを変更してみる。まずは幅から。スライダーの幅で時々求められるのが、幅を小さくしたいケース。例えば、iphoneの縦画面でスライダーウィジェットを中央パネルにドラッグ＆ドロップで配置や移動してみると、右端が見えなくなってしまう。 では、width 値をスタイル設定に追加してみる。 // スライダーウィジェットのスタイル設定 .slider1 { background: rgba(0, 255, 255, 0.5); // 背景色 border-width: 4px; // 枠幅 border-style: solid; // 枠線 border-color: rgba(224, 255, 255, 0.7); // 枠の色 width: 50%; // 幅 input[type=range]::-webkit-slider-thumb { // つまみ部分 background: rgba(224, 255, 255, 0.7); // つまみの色 } i.icon{ // 左右アイコン color: rgba(255, 127, 0, 0.7); // アイコンの色 } } さらに右端が見えなくなってしまった。最小幅の制約がありそうだ。 先ほどは幅を %値で指定したが、次は、170px と指定してみる。画面縦だと右端が見れないので、画面横に向きを変えてみる。枠 borderはコメントアウトして無しにしておく。 // スライダーウィジェットのスタイル設定 .slider1 { background: rgba(0, 255, 255, 0.5); // 背景色 //border-width: 4px; // 枠幅 //border-style: solid; // 枠線 //border-color: rgba(224, 255, 255, 0.7); // 枠の色 width: 170px; // 幅 input[type=range]::-webkit-slider-thumb { // つまみ部分 background: rgba(224, 255, 255, 0.7); // つまみの色 } i.icon{ // 左右アイコン color: rgba(255, 127, 0, 0.7); // アイコンの色 } } 最小幅は大体 170px のようだ。 つまみの左右へのスライド移動は必要なので、幅を小さくするために、左側のアイコンと右側のアイコンの指定欄を空にして左右アイコンを取り除くことにする。幅は二つのアイコン分が減るので 130px として仮設定する。 // スライダーウィジェットのスタイル設定 .slider1 { background: rgba(0, 255, 255, 0.5); // 背景色 //border-width: 4px; // 枠幅 //border-style: solid; // 枠線 //border-color: rgba(224, 255, 255, 0.7); // 枠の色 width: 130px; // 幅 input[type=range]::-webkit-slider-thumb { // つまみ部分 background: rgba(224, 255, 255, 0.7); // つまみの色 } i.icon{ // 左右アイコン color: rgba(255, 127, 0, 0.7); // アイコンの色 } } アイコン指定を無しにしても幅が残っている。そこで、左右アイコンに対して min-width を設定して変更する。 // スライダーウィジェットのスタイル設定 .slider1 { background: rgba(0, 255, 255, 0.5); // 背景色 //border-width: 4px; // 枠幅 //border-style: solid; // 枠線 //border-color: rgba(224, 255, 255, 0.7); // 枠の色 width: 130px; // 幅 input[type=range]::-webkit-slider-thumb { // つまみ部分 background: rgba(224, 255, 255, 0.7); // つまみの色 } i.icon{ // 左右アイコン color: rgba(255, 127, 0, 0.7); // アイコンの色 min-width: 0px; // アイコンの最小幅 } } アイコン部分の余白が無くなった。 さらに、padding（枠内余白）を 0px にして、幅値を小さくしてみる。 // スライダーウィジェットのスタイル設定 .slider1 { background: rgba(0, 255, 255, 0.5); // 背景色 //border-width: 4px; // 枠幅 //border-style: solid; // 枠線 //border-color: rgba(224, 255, 255, 0.7); // 枠の色 width: 100px; // 幅 padding: 0px; // 枠内余白 input[type=range]::-webkit-slider-thumb { // つまみ部分 background: rgba(224, 255, 255, 0.7); // つまみの色 } i.icon{ // 左右アイコン color: rgba(255, 127, 0, 0.7); // アイコンの色 min-width: 0px; // アイコンの最小幅 } } 左右アイコンと枠内余白（padding）を取り除けば、最小幅は 100px 程度まではできそうだ。 画面幅が広くないスマホの縦画面でも、幅を width: 100px; と固定すれば、三つを横並びにできる。 幅指定をしない場合は、二つ横並び表示することが可能だ。尚、三つも二つも横並び表示するために、グリッドアウトレイアウトを使用している。 サイズを変更する（高さ） スタイルに高さ height を設定すれば、高さを変更できる。 // スライダーウィジェットのスタイル設定 .slider1 { background: rgba(0, 255, 255, 0.5); // 背景色 //border-width: 4px; // 枠幅 //border-style: solid; // 枠線 //border-color: rgba(224, 255, 255, 0.7); // 枠の色 width: 100px; // 幅 padding: 0px; // 枠内余白 height: 30px; // 高さ input[type=range]::-webkit-slider-thumb { // つまみ部分 background: rgba(224, 255, 255, 0.7); // つまみの色 } i.icon{ // 左右アイコン color: rgba(255, 127, 0, 0.7); // アイコンの色 min-width: 0px; // アイコンの最小幅 } } サイズを変更する（つまみ） つまみのスタイル設定に、幅と高さを追加する。 // スライダーウィジェットのスタイル設定 .slider1 { background: rgba(0, 255, 255, 0.5); // 背景色 //border-width: 4px; // 枠幅 //border-style: solid; // 枠線 //border-color: rgba(224, 255, 255, 0.7); // 枠の色 width: 100px; // 幅 padding: 0px; // 枠内余白 height: 30px; // 高さ input[type=range]::-webkit-slider-thumb { // つまみ部分 background: rgba(224, 255, 255, 0.7); // つまみの色 width: 40px; // つまみの幅（元は 28px） height: 40px; // つまみの高さ（元は 28px） } i.icon{ // 左右アイコン color: rgba(255, 127, 0, 0.7); // アイコンの色 min-width: 0px; // アイコンの最小幅 } } つまみの大きさを変更できた。縦に比べてつまみが大きい場合は、上下がカットされる。 形を変更する（つまみの形） つまみはデフォルトが丸だが、丸みの設定（border-radius）を変更することで、方形にすることができる。尚、高さはスライダー高さより少し小さい 24pxとし、幅はつまみを縦長にするために幅よりも少し小さい 18px としてみる。 // スライダーウィジェットのスタイル設定 .slider1 { background: rgba(0, 255, 255, 0.5); // 背景色 //border-width: 4px; // 枠幅 //border-style: solid; // 枠線 //border-color: rgba(224, 255, 255, 0.7); // 枠の色 width: 100px; // 幅 padding: 0px; // 枠内余白 height: 30px; // 高さ input[type=range]::-webkit-slider-thumb { // つまみ部分 background: rgba(224, 255, 255, 0.7); // つまみの色 width: 18px; // つまみの幅（元は 28px） height: 24px; // つまみの高さ（元は 28px） border-radius: 1px; // つまみの角の設定（元は 100%） } i.icon{ // 左右アイコン color: rgba(255, 127, 0, 0.7); // アイコンの色 min-width: 0px; // アイコンの最小幅 } } おぉ、つまみが方形になった！ 縦スライダーで色、アイコン、サイズの変更 Vuforia Studio CSS備忘録：2D画面上の指定位置に縦スライダーを表示 を参考にして、今回の色、アイコン、サイズ変更を適用してみる。以下のスタイルを追加する。 // スライダーウィジェットのスタイル設定 .slider2 { background: rgba(0, 255, 255, 0.5); // 背景色 width: 50%; height: 30px; // 高さ // 縦スライダー化 position: fixed; top: 50%; left: 50%; margin-top: -30px; // 横スライダーで位置基準を少し上に移動 transform: rotate(-90deg); // 左に90度回転する margin-left: 17%; // -25%で中心。負値の追加で左へ。正値の追加で右へ。 input[type=range]::-webkit-slider-thumb { // つまみ部分 background: rgba(224, 255, 255, 0.7); // つまみの色 } } // スライダーウィジェットのスタイル設定 .slider3 { background: rgba(0, 255, 255, 0.5); // 背景色 width: 100%; height: 30px; // 高さ input[type=range]::-webkit-slider-thumb { // つまみ部分 background: rgba(224, 255, 255, 0.7); // つまみの色 } } 縦にするスライダーウィジェットのクラスを「slider2」、横のままのスライダーウィジェットのクラスを「slider3」にする。 横のスライダーウィジェットの幅 widthは 100%としておき、グリッドレイアウトウィジェットの列（column）の幅に従うようにした。グリッドレイアウトウィジェットには列を3つ作成してスライダーウィジェットは中央の列に配置。左右の列には幅を 15%ずつ設定した。 アイコンは、両方とも左側アイコンに「ion-arrow-left-a」、右側アイコンに「ion-arrow-right-a」を指定した。縦スライダー化で90度回転すると、アイコンも90度回転した。 結果は、以下の画面。 おわりに コンテンツの作成工数を考えると、デフォルトのスライダーのままで使えるのであれば、それが最もよい。しかし、画面サイズの制約、色合いの関係、半透明にして背後も見えるようにする、などでスライダーのスタイルの変更が必要な場面はある。その場合には、この備忘録を参考に設定できるだろう。 参考 ・スライダー @Vuforia Studioヘルプ ・Vuforia Studio CSS備忘録：2D画面上の指定位置に縦スライダーを表示

これは何 CSS Gridを使う際のTipsです イベント「3000文字Tips - 知ると便利なTipsをみんなへ届けよう」への投稿記事でもあります リポジトリとGitHub Pages この記事を書くために書いたコードは公開しています。 GitHub PagesにはSubgridの対応状況の関係でGitHub PagesにはFirefoxからアクセスしてください。 Subgridを使わないと CSS Grid、便利ですよね。 けどdisplay: gridを適用しても直下の要素しかグリッドアイテムとして認識されません。 もちろんgridを入れ子にすれば階層が深くなっても問題表示上問題はありませんが、何回もgrid-template-columnsやgrid-template-rowsを書くはめになります。 以下の例では、青いエリアはdivが入れ子になっていて、もともとのグリッドに合わせるために手入力でgrid-template-columnsやgrid-template-rowsを指定しなおしています。 <div class="grid"> <h1 class="headline">Subgrid不使用</h1> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> <div class="grid-item">6</div> <div class="grid-item">7</div> <div class="grid-item">8</div> <div class="grid-item">9</div> <div class="grid-item">10</div> <div class="grid-item">11</div> <div class="non-subgrid"> <div class="nested-grid-item">12</div> <div class="nested-grid-item">13</div> <div class="nested-grid-item">14</div> <div class="nested-grid-item">15</div> </div> <div class="grid-item">16</div> <div class="grid-item">17</div> <div class="grid-item">18</div> <div class="grid-item">19</div> <div class="grid-item">20</div> <div class="grid-item">21</div> <div class="grid-item">22</div> <div class="grid-item">23</div> <div class="grid-item">24</div> <div class="grid-item">25</div> </div> .grid { background-color: #3d4040; display: grid; flex-grow: 1; gap: 10px; grid-template-columns: 1fr 2fr 3fr 4fr 5fr; grid-template-rows: 1fr 2fr 3fr 4fr 5fr 6fr; height: 100%; padding: 20px; } .non-subgrid { display: grid; grid-column: 2 / 4; grid-row: 4 / 6; gap: 10px; grid-template-columns: 2fr 3fr; grid-template-rows: 4fr 5fr; } .headline { align-self: center; color: #fff; font-size: 40px; grid-column: 1 / -1; } .grid-item { background-color: #55c500; } .nested-grid-item { background-color: #4097db; } もし親要素である.gridの幅や高さを変えても、子要素の.non-subgridがそれを検知する術はありません。 例えば.gridだけを次のように変えたら、表示はこうなってしまいます。 .grid { background-color: #3d4040; display: grid; flex-grow: 1; gap: 10px; - grid-template-columns: 1fr 2fr 3fr 4fr 5fr; + grid-template-columns: 3fr 3fr 2fr 2fr 1fr; - grid-template-rows: 1fr 2fr 3fr 4fr 5fr 6fr; + grid-template-rows: 1fr 3fr 2fr 2fr 1fr 1fr; height: 100%; padding: 20px; } Subgridを使うと - <div class="non-subgrid"> + <div class="subgrid"> <div class="nested-grid-item">12</div> <div class="nested-grid-item">13</div> <div class="nested-grid-item">14</div> <div class="nested-grid-item">15</div> </div> .subgrid { display: grid; grid-column: 2 / 4; grid-row: 4 / 6; grid-template-columns: subgrid; grid-template-rows: subgrid; } 初期段階の見た目はまったく一緒ですが、subgridを指定することでgrid-template-columnsとgrid-template-rowsに具体的な値を指定しなくても、親のgridの幅を引き継いでくれています。 そのため、親要素のgirdの幅や高さが変わると自動でその変更に従います。 注意 非常に便利なSubgridですが、現在はまだFirefoxでしか使えません。