クルーデザイン

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

no image

Python for文の基本 リスト(list)、タプル(tuple)、辞書(dict)

2018/08/05   -Python

最近、Pythonを学んでいます。 基本はとても簡単なプログラミング言語ですね。 for文も直感で何となく書けていけます。 for文(list, リスト) [crayon-5bf5a25eeaabb9 …

Vue.js クリックで関数を実行させるサンプル(v-on、methods)

2018/04/30   -Vue.js

Vue.jsのタグに対するイベントは「v-on」を使います。 今回は、ボタンがクリックされた時に関数を実行してみましょう! スクリプト(Vue.js クリックで関数を実行させるサンプル(v-on、me …

Vue.js for文のような繰り返し処理はどうやるの?サンプル(v-for)

2018/04/30   -Vue.js

もちろんVue.jsにも繰り返し処理があります。 「v-for」を使います(分かりやすい名前ですね)。 早速、どうやるのか試していきましょう! スクリプト(Vue.js for文のような繰り返し処理は …

Vue.js タグの属性値を操作してみよう!サンプル(v-bind)

2018/04/30   -Vue.js

Vue.jsでは、属性の値を自由に入れ込むことができます。 では「v-bind」を使って目的の属性に値を入れてみましょう! 今回は、imgタグの属性を操作してみようと思います。 スクリプト(Vue.j …

Vue.js if文のような分岐処理はどうやるの?サンプル(v-if)

2018/04/29   -Vue.js

Vue.jsにもif文の代わりになる仕組みがあるので紹介したいと思います。 「v-if」という属性を使います。 今回は、条件が一致していたら表示、一致していなければ非表示されるサンプルを作ってみましょ …

Vue.js 一番簡単なサンプル

2018/04/29   -Vue.js

Vue.jsが流行しているようですので、勉強していきたいと思います。 まずは公式ページにもある、一番簡単なサンプルを作っていきましょう!   Vue.jsの読み込み(Vue.js一番簡単なサ …

CSS 画像の上に文字を重ねて表示させる(サンプル付き)

2018/04/28   -CSS, HTML

今回は画像の上に文字やタイトルを重ねて表示してみましょう! 少しオシャレで良い感じですよね。   こんな仕組みのものを作ります 画像をきっちりと囲む領域を作り「position:relati …

jQuery ページの最上部へスクロールする処理(サンプル付き)

2018/04/28   -jQuery

よく見かける「トップへ戻る」を作ってみます。 ホームページをいくらかスクロールしていくと、右下に出てくきて、ずっと付いてくるやつですね。 それをクリックすると、ページの最上部まで「ぎゅいーん」とスクロ …

CSS 丸、正円の中に数字・文字を書く!(サンプル付き)

2018/04/21   -CSS

良くあるデザインで丸の中に数字や文字が入っているものがありますよね。 画像にしてしまうのも良いですが、汎用性も考えて出来ればCSSでやってしまいたいですね。 中の文字や大きさも自由に変更できるので、後 …

Bootstrap4 colの隙間(padding、margin)を削除する(サンプル付き)

2018/04/17   -Bootstrap4

Bootstrap4でデザインを忠実に再現したい時に、colの隙間(padding)が邪魔なときがあります。 この邪魔な隙間を無くしてしまおう!というのが今回の趣旨です。 サンプルも作りました。 CS …