【js】for で繰り返し(ループ)させる

とりあえず、配列をループ

js
1
2
3
4
5
6
7
8
9
10
var list_array = ['A','B','C','D'];
for ( var i = 0; i < list_array.length; i++ ) { // ( 初期値; 条件式(今回は配列の数だけ); 増減値)
  var result =  list_array[i] + " は " + ( i+1 );
  console.log( result );
}
//以下の結果になります
// A は 1
// B は 2
// C は 3
// D は 4

ループ終了後に変数「i」は最後のが残ります。

js
1
2
3
4
5
6
7
8
9
10
11
12
for ( var i = 0; i < 3; i++ ) { // ( 初期値; 条件式(3より低い場合); 増減値)
  console.log( i + " だよ！" );
}
console.log( "for分終了" );
console.log( "変数には最後の " + i + " が残るよ！" );
 
//以下の結果になります
// 0 だよ！
// 1 だよ！
// 2 だよ！
// for分終了
// 変数には最後の 3 が残るよ！

2回目のfor文に let を使うと1回目の var の方が残るよ！

js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
for ( var i = 0; i < 5; i++ ) {
  console.log( i + " だよ！" );
}
console.log( "var for文終了" );
 
for ( let i = 0; i < 2; i++ ) { // 前回書いたけどletはブロック内限定
  console.log( i + " だよ！" );
}
console.log( "let for文終了" );
console.log( "変数には var for文の最後の " + i + " が残るよ！" );
 
結果以下になります
// 0 だよ！
// 1 だよ！
// 2 だよ！
// 3 だよ！
// 4 だよ！
// var for文終了
// 0 だよ！
// 1 だよ！
// let for文終了
// 変数には var for文の最後の 5 が残るよ！

let はボックス内、var は関数内なので、varが優先される
あたりまえだけど、両方letの場合は最後のletの変数が残るよ！

【js】var と let 違い

let はブロック内限定で var は関数内

js
1
2
3
4
5
6
7
8
9
10
11
12
13
function test() {
  let sample = "A";
  console.log("【" + sample + "】だよ");
  {
    let sample = "B";
    console.log("【" + sample + "】だよ");
  }
  console.log("【" + sample + "】だよ");
}
test()
// 【A】だよ
// 【B】だよ
// 【A】だよ

js
1
2
3
4
5
6
7
8
9
10
11
12
13
function test() {
  var sample = "A";
  console.log("【" + sample + "】だよ");
  {
    var sample = "B";
    console.log("【" + sample + "】だよ");
  }
  console.log("【" + sample + "】だよ");
}
test()
// 【A】だよ
// 【B】だよ
// 【B】だよ

【CSS】アニメーション animation

とりあえず、簡単なのを作ってみよう。

html
1
2
3
4
<div class="animation-test">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.animation-test{
position:relative;
width: 100%;
height: 300px;
}
.box1{
animation: ani1 5s ease 1s infinite alternate;
-moz-animation: ani1 5s ease 1s infinite alternate;
-webkit-animation: ani1 5s ease 1s infinite alternate;
-o-animation: ani1 5s ease 1s infinite alternate;
-ms-animation: ani1 5s ease 1s infinite alternate;
}
.box2{
position:absolute;
border-radius:30px;
width: 30px;
height: 30px;
top:50px;
animation: ani2 3s ease 1s infinite alternate;
-moz-animation: ani2 3s ease 1s infinite alternate;
-webkit-animation: ani2 3s ease 1s infinite alternate;
-o-animation: ani2 3s ease 1s infinite alternate;
-ms-animation: ani2 3s ease 1s infinite alternate;
}
@keyframes ani1 {
0% {width: 50px; height: 50px; background: #000;}
100% {width: 150px; height: 150px; background: #ccc;}
}
@keyframes ani2 {
0% {left:300px; background: #000;}
100% {left:150px; background: #f00;}
}

【CSS】文字を縦書きにする

文字の縦書き

html
1
2
3
4
<div class="writing-mode">
   <h1>タイトル</h1>
   <p>テキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</p>
</div>

1
2
3
4
5
6
7
8
9
10
.writing-mode{
  max-height:320px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  border:1px solid #ccc;
  padding:10px;
}

タイトル

テキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

【CSS】リストなどのアイコンには:before :after

リストだったり、文章のはじめなどにアイコンをつけるのに便利

html
1
2
3
4
5
6
  <ul class="testlist">
    <li class="list-1">テキストテキスト</li>
    <li class="list-2">テキストテキスト</li>
    <li class="list-3">テキストテキスト</li>
    <li class="list-4">テキストテキスト</li>
  <ul>

css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
ul.testlist li{
  list-style:none;
  position:relative;
  padding:0 0 0 25px;
}
ul.testlist li:before{
  content:"";
  width: 20px;
  height: 20px;
  position:absolute;
  top: 50%;
  left: 0;
  margin-top: -10px;
  display: inline-block;
  background-image: url(http://ko-om.com/wp-content/uploads/2018/11/icon.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
}
ul.testlist li:after{
  display:inline-block;
  color:#ccc;
}
ul.testlist li.list-1:after{
  content:">>";
}
ul.testlist li.list-2:after{
  content:"→";
}
ul.testlist li.list-3:after{
  content:"・・・";
}
ul.testlist li.list-4:after{
  content:"♪";
}

  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト

使い方はアイデアしだいで色々できる！

【CSS】スマホのタッチスライドをCSSだけで作る overflow-scrolling

こんな感じのhtmlとcss

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="sliderBox">
  <div class="slider">
    <div class="innerBox">
      <img src="img_sample.jpg" alt="" />
      <p>テキストテキスト</p>
    </div>
    <div class="innerBox">
      <img src="img_sample.jpg" alt="" />
      <p>テキストテキスト</p>
    </div>
    <div class="innerBox">
      <img src="img_sample.jpg" alt="" />
      <p>テキストテキスト</p>
    </div>
    <div class="innerBox">
      <img src="img_sample.jpg" alt="" />
      <p>テキストテキスト</p>
    </div>
    <div class="innerBox">
      <img src="img_sample.jpg" alt="" />
      <p>テキストテキスト</p>
    </div>
  </div>
</div>

以下のようになります。とってもシンプル！

css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.sliderBox {
  width: 100%;
  padding: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  background: #fff;
  border:1px solid #000;
}
 
.slider {
  width: 750px;
  overflow-scrolling: touch;
  -webkit-overflow-scrolling: touch;
}
 
.sliderBox::-webkit-scrollbar {
  display: none;
  height: 0 !important;
}
 
.innerBox {
  float: left;
  width: 130px;
  margin: 0 0 0 5px;
  background: #EFEFEF;
}
 
.innerBox:first-child {
  margin: 0;
}
 
.innerBox p{
  text-align:center;
  font-size:12px;
  padding:5px;
}
 
.innerBox img {
  width: 100%;
}

テキストテキスト

テキストテキスト

テキストテキスト

テキストテキスト

テキストテキスト

スマホで見るとスクロールできるのが確認ができます。
-webkit-overflow-scrolling: touch; これを入れるとタッチスクロールが出来るようになるみたいです。
スクロールバーの見た目をカスタマイズするのに::-webkit-scrollbarでスタイルを指定します。
シンプルで簡単だからスマホのサイトでは重宝しそう！

【CSS】メモメモ calc / :not / child系

いくつかメモメモ
・サイズの計算

css
1
2
3
.test{
   wodth:calc(100% - 20px); //横幅100%のサイズから20pxをマイナス
}

・リストなどで最後だけ適用したくないときとか

1
2
3
li:not(:last-child) {
    padding-right: 10px;
}

・n番目とかの指定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//:last-child（最初）
//:first-child（最後）
 
li:nth-child(5) { //指定番号
   color:#000;
}
li:nth-child(odd) { //odd は奇数
   color:#fff;
}
li:nth-child(even) { //odd は偶数
   color:#f00;
}
li:nth-child(5n) { // n は倍数 例：5n なので5,10,15,20....と続く
   color:#ff0;
}
li:nth-child(4n+1) { // n 任意の数をプラスできる。上と同じ結果になります。
   color:#333;
}
#test p:first-of-type { // #test内の最初の要素がpではない場合にこれを使う
   color:#666;
}
//:nth-of-type(2) などnも使えます。
//要素が入り混じる場合に便利

SASSなかなかいいよ、使える環境さえできれば、便利！

複雑なデザインだとどうしても、タグの階層？が深くなってCSS書くのも大変だけどもこれがあれば楽になる！
例えば下記のようなhtmlの場合

html
1
2
3
4
5
6
<div class="box">
        <p>テキストテキストテキスト</p>
<ul>
<li><a href=""><span>タイトル</span>テキスト</a></li>
</ul>
<div>

CSSはこんな感じになるんだけど（内容は適当だよ！）

css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.box p{
text-align:center;
}
.box ul{
padding:10px;
}
.box ul li{
border-bottom:1px solid #ccc;
}
.box ul li a{
color:#666;
text-decoration:none;
}
.box ul li a span{
display:inline-block;
color:#000;
padding-right:10px;
}

SASSだと入れ子にできるので、何度もulやliを書く必要がなくなる！

SASS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box {
p { text-align:center; }
ul { padding:10px;
li { border-bottom:1px solid #ccc;
a { color:#666;
text-decoration:none;
span { display:inline-block;
   color:#000;
   padding-right:10px;
}
}
}
}
}

あと変数とかも使えるからすごい便利！

SASS
1
2
3
4
5
6
7
8
9
10
11
12
13
$f1: 12px;
$f2: 14px;
$c1: #000;
$c2: #fff;
 
p{
   font-size:$f2;
   color:$c1;
}
a{
   font-size:$f1;
   color:$c1;
}

ただ、コンパイルするのにRubyとか必要になるから環境つくるまでは面倒だったかな・・・
Ruby使ったことないし！ 自動コンパイルも設定しないとだし～
でも、環境整えばすごい楽になると思う！

Google Chrome の拡張機能を作ってみる

備忘録なんで、ディレクトリは全部直下にいれちゃえ！
まずはmanifest.jsonから書いてこうかね

manifest.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "name": "テスト拡張機能",
  "version": "1",
  "manifest_version": 2,
  "description": "テストの拡張機能だよ！",
  "permissions": [
      "tabs",
      "http://*/*",
      "https://*/*"
    ],
  "icons": {
    "16" : "sample_16.png",
    "48" : "sample_48.png",
    "128" : "sample_128.png"
  },
  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "Test extension",
    "default_popup": "popup.html"
  }
}

タブの情報を取得したいのでpermissionsに”tabs”を入れる！
次はポップアップするhtml
スタイルシートはリンクにしてもいいし、少なければheadにいれちゃえ～

popup.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ポップアップ</title>
<script type="text/javascript" src="popup.js"></script>
<style>
div {width:300px;padding:20px;}
</style>
</head>
<body>
<div>
テストポップアップ！<br>
<span id="popupBox"></span>
</div>
</body>
</html>

最後にポップアップ時に動くjs

popup.js
1
2
3
4
5
6
7
window.onload = function(){
chrome.tabs.getSelected(null, function(tab) {
var viewtab = tab.url;
var target = document.getElementById("popupBox");
target.innerHTML = viewtab;
});
}

このファイルが入ってるフォルダを拡張機能の「パッケージ化されていない拡張機能を読み込む」で指定して読込ませるだけ！
拡張機能のko-omアイコンをクリックすると現在セレクトされているタブのURLを表示します。

と、まぁこんな感じで作っていくらしい～
jsもextensionも素人だから、見よう見まねで作ってるけどいがいと動くよ！
次回はbackgroundで動作させるやつを備忘録しよう・・

さて、記事のためし書きをしてみる

さてはて、コードは入力できるのかな？
とりあえず、プラグインの Crayon Syntax Highlighter 入れてみるべし！
お試しで、ボタンのスタイルシートでも作ってみるかの

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
.btn1{
  color:#fff;
  background:#666;
  font-size:16px;
  font-weight:bold;
  padding:10px;
  border-radius:10px;
  text-align:center;
}
.btn1:hover{
  opacity:0.7;
}
</style>
 
<a class="btn1">ボタン</a>

ボタン

なんとか出来そうだ～
とりあえず、備忘録として使えるかな！ でも、投稿するほどの暇と元気があるのかな・・・
まぁ、趣味でのコーディングだし、楽しんで行こうか～
jsも勉強したいしな！

ゆったり、まったり行くとしよう・・