webliker@HTML&CSSの教材ギャクサン

月間15万人が利用するwebliker（ウェブライカー）の公式アカウントです。プロの現場で役立つHTML・CSSの知識お届けします。
サイト運営者（@webliker_adm）が直接サポートする学習教材「ギャクサン」を提供中！無料利用でそのわかりやすさを是非体感してください。

[webliker@HTML&CSSの教材ギャクサン @webliker_info]

<img>関連で覚えたい、ワンランク上のコーダーになるための知識をまとめました✍

https://t.co/KgxNMj8B1d
全部で8つです。ぜひ学習してみてください！

#駆け出しエンジニアと繋がりたい
#Web制作
#webデザイン

[webliker@HTML&CSSの教材ギャクサン @webliker_info]

Figmaからコーディングする方法を総まとめしました👍
https://t.co/KfdZ6gwfp8

・フォント
・横幅、高さ、位置
・塗り、線
・余白・距離
・アニメーション
・エフェクト
・書き出し
必要な値を全て把握することができます！

#駆け出しエンジニアとつながりたい
#駆け出しwebデザイナーと繋がりたい

[webliker@HTML&CSSの教材ギャクサン @webliker_info]

<head>〜/head>の中に書くコードの早見表

https://t.co/8Zx4oYYZjz
👆コピペ用テンプレコードや各コードの解説はこちらの記事をチェック

#駆け出しエンジニアとつながりたい
#駆け出しwebデザイナーと繋がりたい
#Web制作

[webliker@HTML&CSSの教材ギャクサン @webliker_info]

【Flexbox】と【CSS Grid】の使い分けをよくあるレイアウトベースでまとめました。

👇詳しくはこちらの記事で解説しています。
https://t.co/dAaLFIkY42

[webliker@HTML&CSSの教材ギャクサン @webliker_info]

CSS Gridを使いこなせていますか？

flexと使い分け、実務で自信をもって利用するための渾身の記事を執筆しました✍️

課題を通して体系的に理解することができます。

▼入門編
https://t.co/uszO5959bW

▼実務編
https://t.co/0VudFGRK0V

[webliker@HTML&CSSの教材ギャクサン @webliker_info]

著名SNSやサービスのメインカラーコードがコピペできるサイト

SNSボタンを作成する時に重宝します👍

https://t.co/xUMXvh1up0

[webliker@HTML&CSSの教材ギャクサン @webliker_info]

キーワードの競合性を考慮し、クエリに対してどんなコンテンツ（アンサー）を提示できるかが基本なので、そういった言葉をどこかで聞いたら警戒しましょう⚠️

✅サーチコンソールでエラーが出ていない
✅読み込み速度が速い
✅SSL対応できている

といった方面の方が実装面で言えば大事です👍

[webliker@HTML&CSSの教材ギャクサン @webliker_info]

「SEOに強いコーディング」について

実はそんなものは存在しません😅
逆に「「SEOに弱いコーディング」は存在します。

適切にタグを使ったからといって強くなるわけではないんですよね。

[webliker@HTML&CSSの教材ギャクサン @webliker_info]

font-sizeのrem指定の以外なデメリット💦

rem指定は推奨ではありますが、特性を理解しておかないと思わぬところでレイアウト崩れを起こすことがあります。

可変されることを想定して対応できるようにCSSを組みましょう👍

#駆け出しwebデザイナーと繋がりたい

[ヒデ（web兄さん）@webliker運営 @webliker_adm]

初学者向けの良さげなサイト見つけました。
https://t.co/8ATv1n7V1J

同一のシンプルな条件でプロパティの値ごとの違いがわかりやすく一覧表示されているので、CSSをさらっと理解するにはうってつけっぽいです👍

[webliker@HTML&CSSの教材ギャクサン @webliker_info]

@phoo_ts104 ありがとうございます！

[webliker@HTML&CSSの教材ギャクサン @webliker_info]

@ykllog 試してくださりありがとうございます！
Emmetなかなか覚えられないのわかります（笑）
僕自身もずっと使っていない分使いこなせていないのでまた覚えることに特化した記事書きたいと思います👍

[webliker@HTML&CSSの教材ギャクサン @webliker_info]

ブラウザキャッシュが原因による

「本番アップしました」
　↓
顧客「更新されてないです」
　↓
「キャッシュクリアしてください」

から解放されるための記事書きました✍

詳しくは以下の記事で解説しています
https://t.co/rSX4URGtam

[webliker@HTML&CSSの教材ギャクサン @webliker_info]

Emmetを使うと以下のように閉じタグのコメントアウトを自動挿入できます。

▼記法
https://t.co/T30LH8gV9t|c
↓
▼出力
<div class="name"></div>
<!-- name -->

ただ、入力の手間があるので自動挿入されるように設定する方法を解説しました。

https://t.co/0qiAFGhxVE

[webliker@HTML&CSSの教材ギャクサン @webliker_info]

VScodeで「このコード毎回書くの面倒だから１発で出せたらなあ」と思ったことありませんか？

✅CSSのコメント
✅デバッグ関数

など好きな文字列を超簡単にショートカットキーに登録可能です😌

#駆け出しエンジニアとつながりたい
#駆け出しデザイナーと繋がりたい

https://t.co/6EC2MTNvAR

[webliker@HTML&CSSの教材ギャクサン @webliker_info]

✏️HTMLのコメントアウトについて更新

特に閉じタグのコメントアウトはいくつかパターンがありますが、以下がオススメ👇

<!-- content -->
<div class="content">
~~~
~~~
~~~
</div>
<!-- / .content -->

「/」が閉じていると認識しやすい&書きやすい😌

https://t.co/lAhxF1PxpC

[webliker@HTML&CSSの教材ギャクサン @webliker_info]

@SIGNET_mai どうかXDで行間の部分だけでも早くアプデしてくれると嬉しいですね😂
読んでくださりありがとうございます！

[webliker@HTML&CSSの教材ギャクサン @webliker_info]

@maiineworks たしかにデザイナーさんとコーダーさんがお互い歩み寄ることで解決できるものが多いですもんね！
読んでくださりありがとうございます👍

[webliker@HTML&CSSの教材ギャクサン @webliker_info]

Perfect Pixelを使ったピクセルパーフェクトの対応方法について執筆しました。

✅Perfect Pixelの使い方
✅デザインデータとズレる6つのあるあるの解決法
✅ピクセルパーフェクトの実務での対応範囲の判断

など初学者向けに7000文字以上で徹底的にまとめています👍

https://t.co/QnuKxsqVts