web制作 困りごとお役立ちメモ

web制作 困りごとお役立ちメモ

VSCodeで「Looking for CSS classes in the workspace」に悩んだ話

最近、Web制作のコーディングに利用するテキストエディタをVSCodeに変更したのですが、起動した後しばらく(10分くらい)は以下のような症状が発生して困っていました。 EmmetでTabキー...
web制作 困りごとお役立ちメモ

失敗しない!MacBookを外部ディスプレイに接続するときの注意点をご紹介

MacBookと外部ディスプレイの接続に使用する機器の選定と、発熱対策には気をつけないといけません。機器の選定を誤ると「接続できない」「接続できても映らない…」という問題が起こりますし、発熱対策を行わなければ、あなたの大切なMacBookの寿命を縮めることに繋がってしまいます。そのような失敗をしないために、本記事では以下の内容について解説していきます。MacBookとディスプレイを繋ぐケーブルの選び方MacBookでデュアルディスプレイにする方法
2020.05.30
web制作 困りごとお役立ちメモ

なぜ?WebエンジニアにMacユーザーが多い理由。Macを使うメリットは?

「Macは外観がおしゃれ!」といった意見は置いといて、もっとWebサイト制作の実務的な部分で「なぜWebエンジニア界隈ではMacユーザーが多い?」という疑問の答えが知りたい方のために、実際にWebエンジニアとして1年間働いたWindowsユーザーの私が「ここはMacの方が良いな〜」と思うポイントについてご紹介していきます。
2020.04.13
web制作 困りごとお役立ちメモ

ドロップダウンメニューを親要素の真ん中へ配置する方法【CSSで実装】

ドロップダンメニューを、横幅が可変の(widthを指定していない)親要素の真ん中へ配置するためには、少しだけ工夫する必要が有ります。当記事ではX軸(left:)の指定にcalc()関数を使う方法を解説します。
2020.01.12
web制作 困りごとお役立ちメモ

Bootstrapの使い方、メリット・デメリットも解説!

「ブートストラップって名前は聞いたことがあるけど、何が出来るの?」「一回だけ使ってみたけど、いまいちメリットが分かなかったなぁ…」そんな方のために、今回はWebサイト制作効率化の代名詞とも言える、Bootstrap(ブートストラップ)について解説していきます。
2020.02.09
web制作 困りごとお役立ちメモ

AdobeCC+通信講座購入で学割適用!「たのまな」を買ってみた

「たのまな」でAdobeCCと通信講座をセットで購入すると学割が効くので、他の方法で購入するのと比べて半額近い値段で買う事が出来ます。「在宅ワークや副業でAdobeソフト(Adobe Creative Cloud )が必要になりそう!」「でも値段が高すぎて購入する勇気が出ない!」こんな方にオススメです!
2020.04.17
web制作 困りごとお役立ちメモ

【ドロワーメニュー】デベロッパーツール上だと開くのに、スマホ上だと開かない症状

ドロワーメニューを実装した際に、PC用webブラウザのデベロッパーツールだと問題無く表示されるが、iPhoneのsafari(他の環境は試せていないので不明)だと上手く表示されない症状が発生。原因は、fixedしたヘッダーの中にドロワーメニューのhtmlを記述したことでした。
2020.03.26
web制作 困りごとお役立ちメモ

【CSS】transitionの入れ先を間違うと、思った通りに動かない件 hover編

transitionと:hoverで「カーソルを乗せた時にふわっと明るくなるボタン」を作ったのに、カーソルを離した時だけ一瞬で切り替わっちゃう。今回はこの症状が起こる原因と、解決方法を解説します。
2020.04.17
web制作 困りごとお役立ちメモ

ブラウザ上のカラーコードを抽出!ColorPick Eyedropper

ペイントソフトのスポイトツールの様に、ブラウザの画面上に表示されているカラーコードが抽出出来ればいいのに! そんな方に「ColorPick Eyedropper」というブラウザツールのご紹介です。 ...
2019.12.14
web制作 困りごとお役立ちメモ

無料でPhotoshopのファイル(PSD)を開く方法。ソフトご紹介。

webサイトのコーディング案件では、Adobe社の画像編集ソフト「Photoshop」が大活躍します。 しかしご存知の通り、Photoshopは有料ソフト。これからコーディングを始めようという初心者の...
2020.04.17
web制作 困りごとお役立ちメモ

ブラウザ上に画像を透過して表示!PerfectPixelのご紹介

PerfectPixel(パーフェクトピクセル)はコーディング案件で活躍するブラウザツールです。HTMLやCSSのコーディング結果を表示させたブラウザの上にデザインデータを重ねられるので、コーディング結果とデザインデータの差異が一目瞭然!
2020.01.29
web制作 困りごとお役立ちメモ

英語苦手なプログラマー集合!Google翻訳をアプリの様に使う方法

英語が苦手なプログラマーのみなさま。コーディングで変数やクラスに命名をするとき、適当な英単語が思い浮かばずに検索したことは有りませんか?私はしょっちゅう有ります。Google翻訳無しでは命名もまともに出来ません。そんな私と同じ悩みを抱えている方へ、翻訳に掛かる時間を少しだけ短縮する方法、ご紹介します!
2020.04.17
トップページへ戻る