- 投稿日:2020-07-01T23:55:44+09:00
CSSだけでスライダーは実装できるのか
CSSだけでスライダーのレイアウトを作る
ふとCSSだけでスライダーを作れるのではと思ったので作ってみます。
CSS3では四則演算や変数だったりアニメーションがありますのでそれを使いながら作ってみたいと思います。
未対応なブラウザもあるかもしれませんが、ひとまず気にせず使っていきます。書いてみる
とりあえずHTMLから書いていきましょう、ひとまずJSのスライダーでもよくある書き方で
基本的にはposition:absolute
で画像を重ねてCSSアニメーションで透過をコントールしてあげようと思います。
wrapperで囲む必要があったのかは謎ですが精神衛生上囲みたくなるのでご容赦下さい。index.html<div class="css-slider"> <div class="slider-wrapper"> <ul> <li><img class="img01" src="img/slider-img01.jpg" alt=""></li> <li><img class="img02" src="img/slider-img02.jpg" alt=""></li> <li><img class="img03" src="img/slider-img03.jpg" alt=""></li> <li><img class="img04" src="img/slider-img04.jpg" alt=""></li> <li><img class="img05" src="img/slider-img05.jpg" alt=""></li> </ul> </div> </div>ちょっと面倒くさいですか画像ごとに個別クラスを割り振ってあげてください。
これがないとアニメーションのキーフレームを制御できなくなります。CSSの基本レイアウト
ひとまず基本レイアウトとしてスライドの高さなどサイズの調整
変数を定義することで数値の流用や計算に使用します。
これによりちょっとconfigっぽく変数を更新するとスライダーのレイアウトを変えられるようにしています。
枚数などを変える場合は別途キーフレームの間隔を調整しないといけないので不完全ですが。わざわざスライダーのサイズに合わせた画像を作るのが面倒だったのと、サイズが変わってもきれいに表示されるよう
object-fit: cover;
を使用していますのでトリミングの方法を変更したい方はそちらを変更して下さい。slider.css:root { --slider-width: 100%; /* スライダーの横幅 */ --slider-height: 500px; /* スライダーの高さ */ --slider-total-time: 30s; /* スライダーの一周の間隔 */ --slider-total-page: 5; /* スライダーの枚数 */ --slider-per-seconds: calc(var(--slider-total-time) / var(--slider-total-page)); } .css-slider { width: var(--slider-width); height: var(--slider-height); } .slider-wrapper,.slider-wrapper ul, .slider-wrapper li,.slider-wrapper img { width: 100%; height: 100%; } .slider-wrapper ul { position: relative; } .slider-wrapper li { position: absolute; top: 0; } .slider-wrapper img { /* トリミング方式を変更すうる場合はこちら */ object-fit: cover; } .css-slider ul { list-style-type: none; margin: 0; padding: 0; }おそらくここまで書くとスライドが一箇所にまとめられて表示エリアがはっきりすると思います。
基本レイアウトの設定が終わったら次はアニメーションの設定に入ります。アニメーションの実装
次にCSSアニメーションでスライドの動きを実装します。
スライダーって言ってたのにフェードイン・アウトなのは触れないで下さい。
(一応この方法を応用すれば普通のスライダーも作れると思います)そしてここが一番わかりづらいかと思いますが、画像が表示されている時間はKeyframeの 80%~100% の間だけです。
厳密に言うと 80%~85% , 95%~100% の間はトランジションの時間なので実際の時間はもっと短く感じます。そしてこのキーフレームのタイミングは
(スライドの画像枚数/100%となるように設定して下さい)
今回だと画像5枚なので、(5/100%)で20%です。そのうち前後5%をトランジションの時間にしています。slider.css@keyframes slide { 0% { opacity: 0; } 80% { opacity: 0; } 85% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } } .slider-wrapper img { opacity: 0; -webkit-animation: slide var(--slider-total-time) ease-in-out infinite normal forwards; animation: slide var(--slider-total-time) ease-in-out infinite normal forwards; } .slider-wrapper .img01 { animation-delay: calc(var(--slider-per-seconds) * 0) } .slider-wrapper .img02 { animation-delay: calc(var(--slider-per-seconds) * -1); } .slider-wrapper .img03 { animation-delay: calc(var(--slider-per-seconds) * -2); } .slider-wrapper .img04 { animation-delay: calc(var(--slider-per-seconds) * -3); } .slider-wrapper .img05 { animation-delay: calc(var(--slider-per-seconds) * -4); }アニメーションのタイミングをずらす
このままだと重ねた5枚の画像が同じタイミングで透明度が変化して戻るため1枚の画像しか見えません
animation-delayにマイナス値を設定することでアニメーションの開始地点をオフセットできるのでそちらの設定をします。slider.css:root { --slider-total-time: 30s; /* スライダーの一周の間隔 */ --slider-total-page: 5; /* スライダーの枚数 */ --slider-per-seconds: calc(var(--slider-total-time) / var(--slider-total-page)); }上記のように変数
--slider-per-seconds
は
calc(var(--slider-total-time) / var(--slider-total-page))
という風に定義されていますので
それぞれ代入して 30÷5=6 となります。これを下記のように-(枚数)分を掛けて
animation-delay
でアニメーションの開始地点をオフセットさせます。slider.css.slider-wrapper .img02 { animation-delay: calc(var(--slider-per-seconds) * -1); /* --slider-per-seconds: calc(var(--slider-total-time) / var(--slider-total-page)); */ }このように設定した場合は
animation-delay:-6s
ですのでアニメーションが6s進んだ状態で開始されます。
これを各画像ごとに20%分ずらしていくことでタイミングを揃えます。
ただこの場合だと5枚目に設定したスライドから始まってしまうので気になる方は順番を入れ替えてもいいかもしれません。完成イメージ
全体だと長すぎてGIFのサイズが大きくなってしまうのでトランジションの場所だけ
このようにCSSだけでもスライダーを実装することができました。まとめ
こちらのデモはあくまでCSSのみでスライダーを作成することをメインにしていますので
保守性などは高くないコードにはなってしまったかと思います。
特にキーフレームを別途指定しないといけない点など。自分でもなんで作ったのか分からないですがどちらにしろ遊びで作ったものなので
今どきのCSSはこんな事もできるんだ的な感じで楽しんでもらえればありがたいです。
特に四則演算と変数の組み合わせはかなり面白いと思います。GitHub
こちらのソースコードはGitHubでも公開しています。
変更を加える可能性があるのでこの記事と内容が異なるかもしれません。なおQiitaへの投稿は初めてですので、書き方など含め改善点などありましたらお教えいただけるとありがたいです。
github - ken7253
- 投稿日:2020-07-01T22:40:31+09:00
【2日目】Clamp関数をホームページ制作に使った件
clamp関数は、編集者草案の段階のCSSです
◎編集者草案とは?
clamp関数のMDNから「CSS Values and Units Module Level 4」を自分なりに確認したところ、
以下翻訳にかけて抜粋編集者の下書きの公開コピー
いつでも変更される可能性があります。らしいので使用するのは注意が必要そうです。
今回はあくまで社内向けサイト制作だったのでclampを使ってみました。
使い方
font-size、width、margin/paddingなどで使うことができます。
h1 {font-size:clamp(14px,0.83vw,20px)}
デザインは1920px、h1は16pxで作成されているケース:
1つめの数値が最小値、2つめが基準値、3つめが最大値です。
基本→画面幅に対して0.83vwの大きさで表示する。
画面幅を縮小した時→14pxを下回る場合は14pxで固定。
画面幅を広げた時→その逆で20pxで固定する仕組みです。たった一行で最大値/最小値を設定できるのは便利ですよね!
対応ブラウザ
下記はCalmp関数が、実際に動くことを確認しています。
Mac(Safari)
Windows(firefox/Edge(chromium)/Chrome)※全て最新
※2020年7月段階の最新versionCan I use...
https://caniuse.com/#feat=css-math-functions似た関数 max関数とmin関数
結論からいうとSCSSでこの2つの関数は使えませんでした。。
is not a number for max
というエラーが出てコンパイルができないのです。
なので私の場合は、clamp関数で最大値もしくは最小値を適当に設定して対応しました。また、もちろんIEではclamp関数は動かないので
使用する場合は、padding-left: 6.25%; padding-right: 6.25%; padding-left: clamp(80px, 6.25vw, 120px); padding-right: clamp(80px, 6.25vw, 120px);というようにフォールバックしておけばIEでは6.25%を読み込んでくれます。
まだまだ調べきれていないことがありそうですが
ひとまずこんなのがあるんだなとだけ覚えとこうと思います。
- 投稿日:2020-07-01T22:12:16+09:00
模写コーディングその1 FaceBookログイン画面
模写コーディング
模写するサイト
FaceBook ログイン画面
https://www.facebook.com/模写するきっかけ
・プログラミング学習においてインプットよりもアウトプットした方が定着しやすいと耳にしたため。
・Udemyでフォームの制作について学んだばかりで、その学習内容をすぐに活かせそうだなと思った。
・非常にシンプルなデザインなので、これなら作れそうとも思った。
作成時間(途中経過)
3時間
環境構築
・Google Chrome(ブラウザ)
・Visual Studio Code(コードエディター)模写する上でのルール(引用)
1.文字のコピペはOK
2.フォントの種類は何でもOK
3.少しのズレはOK
4.背景画像も入れる
5.角丸やフォントの大きさも近いものにする
6.レスポンシブデザインにも対応するhttps://codelearn.jp/articles/mosya#1HTMLCSS
進捗
現状は、とりあえずHTMLのみで思うがままにコーディング
次回は、class属性等を追加した後に、CSSでスタイルを当てていく。アカウント登録以降は、「新しいアカウントを作成」をクリックした際のモーダルウィンドウとして表示するつもりです。
javascriptの知識が必要そうなので、過去にドットインストールで学んだことを復習しながら作成することになりそう。必須入力事項のエラーの出し方も、javascriptで書く必要がありそう。
あとは、正規表現の知識も仕入れなくては。今週中完成を目指す。
- 投稿日:2020-07-01T19:54:11+09:00
初心者によるプログラミング学習ログ 357日目
100日チャレンジの357日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
357日目は、
昨日の作業・やったこと⇩
— ぱぺまぺ@社畜✕投資✕ブロガー (@ppmp65) June 30, 2020
●ブログ1記事作成
●プログラミング学習357日目 2.0h
・架空LP タブレット版作成(@ririru_123
) 2.0h
・お問い合わせ
夜だと忘れるからやっぱり朝に戻そう・・・w#早起きチャレンジ #100DaysOfCode #駆け出しエンジニアと繋がりたい
- 投稿日:2020-07-01T17:52:11+09:00
CSSアニメーションとJSで『崩壊するサイト』を簡単に作る
今回はサイトに崩壊するイースターエッグ(隠し要素)みたいな物を、基本的なコードのみで実装してみたので方法をまとめます。
なので初学者の方でも比較的分かりやすいかと思います。インフラエンジニア「もっと手軽に崩壊できる。」
CSS職人「こんな崩壊にしてみました。」
やらかしエンジニア「崩壊しました。」
な話がある場合はぜひ教えてください!(自分は最近やらかしました。)
? 作ったもの
■ サンプルサイトURL(PCのみ)
https://aocattleya.github.io/Collapse-Site■ GitHub
https://github.com/aocattleya/Collapse-Siteサイト内のキャラクターアイコンをクリックすると、サイトが崩壊します。
今回は解説がしやすいのでjQueryで解説します。
アイデア重視で実際やってることは簡単なので、Vue.jsなどでも簡単に応用出来ます。
簡単な仕組み解説
クリックした場合にフェードアウトするアニメーションのクラスを追加する。
もっと簡単にいうと、クリックでクラスを追加する。
使用している物 説明 HTML, CSS --- javaScript jQuery, Vue.js, その他
クラスを追加出来れば何でもOKAnimate.css CSSアニメーションを簡単に
実装出来るライブラリ
Animate.css
もちろん自分でアニメーションを作っても良いですが、難しいアニメーションなんて作れない!という方に、フェードインや跳ねたりのアニメーションをクラスを付けるだけで簡単に実装出来るライブラリがあります。
・Animate.css(公式サイト)
https://daneden.github.io/animate.css簡単に使い方の紹介です。
1、ライブラリを読み込む
ダウンロードして読み込みも出来ますが、CDN(ヘッダーにURL置くだけ)でも使用出来ます。index.html<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"> </head>CDNのバージョンによってクラス名が違ったりするので公式のREADMEにて
npmなど他の方法でインストールしたい場合なども書かれています。
→ animate.css(GitHub)2、クラスを付ける
アニメーションを使用したいクラスに、
animate__animated
とアニメーションのクラス
を付与index.html<div class="animate__animated animate__fadeInUp">フェードインするよ</div>これでページを読み込んだ時に、すでに反映されています。簡単!
どんなアニメーションのクラスがあるかは、公式サイトで実際の動きを確認できます。
スピードを変えたりなどのオプションもあります。
→ 公式サイト
? クリックで落下
Animate.cssで簡単にアニメーションが実装出来る事が分かったところで、
次に、要素をクリックしてアニメーションのクラスを追加し、フェードアウトさせます。何でもOKですが、今回はjQueryでクラス追加してみます。
index.html<div class="collapse"> <div class="button">ボタン</div> </div>style.css.collapse { width: 200px; height: 200px; background-color: lightblue; }
button
クラスをクリックすると、
collapse
クラスにanimate__animated animate__hinge
の2つのクラスを追加する。※
hinge
は、animete.cssの中のポロッと落下するアニメーションの1つです。main.js// クリックでクラス追加 $('.button').click(function() { $(".collapse").addClass("animate__animated animate__hinge"); })
サンプル全部見たい人用(クリックで開く)
index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" /> <title>クリックで崩壊</title> </head> <body> <div class="collapse"> <div class="button">クリック</div> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="main.js"></script> </body> </html>style.css.collapse { width: 200px; height: 200px; background-color: lightblue; }main.js$('.button').click(function() { $(".collapse").addClass("animate__animated animate__hinge"); })基本はこれだけです。
あとはアニメーションを要素に追加するタイミングを変えて全体が崩壊していくように見せます。
? 連続で落下し崩壊
ボタンクリック後に2つ目を一定時間後に実行させます。
一定時間後に特定の処理を行うにはsetTimeout()
を使います。index.html<div class="contents"> <div class="collapse1"> <div class="button">クリック</div> </div> <div class="collapse2"></div> </div>main.js$(".button").click(function () { // 1つ目に追加 $(".collapse1").addClass("animate__animated animate__hinge"); // 2つ目に追加(1秒後) setTimeout(function () { $(".collapse2").addClass("animate__animated animate__hinge"); }, 1000); });
今回はシンプルにこんな形で、あとはアニメーションをさせたい要素に好きなタイミングで付けていくと崩壊するサイトが完成です!
? まとめ
大きい要素を一気に動かすほど重くなるので、やりすぎは注意してください。
やっていること自体はとても簡単な物ですが、アイデア次第でとても面白い事が出来ますね!エイプリールフールネタなどに使ってみたりも面白いと思います。
他にも少し応用して、5回クリック後に崩壊させてみたり
main.jslet count = 0; $(".button").click(function () { count += 1; // クリックでcountが5回になったら if (count === 5) { $(".collapse1").addClass("animate__animated animate__hinge"); setTimeout(function () { $(".collapse2").addClass("animate__animated animate__hinge"); }, 1000); } });
画像を変えたり、別のアニメーションを追加するなど色々カスタマイズして、
自分ポートフォリオなどに実装しても面白いかもしれませんね!
(キャラアイコンをクリックし過ぎると怒って崩壊するイースターエッグ)
リンク
記事のLGTMなど貰えたらとても励みになります。
GitHub
https://github.com/aocattleya
https://twitter.com/aocattleya
? Qiita
https://qiita.com/aocattleya
- 投稿日:2020-07-01T17:52:11+09:00
CSSアニメーションとJSで崩壊するサイトを簡単に作る
今回はサイトに崩壊するイースターエッグ(隠し要素)みたいな物を、基本的なコードのみで実装してみたので方法をまとめます。
なので初学者の方でも比較的分かりやすいかと思います。インフラエンジニア「もっと手軽に崩壊できる。」
CSS職人「こんな崩壊にしてみました。」
やらかしエンジニア「崩壊しました。」
な話がある場合はぜひ教えてください!(自分は最近やらかしました。)
? 作ったもの
■ サンプルサイトURL(PCのみ)
https://aocattleya.github.io/Collapse-Site■ GitHub
https://github.com/aocattleya/Collapse-Siteサイト内のキャラクターアイコンをクリックすると、サイトが崩壊します。
今回は解説がしやすいのでjQueryで解説します。
アイデア重視で実際やってることは簡単なので、Vue.jsなどでも簡単に応用出来ます。
簡単な仕組み解説
クリックした場合にフェードアウトするアニメーションのクラスを追加する。
もっと簡単にいうと、クリックでクラスを追加する。
使用している物 説明 HTML, CSS --- javaScript jQuery, Vue.js, その他
クラスを追加出来れば何でもOKAnimate.css CSSアニメーションを簡単に
実装出来るライブラリ
Animate.css
もちろん自分でアニメーションを作っても良いですが、難しいアニメーションなんて作れない!という方に、フェードインや跳ねたりのアニメーションをクラスを付けるだけで簡単に実装出来るライブラリがあります。
・Animate.css(公式サイト)
https://daneden.github.io/animate.css簡単に使い方の紹介です。
1、ライブラリを読み込む
ダウンロードして読み込みも出来ますが、CDN(ヘッダーにURL置くだけ)でも使用出来ます。index.html<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"> </head>CDNのバージョンによってクラス名が違ったりするので公式のREADMEにて
npmなど他の方法でインストールしたい場合なども書かれています。
→ animate.css(GitHub)2、クラスを付ける
アニメーションを使用したいクラスに、
animate__animated
とアニメーションのクラス
を付与index.html<div class="animate__animated animate__fadeInUp">フェードインするよ</div>これでページを読み込んだ時に、すでに反映されています。簡単!
どんなアニメーションのクラスがあるかは、公式サイトで実際の動きを確認できます。
スピードを変えたりなどのオプションもあります。
→ 公式サイト
? クリックで落下
Animate.cssで簡単にアニメーションが実装出来る事が分かったところで、
次に、要素をクリックしてアニメーションのクラスを追加し、フェードアウトさせます。何でもOKですが、今回はjQueryでクラス追加してみます。
index.html<div class="collapse"> <div class="button">ボタン</div> </div>style.css.collapse { width: 200px; height: 200px; background-color: lightblue; }
button
クラスをクリックすると、
collapse
クラスにanimate__animated animate__hinge
の2つのクラスを追加する。※
hinge
は、animete.cssの中のポロッと落下するアニメーションの1つです。main.js// クリックでクラス追加 $('.button').click(function() { $(".collapse").addClass("animate__animated animate__hinge"); })
サンプル全部見たい人用(クリックで開く)
index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" /> <title>クリックで崩壊</title> </head> <body> <div class="collapse"> <div class="button">クリック</div> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="main.js"></script> </body> </html>style.css.collapse { width: 200px; height: 200px; background-color: lightblue; }main.js$('.button').click(function() { $(".collapse").addClass("animate__animated animate__hinge"); })基本はこれだけです。
あとはアニメーションを要素に追加するタイミングを変えて全体が崩壊していくように見せます。
? 連続で落下し崩壊
ボタンクリック後に2つ目を一定時間後に実行させます。
一定時間後に特定の処理を行うにはsetTimeout()
を使います。index.html<div class="contents"> <div class="collapse1"> <div class="button">クリック</div> </div> <div class="collapse2"></div> </div>main.js$(".button").click(function () { // 1つ目に追加 $(".collapse1").addClass("animate__animated animate__hinge"); // 2つ目に追加(1秒後) setTimeout(function () { $(".collapse2").addClass("animate__animated animate__hinge"); }, 1000); });
今回はシンプルにこんな形で、あとはアニメーションをさせたい要素に好きなタイミングで付けていくと崩壊するサイトが完成です!
? まとめ
大きい要素をほど重くなるので、やりすぎは注意してください。
やっていること自体はとても簡単な物ですが、アイデア次第でとても面白い事が出来ますね!エイプリールフールネタなどに使ってみたりも面白いと思います。
他にも少し応用して、5回クリック後に崩壊させてみたり
main.jslet count = 0; $(".button").click(function () { count += 1; // クリックでcountが5回になったら if (count === 5) { $(".collapse1").addClass("animate__animated animate__hinge"); setTimeout(function () { $(".collapse2").addClass("animate__animated animate__hinge"); }, 1000); } });
画像を変えたり、別のアニメーションを追加するなど色々カスタマイズして、
自分ポートフォリオなどに実装しても面白いかもしれませんね!
(キャラアイコンをクリックし過ぎると怒って崩壊するイースターエッグ)
リンク
記事のLGTMなど貰えたらとても励みになります。
GitHub
https://github.com/aocattleya
https://twitter.com/aocattleya
? Qiita
https://qiita.com/aocattleya
- 投稿日:2020-07-01T13:05:07+09:00
border-radiusの一部のみ角を丸くする
プログラミングの勉強日記
2020年7月1日 Progate Lv.148
ポートフォリオ作成中
border-radius
を使うと4つ角すべて丸くなってしまう。
1つの角のみを丸くしたい。目標物
1つの要素(左側のところ)は左の上下の角を、もう1つの要素(右側のところ)は右の上下部分の角を丸くさせたい。
一部の角を丸くする方法
border-radius
の間に上下左右を指定すれば、その部分の角を丸くすることができる。左上のみ丸くする場合border-top-left-radius: 10px;左下のみ丸くする場合border-bottom-left-radius: 10px;右上のみ丸くする場合border-top-right-radius: 10px;右下のみ丸くする場合border-bottom-right-radius: 10px;サンプルコード
HTMLファイル<div class="profile"> <div class="contentLeft"> ... </div> <div class="contentRight"> ... </div> </div>CSSファイル.contentLeft{ border-top-left-radius: 20px; border-bottom-left-radius: 20px; } .contentRight{ border-top-right-radius: 20px; border-bottom-right-radius: 20px; }
- 投稿日:2020-07-01T09:47:13+09:00
【HTMLのみでOK】class/id必要なしの超手軽で軽量なCSSを利用する
はじめに
「bootstrap」に代表されるCSSフレームは、とても便利ですので利用してきました。普段から使い倒しており、もう身についた、という方であれば問題ないと思いますが、たまにしか使わない私のようなものにとっては、指定するclassを調べながら指定していくのは少々面倒だな、と思っていました。(簡単なHTMLを作成するときなどは、特にそう思いました)
classやidを指定しなくてもよい方法があるということを知りましたので試してみました。
classless CSS framework というそうです。用意するのはHTMLのみで、class/idの指定は必要ありません。とにかく簡単で、HTMLのheadタグに1行追加するだけでいい感じにしてくれます。
①new.css
https://github.com/xz/new.css②mvp.css
https://andybrewer.github.io/mvp/①new.css
追加するコード
sample.html<head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1/new.min.css"> </head>デモサイト
https://newcss.net/demo/npm/yarnにも対応している。
npm i @exampledev/new.css
yarn add @exampledev/new.css
また、テーマもありナイトモードやターミナルモードがあり、爆速で変更・適用が可能。
- ナイトテーマを適用
samle.html<head> <link rel="stylesheet" href="https://newcss.net/theme/night.css"> </head>
- ターミナルテーマを適用
sample.html<head> <link rel="stylesheet" href="https://newcss.net/theme/terminal.css"> </head>ターミナルテーマを適用したサンプルサイトはこちら
②mvp.css
追加するコード
sample.html<head> <link rel="stylesheet" href="https://unpkg.com/mvp.css"> </head>デモサイト
https://andybrewer.github.io/mvp/サンプルサイトはこちら
まとめ
- classless CSS frameworkは、簡単なHTMLでスタイルを整えたい場合、とても便利だと思いましたので、積極的に使っていきたいなと思いました。
おまけ
CSSフレームワークを適用して確認するのは、レスポンシブに対応できているかどうかだと思います。同時にデバイスを確認するサイト・ツールは、こちらが便利です。(IDの登録などは不要)
everysize
https://everysize.kibalabs.com/
参照URL
new.css
- 公式ページ
- 参考
mvp.css
- 投稿日:2020-07-01T00:46:21+09:00
TechAcademyが無料公開している「HTML・CSS入門講座」を受講する~CSS第6回~
アジェンダ
- 要素の回り込み
- 要素の配置
- 実践
要素の回り込み
float
要素の回り込みを指定する場合、以下のように書く。
float: 値;値は以下の単語で指定する。
- right
- 右へ回り込む
- left
- 左へ回り込む
- none
- 回り込みなし
clear
要素の周り込みの解除をする場合、以下のように書く。
clear: 値;値は以下の単語で指定する。
- right
- 右への回り込みを解除する
- left
- 左への回り込みを解除する
- both
- 左右両方の周り込みを解除する
clearを指定した要素以降は、floatを指定した要素による回り込みを解除する。
※注意※
float属性を指定した要素があるのに、clear属性を指定した要素が無い場合、float属性を指定した要素が親要素からはみ出てしまう(画像参照)。
要素の配置
position
要素の配置を指定する場合、以下のように書く。
position: 値;値は以下の単語で指定する。
- static
- 配置方法を指定しない
- absolute
- 絶対位置へ配置する
- relative
- 相対位置へ配置する
- fixed
- 絶対位置へ配置し、画面をスクロールしても移動しない
※絶対位置 : static以外を指定した親要素の左上を基準とする位置。
※相対位置 : staticを指定した時に表示される位置を基準とする位置。top/bottom/right/left
要素の位置を指定する場合、以下のように書く。
# 上 top: 値; # 下 bottom: 値; # 左 left: 値; # 右 right: 値;値は数値で指定する。
z-index
要素の重ね順を指定する場合、以下のように書く。
z-index: 値;値は数値で指定する。
数値が大きいほど、上に表示される。実践
上記の内容を用いて、以下のindex.htmlとstyle.cssを作成した。
index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="./style.css"> <title>自己紹介</title> </head> <body> <div class="bar"></div> <h1>自己紹介</h1> <div class="profile"> <img class="begin_float_left" src="./makoto.jpg" alt="上目遣いの天使"> <h2>一言</h2> <p> 私の名前はマコトです。天界からやってきた光の使者です。<br> 私の使命は、この世に安寧をもたらすこと。その為には、どんな手段をも厭わない所存です。<br> 皆様、私と一緒に安寧の世界を目指しましょう。 </p> <h2 class="end_float">プロフィール</h2> <dl> <dt>名前</dt> <dd>マコト</dd> <dt>年齢</dt> <dd>秘密</dd> <dt>出身</dt> <dd>天界</dd> <dt>武器</dt> <dd>フレイル</dd> </dl> </div> </body> </html>style.cssimg { width: 175px; height: 175px; margin: 15px; } div { padding: 10px; } dt { font-weight: bold; } .profile { background-color: yellowgreen; } .bar { /* ページ上部に固定する. */ position: fixed; top: 0px; left: 0px; background-color: turquoise; width: 100%; height: 20px; } .bar + * { /* 固定した要素に重なるので、マージンを指定する. */ margin-top: 50px; } .begin_float_left { float: left; } .end_float { clear: both; }画面を小さくしてスクロールしても、画面上部のバーは固定表示される。
おわりに
今回は、要素の配置についての内容だった。
少し凝ったことが表現できるようになって楽しい。次回 >> ☆まだ☆
参考
6-1 floatプロパティ(CSSのボックスの配置)
6-2 positionプロパティ(CSSのボックスの配置)
6-3 z-index(CSSのボックスの配置)