html/css - わぷ道 https://wapu-dou.com 主にWordPressで日々詰まったことなど、解決した際の備忘録として残していきたいと思い、作成しました。 そのほかにも、役立つ情報なんかを書いていければと思います。 Thu, 27 Oct 2022 10:31:45 +0000 ja hourly 1 https://wordpress.org/?v=6.8.2 wrapを使って指定した要素をタグで囲む方法 https://wapu-dou.com/post/396/ https://wapu-dou.com/post/396/#comments Thu, 27 Oct 2022 10:29:32 +0000 https://wapu-dou.com/?p=396 jQueryで要素を囲む方法を調べた際に出てくるのが「wrap」、「wrapInner」、「wrapAll」です。 今回はこの3種類のメソッドの使い方と、ちょっとした応用を１つ紹介します。 wrapについて wrapを使うと指定したHTML…

The post wrapを使って指定した要素をタグで囲む方法 first appeared on わぷ道.

]]> jQueryで要素を囲む方法を調べた際に出てくるのが「wrap」、「wrapInner」、「wrapAll」です。
今回はこの3種類のメソッドの使い方と、ちょっとした応用を１つ紹介します。

wrapについて

wrapを使うと指定したHTML要素で、対象の要素を１つずつ囲むことができます。

<p>ダミーテキスト１</p>
<p>ダミーテキスト２</p>
<p>ダミーテキスト３</p>

上記のようなHTMLに対して下記のように指定すると 

$('p').wrap('<div></div>');

このような形に１つずつ囲む事が出来ます。

<div><p>ダミーテキスト１</p></div>
<div><p>ダミーテキスト２</p></div>
<div><p>ダミーテキスト３</p></div>

wrapInnerについて

wrapInnerを使うと対象の要素の中身を丸ごと囲む事が出来ます。

<p>ダミーテキスト１</p>
<p>ダミーテキスト２</p>
<p>ダミーテキスト３</p>

wrapInnerの場合は対象の中身をまとめて囲うためこのようになります。

$('p').wrapInner('<span></span>');
<p><span>ダミーテキスト１</span></p>
<p><span>ダミーテキスト２</span></p>
<p><span>ダミーテキスト３</span></p>

wrapAllについて

wrapAllを使うと対象に当てはまる要素を全て１つにまとめて囲むことができます。

<div class="textbox">
    <p>ダミーテキスト１</p>
    <p>ダミーテキスト２</p>
    <p>ダミーテキスト３</p>
</div>

上記のようなHTML構造の際に、wrapAllを使うとこのようになります。

$('.textbox p').wrapAll('<div class="inner"></div>');
<div class="textbox">
    <div class="inner">
        <p>ダミーテキスト１</p>
        <p>ダミーテキスト２</p>
        <p>ダミーテキスト３</p>
    </div>
</div>

wrapAllの注意点

<div class="textbox">
    <p>ダミーテキスト１</p>
    <p>ダミーテキスト２</p>
    <p>ダミーテキスト３</p>
</div>
<div class="textbox">
    <p>ダミーテキスト４</p>
</div>

上記のように、複数の同じ要素がある際にそのまま同じ処理を行うと、１つ目の要素の方に引っ張られ下記のような形になってしまいます。

<div class="textbox">
    <div class="inner">
        <p>ダミーテキスト１</p>
        <p>ダミーテキスト２</p>
        <p>ダミーテキスト３</p>
        <p>ダミーテキスト４</p>
    </div>
</div>

<div class="textbox">
</div>

今回やりたかった事

<ul class="list">
    <li>
        <div>除外したい</div>
        <p>ダミーテキスト１</p>
        <p>ダミーテキスト２</p>
        <p>ダミーテキスト３</p>
        <div>除外したい</div>
    </li>
    <li>
        <div>除外したい</div>
        <p>ダミーテキスト４</p>
        <p>ダミーテキスト５</p>
        <p>ダミーテキスト６</p>
        <div>除外したい</div>
    </li>
</ul>

上記のような時に、liの中のpタグのみをその場で別のタグで囲みたかったのですが、ここまでで説明した「wrap」、「wrapInner」、「wrapAll」をそのまま使うだけでは上手く対応出来なかったので下記のように対応した結果、目的の形に整形する事が出来ました。

var count = $('.list li').length;
for(let i = 0; i < count; i++){
    $('.list li').eq(i).children('*:not( div )').wrapAll('<div class="inner"></div>');
}

<ul class="list">
    <li>
        <div>除外したい</div>
        <div class="inner">
            <p>ダミーテキスト１</p>
            <p>ダミーテキスト２</p>
            <p>ダミーテキスト３</p>
        </div>
        <div>除外したい</div>
    </li>
    <li>
        <div>除外したい</div>
        <div class="inner">
            <p>ダミーテキスト４</p>
            <p>ダミーテキスト５</p>
            <p>ダミーテキスト６</p>
        </div>
        <div>除外したい</div>
    </li>
</ul>

The post wrapを使って指定した要素をタグで囲む方法 first appeared on わぷ道.

]]> https://wapu-dou.com/post/396/feed/ 1 content内のテキストを改行させる方法 https://wapu-dou.com/post/363/ https://wapu-dou.com/post/363/#comments Tue, 04 Oct 2022 05:46:09 +0000 https://wapu-dou.com/?p=363 前書き before,after等の疑似要素なんかでよく使う「content」のCSS、よく使うのは、liタグやaタグの前後とかにアイコンを追加したりなどで使いますね。 以前にHTML側の更新が難しいと言われ、CSSのみで本文をいじった際に…

The post content内のテキストを改行させる方法 first appeared on わぷ道.

]]> 前書き

before,after等の疑似要素なんかでよく使う「content」のCSS、よく使うのは、liタグやaタグの前後とかにアイコンを追加したりなどで使いますね。
以前にHTML側の更新が難しいと言われ、CSSのみで本文をいじった際に、「content」内にちょっとしたテキストを追加したのですが、これって改行どうやるんだっけ。となって調べた事があったのでまとめておきます。

コード


  white-space: pre-wrap;
  content: 'ここで\A改行がしたい';

必要なのは上記の２つです。
「white-space:pre-wrap;」を指定する事で、「content」内で改行が出来るようになり、実際の「content」のテキストの中で「\A」を記入する事で改行が出来ます。

「white-space:pre;」でも「\A」の改行コードを効くように出来ますが、その場合自動での折り返しがなくなるため、長い文を書くとその分はみ出す形になってしまいます。

The post content内のテキストを改行させる方法 first appeared on わぷ道.

]]> https://wapu-dou.com/post/363/feed/ 1 【ESCキーで閉じる】モーダルウィンドウの実装方法 https://wapu-dou.com/post/145/ https://wapu-dou.com/post/145/#comments Sun, 14 Aug 2022 03:53:24 +0000 https://wapu-dou.com/?p=145 モーダルウインドウの実装方法 HTML、CSS部分の作成 まずは、モーダルウィンドウを開くためのボタン、モーダルウィンドウ本体、オーバーレイ部分のパーツをそれぞれ作成していきます。 <body> <div class=&q…

The post 【ESCキーで閉じる】モーダルウィンドウの実装方法 first appeared on わぷ道.

]]> モーダルウインドウの実装方法

HTML、CSS部分の作成

まずは、モーダルウィンドウを開くためのボタン、モーダルウィンドウ本体、オーバーレイ部分のパーツをそれぞれ作成していきます。

<body>
    <div class="modal_open_btn">開く</div>
    <div class="modal_window">
        <p>モーダルウィンドウの中身です</p>
        <span class="modal_close">×</span>
    </div>
    <div class="modal_overlay"></div>
</body>

js部分の作成

ここからはjs部分の作成になります。
こちらはjQueryを利用しているのであらかじめjQueryを読み込んでることを確認してください。

js部分1

モーダルウィンドウの表示と、bodyに対してoverflow:hiddenをかける事でモーダルウィンドウを開いている際に、スクロール出来ないように指定します。

$('.modal_open_btn').click(function () {
      $('body').addClass('scroll_lock'); 
        $('.modal_overlay').fadeIn();
        $('.modal_window').fadeIn();        
});

js部分2

閉じるボタン、オーバーレイ部分をクリックした際に、モーダルウィンドウの非表示と、先ほど指定したスクロールの固定を解除します。

$('.modal_close , .modal_overlay').click(function () {
      $('body').removeClass('scroll_lock'); 
      $('.modal_overlay').fadeOut();
      $('.modal_window').fadeOut();
});

js部分3

ESCキーを押した時に、閉じるボタンを押した時と同様の動作をするように指定しています。

window.onkeyup = function(event){
    if(event.keyCode == '27'){
        $('body').removeClass('scroll_lock'); 
        $('.modal_overlay').fadeOut();
        $('.modal_window').fadeOut();
    }
}
わぷまる
「keyCode == '27'」の部分で、ESCキーを指定しているので、ここの数字を変更する事で他のキーを指定することも出来るよ

参考にしたサイト

https://web-designer.cman.jp/javascript_ref/keyboard/keycode/

全部まとめたのがこちら

$(function () {
    $('.modal_open_btn').click(function () {
        $('body').addClass('scroll_lock'); 
        $('.modal_overlay').fadeIn();
        $('.modal_window').fadeIn(); 
        
    });
    $('.modal_close , .modal_overlay').click(function () {
        $('body').removeClass('scroll_lock'); 
        $('.modal_overlay').fadeOut();
        $('.modal_window').fadeOut();
    });
    window.onkeyup = function(event){
        if(event.keyCode == '27'){
            $('body').removeClass('scroll_lock'); 
            $('.modal_overlay').fadeOut();
            $('.modal_window').fadeOut();
        }
    }
});

WordPressで上手く動かない場合、「$」を全部「jQuery」に置換する事で正常に動作する場合があります。

The post 【ESCキーで閉じる】モーダルウィンドウの実装方法 first appeared on わぷ道.

]]> https://wapu-dou.com/post/145/feed/ 2