20210114のCSSに関する記事は11件です。

セレクターについて改めて勉強し直した③

はじめに

昨日の投稿の続きです。
セレクターについて改めて勉強し直した②

今回も逆引き方式で

親要素の直後の子要素にのみスタイルを適用させたい

HTML
<h1>テスト</h1>
<p>テスト1</p>
<p>テスト2</p>
CSS
h1 + p {}

h1要素の直後のp要素にのみスタイルが適用される。2つめのp要素にはスタイルが適用されない。

要素名は違うけどクラス名が同じ場合

HTML
<p class="section">テスト</p>
<h1 class="section">テスト</h1>
CSS
p.section {}
h1.section {}

.クラス名の前に要素名を入れる。
いや、そもそも同じクラス名を付けない方がいいって話ですね。

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

ProgateでHTML,CSSを学んでみた(2日目)

概要

Web開発に興味が出てきたのでとりあえず一通り必要そうなものを触ってみることにしました。
ただ触るだけだと忘れてしまいそうなのでメモとして学んだことを書いてみます。
ここにあるコードはほぼ全てProgateで出てきたものです。

CSSによるタグ付け

ある特定の要素にのみCSSを適用したい場合はタグをつける。
例えば以下のように書くと、hogeとmogeのみが赤色になる。
CSSでタグ付けするときはドットをつける点に注意する。

test.html
    <ul>
        <li=class="selected">hoge</li>
        <li>fuga</li>
        <li=class="selected">moge</li>
    </ul>
test.css
    .selected{
        color:red;
    }

HTMLの全体構造

HTMLには<html>、<head>、<body>の3つの要素が必要。
<head>にはページに関する情報、<body>にはブラウザに表示したい内容を書く。
<html>に関しては特に説明がなかったから飾りみたいなものだと思っておく。
さらに、<!DOCTYPE html>でHTMLのバージョンを宣言する。
まとめると以下のようになる。

hoge.html
    <!DOCTYPE html>
    <html>
      <head>
      </head>
      <body>
      </body>
    </html>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【初心者でもわかる】ふきだしでアピールしてくるボタンの作りかた

どうも7noteです。ただのボタンじゃなくアピール強めのボタンを作ります。

ボタンの作り方はいろいろありますが、ここで紹介するボタンはこのような動きのあるボタンです。

見本

sample.gif

ふきだしがふわふわしてアピールするボタンの作り方

index.html
<div class="btn">
  <a href="#"><img src="button.png" alt="ボタン"></a>
  <div class="fukidashi"><img src="fukidashi.png"></div>
</div>
style.css
.btn {
  width: 500px;          /* ボタンの幅 */
  position: relative;    /* 基準値とする */
}
.fukidashi {
  width: 400px;          /* 吹き出しの幅 */
  position: absolute;    /* 相対位置に指定 */
  left: 50%;             /* 表示位置を左から50%の位置に指定 */
  top: 0;                /* 表示位置を上から0の位置に指定 */
  transform: translate(-50%, -90%); /* 指定した位置から要素の半分分左に、要素の9割分上にずらす */
  animation: fuwafuwa 2s infinite;  /* アニメーションfuwafuwaを2秒間隔で実行 */
}

@keyframes fuwafuwa {
  0% {
    top: 0px;
  }
  10% {
    top: 3px;
  }
  20% {
    top: 0px;
  }
  30% {
    top: 3px;
  }
  40% {
    top: 0px;
  }
}

解説

CSSの紹介をする上で、ボタンもふきだしも画像で作成していますがCSSで作ったボタンやふきだしでも同じことができます。

position指定でふきだしの要素を浮かせて、好きな位置にもってきます。
その後、アニメーションの設定ですが、2秒の内0.2秒・0.4秒のタイミングで少し下に下がるように指定することでふわふわした動きを再現しています。

まとめ

ボタンの作り方は本当に様々あるので、調べてみて好きなものを導入したらいいかなと思います。
ボタン1つでクリック率が大幅に変わるとも言われていますので、丁寧な作りこみをしていきたいポイントですね。

おそまつ!

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ

参考:https://haugenic.com/

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

[備忘録]「box-sizing: border-box;」の有無

本記事の目的

  • resetcssに含まれていてフロント実装中あまり意識しない、box-sizing: border-box;の有無によってどのようにレイアウトが変化するかを確認する。

事前準備

boxsizing.htmlboxsizing.cssという名前のファイルを以下の様に用意した。

boxsizing.html
<!DOCTYPE html>
<html>
  <head>
    <title>boxsizing練習</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="boxsizing.css">
  </head>
  <body>
    <div class="box-space">
      boxsizingの練習
    </div>
  </body>
</html>

boxsizing.css
.box-space {
  background-color: aqua;
  border: 2px solid red;
  height: 100px;
  width: 100px;
  padding: 10px;
  margin: 10px;
}

検証

事前準備で用意したHTMLファイルをGoogle Chromeで表示してみる。
boxsizingfix.png
検証ツールの右下の図↓
boxsizingchart.png

事前にCSSで指定した通りだが、paddingがあることで目に見えるdiv要素が大きくなってしまっている。
(marginは目に目に見えないので覗く)

divの高さ :100px
divの横幅 :100px
内側の余白 :10px
外側の余白 :10px
divを囲う線の幅 :2px

目に見える部分の縦合計値 (100px + 10px + 10px + 2px + 2px = 124px)
目に見える部分の横合計値 (100px + 10px + 10px + 2px + 2px = 124px)



次にbox-sizing: border-box;を入れて表示してみる。

boxsizing.css
.box-space {
  background-color: aqua;
  border: 2px solid red;
  height: 100px;
  width: 100px;
  padding: 10px;
  margin: 10px;

  /* 新しく追加 */
  box-sizing: border-box;
  /* 新しく追加 */
}

↓↓↓↓
boxsizingpresense.png
検証ツールの右下の図↓
boxsizingpresensechart.png

box-sizing: border-box;がない時に比べdiv要素が小さくなっている様に見える。

divの高さ :76px
divの横幅 :76px
内側の余白 :10px
外側の余白 :10px
divを囲う線の幅 :2px

目に見える部分の縦合計値 (76px + 10px + 10px + 2px + 2px = 100px)
目に見える部分の横合計値 (76px + 10px + 10px + 2px + 2px = 100px)

結果

box-sizing: border-boxがないときの目に見える部分の高さと横幅 : 124px
box-sizing: border-boxがあるときの目に見える部分の高さと横幅 : 100px

box-sizing: border-boxがあると、目に見える部分の高さと横幅を指定したheightとwidthに合わせるために、箱のサイズ(上の場合box-spaceのdiv要素)が調整されることがわかった。

感想

  • 当たり前のことも馬鹿正直に検証してみると「オオ〜」ってなる。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

特定の要素だけフェードイン表示のタイミングがおかしい…そんな時に確認するポイント(画像編)

症状

要素をフェードイン表示する際に、ある要素だけ表示されるタイミングがおかしいという不具合が発生しました。
具体的には、その要素だけコンマ何秒か遅れて表示されてしまいます。
これによって、スムーススクロールでその要素にリンクする際に、スクロールがカクつくという症状が現れました。

調べてみたところ、
「あーそんなこともあるのか、、、」
という理由だったので、備忘録がてら残しておきます。

原因

フェードイン表示させる要素の「子要素の画像」が原因でした。

この画像のサイズだけが、やたら大きかったのです。

それだけの理由でした。。。

解決策

画像を、圧縮してください。
(いや、僕も圧縮してたんですけど!提供していただいたその画像だけ元のサイズが大きすぎて!したとて!やったんです!)

まとめ

原因をあれこれ探してみて、「コードやCSSは間違ってなさそうやな、、、」
という時は、画像のサイズも確認してみてください。

以上です!

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

CSS変数(カスタムプロパティ)が便利だった

ずっとSassの変数と同じだろうと思いスルーしていました。
試しに使ってみたところ、Sassではできない便利な変数の利用方法を発見できたので、
仕様をまとめてみました。

変数の宣言と値の定義

  • 変数の宣言
    • 先頭にハイフンを2つ -- 付けて任意の名前を記述する
    • 大文字・小文字が区別される
  • 値の定義
    • コロン : で区切って値を記述する
  • スコープ
    • :root 擬似クラスで変数を宣言することで、どこでも使用可能
    • CSSセレクタ内
css
/* どこでも使用可能 */
:root {
  --text-color: #444;
}
/* セレクタ内で使用可能 */
.hoge {
  --hoge-color: red;
}

変数の呼び出し

  • var(--変数名) 関数を使って呼び出す
  • プロパティ名を変数にすることはできない
css
:root {
  --text-color: #444;
  --margin: margin;
}
.hoge {
  color: var(--text-color);
}
/* プロパティ名を変数にすることはできない */
.fuga {
  var(--margin): 30px;
}

フォールバック値の設定

  • 指定されたCSS変数が未定義の場合、代替値をカンマ区切りで複数指定可能
    • 代替値にCSS変数を指定する場合は var() 関数を使用する
css
/* --text-color が定義されていなければ #444 */
.hoge {
  color: var(--text-color, #444);
}
/* --text-color が定義されていなければ --text-color2 が適用 */
.hoge {
  color: var(--text-color, var(--text-color2));
}
/* --text-color2 は適用されない */
.hoge {
  color: var(--text-color, --text-color2);
}

CSS変数の中でCSS変数を設定

CSS変数はCSS変数を使って定義することも可能です。

css
:root {
  --gradient-start-color: #e66465;
  --gradient-end-color: #9198e5;
  --bg-gradient: linear-gradient(var(--gradient-start-color), var(--gradient-end-color));
}
.foo {
  background: var(--bg-gradient);
}

CSS変数の継承

CSS変数は別の値が設定された場合、要素の子要素は新しい値を継承します。

html
<p>黒い文字</p>
<div class="red">
  <p>赤い文字</p>
</div>
<div class="blue">
  <p>青い文字</p>
</div>
<div>
  <p>黒い文字</p>
</div>
css
:root {
  --text-color: #444;
}
body {
  color: var(--text-color);
}
.red {
  --text-color: red;
}
.blue {
  --text-color: blue;
}

メディアクエリ内での利用

これがとっても便利!
Sassではメディアクエリ内で変数を定義することができません。
CSS変数を利用すると色の管理を一箇所でまとめて指定できちゃいます!

css
:root {
  --text-color: #444;
  --bg-color: #fff;
}
/* ダークモードの時 */
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #fefefe;
    --bg-color: #333;
  }
}
body {
  color: var(--text-color);
  background-color: var(--bg-color);
}

JavaScriptでの利用

CSS変数はJavascriptから値の取得・設定が可能です。

値の取得

html
<div id="hoge"></div>
css
:root {
  --text-color: #444;
}
#hoge {
  color: var(--text-color);
}
javascript
const hoge = document.getElementById('hoge')
// hogeの計算済みスタイルを取得 
const hogeStyle = getComputedStyle(hoge);
// CSS 変数 --text-color の値の取得
const hogeStyleVal = hogeStyle.getPropertyValue('--text-color'); 
console.log(hogeStyleVal); // #444

値の設定

html
<div id="hoge"></div>
css
:root {
  --text-color: #444;
}
#hoge {
  color: var(--text-color);
}
javascript
const hoge = document.getElementById('hoge')
hoge.style.setProperty('--text-color', 'red');

ブラウザ対応状況

IEを対応しなければバンバン使ってオッケーですね!

caniuse CSS Variables

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

CSSで要素に番号を振るする方法

サンプル

See the Pen list no by pd_kosaka (@pd_kosaka) on CodePen.

解説

親要素に下記のように指定する

ul {
    counter-reset: countNum;
}

番号を振りたい要素の擬似要素に下記のように指定する

li::before {
    counter-increment: countNum;
    content: counter(countNum);
}

下記のように指定するとローマ数字などに変換可能

li::before {
    counter-increment: countNum;
    content: counter(countNum,upper-roman);
}
ローマ数字 アルファベット ゼロ埋め
upper-roman lower-alpha decimal-leading-zero
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

css(styleタグ)をjavascriptで追加する

// styleタグを作成
var styleTag = document.createElement('style');

// styleタグに記載するcssを記入
styleTag.innerText = `
    p {
       color:red;
    }
`;

// 作成したstyleタグを挿入
document.getElementsByTagName('head')[0].insertAdjacentElement('beforeend', styleTag);
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

map要素でループ処理!【SCSS】

まずmapって何?

マップとはリストの各要素がkey&value(key1:value1)になったものです。
もう少し解像度を上げてご説明いたします。
$map:(key1: value1,key2: value2,key3: value3);
このようにしてmap変数を定義して$mapの中にプロパティと値を格納することができます。

@ eachでループ処理

上記で簡単なmap変数の説明をしたわけですが、これらを応用してさらに使い勝手の良い物にできます。
それが@each文になります。
例えば画像が上、下、右、左からスライドインする物を作る場合
$patternという$map関数を作る。
上下左右のプロパティ値を’up’,’down’,’left’,’right’とする。
スライドインする処理をtransitionY(5px),transitionY(-5px),transitionX(5px),transitionX(-5px)とします。
そしてこれらを@each文に入れるだけです。
$pattern:("up":transitionY(5px),"down":transitionY(-5px)・・・);
こちらで$map関数を定義します。
upというクラスがついた場合アクションが起きるという処理です。

@each $key,$value in $pattern {.image.#{$key} {transform:$value;}
これで$keyの値を変更するだけで処理を変更することができます。

いちいち1部分を変更したいだけでたくさんのコードを記述する処理が省けますよね。

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

VSCode拡張機能(自動ブラウザリロード)

HTML CSS JavaScript 学習効率化Live Serverの使い方

使用環境: macOS
エディタ: VSCode

Live Serverとは

VSCode上のファイルの変更を監視して、ブラウザを自動でリロードしてくれるVSCodeの拡張機能です。

通常VSCode使ってプログラミング学習をする場合、
ファイルを編集 -> ブラウザをリロード -> console.logを確認
といった形で学習を進められるかと思います。

そこで、Live Serverを使えばファイルが更新されるたびに
自動でブラウザがリロードされるのでログの確認などがスムーズにおこなえます。

導入は簡単で、VSCodeの拡張機能検索窓(画像の四角のマークをクリック)に
Live Server と入力して検索。
image.png
以下画像のLive Serverをインストールします。
image.png
あとはご自身で作成したindex.htmlファイルなどをVSCodeで開き、
VSCode下部の Go Live をクリックするとOSデフォルトのブラウザでローカルサーバが立ち上がります。
※Go Liveが表示されない場合はVSCodeを一度終了する。
※同様にVSCode下部のPort : 5500 をクリックするとサーバーを停止できます。
image.png
これでファイルが更新されるたびにブラウザがリロードされるようになります。

初学者の方など、少しでも参考いただければ幸いです^^
また、LGTMやコメントいただけると励みになります!

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

%とcalcで画像flexboxレスポンシブ対応。

画像コンテンツのレスポンシブ対応をする際に、コンテナのサイズ計算で考えてしまうのでメモようにまとめてみました。

完成イメージ

スクリーンショット 2021-01-14 0.33.55.png
スクリーンショット 2021-01-14 0.34.27.png

イメージ的にはこんな感じです。
サイズがバラバラな画像を、CSS同じサイズにして、さらに画像間の余白も計算に入れたサイズにします。メリットとしてはツール等で画像のトリミングが不要になるのと、余白調整でlast-childとか特殊な指定がなくなります。

コード

<h2>横に並べただけ。画像のサイズ調整なし。画像間は10px</h2>
<div class="flex-wrap1">
    <div class="box"><p><img src="./img/modal1-lg.jpg"></p></div>
    <div class="box"><p><img src="./img/modal2-lg.jpg"></p></div>
    <div class="box"><p><img src="./img/modal3-lg.jpg"></p></div>
    <div class="box"><p><img src="./img/modal4-lg.jpg"></p></div>
</div>
<h2>画像を横に並べ、更にサイズ調整。</h2>
<span>画像間の計算方法(隙間が3つなので隙間の合計は30px。さらにこれを画像4枚で分ける。30/4=7.5px)</span>
<div class="flex-wrap2">
    <div class="box"><p><img src="./img/modal1-lg.jpg"></p></div>
    <div class="box"><p><img src="./img/modal2-lg.jpg"></p></div>
    <div class="box"><p><img src="./img/modal3-lg.jpg"></p></div>
    <div class="box"><p><img src="./img/modal4-lg.jpg"></p></div>
</div>
<h2>2カラムづつの場合。</h2>
<span>画像間の計算方法は先程同様(隙間が1つで隙間の合計は10px。これを画像2枚で分ける。10/2=5px)</span>
<div class="flex-wrap3">
    <div class="box"><p><img src="./img/modal1-lg.jpg"></p></div>
    <div class="box"><p><img src="./img/modal2-lg.jpg"></p></div>
    <div class="box"><p><img src="./img/modal3-lg.jpg"></p></div>
    <div class="box"><p><img src="./img/modal4-lg.jpg"></p></div>
</div>
@charset "utf-8";
/* Reset */
html,body,h1,h2,h3,p,ul,li{
    padding: 0;
    margin: 0;
}
img{
    border: none;
    vertical-align: bottom;
    max-width: 100%;
    height: auto;
}
/* common */
.container{
    max-width: 960px;
    margin: 0 auto;
}
/* main */
h2{
    padding: 10px;
}
span{
    padding: 10px;
}
/* .flex-wrap1
------------------------------------- */
.flex-wrap1{
    padding: 10px;
    display: flex;
    justify-content: space-between;
}
.flex-wrap1 .box{
    width: 25%;
}
.flex-wrap1 .box:not(:last-child){
    margin-right: 10px;
}
/* .flex-wrap2
------------------------------------- */
.flex-wrap2{
    padding: 10px;
    display: flex;
    justify-content: space-between;
}
.flex-wrap2 .box{
    /* 10px * 隙間3つ / 画像4枚 = 7.5px */
    width: calc(25% - 7.5px);
    position: relative;
}
.flex-wrap2 p{
    /* 高さを0、内側余白50%ずつにする事で幅高さの比率を1:1にする */
    height: 0;
    padding: 50% 0;
}
.flex-wrap2 img{
    /* 親クラスの幅高さを継承し、positionを使って絶対配置 */
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0; left: 0;
    object-fit: cover;
}
/* .flex-wrap3
------------------------------------- */
.flex-wrap3{
    padding: 10px;
    display: flex;
    justify-content: space-between;
    /* 2枚で折り返したいので、flexコンテナ幅100%で折り返し設定。 */
    flex-wrap: wrap;
}
.flex-wrap3 .box{
    /* 10px * 隙間1つ / 画像2枚 = 5px */
    width: calc(50% - 5px);
    margin-bottom: 10px;
    position: relative;
}
.flex-wrap3 p{
    height: 0;
    padding: 50% 0;
}
.flex-wrap3 img{
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0; left: 0;
    object-fit: cover;
}

解説

サイズの計算方法はコメントや画像をご確認ください。
それ以外で注意しなければいけないのは、かならずリセットとしてfuluid imageにする事です。

positionの使い方も慣れていない方にはわかりづらいかもしれませんが、relativeが基準点、つまり親クラスになるので、absoluteをかけた子クラスに幅高さ100%を指定すると、親クラスの幅高さを継承することができます。

例えば親クラスに300px * 300pxがかかっていれば、子も300px * 300pxですし、10000pxなら10000pxになります。

重要なのは親クラスの幅指定の方法で、今回の場合だと、.flex-wrapには、幅のみ指定しているということ。

では高さはどこで指定しているかというと、今回の場合は.flex-wrap pになります。
ここでpadding: 50% 0;を指定して、幅の100%の高さを指定しています。

最後に

簡単ではありますが、以上になります。

この技術は埋め込みのYoutube動画やGoogleMapのサイズ変更にも使われているものなので覚えておくと便利です。

時間が空いたらgridを使った、コードも追記していきたいと思います。多分慣れたらこっちの方がこういったレイアウトはやりやすいかもです。では、お疲れ様でした!

追記(2021/01/14)

今回は説明用にクラス名を使いましたが、HTMLのul,liタグだけを使う事も可能です。(通常はこっちになるかと)

<h2>ul,liを使った場合</h2>
<ul>
    <li><p><img src="./img/modal1-lg.jpg"></p></li>
    <li><p><img src="./img/modal2-lg.jpg"></p></li>
    <li><p><img src="./img/modal3-lg.jpg"></p></li>
    <li><p><img src="./img/modal4-lg.jpg"></p></li>
</ul>
/* when used ul li
------------------------------------- */
ul{
    padding: 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
li{
    width: calc(50% - 5px);
    margin-bottom: 10px;
    position: relative;
}
li p{
    height: 0;
    padding: 50% 0;
}
ul img{
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0; left: 0;
    object-fit: cover;
}
@media screen and (min-width: 768px){
    ul{
        flex-wrap: nowrap;
    }
    li{
        width: calc(25% - 7.5px);
        margin-bottom: 0;
        position: relative;
    }
}

一応@mediaを使ってレスポンシブ化してます。(モバイルファースト)
動作は以下です。

47c9bb2deaef117107963496fdeeee60.gif

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