Web 19件

2021/09/30

CSSがうまく効かないときはここを調べる!ChromeデベロッパーツールでCSSの問題を見つける方法

CSSの問題が起きたとき、Chromeのデベロッパーツールを使って効率よく原因を調査する方法について解説します。CSSに苦手意識を持つ人に参考になれば良いと思います。

2021/08/31

黒い画面が苦手な人にこそ教えたい「Control + R」の便利な使い方

Macのターミナルなどで過去のコマンド履歴を検索できる「Control + R」。便利すぎて最もよく使うショートカットの一つなので、知らない方にはぜひ教えてあげたい!

2021/07/31

ウェブ制作の成果物一覧とその役割

筆者はウェブ制作のフリーランスとして活動しています。ウェブ制作における成果物と、それぞれで定義すべき項目について、身内への情報共有も兼ねて記事にします。

2021/05/31

PCとスマホでレイアウトが違う場合のCSSをじっくりコーディング2021

最近実際のお仕事の現場で実装した、PCとスマホで、要素のレイアウトが異なる場合のCSSコーディングについて解説します。

2021/04/30

Photoshopと実装で見た目が同じにならない話

画像と文字を横並びにしたときPhotoshopと実装で見た目が同じにならないケースをご紹介します。

2021/03/31

多言語サイト案件が多いコーダーがいつも気をつけている点

HTMLコーダーとして、これまで多言語サイト制作に多数関わってきました。この記事では、多言語サイト制作でHTMLコーダーとして必ず意識している点を紹介します。

2021/02/28

サイト名とメニューが横並びのシンプルなグローバルナビをじっくりコーディング

サイト名とメニューが横並びになったシンプルなグローバルナビを先日作りました。そのコーディングの流れをじっくり解説します。

2020/07/30

BEMとSassの「&__Element」記法を使わない派に転向した理由

数年間、BEMとSassの「&__Element」記法を使ってコーディングしていました。しかしあるきっかけでその記法を使わない派に転向したところ、想像していたのとは違うメリットを感じました。その理由などをご紹介します。

2020/05/31

npm はじめの一歩

「環境構築」や「例の黒い画面」が苦手な方でも、MacユーザーもWindowsユーザーも、誰でもnpmを使い始められるための手順をご紹介します

2020/03/24

PCとスマホでレイアウトが違う場合のCSSをじっくりコーディング

PCとスマホで、見出し・文章・画像のレイアウトが異なるデザインデータが支給された場合のCSSコーディングについて解説します。もう「組めない」とは言わせない!

2020/02/29

実践BEM 〜開発環境の構築〜

前回の記事で、フロントエンド設計手法であるBEMを導入するメリットや考え方についてご紹介しました。今回の記事では、BEMを適切に運用していくための開発環境について具体的なコードを使用してご紹介します。

2020/01/23

実践BEM 〜BEM導入の目的と現役で使い続ける運用ルール〜

CSS設計、フロントエンド設計手法としてBEMが広く知られるようになりました。この記事では、BEM歴6年の筆者が、これまでに現場で使ってきて感じたBEM導入のメリットや、現役で使い続けている運用ルールについて解説します。

2019/12/29

スマホサイトでよくみるハンバーガーメニューの開閉ボタンのCSSをじっくりコーディング

メニューが開いているときはバツ印、メニューが閉じている時は3本線のハンバーガーになるボタンのCSSコーディングをじっくり解説します。ボタンの大きさが変わってもきれいなレイアウトを保つためにはひと工夫必要でした。

2019/11/19

CSSの「font-size: 20px;」という指定について調べたら奥が深かった

CSSで普段なんの気無しに使っている「font-size: 20px;」といった指定の挙動を細かく調べてみたら、想像を遥かに超える複雑さでした。調べたことや実験結果を記録します。

2019/11/01

サムネイルが右側に並んだ画像リストのCSSとJSをじっくりコーディング(JS編)

大きな画像の横に、クリックして画像を切り替えるサムネイルが並んだレイアウトのCSS・JSコーディングの流れをじっくり解説していきます。前編のCSS編に続き、本記事ではクリックして画像を変更するJS部分について解説します。

2019/10/31

サムネイルが右側に並んだ画像リストのCSSとJSをじっくりコーディング(CSS編)

大きな画像の横に、クリックして画像を切り替えるサムネイルが並んだレイアウトのCSS・JSコーディングの流れをじっくり解説していきます。前後編に分け、前編の本記事ではCSSについて解説します。

2019/09/24

よくあるグローバルナビのCSSをじっくりコーディング

WEBサイト制作でよくある見た目のグローバルナビのHTMLとCSSをコーディングした際、考えることが予想よりも多くありました。コーディングの流れをじっくり解説します。

2018/04/032018/04/04

gulp-sassのマイナーバージョンが上がったらsassファイルがコンパイルできなくなった

プロジェクトのメンバーから、gulpタスクで行なっているsassのコンパイルができなくなったとの相談を受けた。 起きていたエラーは以下。 SassのControl Directives(@if、@each、@for、@while)や他のmixinの中ではmixin…

2015/01/28

サイトのパフォーマンスの課題を発見し定期的に計測する

先日、HTML5Conferenceに参加してきました。 「2015年これからの日本のWeb…