Web制作ラボ

Web制作ラボ

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

最近、Web制作のコーディングに利用するテキストエディタをVSCodeに変更したのですが、起動した...
Web制作ラボ

初心者コーダーがデザインデータを見る時に気をつけたいこと3つ

Webサイト制作のコーディングに必要なスキルといえばHTML、CSSの知識ですが、実はデザインデー...
Web制作ラボ

Photoshopで「フォントが見つかりません」と表示されたらやる事まとめ

Photoshopやillusratorで自分以外のデザイナーが制作したデザインデータを開封すると...
Web制作ラボ

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

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

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

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

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

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

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

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

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

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

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

ペイントソフトのスポイトツールの様に、ブラウザの画面上に表示されているカラーコードが抽出出来ればいい...
Web制作ラボ

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

webサイトのコーディング案件では、Adobe社の画像編集ソフト「Photoshop」が大活躍します...
Web制作ラボ

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

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

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

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