投稿日：2020-02-16T22:08:32+09:00

Vue.jsでTodoアプリ作ってみよう！

今回はVue.jsでTodoアプリを作ってみます
早速やっていきましょう～！
なお超基礎的な知識として下記の記事に書いてることを前提でお話します！
https://qiita.com/takepon_it/items/f89e0e3023a3070dbce6

1.画面を作ろう

今回はTodoリストの機能を作りたいだけなので見た目は簡素な物でいきます！
https://unpkg.com/vue
を読み込むのを忘れないでください！
index.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Todoアプリ</title>
        <link rel="stylesheet" href="style.css">
        <script src="https://unpkg.com/vue"></script>

    </head>
    <body>
        <div class="container">
            <h1>Todoアプリ</h1>
        </div>
        <div id="app">
            <div>
                <input type="text" placeholder="テキスト入力してね">
                <button type="button">追加</button>
                <ul>
                </ul>
            </div>
        </div>
        <script src="main.js"></script>
    </body>
</html>
こんな感じですね！

2.コンポーネントを作ろう！

早速タスクを追加する機能を追加していきましょう！

まずコンポーネントを定義していきます
コンポーネントはVue.componentを使うことで定義することできます！

ToDo の要素を todo-item というコンポーネントとして定義してみましょう！
それと合わせて既にここでタスクを追加した際のhtmlも作っておきましょう！
テンプレートをtemplateオプションに渡せばできます！
main.js
Vue.component('todo-item', {
    props: {
        todo: {
            type: Object,
            required: true
        }
    },
    //htmlの挿入
    template: '<div>' +
        '<input type="checkbox" v-model="todo.completed">' +
        '<span>{{todo.text}}</span>' +
        '</div>'
});
取り合えずこれでtodo-itemというコンポーネントを作れました！

3.タスクを保持するデータを作ろう！

次にテキストボックスの値をinputという名前で保存しよう！
では今からdataにinputを入れていくよ～
main.js
var vm = new Vue({
    el: '#app',
    data: {
        input: '',
        //タスクを管理する配列
        todos: []
    },
タスクを管理する配列として todos:[]　も作っとこう！

4.テキストとデータをくっつけよう！

早速テキストボックスとinputをv-modelを使ってくっつけよう！

v-modelはinput要素にv-modelという属性をつけることで、データとinput要素の入力値をくっつけることができます！

追加ボタンの上のテキストボックスの所を
index.html
<input type="text" v-model="input"　placeholder="テキスト入力してね">
にしてみましょう！　早速次にいきましょう！

5.タスクを追加するインスタンスメソッドを作ろう！

本題のTodoを追加するための機能を作っていきましょう！
addTodoというメソッドを作ろう！
インスタンスメソッドを作るにはmethodsオプションを使用したらできるよ
main.js
 methods: {
        //Todo追加関数
        addTodo: function () {
            this.todos.push(
                {
                    completed: false,
                    text: this.input
                })
            this.input = ''
        }
    }
これを追加してください！
配列へのpushやそういったものは割愛させて頂きます

6.タスクを追加する処理を書いていこう！

そしたらボタンをクリックしたらタスクを追加できるようにしたいので
ボタンとメソッドを紐づける必要があります！
これをするには
v-on:click
これを使って、ボタンが押されるのを監視し、ボタンが押された時に先ほどのaddTodoメソッドを実行できるようにしよう！
index.html
<button type="button" v-on:click="addTodo">追加</button>
こうですね！

7.タスクを削除する機能を作ろう！

タスクを追加したら、それを遂行した時の為に当然削除っていう機能も欲しいですよね？
こちらを今から実装していきたいと思います！

冒頭で作成したtempleteオプションに続けて記述したいと思います
main.js
 //htmlの挿入
    template: '<div>' +
        '<input type="checkbox" v-model="todo.completed">' +
        '<span>{{todo.text}}</span>' +
        '<button type="button" v-on:click="onclickRemove">削除</button>' +
        '</div>',
最終的にはこうですね！
しかしこれだけではなv-onオプションを使っている所を見て頂きたいのですが
onclickRemoveとあります
実際に削除ボタンを押されたときの処理をまだ書いていないので今から書いていきましょう。
main.js
    methods: {
        onclickRemove: function () {
            this.$emit('remove')
        }
    }
こちらを始めのインスタンスメソッドに追記します
$emitでカスタムイベントのremoveを発動します！
そして最後に
index.html
 <li v-for="(todo, index) in todos">
 <todo-item v-bind:todo="todo" v-on:remove="todos.splice(index,1)"></todo-item>
</li>
ul要素の中に上記を追記してください
v-forで要素を繰り返し表示します、この場合はtodos配列の中に格納されているタスクを表示させる為ですね
v-bindでデータを属性の値に紐付けします。

以上をもってTodoアプリの完成です！！！！！！

8.最後に

プログラミング初心者の割には頑張れた気がします
この調子でQiitaとか使ってアウトプットしていきたいな・・・

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-16T20:42:45+09:00

改行しつつ text-overflow ellipsis を使いたい

以下の回答をご確認ください。

Text overflow ellipsis on two lines - Stackoverflow

ポイント

リンク先の SCSS を見ると height を計算させています。これは -webkit-line-clamp で指定された行の末尾だけが ... に変換されるからです。それ以降の行も普通に表示されてしまいます。それを避けるために height を計算させています。
$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 3;

h2 {

  height: $font-size*$line-height*$lines-to-show; /* <--- ここに注目してください。 */

  font-size: $font-size;
  line-height: $line-height;
  -webkit-line-clamp: $lines-to-show;

}
-webkit-line-clamp は、ベンダープリフィックスがついていますが IE を除いたブラウザは対応してくれていそうです。

-webkit-line-clamp - MDN web docs

リンク

文字数制限をしないでCSSだけで「...」を表示する

text-overflow: ellipsis が上手く動作しない？解決してあげよう。 - Qiita

CSS text-overflow: ellipsis; not working? - Stackoverflow

Text overflow ellipsis on two lines - Stackoverflow

font-size vs line-height vs actual height - Stackoverflow

あと CSS variables を Vue.js の中で使おうとしたら、少し引っかかる。

CSS variables use in Vue - Stackoverflow

How do you inspect CSS variables in the browser? - Stackoverflow

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-16T18:40:27+09:00

HTMLとCSSのみでドロップダウンメニューを作成する

WEBサイト制作において『ドロップダウンメニュー』って結構必要になってくる知識だと思います。なので、、まとめます。

具体的な流れは、まずhtmlでリストを作成してから、cssでドロップダウンメニューにしていくという感じです。

ulでリストを作成する

まず最初にドロップダウンリストにしたいリストを作成します。CSSではなく、htmlのみでの作成のため、下記のようにめちゃくちゃ簡易的なリストになります。
    <div class="menu">
      <div class="menu-title">Main Menu</div>
      <div class="sub-menu">
        <ul>
          <li><a href="#">Sub Menu1</a></li>
          <li><a href="#">Sub Menu2</a></li>
          <li><a href="#">Sub Menu3</a></li>
        </ul>
      </div>
    </div>
CSSでドロップダウンにしていく

枠をデザインする

まず大枠を作ります。

main menuおよび、sub menuをちゃんとしたboxにしましょう。
 /* まずはメニューの大枠を作る */

.menu {
  width: 300px;
  text-align: center;
  background: navy;
  color: white;
}

.sub-menu {
  background: white;
}


 /* わかりやすいようにボーダーも */
li{
    border: 1px solid navy;
}
ただこれだとまだ、インデントやリンクを示唆する青色、下線が残っています。そこを直していきましょう。

位置、リンクの色を調整
 /* 上記CSSに加えます */

 /* list-styleでlistの"・"をなくします */
 /* paddingでインデントもなくします */

ul {
  width: 300px;
  list-style: none;
  margin: 0; 
  padding: 0;
}

 /* リンクっぽい青色、下線部をなくす */

a {
  text-decoration: none;
  color: navy;
}
いよいよドロップダウン化します

枠組みはできました！いよいよ、普通はサブメニューを非表示にさせて、マウスホバー時に表示させるCSSを書いていきます。

具体的には、非表示にするsub-menuクラスに「display: none;」を書いておいて、hover時に「display: block;」に切り替えて表示させるという手順です。
 /* sub menuを非表示にする */

.sub-menu {
  display: none; /* ← ここ追加 */
  background: white;
}

 /* マウスホバー時に表示させる */

.menu:hover .sub-menu {
  display: block;
}
これで完成！

これが

マウスホバーすると、、、

こうなります！

最終的なコードは
HTML
    <div class="menu">
      <div class="menu-title">Main Menu</div>
      <div class="sub-menu">
        <ul>
          <li><a href="#">Sub Menu1</a></li>
          <li><a href="#">Sub Menu2</a></li>
          <li><a href="#">Sub Menu3</a></li>
        </ul>
      </div>
    </div>
CSS
.menu {
  width: 300px;
  text-align: center;
  background: navy;
  color: white;
}

.sub-menu {
  background: white;
  display: none;
}

li{
  border: 1px solid navy;
}

ul {
  width: 300px;
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: navy;
}

.menu:hover .sub-menu {
  display: block;
}
参考:https://public-constructor.com/html-css-dropdown-menu/

なんかうまくできなかった時はこちら
http://webfeelfree.com/mouseover-css-hover/

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-16T16:58:40+09:00

サイト制作のコツ　（超初心者向け）

今回はサイトを作るにあたってこうやって制作していけばスムーズにできるのでは・・・？と思い
ほとんど自分用のメモですが、共有していきたいと思います！
自分と同じような初学者の方が参考にしてくれたらうれしいです

1.レイアウトを作っていこう！

サイトの構成を作るためにレイアウトを作っていきましょう！
ペイントでも何でもいいのでなんとなくで作れたら多分ok！
（入れ忘れで#top_panelの中に#panelが入っています。）

こんな感じで細かく要素を設定したりしてレイアウトを本格的に作っていきます！
色やheight,wight等も本来は書くべきだと思うのですが今回はなんとなくで進みます

2.レイアウトを元にコーティングしていこう！

まずはレイアウトを元にhtmlの方を書いていきます・・・
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タイトル</title>
<link rel="stylesheet" type="text/css" href="qiita.css">
</head>
<body>

<div id="header"></div>

<div id="top_panel">
<div id="panel"></div>
</div>

<div id="container">
<div id="main_1"></div>
<div id="main_2"></div>
<div id="main_3"></div>
<div id="main_4">
    <div id="main_5"></div>
    <div id="main_6"></div>
    <div id="main_7"></div>
</div>
</div>

<div id="footer">
 </div>

</body>
</html>
こんな感じですね！

次にCSSも書いていきましょう！
style.css
@charset "utf-8";
body {
    margin: 0;
}

#header {
    position: fixed;
    width: 100%;
    height: 70px;
    background-color: black;
    margin: 0;
}

#top_panel {
    height: auto;
    margin: 0 auto;
}

#panel {
    float: center;
    width: 100%;
    height: 500px;
    background-color: red;
}

#container {
    width: 1800;
    height: 450px;
    float: center;
}

#main_1 {
    width: 25%;
    float: left;
    height: 450px;
    background-color: green;
}

#main_2 {
    width: 25%;
    height: 450px;
    background-color: blue;
    float: left;
}

#main_3 {
    float: left;
    width: 25%;
    height: 450px;
    background-color: yellow;
}

#main_4 {
    float: left;
    width: 25%;
    height: 450px;
    background-color: rgb(255, 0, 221);
}

#main_5 {
    float: left;
    width: 50%;
    height: 50%;
    background-color: rgb(70, 34, 65);
}

#main_6 {
    float: left;
    width: 50%;
    height: 50%;
    background-color: rgb(48, 11, 43);
}

#main_7 {
    float: left;
    width: 50%;
    height: 50%;
    background-color: rgb(143, 43, 224);
}


#footer {
    width: 100%;
    height: 40px;
    background-color: black;
    margin: 0;
}
こんな感じですね！
そしたら完成品を見ていきましょう～～

3.完成！

はい！レイアウト通りにできてるのではないでしょうか？

このようにレイアウトを作ってからサイトの制作に取り掛かると凄く捗ると思うので、自分と同じような初学者の方は是非参考にしてみてください(´▽｀)

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-16T14:57:26+09:00

グーグルマップの左上の枠を”簡単に”消す

基本の状態

See the Pen RwPaKbL by sphenisc (@sphenisc) on CodePen.

Webサイトでグーグルマップを表示すると左上にその店舗や建物の情報と評価が出てくるのですがかなりの頻度で「消してくれ」と頼まれます。
グーグルに問い合わせるのも面倒だしなにかいい方法はないかとやってみたのですがCSSで消すのが一番楽でした。

修正版

See the Pen ZEGWLYz by sphenisc (@sphenisc) on CodePen.
top: -150px;
height: calc(100% + 150px + 150px);
グーグルマップの高さを上下に150pxずつ拡張して上に150px移動させることで左上の枠を画面外に出しています。
スマートフォンなどで画面が小さくなると150pxでは消しきれなくなるので数値を調整してください。

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-16T13:23:45+09:00

materializeを使ってハンバーガーメニューを実装してみる(レスポンシブ対応)

プロフィール

学生です(*‘ω‘ *)
普段はhtml,css,javascriptなど主にフロントエンドの勉強をしていて、最近はvue.js使うことが多め。
バックエンドも勉強したいと思ったので、最近は若干phpも勉強しています
学生のうちに少しでも経験を積むことを目標に自分なりに奮闘中

はじめに

最近、materializeというフレームワークを知り合いのエンジニアの方に教えていただいたので、ちょっと使ってみました
materializeを使ってハンバーガーメニューを作る機会があったので、備忘録も兼ねてまとめてみます
公式サイトはこちらから。

そもそもmaterializeって？

簡単に説明すると、Googleが提唱しているマテリアルデザインというものに沿ったwebサイトが簡単に作れるよっていうフレームワークです

CDNで利用する

CDNで利用する場合はheadタグに以下のコードを挿入してください
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
今回は、ハンバーガーメニューのアイコンをmaterializeの機能を使って実装したいので、これも必要です
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
JQueryを使うので、こちらのサイトからJQueryのファイルをダウンロードするか、CDNでの利用をお願いします

僕はJQueryをダウンロードしたものを使うので、そちらを推奨します

色の指定

materializeではbootstrapと比較すると、class属性を使って指定できる色(詳しくはこちらへ)が豊富にあります。
例えば、class属性にpink accent-1と指定すると、このような色に。
deep-purpleと指定すると、このような色になります。

テキストに対して色を使いたい場合は、grey-text text-lighten-3といったようなclassのつけ方をしてあげてください。

まずはシンプルなメニューバー

class="nav-wrapper"で囲めば簡単にメニュー部分を作ることができます。
ちなみに、class属性にrightを指定すると右寄せになります。
逆に、leftと指定することで左寄せになります（デフォルトだと左寄せだったはず）

html
    <nav class="nav-wraper deep-purple">
      <div class="cotainer">
        <ul class="right">
          <li><a href="#" class="grey-text text-lighten-3">Contents1</a></li>
          <li><a href="#" class="grey-text text-lighten-3">Contents2</a></li>
          <li><a href="#" class="grey-text text-lighten-3">Contents3</a></li>
          <li><a href="#" class="grey-text text-lighten-3">Contents4</a></li>
        </ul>
      </div>
    </nav>
ハンバーガーメニューを作る（レスポンシブ対応）

レスポンシブ対応です。念のため補足しておくと、Jqueryで記述した部分はjquery本体を読み込んでから記述してください。そうしないと、jqueryで書いた部分が認識できずにエラー吐きます('ω')

html
<div class=" navbar-fixed">
    <nav class="nav-wraper  deep-purple">
      <div class="cotainer">

　　　　
        <a href="#" class="sidenav-trigger right" data-target="mobile-links">
          <i class="material-icons">menu</i>
        </a>

        <div class="menu">

          <ul class="right hide-on-med-and-down">
            <li><a href="#" class="grey-text text-lighten-3">Contents1</a></li>
            <li><a href="#" class="grey-text text-lighten-3">Contents2</a></li>
            <li><a href="#" class="grey-text text-lighten-3">Contents3</a></li>
            <li><a href="#" class="grey-text text-lighten-3">Contents4</a></li>
          </ul>
        </div>

      </div>
    </nav>
  </div>

  <ul class="sidenav" id="mobile-links">

　　
    <a href="#" class="sidenav-close " data-target="mobile-links">
      <i class="material-icons close-icon">close</i>
    </a>

    <div class="menu">
      <li><a href="#">Contents1</a></li>
      <li><a href="#">Contents2</a></li>
      <li><a href="#">Contents3</a></li>
      <li><a href="#">Contents4</a></li>
    </div>
  </ul>

<script src="jquery.min.js"></script>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script>
     $(document).ready(function () {
      $('.sidenav').sidenav({
        edge: 'right',
      });
    })
  </script>
css
.close-icon {
  font-size: 2.5rem;
  right: 1rem;
  margin: 1rem auto;
  color: rgb(66, 66, 66);
  padding-left: 17rem;
}
1.開く・閉じるアイコン

まず、materializeの機能では豊富なバリエーションのアイコンを簡単に表示することができて、今回はそれを使ってハンバーガーメニューの開くボタンと閉じるボタンを実装しました。
<i class="material-icons">close</i>みたいな感じで記述することでアイコンを使うことができます。
ただ一つ注意したいことがあって、materializeの機能でアイコンを表示する場合、class属性にではなくタグの中にそのままアイコン名を入れる必要があります。

こちらに使えるアイコンの種類が載っているページを貼っておきます。今回使ったもの以外にもたくさんの種類のアイコンが使えるので、ぜひ使ってみてください。

2.hide-on-med-and-downってなにそれおいしいの？

タブレット以下では非表示にするという意味です。残念ながら食べられません('ω')
class属性にhide-on-med-and-downと指定することでスマホ・タブレット表示のときだけハンバーガーメニューが表示されるといった使い方をすることができます。
他にもいくつかコンテンツの表示に関するclassがありますが今回は省略します。

3.ボタンクリック時の動作について

19行目にあるclass="sidenav"という要素に対して、sidenavというmaterialize独自のメソッドを使って、クリックしたらメニュバーを表示させるという動作をさせています。
$('.sidenav').sidenav({
        edge: 'right',
      });
また、ハンバーガーメニューの開くボタンと閉じるボタンの部分に書いてあるclass属性のsidenav-triggerとsidenav-closeはボタンをクリックしたら開く、またクリックしたら閉じるといった動作をさせたい場合に使います。なので、基本は前述のjqueryの部分とセットで使いましょう。

ちなみに、sidenavというメソッドにはさまざまなオプションがあり,
今回はedge:'right'と指定することで右からメニューが飛び出してくるという設定にしています。デフォルトだと左から飛び出してきます。
他にもいろいろオプションがあり便利なので、是非使ってみて下さい。リンクを貼っておきます。
https://materializecss.com/sidenav.html

最後に

最後まで読んでくれてありがとうございました。
githubに今回書いたサンプルコードを載せておきます。
https://github.com/helloworld753315/materialize

materializeって結構いい感じのフレームワークだと僕は思ってるので、僕が書いた記事で少しでも良いところを伝えていけたらいいなと思ってます(*‘ω‘ *)
今回は時間などの都合もありハンバーガーメニューを作るという目的のみに絞ってmaterializeについての記事を書きましたが、好評でしたらmaterializeでのグリッドの使い方など他の機能についてもそのうち投稿する予定です。

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-16T07:13:47+09:00

Font Awesomeの主要SNSアイコンのコピペ集

結構Awesome Fontって使うことが多いのかなと思うんですが、毎回Awesome Fontのページまで行って、アイコン探して、コピペしてって手間なんですよね。

だからコピペ集を作ることにしました。

まずはkit

これは無料登録して自分で作らなきゃいけないみたい。

https://fontawesome.com/kits

このkitは
タグの最後に入れます。
そして、いざコピペ集。

Instagram
<i class="fab fa-instagram"></i>
Twitter
<i class="fab fa-twitter"></i>
Facebook
<i class="fab fa-facebook-f"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-facebook-square"></i>
取り急ぎ以上。

追加希望ありましたらコメント欄にどうぞ。

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-16T03:01:57+09:00

スクロールすると要素が揺れるページを作る

最初はJSのみで実装しようと思いましたが、難しくて挫折。CSSアニメーションを使えばかなり簡単に作れましたー。ちなみに、ライブラリは使っていません。

何かしら良さげなライブラリがありそうですが、パッと見た感じなさそうなので作ってみました。

HTMLは必要最低限。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>trace huuuu</title>
  <link rel="stylesheet" href="style.css">
</head>
<body style="height: 200vh; width: 100vw;">
  <div class="shakes"></div>
  <div class="shakes"></div>
  <div class="shakes"></div>
  <div class="shakes"></div>
  <div class="shakes"></div>
  <div class="shakes"></div>
  <script src="script.js"></script>
</body>
</html>

揺らす要素にshakesというクラスを付けています。
transform-origin: 50% 0;と書いておくと、揺れてる感が出て良き良き。

CSS

.shakes {
  width: 200px;
  height: 100px;
  margin: 150px;
  transform-origin: 50% 0;
  background-color: pink;
}

正直JSはコードに自信がないので晒したくはないのですが、ひとまず下記のような感じにしてみました。

各要素ごとに、振幅にばらつきがあったり、振れの速度が違った方が面白いので、それぞれランダムな値を持たせています。

JavaScript

let oldPos = 0;
let timeoutId = 0;
let scrolls = [];
let minShakeAngle = 0.3; // 最小振れ角
let attenuation = 0.8; // 振幅減衰率
let defaultAngle = 45; // 基準振れ角

window.onload = () => {
  oldPos = window.scrollY;
  let shakes = Array.from(document.getElementsByClassName('shakes'));
  shakes.forEach((shake, index) => {
    scrolls.push(new Scroll(shake));
  });

  window.addEventListener( "scroll", () => {
    clearTimeout( timeoutId );
    let timeoutId = setTimeout( function () {
      let distance = Math.abs(window.scrollY - oldPos);
      let angleRate = distance / (document.body.clientHeight - window.innerHeight);
      let angle = angleRate * defaultAngle;
      scrolls.forEach((scroll) => {
        scroll.shakeSet(angle);
      });
      oldPos = window.scrollY;
    }, 15);
  });
}

class Scroll {
  constructor(el) {
    this.el = el; // 要素
    this.currentAngle = 0; // 現在の振れ角
    this.add = 1; // 振れ方向の正負
    this.animationId;
    this.animateFlg = false; // 振れているかどうか
    this.angleRate = Math.random() + 0.5; // 要素ごとの振れ角のばらつき
    this.animationInterval = 200 * Math.random() + 500; // 要素ごとの振れ速度
    // 要素ごとに振れ速度を変えて、
    el.style.transition = `transform ${this.animationInterval}ms ease-in-out`;
    // インスタンス生成時に要素を揺らしています。
    this.shakeSet(10);
  }

  shakeSet(angle) {
    angle *= this.angleRate;
    if(this.currentAngle < angle) {
      this.currentAngle = angle;
      if(!this.animateFlg) {
        this.animateFlg = true;
        this._shake();
      }
    }
  }

  _shake() {
    this.animationId = setInterval(() => {
      this.el.style.transform = `rotate(${this.currentAngle * this.add}deg)`;
      this.add = this.add * -1;
      if(this.currentAngle < minShakeAngle) {
        this.el.style.transform = `rotate(0deg)`;
        clearInterval(this.animationId);
        this._clearVariable();
        return;
      }
      this.currentAngle *= attenuation;
    }, this.animationInterval);
  }

  _clearVariable() {
    this.add = 1;
    this.currentAngle = 0;
    this.animateFlg = false;
  }
}

動作は下記URLより

https://mi-miya.github.io/traces/huuuu/

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-16T02:58:37+09:00

img要素をbackground-imageのcoverみたいにする

HTML
<div>
  <img src="https://placehold.jp/600x350.png">
</div>
CSS
.top_image {
  width: 50px;
  height: 50px;
  position: relative;
  overflow: hidden;
}

img {
  height: 100%;
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  /* object-fit: cover; */
}
極々簡単なコードですが、一応残しておきます。

一般的にはobject-fitを使うと思うのですが、これだとIEが対応していないのと、複数の画像を重ねたいときに不便でしたので...

上記のコードなら、例えば複数の重なった画像を順番にopacity操作してスライドショー的な感じにする際に便利かなー、と！

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-16T00:16:01+09:00

【CSS】CSSでオシャレになれるか？(ざっくりCSS超入門)

1.最近少し気が付いたこと

プログラムを作って、思い通りの動作を確認する。
↓
嬉しくなってQiitaに下書きして、美しいハイライトを見て満足する。
↓
実行画面の一部のキャプチャーもアップ。

ダサい!!!

linuxの管理者専用の白黒画面がオシャレに見えるほどダサい!!!

２.cssとは

見た目を一切気にしようとしない処理を書く人々には縁のないもの

デザイナーさんのような華のある人々が駆使するもの

webページの見た目を華やかにするもの

こういう技術があるという事は、エンジニアの皆様も日々自分の
ダサさに悩んでいるんだ。(!？)

これを覚えれば、恐竜登録ツールもイケイケになるはず。

3.CSSの基本スタイル

セレクタ{ プロパティ:値; }
という書式から成る。

セレクタ – どのHTMLタグに対して見合えを調整するか
プロパティ – どういった内容のデザインを施すか
値 – プロパティはどの程度か。
というものらしい。

とりあえず、色を変えれば今の『逆Linux』画面から変わるはず！

参考urlを調べて実装してみる。
ワクワクするなあ。

4.CSSのコーディング例
dino_css.css
h1 {
    color: red;
    background: #33ffff;
}
body {
    background: #aaffff;
}
input[type="text"][name="dname0"]{
    color: #ffffff;
    background: #00ffff;
}
input[type="text"][name="hdname0"]{
    color: red;
    background: #00ff33;
}
input[type="submit"][name="btn2"]{
    color: red;
    background: #77ccff;
}
select{
  background:#ffcccc;
}
このファイルを適用したいファイルのタグの前に、下記一行を書けばいいのだ
<link rel="stylesheet" type="text/css" href="dino_css.css" />
どうなるか楽しみ！！！

5.結果

恐竜登録ツール2
上記ソースに適用してみる。

設定した内容が適用された。
それ以上でも、それ以下でもない。
こういう技術があるんだという事を知っただけでも良かった。。。

イケイケになったか？→未達成。
唯一分かった事がある。
『デザイナーへの転職は厳しい』という現実だ。

美しさの提供って大変ですね。

6.参考サイト様

CSSの基本的な書き方
 CSS 属性セレクタのサンプル(要素名[属性名=”値”])

　 Tweet
Qiitaで続きを読む

20200216のCSSに関する記事は10件です。

Vue.jsでTodoアプリ作ってみよう！

1.画面を作ろう

2.コンポーネントを作ろう！

3.タスクを保持するデータを作ろう！

4.テキストとデータをくっつけよう！

5.タスクを追加するインスタンスメソッドを作ろう！

6.タスクを追加する処理を書いていこう！

7.タスクを削除する機能を作ろう！

8.最後に

改行しつつ text-overflow ellipsis を使いたい

ポイント

リンク

HTMLとCSSのみでドロップダウンメニューを作成する

ulでリストを作成する

CSSでドロップダウンにしていく

枠をデザインする

位置、リンクの色を調整

いよいよドロップダウン化します

サイト制作のコツ （超初心者向け）

1.レイアウトを作っていこう！

2.レイアウトを元にコーティングしていこう！

3.完成！

グーグルマップの左上の枠を”簡単に”消す

基本の状態

修正版

materializeを使ってハンバーガーメニューを実装してみる(レスポンシブ対応)

プロフィール

はじめに

そもそもmaterializeって？

CDNで利用する

色の指定

まずはシンプルなメニューバー

ハンバーガーメニューを作る（レスポンシブ対応）

1.開く・閉じるアイコン

2.hide-on-med-and-downってなにそれおいしいの？

3.ボタンクリック時の動作について

最後に

Font Awesomeの主要SNSアイコンのコピペ集

まずはkit

そして、いざコピペ集。

Instagram

Twitter

Facebook

スクロールすると要素が揺れるページを作る

img要素をbackground-imageのcoverみたいにする

【CSS】CSSでオシャレになれるか？(ざっくりCSS超入門)

1.最近少し気が付いたこと

ダサい!!!

linuxの管理者専用の白黒画面がオシャレに見えるほどダサい!!!

２.cssとは

3.CSSの基本スタイル

4.CSSのコーディング例

5.結果

6.参考サイト様

日付別

タグ一覧

サイト制作のコツ　（超初心者向け）