投稿日：2020-10-23T21:18:12+09:00

【初心者でもわかる】select要素を使わず、divでselectみたいな動きを作る

どうも7noteです。select要素にcssが使いにくいので、他の方法を考えてみました。

select要素にはCSSが調整難しいため、自由に調整できるdiv要素でできる方法を書いていきます。
また、PCとスマホでselect要素風とそうじゃない動きに切り分けるなどが必要な時にも使えると思います。

書き方

※jQueryを使用しています。

index.html

<ul>
  <li class="check" link="no1" style="display: list-item;">その１</li> // linkの値と、pタグのクラスを揃える
  <li link="no2">その２</li>
  <li link="no3">その３</li>
  <li link="no4">その４</li>
  <li link="no5">その５</li>
</ul>

<p class="no1">テキスト１</p>
<p class="no2">テキスト２</p>
<p class="no3">テキスト３</p>
<p class="no4">テキスト４</p>
<p class="no5">テキスト５</p>

style.css

ul {
  width: 200px;                   /* セレクトボックスの横幅 */
  border: solid 1px #333;         /* 見やすく境界線を引く */
  position: absolute;             /* 選択肢が開いた時に高さが変わるので指定 */
  top: 0px;                       /* 好きな位置に */
  left: 0px;                      /* 好きな位置に */
}
ul li {
  padding: 5px 10px 5px 20px;     /* optionの余白と同等 */
  display: none;                  /* 最初は非表示 */
  list-style: none;               /* 「・」を非表示にする */
}
ul li.check {
  color: #fff;                    /* 選択されたもののみ装飾 */
  font-weight: bold;              /* 選択されたもののみ装飾 */
  background: #999;               /* 選択されたもののみ装飾 */
}

p {
  display: none;                  /* 最初は非表示 */
  margin-left: 220px;             /* セレクトボックスとかぶらないように位置調整 */
}

script.js

$(function () {
  var click_flg = true;                   // クリックを許可する変数を設定
  $('.check').show();                     // ページ読み込み時、任意のselect1つだけ表示
  $('.no1').show();                       // ページ読み込み時、任意のテキスト1つだけ表示
  $('ul li').on('click', function(){      // セレクトボックスのどれかがクリックされた時
    if(click_flg){                        // クリックが許可されているかどうか
      click_flg = false;                  // ボタンを一時的に無効
      $('ul li').removeClass('check');    // 全てのliからcheckを削除してから、
      $(this).addClass('check');          // 選択されたものにcheckのクラスを付ける
      $('ul li').not('.check').fadeToggle(400, function() { // check以外の表示と非表示を切り替える
        click_flg = true;                   // コールバック関数を使い、アニメーションが終わってからtrueにするように指定
      });
      $('p').hide();                        // pを全て非表示
      $('.' + $(this).attr('link')).show(); // selectされているlinkと同じクラスをもつpだけ表示
    }
  });
});

解説

各行で行なっている動きはコメントでご確認ください。
大まかな処理の流れとしては、、、

① ページ読み込み時、任意のselectとテキストを表示。
② li要素がクリックされた時、他のliを表示状態に切り換え（fadeToggle）
③ liが全て開いている状態の時、liがクリックされたら、クリックされたものにのみcheckのクラスを付与、かつ他のliを非表示状態に切り換え。
④ また同時に、pを全て非表示にしてクリックされたliのlinkと同じクラスを持つpだけ表示。
⑤ 結果、選択したli要素と、紐づいているp要素のみ表示状態になる。

そして、click_flg変数を設定しておくことで、フェードインアウトの処理中にクリックされても不具合を起こさないように処理をしています。

まとめ

正直な話をするとselectboxを使うほうが早いですし、わりと無理な作りになっていると思うので、

「どうしてもdivでselectのような動きを実装したいんだぁぁぁ」

ってときにだけお使いください。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-23T18:30:32+09:00

『Darkmode.js』『Bootstrap』でお手軽ダークモード

Darkmode.js

『Darkmode.js』でダークモード入れてみました。

Sample

See the Pen vYKgEVE by sarap422 (@sarap422) on CodePen.

head
<head>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<link rel="stylesheet" href="js/darkmode-js/darkmode-js.css">
</head>
/body

<span class="gluttony-Sword-bs badge"><i></i></span>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.3.4/lib/darkmode-js.min.js"></script>
<script src="js/darkmode-js/darkmode-js-function.js"></script>
</body>
darkmode-js-function.js
// option設定
var options = {
// 左端に置く
bottom: '-17px', // default: '32px'
right: 'unset', // default: '32px'
left: '-17px', // default: 'unset'
darkmode-js.css
.gluttony-Sword-bs i:after {
  display: inline-block;
  padding: 0.25em 0.5em;
  font-size: 90%;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.4rem;
  content: "Light";
  color: #212529;
  background: #ffc83d;
}

.darkmode--activated .gluttony-Sword-bs i:after {
  font-weight: normal;
  content: "Dark";
  color: #fff;
  background: #757575;
}
要するに「jQuary」「Bootstrap」「darkmode-js」本体はCDN読み込み、
『darkmode-js-function.js』は、デフォルトだと右下で邪魔だったので
option設定で左下に動かして＜script＞＜/script＞は別で読み込み、

そのままだと意味不明なので、疑似要素で「Light」「Dark」書きましたみたいな
お手軽ダークモードです。

『Bootstrap Icons』さんや『Bootstrap Toggle』さんというのも
CDNで使えるみたいですので、そちらを使えばもう少し見栄えよくなるかもですね。

Bootstrap Icons
https://icons.getbootstrap.com/icons/toggle-on/
Bootstrap Switch Button
https://gitbrent.github.io/bootstrap4-toggle/

参考

Darkmode.Jsを使う - Webクリエイターボックス
https://www.webcreatorbox.com/tech/dark-mode

「prefers-color-scheme」ではないので、
スマホのユーザー設定は反映されなさそうですけど、

「prefers-color-scheme」絡めると今度はページ読み込みのたびに、
『Darkmode.Js』がリセットされそうで、結構大変そうだったので今回はやめました。

CSSのfilterプロパティとJavaScriptで手軽にダークモードに切り替える | Free Style
https://blanche-toile.com/web/css-filter-darkmode

メディアクエリ
@media (prefers-color-scheme: dark) {
:root 
 --dark-setting: darkmode--activated;
}
みたいにしたらいけそうな気もするのですけど、
たぶんこれからは、SCSSの$変数をメインで使いそうな気がしますので
とりあえずはこんな感じなのでした。

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-23T16:48:50+09:00

[HTML&CSS] classとidの違いとは

結論

class

種類別に割り当てる
→同じclass名を1ページ中に何度も使うことができる

id

固有の名前を割り当てる
→同じid名は1ページ中に1度しか使えない。

class属性が対象の種類や部類を表しているのに対して、idは固有の名前を割り当てて限定的に表すために使われます。

使い分け

基本的にはclass属性を使う、必要に応じてid属性を使うというのが良いと思います。しかし、これらを併用する上でのメリット、デメリットがそれぞれ存在します。

メリット

idが使われていれば、それが限定した装飾であることがひと目で分かるため、コードを読み解く際に役に立ちます。

デメリット

idはclassよりも優先される、という規則があり、これらが混在することで優先度の判別が難しくなってしまう場合もあります。

最後に

id属性を使うかどうかの判断は、それを限定する必要があるか、そうしたほうが分かりやすいか、を基準に判断するといいと思います。

最後まで読んでいただきありがとうございます。今後もアウトプットをしていきたいと思っているのでよろしくお願いします！

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-23T15:17:27+09:00

CSS(em,rem,px,%)の指定する単位について

■ はじめに

CSSの指定する単位について記事にしました。
この記事で得る内容は以下の通りです。

・CSSの基礎知識が増える
・CSSのプロパティを適切な単位で指定する事で、アクセシビリティを向上させ、より良いサービスを作ることができる

■ 参考にさせて頂いたサイト
ちゃんと使い分けてる？CSSのpx, em, rem, %, vw単位の違い

■ em,rem,px,%について

■ em

・大文字「M」の高さを基準に1文字分の大きさを示し、親要素のfont-size値を基準に相対的な値とする
・要素が入れ子構造である場合、意図しない異なる大きさになる可能性がある
emで指定した場合
html {
  font-size: 10px;
  body {
    font-size: 1.5em;
    // font-size: 15px;
    div {
      font-size: 1.2em;
    // font-size: 18px;
    }
  }
}
■ rem

・root emの略で、root要素（html要素)のfont-size値を基準に相対的な値とする
・html要素のfont-size値を調整することで、ページ全体のサイズ変更にも対応しやすい
remで指定した場合
html {
  font-size: 10px;
  body {
    font-size: 1.5rem;
    // font-size: 15px;
    div {
      font-size: 1.2rem;
    // font-size: 12px;
    }
  }
}
■ px

・絶対値（他の要素に影響されない）
・グラフィックソフトでWebデザインを制作時、サイズ単位として用いられ、データの整合性を取りやすい
・ユーザー操作による文字サイズの変更に対応できなかったり、環境や端末により文字サイズが異なる場合がある

■ %

・相対値で、プロパティによって何が基準になるか異なる
・vw,vhと比較されますが、vw,vhはスクロールバーの幅が影響するので、全体的なレイアウトには%が良い

■ まとめ

単位プロパティ

px borderなど

% height、widthなど

em font-size、paddingなど

rem emと同じ

pxは、borderやborder-radiusなど見た目が変わらない所に。
%は、大まかなレイアウトやブロック要素に。
他はremを使って、徐々に慣れていけばいいのかなと思いました！

単位	プロパティ
px	borderなど
%	height、widthなど
em	font-size、paddingなど
rem	emと同じ

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-23T12:10:45+09:00

WordPressでオリジナルテーマのサムネイルの設定の方法

WordPressでオリジナルテーマを作成した際に、特に何も設定をしないとこのような状態になっています。

自分で使う分にはこれではいいかもしれませんが、お客さんに納品する際にこれではカッコ悪いなぁって思ったので、サムネイルの設定について調べました。

サムネイル用の画像を準備する

まずはサムネイルに表示する画像をアップします。
それっぽくみえるものでよいと思います。

今回はこちらの画像を準備しました。

縦横比3:4に調整する

サムネイルの縦横比が3：４なので、切り取りしていきます。
これは自分の使いやすいアプリやソフトを使えばよいかと思います。

サイズは縦450 横600　と指定しました。

わたしは、Figmaで行いました。

画像の名前を変更する。

screenshot.jpgに名前を変更してください。
形式はpngでも問題ありません。

画像をテーマフォルダーにアップロードする

あとは、ダウンロードするだけですね。

アップロードする箇所は、テーマフォルダ内の同じ階層で大丈夫です。
（index.phpやheader.phpと同じ階層）

まとめ

このように無事に変更することができました。
ちょっと手を加えてあげることで納品時のクオリティがあがるので、是非やってみてください。

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-23T06:43:17+09:00

リンク先が正しく反映されない理由【解決事例あり】

みなさん、こんにちは。

未経験からWebエンジニア転職を目指して独学中の体育教師しろと申します。

今回は、ネット上に公開された、サイトのリンク先が正しく反映されない理由について記事にしました。
実際に、リンク先が反映されなかった私の事例を元に説明していきます。

私のサイトは最初このような状態でした。

【問題2】

ページ遷移後、トップページに戻ったら
「そのページは存在しません」と表示される。 pic.twitter.com/twM47CHpqN
— しろ＠体育教師のエンジニア転職 (@next_shiro) October 22, 2020

”トップページに戻る”ボタンを押してもページが見つからない状態。

コードはこちら。

問題点は見つかりましたか？

問題点はこちら。

とリンクを設定していました。

答えをいうと、このコードを

にすると解決しました。

問題解決しました！

詳しい解決方法はQiitaで解説します！ pic.twitter.com/236RtChewT
— しろ＠体育教師のエンジニア転職 (@next_shiro) October 22, 2020

今回は何が問題かというと、リンク先の住所が指定されていないから、コンピューターが見つけられなかったのです。
”index.html”だけだと　「江名子町にあります」だけだと「江名子町ってどこ！見つけられないよ！」となります。
これを”https://daikishirakawa.github.io/index.html”としてあげると　「群馬県/高山市/江名子町にあります」と指定しているので、「江名子町は群馬県の高山市にあるのね！」とコンピューターが見つけることができます。

つまり、

①”https://daikishirakawa.github.io”というサイトの中の、
②”index.html”というファイルとリンクさせてください

とコンピューターにファイルの住所を一緒に教えてあげることで、リンク先にコンピューターがたどり着くことができます。

　 Tweet
Qiitaで続きを読む

20201023のCSSに関する記事は6件です。

【初心者でもわかる】select要素を使わず、divでselectみたいな動きを作る

どうも7noteです。select要素にcssが使いにくいので、他の方法を考えてみました。

書き方

解説

まとめ

おそまつ！

『Darkmode.js』『Bootstrap』でお手軽ダークモード

Darkmode.js

Sample

head

/body

darkmode-js-function.js

darkmode-js.css

参考

メディアクエリ

[HTML&CSS] classとidの違いとは

結論

class

id

使い分け

メリット

デメリット

最後に

CSS(em,rem,px,%)の指定する単位について

■ はじめに

■ em,rem,px,%について

■ em

■ rem

■ px

■ %

■ まとめ

WordPressでオリジナルテーマのサムネイル の設定の方法

サムネイル用の画像を準備する

縦横比3:4に調整する

画像の名前を変更する。

画像をテーマフォルダーにアップロードする

まとめ

リンク先が正しく反映されない理由【解決事例あり】

日付別

タグ一覧

WordPressでオリジナルテーマのサムネイルの設定の方法