- 投稿日:2021-01-14T23:47:14+09:00
セレクターについて改めて勉強し直した③
はじめに
昨日の投稿の続きです。
セレクターについて改めて勉強し直した②今回も逆引き方式で
親要素の直後の子要素にのみスタイルを適用させたい
HTML<h1>テスト</h1> <p>テスト1</p> <p>テスト2</p>CSSh1 + p {}h1要素の直後のp要素にのみスタイルが適用される。2つめのp要素にはスタイルが適用されない。
要素名は違うけどクラス名が同じ場合
HTML<p class="section">テスト</p> <h1 class="section">テスト</h1>CSSp.section {} h1.section {}
.クラス名
の前に要素名を入れる。
いや、そもそも同じクラス名を付けない方がいいって話ですね。
- 投稿日:2021-01-14T21:43:22+09:00
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>
- 投稿日:2021-01-14T21:26:34+09:00
【初心者でもわかる】ふきだしでアピールしてくるボタンの作りかた
どうも7noteです。ただのボタンじゃなくアピール強めのボタンを作ります。
ボタンの作り方はいろいろありますが、ここで紹介するボタンはこのような動きのあるボタンです。
見本
ふきだしがふわふわしてアピールするボタンの作り方
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制作のちょいテク詰め合わせ
- 投稿日:2021-01-14T19:13:26+09:00
[備忘録]「box-sizing: border-box;」の有無
本記事の目的
- resetcssに含まれていてフロント実装中あまり意識しない、
box-sizing: border-box;
の有無によってどのようにレイアウトが変化するかを確認する。事前準備
boxsizing.html
とboxsizing.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で表示してみる。
検証ツールの右下の図↓
事前に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; /* 新しく追加 */ }
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要素)が調整されることがわかった。感想
- 当たり前のことも馬鹿正直に検証してみると「オオ〜」ってなる。
- 投稿日:2021-01-14T18:58:46+09:00
特定の要素だけフェードイン表示のタイミングがおかしい…そんな時に確認するポイント(画像編)
症状
要素をフェードイン表示する際に、ある要素だけ表示されるタイミングがおかしいという不具合が発生しました。
具体的には、その要素だけコンマ何秒か遅れて表示されてしまいます。
これによって、スムーススクロールでその要素にリンクする際に、スクロールがカクつくという症状が現れました。調べてみたところ、
「あーそんなこともあるのか、、、」
という理由だったので、備忘録がてら残しておきます。原因
フェードイン表示させる要素の「子要素の画像」が原因でした。
この画像のサイズだけが、やたら大きかったのです。
それだけの理由でした。。。
解決策
画像を、圧縮してください。
(いや、僕も圧縮してたんですけど!提供していただいたその画像だけ元のサイズが大きすぎて!したとて!やったんです!)まとめ
原因をあれこれ探してみて、「コードやCSSは間違ってなさそうやな、、、」
という時は、画像のサイズも確認してみてください。以上です!
- 投稿日:2021-01-14T18:44:20+09:00
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); }javascriptconst 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); }javascriptconst hoge = document.getElementById('hoge') hoge.style.setProperty('--text-color', 'red');ブラウザ対応状況
IEを対応しなければバンバン使ってオッケーですね!
- 投稿日:2021-01-14T16:51:54+09:00
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
- 投稿日:2021-01-14T13:37:05+09:00
css(styleタグ)をjavascriptで追加する
// styleタグを作成 var styleTag = document.createElement('style'); // styleタグに記載するcssを記入 styleTag.innerText = ` p { color:red; } `; // 作成したstyleタグを挿入 document.getElementsByTagName('head')[0].insertAdjacentElement('beforeend', styleTag);
- 投稿日:2021-01-14T10:29:57+09:00
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部分を変更したいだけでたくさんのコードを記述する処理が省けますよね。
- 投稿日:2021-01-14T09:50:06+09:00
VSCode拡張機能(自動ブラウザリロード)
HTML CSS JavaScript 学習効率化Live Serverの使い方
使用環境: macOS
エディタ: VSCodeLive Serverとは
VSCode上のファイルの変更を監視して、ブラウザを自動でリロードしてくれるVSCodeの拡張機能です。
通常VSCode使ってプログラミング学習をする場合、
ファイルを編集 -> ブラウザをリロード -> console.logを確認
といった形で学習を進められるかと思います。そこで、Live Serverを使えばファイルが更新されるたびに
自動でブラウザがリロードされるのでログの確認などがスムーズにおこなえます。導入は簡単で、VSCodeの拡張機能検索窓(画像の四角のマークをクリック)に
Live Server と入力して検索。
以下画像のLive Serverをインストールします。
あとはご自身で作成したindex.htmlファイルなどをVSCodeで開き、
VSCode下部の Go Live をクリックするとOSデフォルトのブラウザでローカルサーバが立ち上がります。
※Go Liveが表示されない場合はVSCodeを一度終了する。
※同様にVSCode下部のPort : 5500 をクリックするとサーバーを停止できます。
これでファイルが更新されるたびにブラウザがリロードされるようになります。初学者の方など、少しでも参考いただければ幸いです^^
また、LGTMやコメントいただけると励みになります!
- 投稿日:2021-01-14T01:02:51+09:00
%とcalcで画像flexboxレスポンシブ対応。
画像コンテンツのレスポンシブ対応をする際に、コンテナのサイズ計算で考えてしまうのでメモようにまとめてみました。
完成イメージ
イメージ的にはこんな感じです。
サイズがバラバラな画像を、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
を使ってレスポンシブ化してます。(モバイルファースト)
動作は以下です。