20200701のCSSに関する記事は9件です。

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のサイズが大きくなってしまうのでトランジションの場所だけ
slider-demo.gif
このようにCSSだけでもスライダーを実装することができました。

まとめ

こちらのデモはあくまでCSSのみでスライダーを作成することをメインにしていますので
保守性などは高くないコードにはなってしまったかと思います。
特にキーフレームを別途指定しないといけない点など。

自分でもなんで作ったのか分からないですがどちらにしろ遊びで作ったものなので
今どきのCSSはこんな事もできるんだ的な感じで楽しんでもらえればありがたいです。
特に四則演算と変数の組み合わせはかなり面白いと思います。

GitHub

こちらのソースコードはGitHubでも公開しています。
変更を加える可能性があるのでこの記事と内容が異なるかもしれません。

なおQiitaへの投稿は初めてですので、書き方など含め改善点などありましたらお教えいただけるとありがたいです。
github - ken7253

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【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月段階の最新version

Can 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%を読み込んでくれます。

まだまだ調べきれていないことがありそうですが
ひとまずこんなのがあるんだなとだけ覚えとこうと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

模写コーディングその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

進捗

スクリーンショット 2020-07-01 19.04.27.png

現状は、とりあえずHTMLのみで思うがままにコーディング
次回は、class属性等を追加した後に、CSSでスタイルを当てていく。

アカウント登録以降は、「新しいアカウントを作成」をクリックした際のモーダルウィンドウとして表示するつもりです。
javascriptの知識が必要そうなので、過去にドットインストールで学んだことを復習しながら作成することになりそう。

必須入力事項のエラーの出し方も、javascriptで書く必要がありそう。
あとは、正規表現の知識も仕入れなくては。

今週中完成を目指す。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

初心者によるプログラミング学習ログ 357日目

100日チャレンジの357日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
357日目は、

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

CSSアニメーションとJSで『崩壊するサイト』を簡単に作る

今回はサイトに崩壊するイースターエッグ(隠し要素)みたいな物を、基本的なコードのみで実装してみたので方法をまとめます。
なので初学者の方でも比較的分かりやすいかと思います。

インフラエンジニア「もっと手軽に崩壊できる。」
CSS職人「こんな崩壊にしてみました。」
やらかしエンジニア「崩壊しました。」
な話がある場合はぜひ教えてください!(自分は最近やらかしました。)
 

? 作ったもの

collapse.gif
(↑サンプルページのGif動画)

■ サンプルサイトURL(PCのみ)
https://aocattleya.github.io/Collapse-Site

■ GitHub
https://github.com/aocattleya/Collapse-Site

サイト内のキャラクターアイコンをクリックすると、サイトが崩壊します。

今回は解説がしやすいのでjQueryで解説します。
アイデア重視で実際やってることは簡単なので、Vue.jsなどでも簡単に応用出来ます。
 

簡単な仕組み解説

クリックした場合にフェードアウトするアニメーションのクラスを追加する。

もっと簡単にいうと、クリックでクラスを追加する。

使用している物 説明
HTML, CSS ---
javaScript jQuery, Vue.js, その他
クラスを追加出来れば何でもOK
Animate.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>

これでページを読み込んだ時に、すでに反映されています。簡単!

animete.gif
どんなアニメーションのクラスがあるかは、公式サイトで実際の動きを確認できます。
スピードを変えたりなどのオプションもあります。

公式サイト
 

? クリックで落下

hinge.gif

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");
})

基本はこれだけです。
あとはアニメーションを要素に追加するタイミングを変えて全体が崩壊していくように見せます。
 

? 連続で落下し崩壊

rem0h-tyoak-compressor.gif

ボタンクリック後に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);
});

 
今回はシンプルにこんな形で、あとはアニメーションをさせたい要素に好きなタイミングで付けていくと崩壊するサイトが完成です!
collapse.gif
 

? まとめ

大きい要素を一気に動かすほど重くなるので、やりすぎは注意してください。

やっていること自体はとても簡単な物ですが、アイデア次第でとても面白い事が出来ますね!エイプリールフールネタなどに使ってみたりも面白いと思います。

他にも少し応用して、5回クリック後に崩壊させてみたり

main.js
let 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:thumbsup:など貰えたらとても励みになります。

:octocat: GitHub
https://github.com/aocattleya
? Twitter
https://twitter.com/aocattleya
? Qiita
https://qiita.com/aocattleya

・ 前回の記事
【GitHub】README.mdをカッコ可愛くデザインしてアプリの魅力を120%にする

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

CSSアニメーションとJSで崩壊するサイトを簡単に作る

今回はサイトに崩壊するイースターエッグ(隠し要素)みたいな物を、基本的なコードのみで実装してみたので方法をまとめます。
なので初学者の方でも比較的分かりやすいかと思います。

インフラエンジニア「もっと手軽に崩壊できる。」
CSS職人「こんな崩壊にしてみました。」
やらかしエンジニア「崩壊しました。」
な話がある場合はぜひ教えてください!(自分は最近やらかしました。)
 

? 作ったもの

collapse.gif
(↑サンプルページのGif動画)

■ サンプルサイトURL(PCのみ)
https://aocattleya.github.io/Collapse-Site

■ GitHub
https://github.com/aocattleya/Collapse-Site

サイト内のキャラクターアイコンをクリックすると、サイトが崩壊します。

今回は解説がしやすいのでjQueryで解説します。
アイデア重視で実際やってることは簡単なので、Vue.jsなどでも簡単に応用出来ます。
 

簡単な仕組み解説

クリックした場合にフェードアウトするアニメーションのクラスを追加する。

もっと簡単にいうと、クリックでクラスを追加する。

使用している物 説明
HTML, CSS ---
javaScript jQuery, Vue.js, その他
クラスを追加出来れば何でもOK
Animate.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>

これでページを読み込んだ時に、すでに反映されています。簡単!

animete.gif
どんなアニメーションのクラスがあるかは、公式サイトで実際の動きを確認できます。
スピードを変えたりなどのオプションもあります。

公式サイト
 

? クリックで落下

hinge.gif

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");
})

基本はこれだけです。
あとはアニメーションを要素に追加するタイミングを変えて全体が崩壊していくように見せます。
 

? 連続で落下し崩壊

rem0h-tyoak-compressor.gif

ボタンクリック後に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);
});

 
今回はシンプルにこんな形で、あとはアニメーションをさせたい要素に好きなタイミングで付けていくと崩壊するサイトが完成です!
collapse.gif
 

? まとめ

大きい要素をほど重くなるので、やりすぎは注意してください。

やっていること自体はとても簡単な物ですが、アイデア次第でとても面白い事が出来ますね!エイプリールフールネタなどに使ってみたりも面白いと思います。

他にも少し応用して、5回クリック後に崩壊させてみたり

main.js
let 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:thumbsup:など貰えたらとても励みになります。

:octocat: GitHub
https://github.com/aocattleya
? Twitter
https://twitter.com/aocattleya
? Qiita
https://qiita.com/aocattleya

・ 前回の記事
【GitHub】README.mdをカッコ可愛くデザインしてアプリの魅力を120%にする

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

border-radiusの一部のみ角を丸くする

プログラミングの勉強日記

2020年7月1日 Progate Lv.148
ポートフォリオ作成中
border-radiusを使うと4つ角すべて丸くなってしまう。
1つの角のみを丸くしたい。

目標物

 1つの要素(左側のところ)は左の上下の角を、もう1つの要素(右側のところ)は右の上下部分の角を丸くさせたい。
0701.PNG

一部の角を丸くする方法

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

【HTMLのみでOK】class/id必要なしの超手軽で軽量なCSSを利用する

はじめに

「bootstrap」に代表されるCSSフレームは、とても便利ですので利用してきました。普段から使い倒しており、もう身についた、という方であれば問題ないと思いますが、たまにしか使わない私のようなものにとっては、指定するclassを調べながら指定していくのは少々面倒だな、と思っていました。(簡単なHTMLを作成するときなどは、特にそう思いました)

classやidを指定しなくてもよい方法があるということを知りましたので試してみました。
classless CSS framework というそうです。

用意するのはHTMLのみで、class/idの指定は必要ありません。とにかく簡単で、HTMLのheadタグに1行追加するだけでいい感じにしてくれます。

①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/

01.png

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>

ターミナルテーマを適用したサンプルサイトはこちら

02.png

②mvp.css

追加するコード

sample.html
<head>
  <link rel="stylesheet" href="https://unpkg.com/mvp.css">
</head>

デモサイト
https://andybrewer.github.io/mvp/

03.png

サンプルサイトはこちら

04.png

まとめ

  • classless CSS frameworkは、簡単なHTMLでスタイルを整えたい場合、とても便利だと思いましたので、積極的に使っていきたいなと思いました。

おまけ

CSSフレームワークを適用して確認するのは、レスポンシブに対応できているかどうかだと思います。同時にデバイスを確認するサイト・ツールは、こちらが便利です。(IDの登録などは不要)

everysize

https://everysize.kibalabs.com/
05.png

参照URL

new.css

mvp.css

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

TechAcademyが無料公開している「HTML・CSS入門講座」を受講する~CSS第6回~

アジェンダ

  • 要素の回り込み
  • 要素の配置
  • 実践

要素の回り込み

float

要素の回り込みを指定する場合、以下のように書く。

float: 値;

値は以下の単語で指定する。

right
右へ回り込む
left
左へ回り込む
none
回り込みなし

clear

要素の周り込みの解除をする場合、以下のように書く。

clear: 値;

値は以下の単語で指定する。

right
右への回り込みを解除する
left
左への回り込みを解除する
both
左右両方の周り込みを解除する

clearを指定した要素以降は、floatを指定した要素による回り込みを解除する。

※注意※

float属性を指定した要素があるのに、clear属性を指定した要素が無い場合、float属性を指定した要素が親要素からはみ出てしまう(画像参照)。
float.png

要素の配置

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.css
img {
  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;
}

これをWebブラウザに表示させるとこんな感じ。
index.png

画面を小さくしてスクロールしても、画面上部のバーは固定表示される。
index_scroll.png

おわりに

今回は、要素の配置についての内容だった。
少し凝ったことが表現できるようになって楽しい。

次回 >> ☆まだ☆

参考

6-1 floatプロパティ(CSSのボックスの配置)
6-2 positionプロパティ(CSSのボックスの配置)
6-3 z-index(CSSのボックスの配置)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む