「ウェブ開発」 一覧

第2回:npm scriptを使って自動的にSASSをコンパイルしよう!【使って覚えるSASS入門】

まずは完成形 SASSの自動コンパイルを実装しよう 完成形から解説した方が早いので、まずは完成形を確認してみてください。 大まかに内容を説明すると、次のような設定をしています。 「npx sass」を ...

Javascriptでスクロール禁止を実装しよう!

今回はJavascriptを使ってスクロール禁止の処理を実装してみたいと思います!一応、「overflow: hidden」や「touch-action: none」を使えばCSSのみでもスクロール禁止は出来ます。Javascriptを使えば、どのブラウザにも対応できるので、こちらの方がオススメです!

今では常識!imgタグの「srcset」で高解像度ディスプレイRetinaに対応しよう!

今回は、imgタグやpictureタグで使える「srcset」について紹介していきます!
「srcset」を使うとユーザーが使っているデバイスによって画像を出し分けできます。
サイトの速度改善にも使えるので積極的に取り入れましょう!!

第2回:基本にして最重要!SASSのネストを学んでいこう!!【使って覚えるSASS入門】

基本にして最重要のネストとは? SASSを使うメリットの1つが、このネスト(入れ子)を使える点ですね! ネストとは・・・。 言葉で説明してもピンとこないので、実際にコードを見てみましょう! 例えば、「 ...

CSSでスマホの向きを判定できるorientationを使おう!

今回は、スマホの縦横(portrait / landscape)を簡単に判別できるように実装しました。表示がイマイチになりがちなスマホの横表示。対応するのが面倒で横表示を非対応にしたい場合もあると思います。その際に本ページのコードが使えると思います!

【使って覚えるSASS入門】Node.jsを使ってSASSを始めよう!

第1回:Node.jsを使ってSASSを始めよう!【使って覚えるSASS入門】

【使って覚えるSASS入門】シリーズでは、SASS入門者に向けたチュートリアルになっています。
「なんとなくSASSを使ってるけど、いちから学んでみたい!」
「SASSを使ってみたいけど、漠然としていてよく分からない。。。」
「SASSって食べ物?おいしいの?」
という方は、ぜひ参考にしてみてください!!

第0回SASSとは何かを解決!SASSの概要をつかもう!

第0回:SASSとは何かを解決!まずはSASSの概要をつかもう!!【使って覚えるSASS入門】

【使って覚えるSASS入門】シリーズは、SASS入門者に向けたチュートリアルになっています。 「なんとなくSASSを使ってるけど、いちから学んでみたい!」 「SASSを使ってみたいけど、漠然としていて ...

「第3回」使って覚えるvue.js よく使うディレクティブをマスターしよう!

vue.jsの代表的なディレクティブをマスターしよう!

vueの主要なディレクティブ一覧 v-text:要素のテキストを更新 v-html:HTML要素を更新 v-bind:属性のテキストを更新 v-show:要素の表示/非表示を更新 v-if:分岐を行う ...

【CSS】数行で要素を自在に追従できる「position: sticky」の仕組みと使い方を解説!!

position: stickyとは? stickyは「position: fixed」と同様に画面を基準にして、要素を追従させることが出来る機能です。fixedと違う点は、fixedは常に画面固定な ...

使って覚えるVue.js 第2回基本的な記述方法で動的に文字を出力しよう!

【使って覚えるVue.js入門】第2回:基本的な記述方法を覚えて動的に文字を出力させてみよう!!

はじめに こちらは、Vue.jsを使いながら覚えていく【使って覚えるVue.js入門】です。 第2回目となる今回は、Vueの「基本的な記述方法(インスタンス)」を解説してから、実際に動的に文字を出力さ ...

Copyright© カノトのアトリエ , 2020 All Rights Reserved Powered by STINGER.