コーディング上達法・テクニック

だい🥪デザイナー / フロントエンジニア @dai_webp

zennデビューしました📝 HTMLを正しく書く＝SEO対策って考え方は違うよ。 勘違いしている人多いから是非読んで欲しい zenn.dev/dadada/article…

だい🥪デザイナー / フロントエンジニア @dai_webp

VSCodeの超絶おすすめ拡張機能8選 ここで紹介したやつと言語系（html, cssとか）を入れておけば間違いないです🍃 web-guided.com/594/ #デイトラ #web制作 pic.twitter.com/jUSZyKiEVH

拡大

拡大

拡大

拡大

だい🥪デザイナー / フロントエンジニア @dai_webp

CSSのキャッシュが貯まらない魔法のコード 「キャッシュ削除してください」とはおさらば👋 pic.twitter.com/4Ghz9E9K2s

拡大

だい🥪デザイナー / フロントエンジニア @dai_webp

CSS設計で意識することを徹底解説 6,000文字超えの記事になりました📝 ・予測しやすい ・再利用しやすい ・保守しやすい ・拡張しやすい Googleのエンジニアが↑4つが大事って言ってました👀 これができれば脱初心者かも！ ▼更に詳しく web-guided.com/1763/ #デイトラ #WEB制作 pic.twitter.com/brviJcVnSz

拡大

拡大

拡大

拡大

だい🥪デザイナー / フロントエンジニア @dai_webp

コーディング時（後）に意識していることをジャンル別に紹介 ・HTML ・CSS ・JavaScript ・PHP / WordPress ← 今回はこれ ・画像 / その他 pic.twitter.com/tuN1JTRfmS

拡大

拡大

だい🥪デザイナー / フロントエンジニア @dai_webp

「覚えておくと便利なCSSセレクタ」 この辺りを覚えておけば何かと役に立ちます💡 「+」「~」「*」「>」「属性名」はよく使いますね。 「:empty」はたまーーーーーーーに。 「first-line」と「first-letter」は一回も使ったこと無いので覚えなくていいかも笑 #デイトラ #WEB制作 pic.twitter.com/yoLzd12D7O

拡大

拡大

拡大

拡大

だい🥪デザイナー / フロントエンジニア @dai_webp

コーディングの基本6選 ①デザインを綺麗に再現する ②正しいHTMLタグを使う ③対象ブラウザで崩れない ④画面幅変わっても崩れない ⑤スマホでちゃんと動く ⑥画像を圧縮する ①twitter.com/dai_webp/statu… ②twitter.com/dai_webp/statu… ③twitter.com/dai_webp/statu… ④〜⑥はリプ欄 #デイトラ #WEB制作

だい | Webデザイナー&エンジニア @dai_webp

コーディングの基本① 「デザインを綺麗に再現する」 基礎の基礎であり、最も重要な点です。 しかし、これができない人が多すぎます... できるだけで市場価値はグッと上がります。 コーディングが終わったら、デザインデータと数値が正しいか見直す時間を必ず設けましょう。 #デイトラ #WEB制作 pic.twitter.com/R9wptiaw44

2021-11-09 18:45:04

だい | Webデザイナー&エンジニア @dai_webp

コーディングの基本② 「正しいタグや属性を使ってマークアップする」 どのタグを使うか迷うのはすごい分かります。 もし迷ったら、実際に公開されているサイトを参考にするのもいいでしょう。 ▼タグの使い方に迷った時に便利なサイトです webgoto.net/html5/ #デイトラ #WEB制作 pic.twitter.com/QrQL8MWspX

2021-11-10 18:45:04

だい | Webデザイナー&エンジニア @dai_webp

コーディングの基本③ 「対象ブラウザで崩れない」 コーディングする時に、普段使うブラウザ以外で表示崩れがないかチェックしていますか？ ・GoogleChrome ・Firefox ・Safari ・Edge 最低限↑はチェックするようにしましょう⚡ （スマホは実機で確認！） 必要に応じてIEも... #デイトラ #WEB制作 pic.twitter.com/DiPn97Mqlq

2021-11-11 18:47:05

だい🥪デザイナー / フロントエンジニア @dai_webp

コーディングに関するスキルやツールの習得難易度と重要度の図🍃 自分ならこの順番でやる↓ 1. HTML/CSSの基礎 2. Webに関するリテラシーや知識を学ぶ 3. ドメインやサーバーを契約&色々触ってみる 4. jQuery、WP、生のJS、PHP（基礎だけでOK） 5. Sass 6. HTML/CSS極める or JSやWPをより深く pic.twitter.com/2Ldx8LICn0

拡大

だい🥪デザイナー / フロントエンジニア @dai_webp

Webサイトの表示スピードを高速化させる手法「26選」 表示スピードは主に3つの指標で決まります⚡ ・リクエスト回数 ・リクエストした内容のサイズ ・リクエストタイミング ▼高速化させる詳しい手法はこちら web-guided.com/1147/ #デイトラ #WEB制作 pic.twitter.com/ce73hnm0wk

拡大

拡大

拡大

だい🥪デザイナー / フロントエンジニア @dai_webp

jsやjQueryにもっと慣れたい方は「料金シミュレーター」を作ってみるといいですよ💡 要素の取得や表示の切替え、inputタグ系など...様々な処理が必要なのでかなり勉強になります！ この記事に料金シミュレーターのサンプルコードもあります⚡ web-guided.com/1700/ #デイトラ #WEB制作

だい🥪デザイナー / フロントエンジニア @dai_webp

【CSSでランキングの数字と色を作る方法】 counter-increment を使えば地味に色々なことができます💡 CSSで数字（連番）の表示もできるのです！ ▼サンプルコード codepen.io/dadada-dadada/… #デイトラ #WEB制作 pic.twitter.com/Cc8JlLqjKr

拡大

だい🥪デザイナー / フロントエンジニア @dai_webp

チェックボックスをカスタマイズする時に<input>にdisplay: none;は今すぐ辞めましょうって記事です ↑の理由が分からない方は読んでほしい🙏 web-guided.com/1695/ #デイトラ #WEB制作

だい🥪デザイナー / フロントエンジニア @dai_webp

HTMLとCSSを書く時に実は色々なことを考えています。 このように自分で色々考えられるようになったら、脱初心者だと思います💡 コツは「あらゆるパターンを想定する」ことです！ 色々なパーツを用意して、その考え方をブログにまとめるのもありかな... #デイトラ #Web制作 #コーディング pic.twitter.com/R3w1eh3bLl

拡大

だい🥪デザイナー / フロントエンジニア @dai_webp

1分で読めます！ コーディング初心者の方は是非見てほしい！ コーディングする時に ・うまくグループ分けできない ・似たようなCSSを何度も書いちゃう ・最初は綺麗に書けてたけど気づいたらぐちゃぐちゃ みたいな方は必見です！ #デイトラ #WEB制作 pic.twitter.com/34MGwpFHjg

拡大

拡大

拡大

拡大

だい🥪デザイナー / フロントエンジニア @dai_webp

便利なCSS「fillter: drop-shadow」 これを使えば、透過画像のpngやsvgに影を付けれます👻 わざわざPhotoshopとかで影を付けなくてもOK！時短になります！ #デイトラ #web制作 pic.twitter.com/jq5LVm4aPu

拡大

だい🥪デザイナー / フロントエンジニア @dai_webp

【CSSのpositionで要素を中央配置する2つの方法】 画像の2つの方法は是非覚えてください！ ちなみに、vscodeのスニペットに登録して、ぱっと使えるようにしておくととても便利です🍃 web-guided.com/620/ みんなで爆速コーダーを目指しましょう！ #デイトラ #WEB制作 #コーディング pic.twitter.com/nfK9ussZUK

拡大

だい🥪デザイナー / フロントエンジニア @dai_webp

アプリみたいなローディングアニメーションをCSSで作る方法 CSSのanimationで実現できます⚡️ 仕事でやりました...地味に大変だった... 誰でもサクっと実装できるように記事書いたので気が向いたら読んでください🥱 （未来の自分が楽したいだけ笑） web-guided.com/1662/ #デイトラ #web制作 pic.twitter.com/7tj7pTJzLL

だい🥪デザイナー / フロントエンジニア @dai_webp

サイトでよく見る「横スクロールのギャラリー」 あれって、3行のCSSだけで簡単に実装できるのです🍃 （リプ欄にコードイメージあります） ▼実際に動くデモはこちら codepen.io/dadada-dadada/… #デイトラ #コーディング #web制作 pic.twitter.com/0GxvAeo2sU

だい🥪デザイナー / フロントエンジニア @dai_webp

コーダーの皆さん〜〜〜 「フクロウセレクタ」を覚えるとちょっとだけ良い感じのCSS書けるようになりますよ🥱 箇条書きのリストとか同じ要素が繰り返してる系で役に立つ書き方です💡 #デイトラ #web制作 eclair.blog/usage-owlselec…

だい🥪デザイナー / フロントエンジニア @dai_webp

CSSが効かない時はだいたいこんな順番で確認してます🍃 1. HTMLとCSSのクラスが同じかをチェック（片方をコピペする） 2. 他のスタイルが効くかを試す 3. CSSのスペルミスをチェック 4. そもそも確認してるHTML要素は正しい？違うとこ見てない？ 5. CSSファイル読み込まれてる？ #デイトラ #WEB制作

だい🥪デザイナー / フロントエンジニア @dai_webp

CSSで「塗り」と「線」の矢印を作る方法 やり方さえ覚えてしまえば、サイズや色を自由に変えられるのでかなり役に立ちます。 ぜひ覚えましょう💡 （VSCodeのスニペットに登録しておくのもいいですね） ▼サンプルコード codepen.io/dadada-dadada/… #デイトラ #Web制作 #コーディング pic.twitter.com/15tvIgigXW

拡大

だい🥪デザイナー / フロントエンジニア @dai_webp

「JavaScript ○○ 書き方」のように、jsの書き方をググった時に、jQueryのコードが出てきてイライラすることはありません？？ 私はめっちゃあります😶笑 そういう時は、「JavaScript ○○ 書き方 -jquery」のように、 -除外ワード を入れてググると、そのワードが検索結果から除外されます💡

だい🥪デザイナー / フロントエンジニア @dai_webp

コーディング勉強中の方は時間がかかってもこの仕組みは理解するべきです ・GoogleMapなどiframe系を縦横比率維持してレスポンシブ化 ・<img>を背景画像の background-size: cover みたにする こんなことができるようになります🙌 CSSの基礎をちゃんと勉強すれば理解できるはず！🙃 #デイトラ twitter.com/tips__web/stat…

いちくん@Webエンジニア @tips__web

padding-topを％で指定すると、親要素の横幅に対する相対値になります #デイトラ pic.twitter.com/VIjzvx5mmd

2021-09-13 22:38:29

だい🥪デザイナー / フロントエンジニア @dai_webp

コーディングを効率よくするには、 コメントをめっっっっっちゃ書くことです。 一週間後、自分が書いたコードはほとんど覚えてません👻笑 #デイトラ #コーディング #Web制作