「ウェブ開発」 一覧

SASSの四則演算をまとめてみた

SASSの四則演算+余剰の単位の扱いについてまとめてみた

今回はSASSで四則演算(余剰も含む)する際に単位の扱い方についてまとめてみました!
SASS(CSS)では「px」や「vw」、「em」など、たくさんの単位が存在します。
SASSで四則演算を行うときは、この単位に注意しないとエラーが起きたり、意図しない単位で出力されたりなどしてしまうので、しっかりと把握しておきましょう!

Chromeでアンダーラインが切れてしまった時の対処法

Google Chromeでアンダーラインが切れてしまった時の対処法

今回はChromeでアンダーラインが切れてしまう問題を解決していきます!
Chrome 64のアップデートから「text-decoration: underline」を使用するとアンダーラインがプツプツと切れるようになりました。
人によっては、切れた方がいいという場合もあるかもしれないので切る方法も解説していきます!

pxとvwを変換してみた!

SASSを使ってpxからvwに変換できる関数を作ってみた

今までpxで指定していた要素をvw指定にしてviewportに応じて広げる必要が出てきたので、pxからvwに変換する関数をSASSを使って実装してみました!

CSSだけでテキストに縁をつけてみよう

CSSだけでテキストを縁取りする方法トリッキーすぎた!

今回は、お仕事でテキストを縁取りする事態が発生したので、こちらを紹介していきます!!text-shadowを限界まで(?)使った実に厄介なものになっているので限界までわかりやすく説明しました(笑)最後の方にはトリッキーすぎる記述をSASSのmixinにまとめたものを用意しているので、ぜひ持って帰ってくださいね!

CSSでテキストにグラデーションを掛けよう

CSSでテキストにグラデーションを掛けてみた!

今回はCSSだけでテキストにグラデーションを掛ける方法を紹介していきます! CSSのみでテキストグラデーションを実装できれば、メンテナンス性も向上するのでぜひ、積極的に使っていきましょう!!テキストにグラデーションを掛けるために画像を切り出して、文言修正するときはもう一度切り出して...。なんていう黒歴史にはサヨナラしたいですね♪

WebStrage入門 ブラウザにデータを保存

WebStorage 入門!データをブラウザに簡単保存しよう

WebStorageはCookieと同じような感じで、サイトごとにデータを保存することが出来ます。ただ、CookieよりもWebStorageの方が容量が多いなど、利便性が高いですね!CookieとWebStorageの違いについても触れていきながら解説していきます。読み書き削除も簡単に操作できるので使えるようになりたい技術ですね!

他人のサイトにJSを埋め込む!?ScriptAutoRunner

他人のサイトにJSを埋め込む!?「ScriptAutoRunner」でいつも使うサイトをもっと便利に!!

今回は他人のサイトにJavaScriptを埋め込むことが出来る「ScriptAutoRunner」というchromeの拡張機能を紹介していきます!ちなみに埋め込むといっても自分のPCのchrome上でしか動かないのでクロスサイトスクリプティングなど悪いことは出来ないのでご了承ください(笑)

vhを使う際の落とし穴!?最後までスクロールされない!!

CSSの[overflow: auto]と[vh]を組合せた時にハマった話

今回はウェブ開発をしていて実際にハマった話とその解決方法を紹介していきます!例えば、[position: fixed]などを使ってドロワーメニューを作ることはよくあると思います。その時、端末のサイズによってメニューの中身が端末をはみ出してしまうと思います。その際に[overflow: auto]と[height: 100vh]を使ってスクロールさせたのですが、なんとスマホで最後までスクロールできない不具合が...。今回はそんな話をしていきます!

スマートなメディアクエリ!少ない記述でブレイクポイントを設定しよう!!【SASSモジュール】

今回はSASSを使ってメディアクエリを作成していきます! メディアクエリはレスポンシブサイトには欠かせない存在となっていますが、記述が長い!! しかも、ブレイクポイントの数値を忘れてしまうと他のページから数値をピックアップして...。 と、そんな扱いが面倒なメディアクエリを[sp]や[pc] [tb]などの引数だけで制御できるようにしていきましょう!

WindowsでもLinux系のコマンドを打てる Windows PowerShellを使ってみよう!!

WindowsでもLinux系のコマンドを打てるWindows PowerShellを使ってみよう!!

今回はWindowOSに標準搭載されている「Windows PowerShell」を紹介していきます。 Windows PowerShellはMacやLunuxなどで使われているコマンドをWindowでも使えるようになるナイスなシェルです! 「コマンドプロンプトは使いづらい...」と思っている方はぜひ使ってみてください♪

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