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制作のちょいテク詰め合わせ

アクセシビリティーの理解 アクセシビリティーとは 「ユーザーが快適に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で変更する。 初めてコードレビューしていただいて独学だと気にしない点が多々ああたのでいい気づきになりました。

これは何 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でしか使えません。