読者です 読者をやめる 読者になる 読者になる

frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

擬似要素:hoverはないがhover:擬似要素はある

::beforeの:hoverはないが:hoverの::beforeはあります。
同じように::afterの:hoverはないが:hoverの::afterはあります。

下記に例を示します。

リンクにマウスオーバーした際、カラーを変更するデザインがあったとします。
それはa:hoverで色を変えればよいですが、矢印アイコンも変えなければいけないとき、擬似要素であるアイコンにhover効果を充てます。

:hover+::after

See the Pen evaXLg by funclur (@funclur) on CodePen.


a {
	color: blue;
	position: relative;
}
a::hover {
	color: red;
}
a::after {
    position: absolute;
    top: 5px;
    right: -10px;
    left: auto;
    display: block;
    width: 4px;
    height: 4px;
    border-top: 2px solid blue;
    border-right: 2px solid blue;
    content: "";
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);

}
a:hover::after {
    border-top: 2px solid red;
    border-right: 2px solid red;
}

:first-child+::before

これはやったことありませんでしたが実験的にやってみたらやはりできるようです。
最初の要素の擬似要素を指定します。

See the Pen aJrMaL by funclur (@funclur) on CodePen.


ul li {
	margin-top: 5px;
	position: relative;
	padding-left: 21px;
	list-style-type: none;
}
ul li::before {
	position: absolute;
	top: 7px;
	content: "";
	background: #000;
	border-radius: 50%;
	width: 3px;
	height: 3px;
	left: 7px;
}
ul li:first-child::before {
	background: red;
}

擬似クラスと擬似要素の違い

他人様のサイトからお借りします。
https://wp.yat-net.com/?p=4505

擬似クラス
:link
:visited
:active
:hover
:focus
:lang
:target
:root
:nth-child
:nth-last-child
:nth-of-type
:nth-last-of-type
:first-child
:last-child
:first-of-type
:last-of-type
:only-child
:only-of-type
:empty
:not
:enabled
:checked
擬似要素
::before
::after
::first-letter
::first-line
::selection

:hover::after::after:hoverで結構迷うことが多かったのですが、
こうしてみるとcss記述順序としては、
要素+擬似クラス+擬似要素と覚えると良さそうです。
コロンのつく数が増えていくと覚えてもいいですね笑

thunderbirdでメールが送信できない 2017

thunderbirdでメールが送信できない現象が起きました。

https://support.mozilla.org/t5/Basics/Thunderbird-%E3%81%AE%E6%9B%B4%E6%96%B0/ta-p/19555

現象が起こる前にアップデートしたため、もしかしたらと思いましたが
やはり原因はそれだったようです。

augustdesign.info


こちらの記事の通り

Check and Sendを削除したところ送信ができるようになりました。

thunderbirdを開いてツール→アドオン→拡張機能→Check and Send削除(無効化では改善されませんでした)


ただCheck and Sendを削除してしまうと、送信した後に本当に送信していいですか?
という確認のアラートがなくなってしまいます。

この確認に助けられたことが何度かあるので、使えないことは残念ですがしばらくこのまま様子を見ようと思います。

【JavaScript】配列のアルファベットや数値を昇順・降順にソートする 

アルファベット順にソートする

アルファベット順にソートするのは簡単です。
配列にsortメソッドを使用します。

var x = ['tokyo', 'osaka', 'sendai', 'fukuoka'];
x.sort();
console.log(x);

See the Pen yMwWVd by funclur (@funclur) on CodePen.


数値順にソートする

sortメソッドでソートできるのは、アルファベット、ひらがな、カタカナ、数値です。コンピューターは漢字の読み方がわからないので、漢字はソートできないのです。
漢字をソートする場合読み方もデータが必要になります。

また数値も2ケタ、3ケタで評価されません。例えば

var x = [3, 153, 45, 7];
をソートした場合、
[153, 3, 45, 7]となります。

これは先頭文字を比較し、先頭文字が同一であれば2文字目で比較するという処理の特性です。

2ケタ以上の場合

2ケタ以上の場合どうするかですが、sortメソッドにコールバック関数を与えます。

See the Pen oZVRPo by funclur (@funclur) on CodePen.

aとbを比較しbが大きければ-1、aが大きければ1を、同じ値であれば0を返します。

降順

降順は返す値(1, -1)を逆にすれば、結果が得られます。

reverseメソッド

配列の順番を逆にするメソッドが.reverse()です。
配列.reverse()で配列順序が逆になるので便利ですね。

【JavaScript】配列に要素を追加する push unshift splice

push、unshift、spliceは配列に要素を追加するメソッドです。

push

pushは配列の最後尾に追加します。
配列.push('値');

unshift

unshiftは配列の先頭に追加します。
配列.unshift('値');

splice

spliceは配列内の任意の位置に要素を追加したり、任意の位置の要素を削除することができます。
配列.splice('スタート位置','削除する個数','追加するデータ','追加するデータ',...);
カンマでつなげればいくつでも要素を追加できます。

実装例

html

<form name="fn_a" id="fi_a" method="GET">
<input type="button" value="押すと配列から読み込み">
  <textarea name="tan_a" id="tai_a" rows="5" cols="30"></textarea>
</form>

javascript

var x = new Array();
x = ['tokyo', 'sendai', 'osaka'];

x.push('fukuoka');// 配列の最後尾に追加
x.unshift('kanagawa');// 配列の先頭に追加
x.splice(2,0,'tokyo');// 2番目の要素(安藤)後ろに追加
function foo(){
 x.forEach(bar);
}
function bar(v, i, arr){
document.forms[0].elements[1].value += 'インデックス' + i + '番の値は' + v + '\n';
}
var btn = document.querySelector('input');
btn.onclick = function(){
  foo();
}

See the Pen dvrGEv by funclur (@funclur) on CodePen.

【javascript】forEachで配列を取得する

forループよりも簡単に配列のデータを取得するのがforEachです。
下記のように使用します。

<form name="fn_a" id="fi_a" method="GET">
<input type="button" value="押すと配列から読み込み">
	<textarea name="tan_a" id="tai_a" rows="5" cols="30"></textarea>
</form>
var x = Array();
x = ["tokyo","sendai","osaka"];
function foo(){
x.forEach(bar);
}
function bar(val, i, arr){
document.forms[0].elements[1].value += "インデックス" + i + "番の値は" + val + '\n';
}
var btn = document.querySelector('input');
btn.onclick = function(){
	foo();
}

x.forEach(bar)ですがbar()としてしまいそうですが、コールバック関数の為()をつけずに関数名だけにします。

3つの引数は、下記の値が入っています。

  • 第1引数 「tokyo」「sendai」「osaka」
  • 第2引数 添え字「0~2」
  • 第3引数 配列の全要素["tokyo","sendai","osaka"]

添え字を使わずに値が取得できるのは便利であり、慣れないと違和感がありますがforEach覚えといて損はなさそうです。

prepend、appendなどJQueryで要素を追加するメソッドまとめ

JQueryで要素を追加する方法は沢山あります。
prepend、append、after、beforeは前後に追加する方法です。
.part1と.part2は結果は同じです。

.part1は$(A).メソッド(B)でAにBを入れる。
.part2は$(A).メソッド(B)でBにAを入れる。

という風にAとBが入れ替わるだけです。
個人的には.part1の方が覚えやすいかなと思いますが、他人のコードを読まなければいけないこともあるので.part2も覚えといて損はないです。

$(".part1").prepend("<b>prepend</b>");
$(".part1").append("<b>append</b>");
$(".part1").after("<b>after</b>");
$(".part1").before("<b>before</b>");

$("<b>prependTo</b>").prependTo(".part2");
$("<b>appendTo</b>").appendTo(".part2");
$("<b>insertBefore</b>").insertBefore(".part2");
$("<b>insertAfter</b>").insertAfter(".part2");

See the Pen vxQPVy by funclur (@funclur) on CodePen.

bodyに充てるべきcss2017

bodyに充てるべきcssサイト全体を左右するのでとても重要です。

自分が充てているcssは以下です。
(あくまでも一例)

body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    font-family: "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    color: #333;
    line-height: 1.6;
    background-color: #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 320px;
}

margin: 0;padding: 0;

余白を消すための指定です。

font-size: 16px;

ベースとなるフォントサイズです。
人によってはemやremを使用します。

-webkit-text-size-adjust: 100%;

スマホを横向き(ランドスケープ)にした場合、文字が拡大されるのを防ぎます。

font-family

ゴシック指定のsans-serifを指定するのを忘れないようにします。詳細は下記の記事がわかりやすいです。

CSSのfont-family指定に関する考察 2014年版 | セブンシックス

color:#333;

ベースの文字色を指定します。

line-height: 1.6;

ベースの行間を指定します。

相対的な指定になるように単位はつけません。

background-color: #fff;

ベースとなる背景色を指定します。

word-wrap: break-word;overflow-wrap: break-word;

urlなどの英数値の羅列が折り返すようにします。
こちらを指定しないと幅を越してしまいます。

またリンク、リスト、テーブルなどのモジュールにword-break: break-all;を指定します。
なぜならdisplay:table、display:table-cellを指定した場合word-break: break-all;を付け加えないと
こちらも折り返さないからです。

詳細は下記の記事がわかりやすいです。
word-breakとword-wrapはややこしい

min-width: 320px;

こちらはリテラシーの低めのお客さん対策です笑

何度かブラウザを320px未満に幅を狭められ、崩れたと指摘されるため
bodyにmin-width: 320px;を指定すればその指摘は皆無です。

もちろんスマホの幅は最少320pxなので320px未満の崩れを修正する必要はありません。