20191028のCSSに関する記事は8件です。

投稿日：2019-10-28T23:05:41+09:00

【jQuery】いい感じのアコーディオンを自作した

はじめに

アコーディオン（開閉メニュー）を実装するとき、jQuery標準APIの slideUp() / slideDown() だと融通がきかなかったりするので簡単なスニペットを作りました。残念ながらjQuery依存です。そしていい感じかはわかりません。

GitHub: https://github.com/pakchandae/accordion

使い方

jQueryとpublic/assets/js/app.jsを読み込む
対象要素に下記を指定する

class名	カスタム属性
js-accordion-target → 開閉する要素	data-accordion-height → 初期表示の高さを指定（初期値: 0）
js-accordion-trigger → クリックする要素	data-accordion-target → ターゲットとなる要素を指定

サンプルコード

html

<!-- target -->
<div class="js-accordion-target" id="target" data-accordion-height="50">
  <p style="width: 300px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>

<!-- trigger -->
<a class="js-accordion-trigger" href="#" data-accordion-target="#target">read more</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="app.js"></script>

コードの解説

以下、Accordionクラスのコードです。

class Accordion{
    constructor() {
        this.targetClass = 'js-accordion-target';
        this.$target = $('.' + this.targetClass);
        this.triggerClass = 'js-accordion-trigger';
        this.$trigger = $('.' + this.triggerClass);
        this.dataTarget = 'data-accordion-target';
        this.dataInitialHeight = 'data-accordion-height';
        this.openClass = 'is-open';
        this.ease = 'swing';
        this.speed = 300;
    }

    /**
     * 初期化処理。下記の場合エラー
     * - トリガー要素に[data-accordion-target]属性が存在しない
     * - トリガー要素に指定した[data-accordion-target]要素が存在しない
     * - [data-accordion-target]属性を持った要素に.js-accordion-triggerが指定されていない
     */
    init(){
        try {
            if (!this.$target.length || !this.$trigger.length) return;

            this.$trigger.each((i, el) => {
                if ($(el).attr(this.dataTarget)) {
                    if (!$($(el).attr(this.dataTarget)).length || !$($(el).attr(this.dataTarget)).hasClass(this.targetClass)) {                        
                        throw new Error(this.targetClass + ' element does not exist');
                    }
                } else {
                    throw new Error(this.dataTarget + ' attribute does not exist');
                }
            });

            $('[' + this.dataTarget + ']').each((i, el) => {
                if ($($(el).attr(this.dataTarget)).length && !$(el).hasClass(this.triggerClass)) {                    
                    throw new Error(this.triggerClass + ' attribute does not exist');
                }
            });

        } catch (e) {
            console.error(e.message);
            return;
        }

        this.setTarget();
        this.setEvent();
    }

    /**
     * ターゲット要素の初期スタイル指定
     */
    setTarget(){
        this.$target.each((i, el) => {
            let $el = $(el),
                initialHeight = $el.attr(this.dataInitialHeight);

            $el.css({
                height: initialHeight ? Number(initialHeight) : 0,
                overflow: 'hidden',
            })
        });
    }

    /**
     * イベント定義
     */
    setEvent(){
        $(window).on('resize', () => {
            this.resize();
        });

        this.$trigger.on('click', (e) => {
            this.click(e);
            return false;
        });
    }

    /**
     * クリックイベント
     * @param {object} event クリックイベントオブジェクト
     */
    click(event){
        let $target = $($(event.currentTarget).attr(this.dataTarget)),
            initialHeight = $target.attr(this.dataInitialHeight),
            height = this.getHeight($target.contents()),
            h = 0;

        if ($target.hasClass(this.openClass)) {
            h = initialHeight ? Number(initialHeight) : 0;
            $target.removeClass(this.openClass);
        } else {
            h = height;
            $target.addClass(this.openClass);
        }

        this.setHeight({
            $target: $target,
            speed: this.speed,
            height: h,
        });
    }

    /**
     * リサイズイベント
     */
    resize(){
        this.$target.each((i, el) => {
            let $el = $(el),
                h = this.getHeight($el.contents());

            if (!$el.hasClass(this.openClass)) return;

            this.setHeight({
                $target: $el,
                speed: 0,
                height: h,
            });
        });
    }

    /**
     * ターゲット要素の高さ指定
     * @param {object} param 対象要素・スピード・高さ
     */
    setHeight(param){
        let $target = param.$target,
            s = param.speed,
            h = param.height;

        $target.stop().animate({ height: h }, s, this.ease);
    }   

    /**
     * 対象要素の高さを取得
     * @param {object} $el 対象要素
     * @return {number} 対象要素の高さ
     */
    getHeight($el){
        let h = 0;

        $el.each((i, el) => {
            if ($(el).get(0).nodeType === Node.TEXT_NODE) {            
                $(el).wrap('<span>');
                h += $(el).parent().outerHeight(true);
                $(el).unwrap('<span>');
            } else {
                h += $(el).outerHeight(true);
            }
        });

        return h;
    }   
}

let accordion = new Accordion();
accordion.init()

難しいことはしてないので、コメント読んでいただければなんとなく分かるかと思いますが、一応メソッドごとに解説します。

initメソッド

initメソッドでは初期化を行ってます。
まず、トリガー要素かターゲット要素が存在しない場合は、その後の処理が実行されないようreturnします。

if (!this.$target.length || !this.$trigger.length) return;

その後下記エラーをチェックし、該当すればエラーを投げます。

トリガー要素に[data-accordion-target]属性が存在しない
トリガー要素に指定した[data-accordion-target]要素が存在しない
[data-accordion-target]属性を持った要素に.js-accordion-triggerが指定されていない

this.$trigger.each((i, el) => {
    if ($(el).attr(this.dataTarget)) {
        if (!$($(el).attr(this.dataTarget)).length || !$($(el).attr(this.dataTarget)).hasClass(this.targetClass)) {
            // トリガー要素に指定した[data-accordion-target]要素が存在しない
            throw new Error(this.targetClass + ' element does not exist');
        }
    } else {
        // トリガー要素に[data-accordion-target]属性が存在しない
        throw new Error(this.dataTarget + ' attribute does not exist');
    }
});

$('[' + this.dataTarget + ']').each((i, el) => {
    if ($($(el).attr(this.dataTarget)).length && !$(el).hasClass(this.triggerClass)) {
        // [data-accordion-target]属性を持った要素に.js-accordion-triggerが指定されていない
        throw new Error(this.triggerClass + ' attribute does not exist');
    }
});

エラーチェックを無事抜けたら、最後にsetTarget()とsetEvent()を呼び出します。

try {
    // エラーチェック処理
} catch (e) {
    console.error(e.message);
    return;
}

this.setTarget();
this.setEvent();

setTargetメソッド

setTargetメソッドでは、ターゲット要素（ .js-accordion-target ）の初期スタイルを設定します。
height → ターゲット要素が[data-accordion-height]属性を持っていたらその値、なければ0
overflow → アコーディオンを閉じたとき子要素がはみ出さないように overflow: hidden してあげます

this.$target.each((i, el) => {
    let $el = $(el),
        initialHeight = $el.attr(this.dataInitialHeight);

    $el.css({
        height: initialHeight ? Number(initialHeight) : 0,
        overflow: 'hidden',
    })
});

setEventメソッド

setEventメソッドでは、下記のイベント定義を行います。

// トリガーのクリックイベント
this.$trigger.on('click', (e) => {
    this.click(e);
    return false;
});

// リサイズイベント
$(window).on('resize', () => {
    this.resize();
});

clickメソッド

clickメソッドは、トリガー要素がクリックされた際に実行される処理です。
ざっくり以下のような処理を行ってます。
1. ターゲット要素が閉じたとき、開いたときの高さを取得
2. ターゲット要素の開閉状態を見て、値を設定
3. アニメーション

// 1. ターゲット要素が閉じたとき、開いたときの高さを取得
let $target = $($(event.currentTarget).attr(this.dataTarget)),
    initialHeight = $target.attr(this.dataInitialHeight),
    height = this.getHeight($target.contents()),
    h = 0;

// 2. ターゲット要素の開閉状態を見て、値を設定
if ($target.hasClass(this.openClass)) {
    h = initialHeight ? Number(initialHeight) : 0;
    $target.removeClass(this.openClass);
} else {
    h = height;
    $target.addClass(this.openClass);
}

// 3. アニメーション
this.setHeight({
    $target: $target,
    speed: this.speed,
    height: h,
});

resizeメソッド

resizeメソッドは、リサイズ時にターゲット要素に対して行われる処理です。
リサイズ時に子要素の高さが変わるとレイアウトが崩れてしまうので、常にターゲット要素の高さを再計算してあげます。
流れとしては以下です。
1. ターゲット要素が開いたときの高さを取得
2. ターゲット要素が閉じてるときはreturn
3. 高さ調整

resize(){
    this.$target.each((i, el) => {

        // 1. ターゲット要素が開いたときの高さを取得
        let $el = $(el),
            h = this.getHeight($el.contents());

        // 2. ターゲット要素が閉じてるときはreturn
        if (!$el.hasClass(this.openClass)) return;

        // 3. 高さ調整
        this.setHeight({
            $target: $el,
            speed: 0,
            height: h,
        });
    });
}

setHeightメソッド

setHeightメソッドは、ターゲット要素の高さを設定します。
なお、引数で speed / height を渡せるようにしてるので、
resize() の高さ制御も、click()の開閉アニメーションもこの処理を実行してます。

setHeight(param){
    let $target = param.$target,
        s = param.speed,
        h = param.height;

    $target.stop().animate({ height: h }, s, this.ease);
}

getHeightメソッド

getHeightメソッドは、引数に渡ってきた要素の高さの合計値を返します。
ターゲット要素が開いたときの高さ（＝子要素の高さの合計値）を取得するときに使用します。
なお、子要素がテキストノードの場合は高さが取れないので、一旦<span>でwrap → 高さ計算 → <span>でunwrap という荒業を行ってます。（絶対もっと良い方法ありますが）

let h = 0;

$el.each((i, el) => {
    if ($(el).get(0).nodeType === Node.TEXT_NODE) {            
        $(el).wrap('<span>');
        h += $(el).parent().outerHeight(true);
        $(el).unwrap('<span>');
    } else {
        h += $(el).outerHeight(true);
    }
});

return h;

まとめ

大したものでは無いのですが、勉強がてらアコーディオン機能を作ってみました。
小さな機能に関しては自作してしまったほうが早かったり融通がきいたりするので、どんどん自作コードで身を固めていきたいです。

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-28T22:56:22+09:00

今日から学んできたことを毎日ブログにしていきたいと思います！

　さて、今日から毎日学んだことをブログに記していきたいと思う。

　そのまえに私の今現在の状況とプログラマーを目指すきっかけについて記していこうと思う。私は今現在、某国立大学で化学系のことを学んでいる。しかし、インターンシップなどに参加しても、どうも専攻の職に興味などが一切湧かなかった。それもそのはず、高校から大学までレールの上をただ何も考えずに歩んできたからだ。高校・大学では、何となく受かりそうだから受けてきた。大学に行くのも惰性で行き、人生つまんねえなあと思う日々。アニメ的な展開起きないかなと考える日々。そんな人生を変えることは起きないのも当たり前だ。何にも行動せず、ただ過ぎ行く日々をこなしているからだ。

　というのを毎日考え過ごして来て、これからは多くのことにチャレンジし継続していきたいと思う。きっかけは自分でもあまり覚えていないが、フリーランスになれば家で仕事できるなどそんな甘えた考えだろう。話は戻り、私が今現在継続していることは、プログラミング学習だ。つい一週間位前から始めている。それに加え、ブラインドタッチを三日前から始めている。今、ブログを書くのもブラインドタッチだ。全然思った文字も打てないし、時間もかかり、少しもどかしい気持ちだ。

　前置きが長いな。すみません。今日したことは、ドットインストールのBoostrapを1～7までこなした。プログラミングでインプットしたのはこれだけだ。すごい少ない。自覚はしているが、どうにも身が入らなかった。この原因としては就職について最近焦り初めており、今日はキャリアカウンセリングというのを受けてきた。これは、就職相談みたいなのだ。利用してみた感想としては、「めちゃくちゃ焦りが積もった」この一言につきる。今まで就職について考えてきてないとはいえ、やばいと思った。さらに、今の時期からインターンなどを経て早期面接とか受けている人がいることいにはとてもびっくりした。周りに動いている人がいないし、地方だからとは言え情報不足だった。このような原因で焦りの思考ループにより身が入らなかった。今日一日解決策を考えているが、現状何も思いつかない。明日も考えよう。

　さて話は戻り、今日は下のような画像のように、学んだ単元のことを要約しながら進めた。

さて、学んだことをアウトプットします。Boostrapによりcssの機能を省ける感じなのかな。br-○やtext-○をhtmlの中に組み込んで省いた感じだ。margin:0 auto;のやり方も覚えた。my-0 mx-autoでいけるみたい。後は高さや幅をhやwで略すのも覚えておきたい。このやり方を22回まで続けよう。

今回の記事で書きたかったことの半分も書けなかった。文章能力もぜんぜんないし、タイピングが思うようにいかないのが原因だろう。こんな短い文章を書くのにも1時間近く経った。明日からは、もう少し短い文章にして継続していこう。

　明日のTo Do List
・Progate　中級道場　上級道場
・ドットインストール　Boostrap 8～15
・参考になるブログを読む　詳しくは明日書きます。
大学もあるけど明日も一日、頑張りましょう！

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-28T21:41:59+09:00

年末まで毎日webサイトを作り続ける大学生〜10日目 Css Grid Layout, Flex Box, Google Font, jsで名言をランダムに表示してみた〜

はじめに

初めまして。
年末まで毎日webサイトを作っている者です。
今日もMDNの初心者ページを見て勉強していたんですが、そういえばレイアウト全然やってないなということでGrid Layout, Flex Boxを使ってみました。
作ったものはGrid Layoutの枠に入ると名言がランダムで表示されるというものです。
JavaScriptも簡単ではありますが使っています。
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は10日目。(2019/10/28)
よろしくお願いします。

サイトURL

https://sin2cos21.github.io/day10.html

やったこと

まずは、どんなものが出来上がったのかgifでどうぞ！ ↓

全体の構成と、カーソルが乗ると色が変わる部分をGrid Layoutで実装しています。
Grid Layoutを使うとhtmlがほとんど汚れません (これでhtml部分全て) ↓

<h2 id="header">Css Grid Layout</h2>
    <nav id="nav">
        <span id="rule">7 RULES</span>
        <ol id="rule_text">
            <li>enjoy!</li>
            <li>relax!</li>
            <li>fun!</li>
            <li>eat!</li>
            <li>you can do it!</li>
            <li>yes!</li>
            <li>happy!</li>
        </ol>
    </nav>
    <div id="main">
        <div id="box1"></div>
        <div id="box2"></div>
        <div id="box3"></div>
        <div id="box4"></div>
        <div id="box5"></div>
        <div id="box6"></div>
        <div id="box7"></div>
        <div id="box8"></div>
        <div id="box9"></div>
    </div>
    <footer id="footer">
        All Rights Reserved.
    </footer>

全体の構成を調整するcss部分↓

body {
            display: grid;
　　　　　　　/* ↓ここで縦方向を制御しています */
            grid-template-rows: 100px 1fr 100px;
　　　　　　　/* ↓ここで横方向を制御しています */
            grid-template-columns: 200px 1fr;
        }

rowsの100px 1fr 100pxというのは、縦に3つのブロックがあって上下が100px、真ん中は余った分全部のスペースを使うという意味です。
columnsの200px 1frは横に2つのブロックがあって左端が200px、1frは残り余った部分を使います。

ではカーソルが変わると色が変わる部分を見ていきましょう。htmlはこの部分が該当します↓

<div id="main">
        <div id="box1"></div>
        <div id="box2"></div>
        <div id="box3"></div>
        <div id="box4"></div>
        <div id="box5"></div>
        <div id="box6"></div>
        <div id="box7"></div>
        <div id="box8"></div>
        <div id="box9"></div>
    </div>

css ↓ (他にやり方がわからず長くなってしまいました・・・)

#main {
/*全体構成の中で#main自体をどこに配置するかの指定↓ */
            grid-column: 2 / 3;
            grid-row: 2 / 3;

/* #mainのなかのdivたちをどう構成するかの指定↓ */
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
        }
#box1 {
            grid-column: 1 / 2;
            grid-row: 1 / 2;
        }

        #box2 {
            grid-column: 2/ 3;
            grid-row: 1 / 2;
        }

        #box3 {
            grid-column: 3 / 4;
            grid-row: 1 / 2;
        }

        #box4 {
            grid-column: 1 / 2;
            grid-row: 2 / 3;
        }

        #box5 {
            grid-column: 2 / 3;
            grid-row: 2 / 3;
        }

        #box6 {
            grid-column: 3 / 4;
            grid-row: 2 / 3;
        }

        #box7 {
            grid-column: 1 / 2;
            grid-row: 3 / 4;
        }

        #box8 {
            grid-column: 2 / 3;
            grid-row: 3 / 4;
        }

        #box9 {
            grid-column: 3 / 4;
            grid-row: 3 / 4;
        }

grid-template-columns: repeat(3, 1fr);　

これは1frを3回繰り返すという意味です。columnsなので横に1frが3つ、つまり3ブロックは均等に1/3ずつの大きさが割り当てられます。

そしてJavaScript・・・。これはあまり見せたくないのですが・・・↓


    <script>
        let box1 = document.getElementById('box1');
        let box2 = document.getElementById('box2');
        let box3 = document.getElementById('box3');
        let box4 = document.getElementById('box4');
        let box5 = document.getElementById('box5');
        let box6 = document.getElementById('box6');
        let box7 = document.getElementById('box7');
        let box8 = document.getElementById('box8');
        let box9 = document.getElementById('box9');

        box1.addEventListener('mouseover', meigenGo);
        box2.addEventListener('mouseover', meigenGo);
        box3.addEventListener('mouseover', meigenGo);
        box4.addEventListener('mouseover', meigenGo);
        box5.addEventListener('mouseover', meigenGo);
        box6.addEventListener('mouseover', meigenGo);
        box7.addEventListener('mouseover', meigenGo);
        box8.addEventListener('mouseover', meigenGo);
        box9.addEventListener('mouseover', meigenGo);

        box1.addEventListener('mouseleave', meigenGoAway);
        box2.addEventListener('mouseleave', meigenGoAway);
        box3.addEventListener('mouseleave', meigenGoAway);
        box4.addEventListener('mouseleave', meigenGoAway);
        box5.addEventListener('mouseleave', meigenGoAway);
        box6.addEventListener('mouseleave', meigenGoAway);
        box7.addEventListener('mouseleave', meigenGoAway);
        box8.addEventListener('mouseleave', meigenGoAway);
        box9.addEventListener('mouseleave', meigenGoAway);


        let meigen = [
            'Think rich, look poor.',
            'One of these days is none of these days.',
            'Believe and act as if it were impossible to fail.',
            'If you obey all the rules, you miss all the fun.',
            '努めて難関を歩いて、努めて苦労を味わう。これが人間としては、大切なことである。',
            '人は忙しい中にも静かにくつろぐような心を持たなくてはならないし、苦しみの中にあっても、そこに楽しみを見出す工夫をしなければならない。',
            '人を信じよ、しかし、その百倍も自らを信じよ。'
        ];

        let count = 0;

        function meigenGoAway(e) {
            let eventTarget = e.target;
            let rgb = randomRGB();
            let r = rgb[0];
            let g = rgb[1];
            let b = rgb[2];
            eventTarget.style.backgroundColor = 'rgba(' + r + ', ' + g + ',' + b + ', .5)';
            eventTarget.textContent = "";

        }

        function meigenGo(e) {
            let randomNumber = Math.floor(Math.random() * meigen.length);
            let choiceMeigen = meigen[randomNumber];
            let eventTarget = e.target;
            eventTarget.style.backgroundColor = 'rgba(255, 255, 255, .7)';
            eventTarget.textContent = choiceMeigen;
            count += 1;
            if (count >= 50) {
                alert('欲張るのか！');
            }
        }

        function randomRGB() {
            let r = Math.floor(Math.random() * 256);
            let g = Math.floor(Math.random() * 256);
            let b = Math.floor(Math.random() * 256);
            let rgb = [r, g, b];
            return rgb;
        }

    </script>

はい、怒涛のgetElementByIdとaddEventListenerです・・・。
どうやればスマートに書けるのか思案中です。

let meigen

これは名言を格納しておく配列です。

関数 meigenGoは、名言の配列の長さを使ってランダムに名言を1つ選び、それをtextContentでdivに入れ込むということをやっています。あとはbackgroundcolorを白にして文字を読みやすくするのと、50回以上名言が表示されたら「欲張るのか！」というアラートを出します。

次に関数 meigenGoAwayですが、これはカーソルがdivから離れた時に、meigenGoで背景色を白にしていたのを他の色にしています。ランダムな値はrandomRGB 関数から受け取っています。あとここでdiv内の名言を消しています。

最後にFlex BoxとGoogle Fontを紹介します。
Flex Boxはナビで使っています(ナビはしませんが） ↓

#nav { 
            display: flex;
/* 縦に要素を配置する指示↓ */
            flex-direction: column;
/* 要素を左右中央に寄せる指示↓ */
            justify-content: center;
/* Google Fontのコード↓ */
            font-family: 'Liu Jian Mao Cao', cursive;
        }

そしてGoogle Fontはheadのところでlinkを読み込んでいます ↓

<link href="https://fonts.googleapis.com/css?family=Stoke&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Liu+Jian+Mao+Cao&display=swap" rel="stylesheet">

感想

Grid Layoutはとても便利だと思いました。Flex Boxも簡単に要素の配置が調整できて嬉しいです。以前floatとかいうのを使ったことがありますがそれとは段違いの使いやすさでした。
ちなみにMDNはやっぱりいいサイトですね。ありがとうございます。

最後までお読みいただきありがとうございます。
明日も頑張ります！

参考・引用

CSS Grid Layout を極める！（基礎編）(https://qiita.com/kura07/items/e633b35e33e43240d363)
flexの縦レイアウト (https://qiita.com/mczkzk/items/d9fb98f53aea6e82f9ac)
CSS：text-shadowを使用し、文字に影や縁取りをする (http://raining.bear-life.com/css/text-shadow%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%80%81%E6%96%87%E5%AD%97%E3%81%AB%E5%BD%B1%E3%82%84%E7%B8%81%E5%8F%96%E3%82%8A%E3%82%92%E3%81%99%E3%82%8B)
Google Fonts (https://fonts.google.com/?selection.family=Liu+Jian+Mao+Cao)
グリッドレイアウトの基本概念 (https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
英語の名言【短い名言集】短文のいい言葉！ | 名言+Quotes (https://meigen-ijin.com/eigomeigen/)
世界に誇る「日本」の偉人たちが語った、信念のことば10選 | TABI LABO (https://tabi-labo.com/274695/japanese-quote-04)

今日はたくさんのサイトにお世話になりました。ありがとうございます！

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-28T19:45:07+09:00

IEでCSSプロパティのinitialとunsetを指定するとスタイルが崩れてしまう時の解決法

CSSのプロパティの initial や unset はIE11に対応していないためスタイルが崩れてしまいます。
詳しくはこちら(initial unset)を参照してください。
この記事ではこの問題に対処するために代表的なプロパティごとの解決法を書きます。

解決法

margin/padding/width/heightの場合

auto の記載を追加することでIEに対応できます。
sample.css
.block {
  margin: initial;
  /* IE対応のために追加する */
  margin: auto;
}
line-height/font-weight/font-styleの場合

normal の記載を追加することでIEに対応できます。
sample.css
.block {
  line-height: initial;
  /* IE対応のために追加する */
  line-height: normal;
}

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-28T19:05:37+09:00

HTML/CSSの書き方(ちょっとhaml)

html/cssで作るときにいつも忘れがちなことを個人でメモしているものになります。
都度更新しておりますのでご了承ください。

いつも参考にさせていただいているサイト

⭐️色の見本
http://www.netyasun.com/home/color.html
⭐️Font-familyメーカー
https://saruwakakun.com/font-family
⭐️命名について
https://qiita.com/pugiemonn/items/eaa597b79fe59a1f1506#html%E3%81%A8css%E3%82%AF%E3%83%A9%E3%82%B9%E3%81%AE%E5%91%BD%E5%90%8D%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

基本
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8" >
  <title>サイト名</title>
</head>
  <body>
  

  
  </body>
</html>
リセットCSSが必要な場合は、好みのものを貼り付けてください。

画像の表示
html
<img src="dog.jpg" alt="［写真］">
haml
<%= image_tag 'dog.JPG'%>
画像を背景表示する

background-imageを使う
html
  <section class="works" >
    <div class="l-content">
      <h2 class="heading">Works</h2>
    </div>
  </section>
css
.works {
    width: 100%;
    height: 600px;
    background-image: url(画像のパス);
}
背景画像を透過する（テキストは透過しない）

opacityだとテキストも透過してしまうため、画像とテキストの間に１つ階層をはさめばOK！
html
  <section class="works" >
    <div class="l-content">　#これを挟む
      <h2 class="heading">Works</h2>
    </div>
  </section>
css
.l-content{
  height: 100%;
  background: rgba(255,255,255,0.5);
}
画像を中央寄せ

positionを使う
scss
.top-box {
  background-color: $BaseOrange;
  height: 100px;
  width: 100%;
  margin-bottom: 15px;
  position:relative;
  img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto
  }
}
リスト（li,ul)
    <ul class=contents>
      店名：
        <li class=contents__details>
        ジャンル：
        </li>
        <li class=contents__details>
        住所：
        </li>
//リストの点を消す
  li {
    list-style: none;
  }
要素の加工

要素を丸くする
css
.work-block {
    height: 250px;
    width: 250px;
    border-radius: 125px;
}

/*border-radiusを正方形の半分で指定する*/

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-28T16:30:51+09:00

HTMLレンダリングエンジン

目次

ブラウザとは(ブラウザコンポーネント)

ブラウザとサーバーの通信

HTMLレンダリングエンジン

JavaScriptエンジン

日本ブラウザシェア率(2016~)

ブラウザとは

ウェブブラウザ（インターネットブラウザ、web browser）とは、 World Wide Web (WWW) の利用に供するブラウザであり、ユーザエージェント (UA) である。具体的には、ウェブページを画面や印刷機に出力したり、ハイパーリンクをたどったりするなどの機能がある。単にブラウザ（ブラウザー）と呼んだ場合、多くはウェブブラウザのことを指す。

出典: フリー百科事典『ウィキペディア（Wikipedia）』

ブラウザコンポーネント

出典: ブラウザはどのようにコンテンツをレンダリングしているのか？

各コンポーネント

ユーザインターフェース

ユーザは操作できる部分：アドレスバー、戻る/進むボタン、メニューなど

ブラウザエンジン

ユーザインターフェースとレンダリングエンジンの間の情報の受け渡しを担当

⭐️HTMLレンダリングエンジン

HTMLとCSSを解析し、画面に表示

⭐️JavaScriptエンジン

JavaScriptを動かしを担当

ネットワーキング

HTTPリクエストなどのネットワーク呼び出しを担当

UIバックエンド

チェックボックスやウィンドウなどのコアウィジェットの描画を担当

データストレージ

Cookieなどのデータの保存を担当

ブラウザとサーバーの通信

アドレスバーにアクセス先を入力

ネットワーク経由でサーバーへリクエスト

リクエスト内容より処理してHTMLを生成

CSSとJSファイルなどもクライアントへ返信

レンダリングエンジンとJavaScriptエンジンより画面を表示

出典: Webフロントエンドとサーバーサイドの技術動向をざっくり整理する

HTMLレンダリングエンジン

HTMLレンダリングエンジンとは、ウェブページ記述用言語で書かれたデータを解釈し、実際に画面に表示する文字や画像などの配置を計算するプログラムである。HTMLに加え、CSS、XMLなどを解釈できるものが多い。

出典: フリー百科事典『ウィキペディア（Wikipedia）』

主なHTMLレンダリングエンジン
Trident (Internet Explorer、QQ浏览器) - トライデント
    EdgeHTML (Microsoft Edge) - エッジ
Gecko (Firefox) - ゲッコー
    Servo - サーボ
KHTML (Konqueror)
    WebKit (Safari) - ウェブキット
        Blink (Chromium, Chrome, Opera, Microsoft Edge) - ブリンク
補足1：ChromeとChromium、何が違う?

HTMLレンダリングエンジンの歴史

参照：Browser engine From Wikipedia, the free encyclopedia
補足: EdgeブラウザのChromiumベース移行、マイクロソフトが正式発表

JavaScriptエンジン

JavaScriptエンジンとはJavaScriptコードを実行するプログラムまたはインタプリタのことです。

出典：V8エンジンでのJavaScriptの機能と最適化コードの書き方に関する5つのベストプラクティス

JavaScriptエンジンの種類

ブラウザレンダリングエンジン JavaScriptエンジン

IE Trident Chakra (Jscript9)

Microsoft Edge EdgeHTML Chakara (JavaScript)

Firefox Gecko SpiderMonkey

Konqueror KHTML KJS

Safari WebKit JavaScriptCore

Chrome, Opera Blink V8

参照：PhantomJSと各ブラウザのJavascriptエンジンまとめ
 参照：V8エンジンでのJavaScriptの機能と最適化コードの書き方に関する5つのベストプラクティス

日本ブラウザシェア率(2016~)

補足：Desktop、Mobile、Tabletを含む
[出典：https://gs.statcounter.com]

ご静聴ありがとうございます

ブラウザ	レンダリングエンジン	JavaScriptエンジン
IE	Trident	Chakra (Jscript9)
Microsoft Edge	EdgeHTML	Chakara (JavaScript)
Firefox	Gecko	SpiderMonkey
Konqueror	KHTML	KJS
Safari	WebKit	JavaScriptCore
Chrome, Opera	Blink	V8

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-28T15:13:10+09:00

web入門（３）

はじめに

JavaScriptとは、webサイト上で、htmlとcssでは表現できない機能を実装する言語です。
よく、jsって略されます。Javaという言語と名前は似てますが、全然違うので、気をつけてください。また、jQueryとは、JavaScriptをより扱いやすくしたフレームワークのことです。

フォルダー構成

デスクトップ上に、js-pracというフォルダーを作り、その中でindex.htmlとmain.jsを作る。
/Users/(ユーザー名)/Desktop/js-prac
                            |-index.html (表示用)
                            |-main.js (機能面)
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScriptの練習</title>
  </head>

  <body>
    <h1>Hello World</h1>
  </body>
</html>
JavaScript(jQuery)を使う

html上に直接JavaScriptを書く方法もありますが、今回は別ファイルに分けて読み取る方法を採用します。
また、jQueryを使用する方法は、ダウンロードをする方法とCDNを用いる方法がありますが、今回はCDNを用いる方法を採用します。
CDN（Content Delivery Network）とは簡単に言うと負荷を肩代わりしてくれるレンタルサーバのようなものです。下図のように一部の負荷を肩代わりしてもらうおかげで自分のサーバの負荷が下がり、安定してサービスを提供できるようになります。

では、index.htmlを以下のように修正します。
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScriptの練習</title>
  </head>

  <body>
    <h1>Hello World</h1>

    
    <script
      type="text/javascript"
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
    ></script>
    
    <script src="./main.js"></script>
  </body>
</html>
これで、jQueryを使う準備は終わりです。では、実際にjQueryを使ってみましょう。

まず、index.htmlのh１にid属性をつけます。
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScriptの練習</title>
  </head>

  <body>
    
    <h1 id="hello">Hello World</h1>

    <script
      type="text/javascript"
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
    ></script>
    <script src="./main.js"></script>
  </body>
</html>
次に、main.jsを編集していきます。
main.js
$(function() {
  $("#hello").click(function() {
    $(this).text("こんにちは、世界");
  });
});
$("#hello")で、htmlで指定したidを取得し、click()でクリックした時どうするか、function() {$(this).text("こんにちは、世界");}で、id="hello"を指定した要素のテキストを「こんにちは、世界 」に置き換えてるという流れです。

chromeで開いて確認してみましょう。Hello World をクリックすると、こんにちは、世界 が表示されることが確認できます。

大まかに説明すると以下のような形になります。上の例では、idを取得していましたが、class,タグ（a, h2 など）もcssと同様に取得することが可能です。
$("#idの名前").jQueryのイベント(function() {
  // メソッド
});
$(".classの名前").jQueryのイベント(function() {
  // メソッド
});
$("htmlのタグの名前").jQueryのイベント(function() {
  // メソッド
});
それでは、よく使うパターンをまとめておきます。

1. クリックしたら、フェードアウトする
main.js
$(function() {
  $("#hello").click(function() {
    $(this).fadeOut();
  });
});
2. ホバーしたら、色が変わる
main.js
$(function() {
  $("#hello").hover(function() {
    $(this).css("color", "red");
  });
});
3. ホバーしたら、色が変わり、離したら色が元に戻る
main.js
$(function() {
  $("#hello").on({
        'mouseenter' : function(){
            $(this).css("color", "red")
        },
        'mouseleave' : function(){
            $(this).css("color", "#000")
        }
    });
});
4. ボタンを押したら、数字が足されていく
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScriptの練習</title>
  </head>

  <body>
    <h1 id="hello">Hello World</h1>

    
    <input id="txt" type="text" value="0" readonly />
    <input id="btn" type="button" value="add!" />

    <script
      type="text/javascript"
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
    ></script>
    <script src="./main.js"></script>
  </body>
</html>
main.js
$(function() {
  $("#hello").click(function() {
    $(this).text("こんにちは、世界");
  });

  $("#btn").click(function() {
    let value = $("#txt").val(); // id="txt"のvalue属性を取得して、変数valueに代入
    value = parseInt(value); // 変数valueの型をstring型->int型にキャスト
    $("#txt").val(value + 1); // id="txt"のvalue属性にvalue+1を入れる
  });
});
5. ドロップダウンメニューの実装
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScriptの練習</title>
  </head>

  <body>
    <h1 id="hello">Hello World</h1>

    
    <input id="btn" type="button" value="表示する" />
    <div
      id="menu"
      style="background-color: #ddd; height: 200px; padding-top: 20px; display: none"
    >
      <p>ドロップダウンメニューです。</p>
    </div>

    <script
      type="text/javascript"
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
    ></script>
    <script src="./main.js"></script>
  </body>
</html>
main.js
$(function() {
  $("#hello").click(function() {
    $(this).text("こんにちは、世界");
  });

  $("#btn").click(function() {
    if ($(this).val() == "表示する") {
      $(this).val("非表示にする");
      $("#menu").slideDown(1000); // 引数に秒数指定（単位：ミリ秒）
    } else {
      $(this).val("表示する");
      $("#menu").slideUp(1000);
    }
  });
});

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-28T01:11:59+09:00

potision:fixed したheaderがページ全体のmin-widthを下回った時にスクロールできなくなってしまう

「position: fixed」でスクロール固定したヘッダーを横にスクロールさせる

この記事が参考になる。
.header {
    position: fixed;
    top: 0;
    min-width: 1000px;
}
みたいに固定されててmin-width指定してあると、min-width下回ると普通のコンテンツは横スクロール出来るが、fixedのコンテンツは出来ない。
なので、fixedしてあるheaderだけが横スクロールできなくなってしまう。本来は中身のコンテンツを横スクロールしたらheaderも横スクロールしたい。
なので、その時は
    $(window).on("scroll", function(){
        $(".header").css("left", -$(window).scrollLeft());
    });
のようにJSで動かしてあげる。
windowをscrollしたら、.headerのcssにleftを入れてあげる。
その値はwindowの横スクロールした値の逆。

scrollLeftは右に画面がいった値（左にスクロールした値）なので、その逆をleftに入れてあげる。
100px左にスクロールしたらleftに-100px。

これで実質同じ動きが実現できます。

　 Tweet
Qiitaで続きを読む

20191028のCSSに関する記事は8件です。

【jQuery】いい感じのアコーディオンを自作した

はじめに

使い方

サンプルコード

コードの解説

initメソッド

setTargetメソッド

setEventメソッド

clickメソッド

resizeメソッド

setHeightメソッド

getHeightメソッド

まとめ

今日から学んできたことを毎日ブログにしていきたいと思います！

年末まで毎日webサイトを作り続ける大学生 〜10日目 Css Grid Layout, Flex Box, Google Font, jsで名言をランダムに表示してみた〜

はじめに

サイトURL

やったこと

感想

参考・引用

IEでCSSプロパティのinitialとunsetを指定するとスタイルが崩れてしまう時の解決法

解決法

margin/padding/width/heightの場合

line-height/font-weight/font-styleの場合

HTML/CSSの書き方(ちょっとhaml)

いつも参考にさせていただいているサイト

基本

画像の表示

画像を背景表示する

背景画像を透過する（テキストは透過しない）

画像を中央寄せ

リスト（li,ul)

要素の加工

要素を丸くする

HTMLレンダリングエンジン

目次

ブラウザとは

ブラウザコンポーネント

各コンポーネント

ブラウザとサーバーの通信

HTMLレンダリングエンジン

主なHTMLレンダリングエンジン

HTMLレンダリングエンジンの歴史

JavaScriptエンジン

JavaScriptエンジンの種類

日本ブラウザシェア率(2016~)

ご静聴ありがとうございます

web入門（３）

はじめに

フォルダー構成

JavaScript(jQuery)を使う

1. クリックしたら、フェードアウトする

2. ホバーしたら、色が変わる

3. ホバーしたら、色が変わり、離したら色が元に戻る

4. ボタンを押したら、数字が足されていく

5. ドロップダウンメニューの実装

potision:fixed したheaderがページ全体のmin-widthを下回った時にスクロールできなくなってしまう

日付別

タグ一覧

年末まで毎日webサイトを作り続ける大学生〜10日目 Css Grid Layout, Flex Box, Google Font, jsで名言をランダムに表示してみた〜