What's New Qiita

20191004のHTMLに関する記事は7件です。

  • 投稿日：2019-10-04T23:04:58+09:00

MDNチュートリアル 課題　image garary

...html

<!DOCTYPE html>

Function library example

<h1>Image gallary example</h1>

<div class="full-img">
    <div id="bg">
        <img id="displayed-img">
    </div>
    <button class="dark">Darken</button>
    <button class="lighten" id="lighten">Lighten</button>
</div>

<div class="thumbnail-bar">
    <ul>
    </ul>
</div>


...javascript

'use strict';{

var images = [
    'img/pic00.png',
    'img/pic01.png',
    'img/pic02.png',
    'img/pic03.png',
    'img/pic04.png',
];


// full-imgの現時点の表示インデックス番号
let currentNum = 0;

// full-imgの中のimgを取得
var fullImg = document.getElementById('displayed-img');
fullImg.src = images[currentNum];

// setFullImg()関数の定義
function setFullImg(value){
    document.getElementById('displayed-img').src = value;
}

// currentクラスを外す関数
function removeCurrentClass(){
    document.querySelectorAll('li')[currentNum].classList.remove('current');
}

// currentクラスを新たに付ける関数
function addCurrentClass(){
    document.querySelectorAll('li')[currentNum].classList.add('current');
}


// thumbnail-barクラスの取得
var thumbnailBar = document.querySelector('.thumbnail-bar');
var ul = document.querySelector('.thumbnail-bar ul');
thumbnailBar.appendChild(ul);


images.forEach((value, index) => {
    const li = document.createElement('li');

    if(index === currentNum){
        li.classList.add('current');
    }

    li.addEventListener('click', () => {
        setFullImg(value);   
        removeCurrentClass();
        currentNum = index;
        addCurrentClass();    
    });

    const img = document.createElement('img');
    img.src = value;
    ul.appendChild(li);

    li.appendChild(img);
});


// buttonタグの取得(ボタンをクリックしたら表示画像が暗くなるやつ)
var btn = document.querySelector('button');
var bgId = document.getElementById('bg');

var ligBtn = document.querySelector('button.lighten');


btn.addEventListener('click', () => {
    // 背景色を暗くしたクラスをつける   
    bgId.classList.add('bg');

    // Darkenボタンを消す
    btn.style.display = 'none';

    // Lightenボタンのdisplay=noneをなくして新たにボタンを表示させる
    ligBtn.classList.remove('lighten');
});

ligBtn.addEventListener('click', () => {
    // bgクラスを外して(暗くしたクラスを外して)
    bgId.classList.remove('bg');

    // Darkenボタンを表示させる
    btn.style.display = 'block';

    // Lightenボタンのdisplay=noneをもつクラスをつけてLightenボタンを非表示にする
    ligBtn.classList.add('lighten');
});

}

...css

body{
user-select: none;
padding: 0;
margin: 0;
text-align: center;
}
.full-img{
display: block;
margin: 0 auto;
position: relative;
width: 600px;
height: 400px;
}
.bg{
background: #000;
}
.bg img{
display: block;
opacity: .7;
/* vertical-align: bottom; */
height: 400px;
}
button.dark, button#lighten{
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
button.lighten{
display: none;
}
.thumbnail-bar ul{
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
}
.thumbnail-bar ul li:not(:last-child){
margin-right: 5px;
}
.thumbnail-bar ul li{
opacity: .4;
}
.thumbnail-bar ul li.current{
opacity: 1;
}
.thumbnail-bar ul li:hover{
opacity: 1;
}
.thumbnail-bar ul li img{
margin-top: 5px;
width: 116px;
vertical-align: bottom;
cursor: pointer;
user-select: none;
}

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-10-04T19:14:43+09:00

ボタン連打、連続クリックを止める

更新ボタンを連打されAjaxの処理を重複させない為に、処理中にボタンを無効にしたい。
無効時はボタンの色を薄くして、わかるようにする。

処理概要

①フラグとなる適当な変数を定義。
ここでは「cancelFlag」とする。

②クリック時にボタンを無効にし色を変更。フラグを立てる。

③クリック時に行いたい処理を書く(書き換え、送信処理など)。
ここではAjaxの処理の入った「refreshTableファンクション」を呼んでいる。コードは割愛。

④処理完了後、指定時間後にボタンを有効にし色を戻す。
その後、フラグを元に戻す。
ここでは、仮に処理が1秒程かかるとして、1秒間だけ無効にする。

補足

●disabled
無効化。if文で無効/解除を切り替えられる。

●addClass( )
既存の CSS クラスを追加する場合に使用

●removeClass( )
既存の CSS クラスを削除する場合に使用

a.html
<script>
//フラグとなる変数を定義
var cancelFlag = false;

//更新ボタン
$('#refresh').click(function(event){
    //連打防止設定
    if( cancelFlag == false ){
            $('#refresh').prop('disabled', false).addClass('sending');
                cancelFlag = true;

                //処理内容
                refreshTable(function(){});//これは例
                //処理完了後
                setTimeout(function(){
                    $('#refresh').prop('disabled', true).removeClass('sending');
                    cancelFlag = false;
                },1000);

            }

        });
</script>

<span id="refresh" class="btnst">更新</span>
b.css
.btnst {
    background-color: #red;

/*ボタン無効時の色を設定。色は適当*/
.sending {
    background-color: #pink;
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-10-04T17:14:54+09:00

Webのダークモード対応をSCSS変数で管理する方法を考える

背景

prefers-color-scheme という Media Query を主要ブラウザがサポートしたため、Webでもダークモードに対応がしやすくなりましたね。CSSファイルに「ユーザがダークモードにしていたらこのCSS、ライトモードにしていたらこのCSSを適応」というように簡単に指定できるようになります。

@media (prefers-color-scheme: light) {
  // ライトモードのときのCSS
}
@media (prefers-color-scheme: dark) {
  // ダークモードのときのCSS
}

詳しくは CSSだけでWebページをダークモード対応。ついにChromeにも対応した prefers-color-scheme が超便利｜平田 / U-NEXT｜note あたりの記事でも読んでやってください。で、このダークモードなのですが、理想をいうとちゃんと変数使って管理したいですよね。

たとえば、

$COLOR_THEME; // ブランドカラー、テーマカラー、アクセントカラーとして使う色
$COLOR_BASE; // 主に背景色として使う色
$COLOR_THEME; // 主に文字色や罫線に使う色

みたいな変数を用意しておいて、

@media (prefers-color-scheme: light) {
  $COLOR_THEME: red;
  $COLOR_BASE: white;
  $COLOR_MAIN: black;
}
@media (prefers-color-scheme: dark) {
  $COLOR_THEME: #cc0000;
  $COLOR_BASE: black;
  $COLOR_MAIN: white;
}

body{
  background: $COLOR_BASE;
  color: $COLOR_MAIN;
}
h1{
  color: $COLOR_THEME;
}

みたいに書いておいて、ダークモードかライトモードかで変数の中身が変わる とステキじゃないですか？ しかし、この指定はうまくいきません。御存知の通りSCSSは事前にCSSに変換して使う言語なので、これをCSSに変換するとSCSSの変数機能は無かったことになり、エラーになります。




CSS変数使えば良いんじゃない？ :thinking:

CSS公式でもCSS変数というものが使えます。IE以外なら、生のCSSそのままで変数を定義して使い回すことができるので、これを使えばダークモード・ライトモードに応じて変数を上書きできます。

CSS カスタムプロパティ (変数) の使用 - CSS: カスケーディングスタイルシート | MDN

が、これは以下の理由からできるだけそのまま使いたくありません。

理由1: 長い :thumbsdown: 

$COLOR_THEME: red; // SCSS変数定義
p{ color: $COLOR_THEME } // SCSS変数使用

:root{ --color-theme: red } // CSS変数定義
p{ color: var(--color-theme) } // CSS変数使用

理由2: rgba() 指定ができない :thumbsdown::thumbsdown: 

p{ color: rgba($COLOR_THEME,.5) } // OK
p{ color: rgba(var(--color-theme),.5) } // エラー




SCSS変数で管理するやりかた

上記を解決する、一番マシかと思われる設計を考えてみたのが以下です。IEには対応してませんのであしからず。

STEP1 CSS変数を用意し、ライトモード時・ダークモード時の色をそれぞれ指定する

:root{
  @media (prefers-color-scheme: light) {
    --color-theme: red;
    --color-base: white;
    --color-main: black;
  }
  @media (prefers-color-scheme: dark) {
    --color-theme: #cc0000;
    --color-base: black;
    --color-main: white;
  }
}

STEP1 同名のSCSS変数を用意して、先程のCSS変数を指定する。

$COLOR_THEME: var(--color-theme);
$COLOR_BASE: var(--color-base);
$COLOR_MAIN: var(--color-main);

STEP3 SCSS変数を好きな場所で使える :tada: 

body{
  background: $COLOR_BASE;
  color: $COLOR_MAIN;
}
h1{
  color: $COLOR_THEME;
}

おめでとうございます。これで、無事にユーザーのカラーモードに応じてWebページのデザインが変更されます。しかし、このままだと rgba($COLOR_THEME,.5) は rgba(var(--color-theme),.5) に変換されるので、エラーになってしまいます。




rgba() にも対応するなら

面倒ですが、指定したい色のRGBそれぞれを一度変数化せざるを得なそうです。以下のように指定するのが良いと思います。

STEP1 用意した色のRGB値をそれぞれ別で指定する

:root{
  @media (prefers-color-scheme: light) {
    --color-theme: red;
    --color-theme-r: 255;
    --color-theme-g: 0;
    --color-theme-b: 0;

    --color-base: white;
    --color-base-r: 255;
    --color-base-g: 255;
    --color-base-b: 255;

    --color-main: black;
    --color-main-r: 0;
    --color-main-g: 0;
    --color-main-b: 0;

  }
  @media (prefers-color-scheme: dark) {
    --color-theme: #cc0000;
    --color-theme-r: 204;
    --color-theme-g: 0;
    --color-theme-b: 0;

    --color-base: black;
    --color-base-r: 0;
    --color-base-g: 0;
    --color-base-b: 0;

    --color-main: white;
    --color-main-r: 255;
    --color-main-g: 255;
    --color-main-b: 255;
  }
}

STEP2 RGB展開用のSCSS変数を別で用意する。

$COLOR_THEME: var(--color-theme);
$COLOR_BASE: var(--color-base);
$COLOR_MAIN: var(--color-main);

$COLOR_RGB_THEME: var(--color-theme-r),var(--color-theme-g),var(--color-theme-b);
$COLOR_RGB_BASE: var(--color-base-r),var(--color-base-g),var(--color-base-b);
$COLOR_RGB_MAIN: var(--color-main-r),var(--color-main-g),var(--color-main-b);

STEP3 rgba() を使うときはRGB展開用のSCSS変数を保管タグつきで使う。

p{
  color: rgba(#{$COLOR_RGB_THEME},.5);
}




以上です。ダークモード対応するなら、現状これがいちばんましな色の管理方法じゃないですかね。mixinとか使うのもありかもしれません。もっとステキな方法あったらぜひおしえてください。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-10-04T12:45:44+09:00

個人的にベストなメディアクエリ記述方法

SCSSでMixinを活用したSP対応

現在のプロジェクトでは以下の様にSCSSの@mixinと@includeを用いてSP対応をしています。
それぞれの詳しい使用方法はこちらの記事で分かりやすく書かれています。

まずはMixinを記述します
(自分は各Mixinを専用のscssファイルにまとめています)

//mixin.scss

//SP用
@mixin media-sp {
  @media screen and (max-width: 800px) {
    @content;
  }
}

//iphone5用
@mixin media-iphone5 {
  @media screen and (max-width: 320px) {
    @content;
  }
}

あとは@includeで好きなクラスで呼び出して使うだけ！

//hoge.scss

&__title {
   font-size: 2rem;

  @include media-sp {
    font-size: 1.6rem;
  }

  @include media-iphone5 {
    font-size: 1.4rem;
  }
}

めっちゃ分かりやすい！！

基本的にメディアクエリの指定がクラス毎にまとまるので、CSS迷子になりにくくなります。

CSSのみを使っていた頃は@media screen and (max-width: 800px)配下に同じクラスを再び記述していた為、クラス名で検索すると2つヒットしてしまうなどよく迷子になっていました。。。

もっと良い方法があるかもしれませんが、今の所ベストなんじゃないかなぁ…(˙◁˙)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-10-04T11:27:30+09:00

左に画像があって、真ん中にタイトルと説明があって、右に日付があるようなカードのHTML/CSSでの表現はGridが便利だった

こういうのHTML/CSSで書く時どうしてます？

image.png

最低限必要な中身はこんな感じだと思います

<div class="class">
  <img class="image" />
  <h2 class="title" />
  <p class="description" />
  <p class="date" />
</div>

Twitterでも聞いてみました

なんとなく思いつくのは display: flexじゃないですかね。

ただその場合 h2.titleと p.descriptionを更に<div/>で囲ってあげる必要がありますね。それでも問題ないんですが、どうせならHTMLはこのままで、CSSのみでデザインを反映したくないですか？

Twitter最高。display: grid使えばいい感じにできそうということが模範解答つきで教えてもらえました。神かよ..:pray:

更にこのあたりを参考にして、実装してみました。

https://webdesign-trends.net/entry/9526

※gridに関する記述のみ抜粋

.card {
  display: grid;
  row-gap: 8px;
  column-gap: 16px;
  grid-template:
    "image title date" 30px
    "image description description" 1fr /
    80px 1fr 90px;
}

.image {
  grid-area: image;  
}

.title {
  grid-area: title;  
}

.description {
  grid-area: description;
}

.date {
  grid-area: date;
}

grid-templateの箇所だけ、最初は吐き気を催すかもしれませんが、落ち着いてください。何度みても吐き気がします。

なんとなくテーブルのような構造をイメージしながら読めばわかりやすいのかな、と個人的に思っているのですが

grid-template:
    /* 1行目の高さ(row)と、1行目に含む内容 */
    "image title date" 30px

    /* 2行目の高さ(row ※1frは残りの長さを指定するgridでの表現)と、2行目に含む内容
       スラッシュ(/)以降は、縦の列(column)の幅をそれぞれ指定
     */
    "image description description" 1fr /
    80px 1fr 90px;
}

まあこんな感じです、、。まあ雰囲気で使っていきましょう、、

結果がこちら〜

See the Pen Grid Card by Kobashi syunsuke (@ksyunnnn) on CodePen.

それでは、Happy Gridライフを〜:wave:

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-10-04T08:21:24+09:00

HTMLのコメント入れ子

概要

htmlでコメントアウトをしようと思った時に、入れ子になってしまうので、何かかんたんにコメントアウトできる方法がないか探していた。

コメントアウト方法

2パターン方法があるようでした。

パターン1

scriptタグを使用し、/* */で囲ってコメントアウトにする。

<html>
    <head></head>
    <body>
        <div>
            <script>/*
                <!-- コメントアウト -->
            */</script>
        </div>
    </body>
</html>

パターン2

styleタグを使用し、/* */で囲ってコメントアウトにする。

<html>
    <head></head>
    <body>
        <div>
            <style>/*
                <!-- コメントアウト -->
            */</style>
        </div>
    </body>
</html>

これで、入れ子の場合簡単にコメントアウト可能。
コーディングの際に、使うことが多そう。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-10-04T00:25:25+09:00

かんたんSmoothScroll

はじめに

久しぶりにHTMLを触った際に、
ボタンなどをクリックしたときのスーとスクロールする動きって、
Javascriptで作らないと（jQueryのライブラリとか使わないと）駄目だっけ・・・と思って検索したのが始まり。

CSSで指定

CSSで指定できるようになっている。

example.css
html {
  scroll-behavior: smooth;
}

これだけで同一ページ内リンクを踏めば、スーとスクロールしてくれる。便利。
ただ、一部、サポートしていないブラウザで動作しない。

そこにぴったりの便利パッケージ

https://github.com/wessberg/scroll-behavior-polyfill

Readmeにある通りですが、インストールして以下のコードを加えれば動きます。
（typescriptだからどうかなと思いましたがとりあえず動きました）

if (!("scrollBehavior" in document.documentElement.style)) {
    import("scroll-behavior-polyfill");
}

ただ、一つ欠点があり、このパッケージはスタイルシートに対応していないので、HTMLに直接書くなりが必要です。

Reactで作ってたので、tsxに書こうかと思ったところ、もちろん定義にないものなので怒られて、土台になってるHTMLの方に直接書きました。

<html lang="ja" style="scroll-behavior: smooth">

ちょっとかっこ悪い

余談

作者の方が対応していない理由として貼られているリンク先で、
どういう仕組に対して拡張しないといけなくなり大変だよみたいなことが書かれており、全くしらない部分だったので勉強になりました。

で、興味が惹かれたのがHoudini。
実はこちらが本題でメモとして残そうと思った次第。

最初、3Dソフトのほうしか頭に浮かびませんでした。。

4年前のデモのサンプル。
https://github.com/GoogleChromeLabs/houdini-samples

Houdini Task Force?
https://github.com/w3c/css-houdini-drafts/wiki

仕様自体はドラフトみたいですが、ものになったらちょっとおもしろそうですね。
一部はChromeに実装されてるようなので、今度触ってみたいと思います。

追記

ちゃんとした内容解説。サンプルもあって、内容後で読みたい。
https://www.kabuku.co.jp/developers/a-small-taste-of-css-houdini

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

日付別

タグ一覧