クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

jQuery クラスの追加・クラスの削除 クリックで色が付くメニュー(addClass・removeClass)

2018/09/17   -jQuery

jQueryを使えば、タグにクラスを追加したり削除したりすることが簡単にできます。 今回はクリックされた「li」にクラスを追加して、クリックで色が付くメニューを作成してみようと思います。 こんなイメー …

Bootstrap4 PCでは2カラムで、スマホ画面では1カラム(サンプル)

2018/09/12   -Bootstrap4

Bootstrap4で画面サイズによってレイアウトのカラム数を変えたい場合のサンプルを作成しました。 画面サイズに対応したクラスを追加してあげるだけで、簡単に実現可能です。 サンプルを作成しましたので …

Bootstrap4 画像を全画面に表示(レスポンシブでwidth100%)

2018/09/10   -Bootstrap4

メインビジュアルを画面幅すべてを使って表示させたい時があります。 Bootstrap4では、以下のように簡単に実現可能です。 HTML Bootstrap4 画像を全画面に表示(レスポンシブでwidt …

Bootstrap4 divに影(シャドウ)を付ける(影付きのdiv・ボックス)

2018/09/09   -Bootstrap4

Bootstrap4では、影(シャドウ)を付けるクラスが初めから用意されています。 クラスを追加するだけで簡単に影(シャドウ)を付けることができます。 Bootstrap4 divに影(シャドウ)を付 …

Bootstrap4 YouTubeをレスポンシブで貼り付ける(普通の動画でもOK)

2018/09/08   -Bootstrap4

Bootstrap4を使えば、レスポンシブなYouTubeリンクを貼り付けることができます。 レスポンシブというのがミソです。 普通にYouTubeリンクを貼ると、固定サイズになってしまいますからね。 …

CSS 未加工の画像から丸いアイコンを作る(普通の画像だけでOK)

2018/09/08   -CSS

アイコンのような画像を表示させたいときがあります。 きれいな正円の中に画像が配置されているやつですね。   いちいち元画像から上記のような画像に加工するのは面倒ですよね。 画像データが増える …

no image

webサービス 超便利codepenでVimを使う

2018/08/26   -Webサービス

私はコーディングでVimを使っています。 codepenではvimは使えないと思い込んでいたのですが、調べてみると普通にVimに対応していました。 何て便利なんでしょう! 1.「一番右のアイコン」をク …

Bootstrap4 テーブル関連のクラス色々(table)

2018/08/26   -Bootstrap4

Bootstrap4はテーブル関連のクラスも充実しています。 クラスをいくつか追加するだけで、見栄えの良いテーブルを作成することができます。 スプライトやホバーでの色変えなど、自分でCSSを作成しなく …

Bootstrap4 カラムを途中でブレークする(途中で折り返すクラスw-100)

2018/08/12   -Bootstrap4

Bootstrap4のcolクラスは何もしなくても隙間をどんどん埋めていってくれる便利なものです。 しかし、実現したいデザインによっては途中で折り返したいことも出てくると思います。そんな場合は「w-1 …

Vue.js CSSを操作して、スタイルを動的に設定する(v-bind:style)

2018/08/11   -Vue.js

Vue.jsでもスタイルの操作が可能です。 バインディングもされますので、オブジェクトの値を変えるだけでスタイルを変更することができます。 アイデア次第で面白いものが作れそうですね。 早速簡単なものを …