kaibukuroのブログ

HTML/CSS/JavaScript/PHPなどのアウトプット

【フロントエンド】役に立ったページ

JavaScript CSS

ボタンのCSSジェネレーター

ちなみに、作者はにわまんさんのサイトでも、WordPressの記事などでいつも勉強させてもらってます。🙇‍♂️
haniwaman.com


CSSのボタンhoverアニメーション

・hoverの動きは、色変え以外のパターンとかだと結構難しいので、かなり役に立ちました。

design.aekana.com


VSCodeの便利機能

・スペース自動削除、タグ補完が特に便利でした。

coliss.com


CSSのmin, max, clamp について

・わかりやすいです。IE11無視できるなら使っていきたいです。

youtu.be


JavaScriptでのメディアクエリ

coliss.com

JavaScript勉強メモ1

JavaScript

・要素があるかどうか判別したい場合の記述

//querySelectorやgetElementByIdなどの単一要素を取得するメソッドを使った場合
const elem = document.querySelector('.elem');
if(elem !== null){
  /* elemがあれば */
}

//querySelectorAll や getElementsByClassNameなどの複数要素を取得するメソッドを使った場合
if(elem.length > 0){
  /* elemがあれば */
}

【参考にさせていただいたサイト】
こちらのページは、JSの記述について他にもわかりやすくまとめられていてとても良いです。

wemo.tech

・querySelectorAll()で取得した要素をeachで出力する記述


const links = document.querySelectorAll('a');
links.forEach(link => {
  console.log(link.href);
});


確かにこの書き方がわかりやすいのですが、IE11は非対応らしいです。

【参考にさせていただいたサイト】
thr3a.hatenablog.com

【JavaScript】【Chrome】Developer toolsでJavaScriptの動きを止める方法

JavaScript

使い所

カーソルホバーで開く「プルダウン（ドロップダウン）メニュー」や、自動スクロールしている「スライダー」など、
イベントや動きの設定されている要素のスクリプトを一旦止めて、要素に設定されているスタイルを変更したい時など。

方法

①Devloper Toolsを開く。
②Sources パネルを開いてる状態で、F8を押すと、「paused in debugger」と出て一時的に止められる。
（プルダウンメニューなど、要素へのマウスオーバーで中身が開く場合、マウスを被せた状態でF8を押すことで、開いた状態で止められる）

f:id:kaibukuro:20200906191025p:plain
実際の例

簡単なのですが、地味に便利で役に立ちますね。

【JavaScript】のタイマー機能 setTimeout()、setInterval()

JavaScript

Webページで使っているJSでは、出てくることも多いので、改めて調べてまとめました。

setTimeout()

・引数に指定した待ち時間の経過後に、関数を1度だけ実行させます。
・処理を遅延させたい時、例えばコンテンツの非表示を遅らせる時などに使います。
・clearTimeout(timerId) を使って止めることが可能です。

構文は以下です。

setTimeout(関数, 待ち時間);

・第1引数には時間経過後に実行される処理（関数）を、第2引数には待ち時間をミリ秒で指定。

使用例

<h1 id="text">そうはならんやろ</h1>

function change() {
    const target = document.getElementById('text');
    target.innerHTML = 'なっとるやろがい！';
}

setTimeout(change, 3000);

結果：3秒後にH1のテキスト内容が変わります。

<h1 id="text">'なっとるやろがい！</h1>


    setInterval()

    ・引数に指定した待ち時間ごとに、関数を実行させます。
    ・止める記述が無い限り、時間ごとに延々と繰り返されます。
    ・clearInterval(timerId) を使って止めることが可能です。

    構文は以下です。

    setInterval(関数, 待ち時間);

    引数

    ・第1引数には時間経過後に実行される処理（関数）を、第2引数には待ち時間をミリ秒で指定。（全てsetTimeoutと同じ指定）。

    使用例

    <h1 id="text">そうはならんやろ</h1>

    function change() {
    console.log('なっとるやろがい！');
}

setInterval(change, 3000);

    結果：3秒ごとにコンソールにテキストが出力され続けます。






    ・参考にさせていただいた記事
    developer.mozilla.org
    qiita.com

    【JavaScript】HTML文字列を挿入・置き換えをする方法

    JavaScript

    【HTML文字列の挿入】：

    insertAdjacentHTML

    insertAdjacentHTMLは、第二引数で指定するテキストをHTMLとして、指定された位置（第一引数で指定）に挿入します。

    構文は以下です。

    .insertAdjacentHTML(position, text);　

    ・第二引数で指定するテキストを HTMLとして、第一引数に指定した位置に挿入。
    ・adjacentの読みは、「アジェイスン」みたいに言うようです。

    第一引数に入れるもの

    ‘beforebegin‘ elementの直前に挿入
    ‘‘afterbegin‘ element 内部の、最初の子要素の前に挿入
    ‘beforeend‘ element 内部の、最後の子要素の後に挿入
    ‘afterend‘ element の直後に挿入

    使用例

    <div id="box">
    <h1>Title</h1>
</div>

    const box = document.getElementById('box');
box.insertAdjacentHTML('beforeend', '<p>挿入てきすと</p>');

    結果：

    <div id="box">
    <h1>Title</h1>
    <p>挿入てきすと</p>
</div>



    【HTML要素の置き換えには】：

    innerHTML

    innerHTMLは、要素の内容を指定した文字列で置き換える。


    構文は以下です。

    innerHTML='';

    ・文字通り”置き換え”するので、子要素がある場合も全て消しさってから追加されるイメージです。
    ・''; の値を空にすると、対象の中身を空にします。（便利です）。

    使用例

    <h1 id="title">タイトル</h1>

    const target= document.getElementById('title');
target.innerHTML ='置き換えテキスト';

    結果：

    <h1 id="title">置き換えテキスト</h1>



    備考

    ・insertAdjacentHTMLは、innerHTMLよりも処理が速いようです。
    ・innerHTMLと似たプロパティとして、textContent()が、ありますが、こちらはHTMLとして解釈せず、「文字列」として解釈します。

    ・参考にさせていただいた記事
    developer.mozilla.org
    developer.mozilla.org

    qiita.com
    syncer.jp

    【JavaScript】ブラウザで要素に設定されたイベントを調べる方法

    JavaScript

    ブラウザで、要素に設定されたイベントを調べる方法を備忘録として書いておきます。

    【Chrome例】

    ①developerツールにて、タグを選択する。
    ②Event Listenersタブをクリック。
    ③clickイベントがあればclickなどと表示されており、▼を押してさらに下を見ると、
    この場合だとbuttonタグに対して、青い文字のファイルから関数などが設定されているようなので、
    青い文字のリンクをクリックすると、その記述のソースへ飛べます。
    ※補足として、左下の{}をクリックすると、フォーマットされるので、圧縮されている場合などに有用です。

    f:id:kaibukuro:20200726173204p:plain
    　　　　　　　　　　　　　　　　　　↓
    f:id:kaibukuro:20200726173911p:plain


    【Firefox例】

    ①developerツールにて、タグの右端にあるグレー背景の「ev」（あるいはMacだと？「event」を選択する。
    ②clickなどのイベント名をクリックすると、その場で小さいウィンドウでソースが表示されます。

    見るだけならシンプルでわかりやすいですね。
    あと日本語なのでわかりやすいですね。

    f:id:kaibukuro:20200726174448p:plain



    画像に使用したソース：
    Element: click イベント - Web API | MDN

    【CSS】よく使うFlexboxでのレイアウト

    CSS

    ・コーポレートサイトなどでよくある、headerで、ロゴ要素だけ左端に置いて、他の要素は右端に並べるレイアウト。

    （こういうレイアウト）
    ──────────────────────────────
    ロゴ　　　会社概要　アクセス　お問い合わせ
    ──────────────────────────────

    ul {
  display: flex;
}

li.logo {
  margin-right: auto;
}

    ・親にdisplay:flex;を指定。
    ・左端要素（ロゴ）に、margin-right:auto; を指定することで、右3つの要素との間のスペースをきっちり埋めてくれます。

    ・また以下のようなサイドバーがあるサイトのレイアウトでも、

    ──<aside>─|───────<main>───────
😐       ｜                  ｜
😐       ｜                  ｜
😐       ｜                  ｜
          ｜                  ｜
😈       ｜                  ｜
───────────────────────────────

    最後の要素（😈）だけ一番下に設置したい時に、この要素にmargin-top: auto;をすれば同じように上に埋めてくれます。


    flexbox結構長いこと使ってた割にこの手法は最近知りましたが…、このflexとmargin: auto;の組み合わせは強力ですね。
    プロパティの記述がシンプルで、かつレスポンシブレイアウトで作る時も扱いやすいのが良いですね。


    書いておきながら何ですが、こちらの記事がとても分かりやすいです。
    coliss.com


    また、同じ横並びなどGridレイアウトも、IE11を無視できる事が増えてきそうなので、積極的に使っていきたいです。