2022年、Web制作に役立つ記事まとめ

こんにちは。もう今年も終わりますね。そこで僕が今年書いた記事の中で、特に多く読まれた記事をまとめたいと思います。

今年の振り返りも兼ねて、ぜひ見ていってください。

Sass、別に言うほどいらない説

今年の初めに書いた記事ですね。いろんなスクールや教材で、やたらと初学者にSassをやらせるものが多いですが、はっきりいってやんなくていいです。というかCSSちゃんと書けない人がSass使って何か意味ある?と思っています。

まずはHTML/CSSをちゃんと書けるようになりましょう。

【コピペ可】background-attachment: fixed;がiOSのSafariで効かない問題を完全に解決する【CSSのみ】

パララックスを実装しようすると、ほぼ100%の人が「iOSで動かない」問題に出会うのではないでしょうか。それを解決する方法です。

ちなみに海外の開発者もこの件にはお怒りのようで、「アップルは固定された背景はイケてないと判断した、それが全てだ。アップルは神だ、覚えておけ。」とブチギレていました。笑

【WordPress最適化】適切にサーバーを選んで、サイトの表示速度を上げる【ConoHa】

こちらはそれほど多く読まれたわけではないのですが、ぜひ知ってほしいことなので紹介します。

Web制作をやっている方は大抵WordPressによる開発に関わると思います。その際に表示速度を上げることが課題になりがちなのですが、サイトのコードを改善するだけでなく契約するサーバーも気を使うことで大きな効果を得られる場合があります。

選択肢としてぜひ知っておいてください。

【違いを徹底比較】Web制作とWeb開発は似て非なるものである

昨今Web制作とWeb開発という単語を耳にすることが多いと思いますが、それぞれどういう特徴があるのか、そしてその違いはどこなのかを解説したものです。

言葉は似ていますが、やることは全く違うと言っても過言ではないでしょう。ここを取り違えると学習を進めた先に「あれ?思っていたのと違うな・・・」となりかねないので注意して選びましょう。

余白はいつ生まれるのか

HTML/CSSのコーディングをしていると、永遠の課題なのが余白の扱い方ですよね。その余白について徹底的に考察しました。

これを読めば余白の付け方に困らなくなるかもしれません。

関連記事の「絶対に間違えないmarginとpaddingの使い分け方」も合わせてご覧ください。

Bootstrapはガチでいらない

これもSassと同じような理由で書きました。Web制作を学ぶならBootstrapをやる意味は全くと言っていいほどありません。普通にサイトを作る場面では出番がないからです。

なんでやたらBootstrapをやらせる人たちがいるんですかね?

教材だけでは分からない、案件でよく要求される細かいコーディングのテクニック12選

実際に案件をやる中で、あまり言及されないけど大事なテクニックを集めました。こういうところで差が出ると思っているので、ぜひ覚えてほしいテクニックです。

この記事をパワーアップさせたものをzennで公開しているので、そちらも合わせてご覧ください。

教材だけでは分からない、案件でよく要求される細かいコーディングのテクニック30選 + α
フリーランスのフロントエンドエンジニアとして6年間、サイト制作やWebアプリケーション開発の案件に携わってきた中で「これは伝えたい」と思ったコーディングのテクニックをまとめました。 今回はHTML/CSSに関することに絞っています。特に教材にはあまり載っていなかったり、知らない

レスポンシブ対応する時に、どうしても綺麗に要素が収まらない時のほぼ完璧な対処法

こちらはclampというCSSの関数を使ったテクニックを紹介しています。

どうしても綺麗にレスポンシブできないデザイン、出会ったことありますよね。そんな時に使える方法です。

jQuery、今までありがとう

長年お世話になったjQueryですが、そろそろ本当のお別れの時が来たのかもしれません。

その理由と、移行先の候補の技術を紹介しています。

単なるHTML/CSSだけのプロジェクトでもホットリロードする方法

Next.jsなどのJavaScriptフレームワークを使っていると初めから組み込まれているホットリロード(コードを更新したらブラウザも自動でリロードされる)ですが、単なるHTML/CSSのプロジェクトでも使いたいですよね。その方法です。

コンテンツ幅の中の特定の要素を画面いっぱいにするスマートな方法

言葉だと説明が難しいのですが、要するにこういうやつです(下画像)。

これを楽に実装する方法です。

【position: absolute なし】display: gridを使って要素を重ねる

HTMLにおいて要素を重ねるといえばposition: absolute;でしたが、実はdisplay: grid;でも重ねを実現できます。その方法を解説しています。

【2023年へ向けて】Web制作・開発に関わる人が受けると良い資格・検定まとめ【国家検定もあるよ】

最近Web制作・開発周りで良さそうな検定を見つけまして、他にも受けると良さそうな検定をまとめました。

まとめ

というわけで今年の記事まとめでした。

引き続き来年もよろしくお願いします。

コメント

タイトルとURLをコピーしました