KYO

月別: 2018年8月
CSS

cssデザインメモ。自分の勉強用

2018年8月27日

cssでちょっとしたデザインをメモしていきます。背景画像系はまだまだ面白く操作できそうだ。 ボックスの左上と右下にアイコン画像を設置して、引用文などに使えるデザイン [crayon-5c1962021c51b578013888/] [crayon-5c1962021c521486147887/] リストの右橋にアイコンをつける [cray...

JavaScript自分用メモ配列の扱い

2018年8月27日

配列と子要素の削除と追加などを勉強したのでメモ。配列の中に配列があったり、連想配列があったりするパターンがごちゃごちゃになるのでその辺も。 あとはquerySelectorAllの挙動とかの確認的なメモです [crayon-5c1962021cb68497415270/] [crayon-5c1962021cb6e307775078/] ...

CSS

高さの違う画像を揃えてレスポンシブに横並び表示する

2018年8月20日

今回は高さの違う画像を横並びで表示した時に高さを揃えて表示させます。 さらにレスポンシブに表示させます。 高さを具体的な固定値で指定せずに%で指定することで、凝り固まったデザインでないレスポンシブなデザインになります。 イメージとしてはこんな感じです。画像の元のサイズはそれぞれ高さも幅も違いますが、きっちり揃えて表示できています。 [ca...

Vue.jsで、スライドメニューを作る

2018年8月17日

最近Vue.jsを勉強し始めました。 対してjQueryも使いこなせないんですが、Vue.jsってjQueryより使いやすいんじゃね?と思ってしまうほどにハマってしまいました。 というわけで、Vue.jsでサイドメニューを表示させます。   jQueryみたいにクリックした時に、この要素にクラスを付与するみたいなロジックを書かず...

Laravel5.6とAjaxで「いいね」機能を作るチュートリアル

2018年8月5日

Laravel5.6で、いいね機能の作り方をチュートリアル形式で解説します。ちなみに中級のチュートリアルを終えたレベルなら作れると思います。 今回はログインしているユーザーが投稿に対して「いいね」を押せる機能を作ります。「いいね」は一度押すともう押せなくして、「いいね」取り消しは不可能にします。ユーザーごとに「いいね」を押しているのかどう...

Sassの基本

2018年8月3日

Sass(サース)を勉強しています。cssの勉強でcodepenとか見ているとsassで書かれたものが時々出てきます。なんか特別な環境とか必要なのかな?と避けていたんですが、どうやら簡単に導入できてしかも、特別環境とかが必要なわけでもないとのことで早速勉強しました! Sassを使う cssの上位互換的なやつです。 最終的にはcssに変換し...

CSS

ERROR: Could not find a valid gem ‘sass’でsassがインストールできない

2018年8月2日

Mac環境で sudo gem install sass [crayon-5c1962021dc39908183055/] みたいなエラー起きた とりあえずググる Error: SASS installation for windows 英語でよくわからんが [crayon-5c1962021dc3e118192266/] を試す [cr...