クルーデザイン

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

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

Vue.js 双方向バインディングサンプル(v-model)

2018/08/06   -Vue.js

Vue.jsの強力な機能の1つに、双方向バインディングがあります。 難しそうな名前ですが、簡単に言うとスクリプト側の変数とHTML側の変数を結びつける機能です。 今回作るサンプルは、HTML側の「テキ …

no image

Python 動作しているPythonのバージョンをプログラム内で確認する

2018/08/05   -Python

勉強中だと今使っているPythonのバージョンを確認したいことが出てきます。 確認方法をメモしておきます。