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

Pikagi

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

@dai_webp

2,724

Followers

394

Following

329

Media

1,629

Statuses

Web業界8年目のデザイナー / フロントエンジニア | 実績 → | Webサイトの「パーツ」を集めたデザインギャラリー → | Zenn →

↓運営サービスのリンクまとめました🍺

https://t.co/IFzD6A5aKd

Joined June 2020

Don't wanna be here? Send us removal request.

Pinned Tweet

@dai_webp

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

1 year

「実務ですぐに使える」をコンセプトに、 Web制作全般の知識を学べる書籍をリリースしました⚡️ HTMLやCSSはもちろん、JSの効率の良い学び方や作業速度を速くするコツなど、技術書では学びにくい実務ベースの内容をたくさん紹介しています！無料で読める章もあります。

Tweet card media

明日からの業務ですぐ使える！Web制作の教科書2023

Web制作には様々な知識やスキルが必要で、そのほとんどは実務（職場の先輩や実際のプロジェクト）で学ぶと思います。本書では、実務で学ぶような知識やスキルにフォーカスを当てて、Web制作に関する実務ベースの様々な内容を紹介していきます。私のこれまでの経験（実務7年以上）をもとに、

2

4

89

Last Seen Profiles

@_H1maz1n1

@godcrazy14

@florblanca2010

@MrJohnRichard2

@decla_evely

@jAn_lxv

@MisterRafkat

@ai_TSF_MC

@Albina4697

@TheedivineSade

@jadsms11

@HildinSa

@m1mosa_prophet

@m4tuzalen

@GaMes843

@ioncuervasm

@MerceRoach

@MenzerMenz

@istrihipsex

@kirita_producer

@prendente1

@WolfgangMueckst

@ColoradoWXNut

@ThorethDGB

@clivetherock

@Y729B91f8wK37

@CukiPep89782505

@Bamasnap

@naga_sai721

@ViraKarshan

@9wbnIC2hU945753

@TieflingMelissa

@Atlanta_Phoenix

@tante_nikmat

@LeeclueVlYAx

@tante_nikmat

@dai_webp

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

3 years

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

Tweet media one

Tweet media two

Tweet media three

Tweet media four

3

136

1K

@dai_webp

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

1 year

全てのWebデザイナーに知っておいてほしいこと ※理由はリプ欄 1️⃣font-sizeは10px未満にしない 2️⃣フォームのfont-sizeは16px未満にしない 3️⃣グレー色を黒の透明度で作らない 4️⃣色のバリエーションは増やしすぎない 5️⃣小数点は出さない 6️⃣Web上で使えるフォントのみ使う

1

151

1K

@dai_webp

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

2 years

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

Tweet media one

1

116

1K

@dai_webp

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

2 years

数年前からコツコツ運営している Webサイトの「パーツ」を集めたギャラリーサイトリニューアルしました💡 WPを辞めたので以前より超高速化。掲載数は2,000を超えました！見出し、図表、スライダーなどUIデザインの参考に是非使ってみてください！ ▼サイトはこちら

Tweet media one

Tweet media two

Tweet media three

Tweet media four

3

112

987

@dai_webp

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

1 year

世界観がすごすぎる制作会社のサイト見つけた🕊️ この世界観を考えられるだけでもすごいし、それを実際にデザインで再現するなんてもっとすごい... そして最初はどんな制作会社なんだろうって見てたらまさかの個人事業主だった...個人でこのレベルの作ったの...

Tweet media one

Tweet media two

Tweet media three

Tweet media four

4

70

944

@dai_webp

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

1 year

誰かにコーディングをしてもらう時は、色やフォント情報とコンポーネント専用のアートボードを作るようにしています🎨 1枚目の📃に書いてること・使っている全ての色・フォント・WebフォントのURLとWeight ・本文と見出しのスタイル・文字系に関するメモ（行間や文字間など）・アニメーション指示

Tweet media one

Tweet media two

1

68

696

@dai_webp

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

2 years

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

Tweet media one

2

51

640

@dai_webp

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

1 year

全コーダーにお願いしたいこと🙏 CSS設計とかよりこれらを完璧にしてくれたほうが100倍評価高いよ。・画面幅やブラウザを変えても崩れない・SPの表示確認はスマホでやる・インデントは揃えて不要な記述は削除・画像は圧縮・メディアクエリはMin, Max片方に統一・上下のmarginも片方に統一

1

84

633

@dai_webp

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

2 years

SNS広告のバナーに特化したデザインギャラリーサイト作りました🎨 ほぼ自分用に作ったから機能は必要最低限だけど表示速度爆速です。よかったらブクマしてくださいな（定期的に更新します現在320枚） #Web 制作 #web デザイン

Tweet media one

Tweet media two

Tweet media three

Tweet media four

1

61

597

@dai_webp

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

1 year

JavaScriptが苦手な人はJSの根本的な理解ができていないことが多い。まずはオブジェクト・プロパティ・メソッドの理解を深めるのがおすすめです。これを理解してからJSが一気に簡単になった🙌 この動画超分かりやすいからおすすめ

Tweet card media

【JavaScript入門 #3】オブジェクト・プロパティ・メソッドについて理解しよう【ヤフー出身エンジニアの初心者向けプログラミング講座】

JavaScript講座の第4回では実際にコードを書いています → https://youtu.be/y5_rULRxYuY🙇‍♂️ お詫び動画内で「オブジェクト」と「オブジェクト指向」を混同させる表現をしてしまっておりますが、実際は別物でございます。お詫びして訂正いたします。申し訳ございませんでした。また別途...

www.youtube.com

0

62

599

@dai_webp

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

2 years

WordPressで不正アクセスされる仕組みの例

Tweet media one

Tweet media two

Tweet media three

Tweet media four

2

81

602

@dai_webp

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

1 year

Web歴浅めの人と話す時に共通して思うのは、専門用語が通じないということ技術的なことを教えようとしても、周辺の用語も教えなきゃいけないから教える効率が悪くなってしまうだから座学的な知識もちゃんと覚えてほしいな ↓現場でよく使う専門用語まとめ

Tweet media one

Tweet media two

Tweet media three

Tweet media four

1

67

536

@dai_webp

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

1 year

コーダーができるサイトの高速化10選なかなかボリューミーな内容になっているので是非読んでみてください💡 ・具体的な高速化の手法10個・サイトの表示速度の決まり方・速度の計測方法などを解説しています ▼記事はこちら

2

62

506

@dai_webp

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

3 years

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

Tweet media one

0

33

435

@dai_webp

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

1 year

HTML/CSSだけで食っていける人は、・デザインを忠実に再現できる・画面幅や端末が変わっても崩れない・要件把握が的確＆ミスが少ない・コミュ力高め・疎い技術（JSやWP）を使うことになっても自分で解決できるみたいな人で、決してコード綺麗！CSS設計できる！とかじゃないんだよね

2

29

408

@dai_webp

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

1 year

私のコーディング時のルールや意識していることをまとめた記事を書きました💡 ▼目次 1. 作業環境 2. 実装を始める前に 3. ディレクトリ構成と画像まわり 4. HTMLでマークアップ 5. CSSでスタイリング 6. Sassの運用ルール 7. JavaScriptの実装ルール 8. PHPで効率化

Tweet card media

【全30項目】コーディング時のルールや思想（HTML/CSS/Sass/JSなど）

1

40

387

@dai_webp

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

1 year

なんで経験が浅い人ほどremやvwを使いたがるのだろう。レスポンシブやSP実機で崩れるならシンプルにpxか%使いなって。基本はpxで、画面幅いっぱい系は%にしてmax-widthとmin-widthを組み合わせればだいたいどうにかなるんだから。

1

28

380

@dai_webp

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

3 years

「レイアウトが単調...いつも同じになっちゃう...」という方は是非見てください🍃 このような悩みを持つ方は、毎日色々なサイトを見て、良いと思ったデザインはスクショしていつでも見れる状態にしておくと良いと思います。 #デイトラ #WEB 制作 #web デザイン

Tweet media one

Tweet media two

Tweet media three

Tweet media four

2

24

344

@dai_webp

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

3 years

便乗して...逆バージョン作ってみました🙏 「デザイナーが不満に思うコーディング後のサイト」デザイナーでもコーダーでも不満の理由って結局は・スキル不足・確認不足・コミュニケーション不足なだけなので、まずは「確認」と「コミュニケーション」を改善するべきだと思う🙃 #デイトラ

Tweet media one

@showheyohtaki

ショーヘー@デイトラ代表 | 受講生25,000人突破

3 years

WebデザイナーのためのTips🎨 コーダー目線で『コーディングしにくい』デザインの特徴を書きました。こういうカンプが送られてくるとコーディング側は萎えます😅 「私のデザイン作りにくくないかな...」と不安な方は、ぜひ一度↓の項目をチェックしてみてください！ #web デザイン #デイトラ #web 制作

Tweet media one

3

211

2K

2

54

357

@dai_webp

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

2 years

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

Tweet media one

2

28

354

@dai_webp

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

3 years

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

Tweet media one

Tweet media two

Tweet media three

Tweet media four

0

22

290

@dai_webp

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

3 years

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

Tweet media one

Tweet media two

Tweet media three

Tweet media four

1

27

289

@dai_webp

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

3 years

【Photoshop 便利Tips】一瞬で「曇り空」を「青空」にする方法「編集 > 空を置き換え」だけです☁️ 支給素材が曇っていたり、雲の配置を変えたい時などに使えます。昔は空の部分を自分で選択して、雲のブラシや他の写真を合成してましたね... #WEB 制作 #web デザイン #デイトラ

Tweet media one

0

27

273

@dai_webp

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

2 years

コーディング初心者はこういうの意識するだけでも、結構レベルアップすると思う（コードレビューしてて思ったことをぱっと書いただけなので、もちろんポイントは他にもたくさんあります）

Tweet media one

0

17

266

@dai_webp

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

1 year

<a>の中に<a>があるデザイン。どうマークアップすればいいか未だに最適解が分からないから誰か教えてほしい... これくらいだよね選択肢は... ・全体を<a>、中のリンクを<button> ・全体もリンクも<button> ・全体を<div>とか、中のリンクを<a> ※divとかbuttonにした場合はjsで遷移させる

Tweet media one

3

19

283

@dai_webp

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

2 years

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

Tweet media one

1

26

258

@dai_webp

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

3 years

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

Tweet media one

Tweet media two

Tweet media three

Tweet media four

1

22

238

@dai_webp

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

1 year

Webサイトの「パーツ」を集めたデザインギャラリー Modulesss...をアップデートしました！ ▼アプデ内容レイアウトを自由に変更できるようにしました。使っているPCの画面幅に応じて見やすいカラム数にできます。（ページ遷移しても引き継げます） ▼サイトはこちら

0

24

260

@dai_webp

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

2 years

デザイン作るときはこんな感じでアートボード使ってます・実際に作業するアートボード・素材とか置くスペース・イメージサイトいくつか・逆にイメージではないサイトもいくつか・仕様とか要望をまとめてるエリア特に良い例・悪い例を隣に置いておけば、トンマナ合っているかどうか一目瞭然に💡

Tweet media one

0

19

240

@dai_webp

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

2 years

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

Tweet card media

HTMLを正しく書いてもSEO対策にはならないお話

0

30

219

@dai_webp

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

3 years

有料note第二弾公開しました⚡️ 初心者が絶対に覚えるべき「40」のコーディング知識・「Web制作全般に関する知識」と「コーディングに関するスキル」がテーマ・4つのデータダウンロード可能・500円🪙 ・無料でいくつかの内容が読めます・40,000文字越えめっちゃ長いです

Tweet media one

Tweet media two

Tweet media three

Tweet media four

3

10

196

@dai_webp

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

3 years

Notionがついに日本語化！（ベータ版）今朝Notionからメールが来てました⚡️ 今はPCのみとのこと Notion使ったことない人は絶対使うべき！タスク管理からプライベートのメモまで何でもできる超万能ツールです💡 #デイトラ #Web 制作 ▼Notionとは

Tweet media one

Tweet media two

Tweet media three

Tweet media four

0

26

187

@dai_webp

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

2 years

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

Tweet media one

Tweet media two

1

10

188

@dai_webp

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

3 years

コーダーの方は必見！ GoogleChromeのバージョンを94にアプデすると、デベロッパーツールが「日本語」になります⚡ デベロッパーツールを開いたら画面上部にメッセージが出るので、「Switch DevTools to Japanese」を選択するだけ！ #デイトラ #WEB 制作

Tweet media one

1

15

184

@dai_webp

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

3 years

【クラウドソーシングの提案のコツ】ココナラなどの「提案のコツ」を色々な方が解説してると思いますが、私は少し違った視点で解説してみました。正直こういう系の提案は「面倒くさがらなかったもん勝ち」だと思います。 #デイトラ #Web 制作 #web デザイン

Tweet media one

Tweet media two

Tweet media three

Tweet media four

3

10

173

@dai_webp

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

2 years

Web制作で役立つツールやサービスを紹介するサイトを作りました💡 Next.js × Newt で制作。爆速！掲載サイトは150以上（随時更新予定）便利ツールやおすすめアプリ、学習に役立つサイトなど幅広く掲載👀 ブックマーク代わりに是非使ってみてください！ ▼サイトはこちら

Tweet media one

Tweet media two

Tweet media three

Tweet media four

1

25

193

@dai_webp

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

1 year

WordPressを実務でゴリゴリ使ってる人の意見聞きたいんだけど、ブロックエディタで編集できるように開発をしないで、テーマ内のphpファイルにhtml直書きする昔ながらの手法で開発するのってそんなに良くないことですか？こう思う理由→

7

19

200

@dai_webp

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

2 years

width: fit-content もっと広まれ...！ block要素でも自分自身の大きさになれるから、中央寄せしたい時に親要素flexとかしなくてすむ。 canIuse的にも問題なさそう。

Tweet media one

Tweet media two

0

23

195

@dai_webp

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

2 years

Adobeさん、本格的にFigmaを推し出してきた。

Tweet media one

0

34

187

@dai_webp

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

1 year

コーディングをする時に・うまくグループ分けできない・似たようなCSSを何度も書いちゃう・最初は綺麗に書けてたけど気づいたらぐちゃぐちゃみたいな方は是非参考にしてみてください💡

Tweet media one

Tweet media two

Tweet media three

Tweet media four

0

21

186

@dai_webp

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

2 years

【コーディングするときに気をつけるポイント】他にも無限にあるけど先日他人のコーディング引き継いだ時に思ったこと個人的よく見るパターン・vwや%を使わなくてもいいとこで使って崩れる・width, height固定→レスポンシブで崩れる・margin, paddingが何重にもなってて何が効いてるか分からん

Tweet media one

Tweet media two

0

25

188

@dai_webp

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

11 months

最近Sassの書き方で思っていること。きっと自分の他にもこう思っている人いるはず...🫠

Tweet media one

6

15

184

@dai_webp

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

1 year

ポートフォリオリニューアルしました🍃 メインビジュアルとスキルの図がお気に入り。 MV画像はAIのMidjourneyで生成して、p5.jsでちょっとした動きを付けてみました。正直普段ポートフォリオ一切使わないけど、唯一自由に作れるサイトだから作るの楽しい。

2

10

173

@dai_webp

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

2 years

Webデザイナー、コーダー、エンジニアの正社員募集中です！・10〜20人規模の東京の企業・フルリモートで働ける・働く時間もほぼ自由・業界歴1, 2年の新人枠もありなど... カジュアル面談もできるので、興味ある方はDMお願いします🙇‍♂️

1

11

155

@dai_webp

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

3 years

初心者コーダーの方へ... ・デザインを綺麗に再現する・正しいHTMLタグや属性を使う・対象ブラウザで崩れない・画面幅変わっても崩れない・スマホでちゃんと動く・画像を圧縮してファイル名を綺麗に付けるもし私が仕事を頼むなら、↑の内容で判断します😶 jsやwpより大事 #デイトラ #web 制作

2

6

144

@dai_webp

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

3 years

PC/SPで画像を切替える時に、display: noneで切り替えていませんか？これは辞めましょう！！！ PC/SPの画像どちらも読み込まれるので、その分サイトが重くなります（PCレイアウトの時にSP画像も読み込まれる） PC/SPで画像を切替える時は<picture>要素を使いましょう💡 #デイトラ #web 制作

Tweet media one

Tweet media two

0

9

132

@dai_webp

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

2 years

デザインやコーディングする時の作業フォルダはこんな感じでやってます💡 0_my　　契約書とか 1_client　クライアント提供資料 2_design　デザインデータ 3_develop　コーディングデータ 4_fix　納品物

Tweet media one

1

8

145

@dai_webp

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

3 years

実績が少ない方は必見👀 ポートフォリオに載せる実績は以下のように作るのがおすすめ！デザイナー🎨 ⭕クラウドソーシングのコンペを題材にする ❌架空サイトを題材にするコーダー💻 ⭕配布されているデザインデータをコーディング ❌模写コーディング #デイトラ #WEB 制作

Tweet media one

Tweet media two

0

6

110

@dai_webp

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

3 years

超個人的意見！コーダー目線で考える、辞めてほしいデザインデータの作り方。明らかに違う色なら分かるけど、微妙な色の違いは予め言ってくれないと気づかないよ...😶 だから自分でデザインデータ作る時は、透明度やレイヤー効果で色の制御は絶対にしない。 #デイトラ #WEB 制作

Tweet media one

Tweet media two

2

4

97

@dai_webp

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

3 years

WordPressの勉強・実案件に使える「初期構築要テーマのテンプレート」を作りました⚡ 色々な機能が実装済みなので、開発工数が格段に短くなります！勉強中の方は、実装済みのコードを触れるので直感的にWordPressを学べます！ぜひ使ってみてください！ #WEB 制作

Tweet media one

Tweet media two

Tweet media three

Tweet media four

6

6

95

@dai_webp

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

2 years

scroll-behavior: smooth を使ったお手軽スムーススクロールの時に、固定ヘッダーだとジャンプ先でヘッダーと被っちゃう問題。 scroll-padding-top: ◯◯px を使うと、指定した値だけスクロール位置をズラせます。便利⭕️

0

9

106

@dai_webp

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

3 years

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

Tweet card media

フクロウセレクタで余白を最小限の記述で済ませるCSSテクニック

今回は、ワンランク上のCSSのテクニックを身につけるために、フクロウセレクタをご紹介します。フクロウセレクタ(owl selector)は要素の間隔を設定する際に重宝するセレクタです。繰り返し要素が並ぶようなデザインの時 ...

1

11

94

@dai_webp

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

2 years

画像やCSSのパスは基本的には「絶対パス」のほうがおすすめです。相対パスで書いてると、第二階層、第三階層...と階層が変わるたびにパスを修正しなきゃいけないので。ページの階層が深いと、src="../../../../img/xxxxx" みたいに超絶ややこしくなっちゃう🤮 #Web 制作 #デイトラ

Tweet media one

Tweet media two

2

9

99

@dai_webp

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

2 years

Google検索で「JavaScript ○○ 書き方」のように、生のJSの書き方を調べたいのにjQueryばっか出てきて、違う、それじゃない...ってよくなりますよね☹️ そういうときは「JavaScript ○○ 書き方 -jquery」みたいに検索をすると、jQueryを除外して検索してくれます！

2

4

91

@dai_webp

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

3 years

コーディング案件着手前に聞くべきこと💡 ・データ形式・PC/SPどちらも貰えるか・対象ブラウザ・ブレイクポイント・コーディングルール・スケジュール・テストアップ方法・納品形式・原稿や画像の支給タイミング・リンク先・連絡が取れるor取れない日時 #デイトラ #Web 制作

1

3

92

@dai_webp

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

1 year

久々の投稿...そして記事を書きました。 HTMLコーダーの未来〜AIやノーコードとどう向き合うべきか〜 AIやノーコードが生まれる中、コーダーはどう向き合うべきか、将来コーディングは無くなるのか、などについて結構真剣に考えてみました🍃

Tweet card media

HTMLコーダーの未来〜AIやノーコードとどう向き合うべきか〜

0

11

99

@dai_webp

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

2 years

jsやらSassやらWordPressやら勉強するより、まずは「CSS設計」を勉強しましょ。でもその前に「デザインを忠実に再現できる」ようになりましょ。コツコツレベル上げしないで飛び級しようとするから途中で挫折するのよ🫠

0

3

77

@dai_webp

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

1 year

CSSを書く時に無意識にしていることをまとめた記事

Tweet card media

脱初心者！CSSを書く時に意識するべきこと

CSSの書き方は千差万別です。コーディングを学べる教材やスクールでは、CSSの基本的な書き方（横並びならflexを使うなど）はもちろん解説されていますが、実務でコーディングをする際に「気をつけるべき

2

11

88

@dai_webp

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

3 years

☹️コーディングが上達しない人「デザイン通りにできた！コードの綺麗さは気にしないぜ！」 🙂上達する人「デザイン通りにできたけどコード見にくいかな？無駄が多いかも...」 ↓ ぐぐる ↓ 「命名規則なんてあるんだ！使ってみよう」 ↓ 今度はここが気になる...の繰り返し #デイトラ #Web 制作

0

4

85

@dai_webp

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

3 years

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

1

1

81

@dai_webp

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

3 years

新しく追加される予定の絵文字（一部）溶けてる子、かわいい。 iOS 15.1 から使えるようになるらしい🙂

Tweet media one

Tweet media two

Tweet media three

Tweet media four

2

22

84

@dai_webp

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

3 years

Web業界5年目の24歳フリーランスが「役に立つTips」を発信しています🕊 🎨デザイン 💻コーディング 🍃フリーランス 💡小技・効率化 ✏️実績（外部サイト）

Tweet card media

ITDクリエイティブ事務所

Web制作における様々な作業を一貫して行えます。要件定義、Webデザイン、フロントエンド開発、サーバーサイド開発、保守運用…など。あらゆる知見を備えているので、Webに関することであればなんでもお気軽にご相談ください。

itd-creative.netlify.app

1

0

75

@dai_webp

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

1 year

ホバーが有効な端末にのみ、:hoverを適用させる方法。 any-hoverを使うことで、スマホなどホバーが効かない端末には:hoverが適用されないようにできます。タップした時やスクロールした時にボタンに触れたりなど、予期せぬホバーが発火するのをこれで防げる！

Tweet media one

0

5

88

@dai_webp

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

3 years

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

Tweet media one

0

6

76

@dai_webp

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

3 years

GoogleChromeで絶対に覚えたいショートカットキー作業爆速になります🤯 閉じたタブを開く：⌘ + Shift + t 左のタブに移動：⌘ + Option + ← 右のタブに移動：⌘ + Option + → タブを複製：⌘ + Shift + f（カスタマイズ）閉じたタブを開くは絶対に覚えてほしい！世界変わる #デイトラ #WEB 制作

2

5

79

@dai_webp

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

1 year

色々な方に教えてもらった🙏 これが安定そう。・リンクは全部<a> ・コンテンツモデル的にaの中にaとかは不可だから、兄弟として並べる・aの範囲をCSSで全体に広げる（positionとかで）

Tweet media one

@dai_webp

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

1 year

<a>の中に<a>があるデザイン。どうマークアップすればいいか未だに最適解が分からないから誰か教えてほしい... これくらいだよね選択肢は... ・全体を<a>、中のリンクを<button> ・全体もリンクも<button> ・全体を<div>とか、中のリンクを<a> ※divとかbuttonにした場合はjsで遷移させる

Tweet media one

3

19

283

3

7

87

@dai_webp

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

2 years

WordPressの不正ログインの仕組み URLの末尾に「/wp-json/wp/v2/users��や「/?author=1」を付けてログインIDをゲット ↓ 「/wp-login.php」や「/wp-admin」でアクセスしてログイン画面へアクセス ↓ ゲットしたログインIDを入力して、あとはパスワードを総当り攻撃するだけ（ブルートフォース攻撃）

0

15

80

@dai_webp

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

3 years

WordPress・js・マーケ・案件獲得とか学ぶより、何より初学者がやらなきゃいけないのは・デザインを忠実に再現する力（HTML/CSS）・Web制作に関するリテラシー力この2つの力を付けることなんだよな〜って最近つくづく思う

0

2

72

@dai_webp

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

3 years

運用案件で出会いがちなカオスCSSの特徴・大量のidやタグ指定で詳細度カオス・zindexもカオス・!important祭り・width, height指定やりすぎ・positionで絶対配置やりすぎ・float使ってるくせにclearfixしてない・インラインスタイル多様あと何あるかな〜🙂

2

3

67

@dai_webp

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

2 years

あんま紹介されてないけど実務で実践してるテクニック？的なこと（緊急対応編）緊急でCSSを変えたい（display:noneで特定のテキストを非表示にするとか）時用に、メインのCSSとは別に overwrite.css 的なのを事前に読み込ませておいて、緊急対応時はそれにスタイルを書く色々落ち着いたら色々修正

1

5

73

@dai_webp

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

3 years

【フリーランスが払う5つのお金】フリーランスになったら、色々な手続きや支払いを自分でしなければいけません。毎月の支払いや帳簿付け、確定申告、保険/年金の切替えなど...結構大変なんです😂 #デイトラ #WEB 制作 #フリーランス

Tweet media one

0

6

64

@dai_webp

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

3 years

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

Tweet media one

0

4

64

@dai_webp

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

3 years

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

Tweet media one

3

5

65

@dai_webp

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

3 years

コーディングの基本④ 「画面幅が変わっても崩れない」初心者の方が難しく感じる点のひとつですよね...😶 ブレイクポイント前後の画面幅はちゃんとチェックしましょう！例）画面幅600pxでCSSを切り替えるなら、画面幅を599px, 600px, 601pxにして崩れていないかチェックする #デイトラ #WEB 制作

Tweet media one

1

4

66

@dai_webp

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

3 years

メインビジュアルで使える「リッチなCSSアニメーションの作り方」の解説記事を書きました！3000文字超え🖌️ サンプルコードもあるよ ↓の動画のような動きを誰でも作れるようになります #デイトラ #web 制作

1

4

70

@dai_webp

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

2 years

【業務委託コーダー募集】正社員とは別に業務委託でコーダーも探しているので、もし興味ある方はご連絡頂きたいです🙇‍♂️ ※すぐにお願いできる案件は今はないですが、直近困ってて多分3月に依頼したい感じです ▼募集要項はこちらめっちゃ真面目に書きました...

Tweet card media

募集要項（長期でご依頼したい方向け） | Notion

中長期的にコーディング業務をご依頼させて頂ける方を探しております。

profuse-tumble-c89.notion.site

1

7

65

@dai_webp

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

1 year

はじめて支払い踏み倒されそう😇 入金漏れっぽいですって連絡して「確認します！」のラリーを数回。たかが3万くらいだから生活に支障はないけど、その3万でちょっと良いご飯やガジェットを買えたと考えると微妙な感情になるな...。

1

0

69

@dai_webp

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

1 year

コーダー向けスキルアップロードマップを作りました！どうやってスキルアップするか悩んでる方は是非参考にしてみてください🙂

Tweet media one

Tweet media two

Tweet media three

0

8

63

@dai_webp

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

2 years

生のCSSでメディアクエリ書くのしんどすぎる🤮 もはやメディアクエリを楽に書くためにSassを導入していると言っても過言ではない Sassの学習優先度は個人的にはあまり高くないと思ってるけど、いずれは必ず覚えたほうがいいスキルであるのは確か。作業効率が格段に変わる。まじで倍くらい変わる

0

0

63

@dai_webp

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

3 years

CSSの新機能「カスケードレイヤー」新しいCSS設計の主流になるかも！？ classやidなどの詳細度を「レイヤーシステム」で制御できる。「idが使われてるからスタイルが効かない...しょうがないから!important使うか...」が無くなる！予感！ #デイトラ #WEB 制作

Tweet media one

0

3

63

@dai_webp

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

2 years

【WordPressで綺麗なコードを書く例】プログラミングではよく、「ロジック」と「表示」を分けると言います。（言い方やニュアンスは人とかによって変わる）「ロジック」とは情報を取得する処理や関数とかで、「表示」は情報を表示させること（echo）です続く... ← 悪い例／良い例 →

Tweet media one

Tweet media two

2

5

63

@dai_webp

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

1 year

「パーツギャラリー」アップデートしました！これまでモーダルに拡大画像を表示するのに時間がかかっていたタイムラグを無くしました。すぐ拡大画像が表示されるようになったので使いやすくなったはずです！そしていつの間にか掲載パーツが3,000件を超えました🎈

Tweet card media

Modulesss… | Webデザインの「パーツ」を集めたギャラリーサイト

当サイト「Modulesss…」は、Webサイトの図表や見出しなどの「パーツ」を集めたギャラリーサイトです。

0

3

64

@dai_webp

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

2 years

CSS設計大事だけどこっちのほうがもっと大事・○○が変わっても崩れない　・繰り返す系の要素の数　・文字数　・行数　・画面幅　・画像サイズ　・ブラウザ・画像圧縮する・SVGはアウトライン化して書き出す（フォント変わったりする）・インデント綺麗

0

3

59

@dai_webp

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

1 year

【コーダー必見】クライアントワークで使える"無料"の問い合わせフォーム作成手法を6個紹介しています。これさえ覚えておけば、WordPress以外で問い合わせフォームを作る時にも困らないです！全て使ったうえで感想や解説をしています。

Tweet card media

【2023年版】無料のフォーム作成ツール6選！HTMLとCSSでカスタマイズできるフォームも多数

この記事では、問い合わせフォームを作る時におすすめのサービスや手法を、機能やメリット・デメリットごとに解説していきます。もちろんこの記事で紹介するフォームは全て「無料」で使えるものだけです。無料フォ

1

9

65

@dai_webp

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

2 years

歴1年前後の人が講師とかコーディングライブとかやってるの普通に考えてやばいよな。。。最近2つくらい参加してみたんだけど、どう考えても人に教えるレベルではないコードだった。勉強中の人は誰から（どこから）学ぶかをまずはしっかりと取捨選択すべきだと思った。

1

2

56

@dai_webp

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

2 years

初めてこんなクソみたいなデザインデータのコーディングした。・PC/SPで意図のない変化　・SPは全部大文字、PCは頭文字だけ大文字　・色変わる　・文言が微妙に変わる・共通パーツという概念0 ・ゴリゴリの文字装飾・同じパーツでも余白違う・値は小数点や1px単位で変わったり

3

0

58

@dai_webp

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

3 years

このアカウントを初めて1週間ちょっとが経ったので改めて自己紹介的なのを作りました🍃 Notion...便利ですね...😶

5

0

52

@dai_webp

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

3 years

【ポートフォリオに何を載せるべきか】制作会社へ営業する際に、ポートフォリオにどのようなことを載せれば良いかをまとめました⚡ 構成を迷っている方は是非参考にしてみてください。 #デイトラ #WEB 制作 #ポートフォリオ

Tweet media one

1

3

53

@dai_webp

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

3 years

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

Tweet card media

料金シミュレーターで学ぶ、綺麗なJavaScript（jQuery）の書き方

HTML/CSSはそこそこ綺麗に書けるようになってきたけど、JavaScript（jQuery）が全然綺麗に書けない...という方に向けた記事です。（jsの最低限の書き方の知識はあるという前提） &

0

2

56

@dai_webp

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

1 year

フリーランスになるのを考えている人は是非一度読んでみてほしい記事📝 3年間の実体験をもとに書きました。 ▼記事はこちら

Tweet media one

0

2

59

@dai_webp

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

3 years

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

1

1

53

@dai_webp

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

3 years

ポートフォリオを作る時に意識することを徹底解説！駆け出し1〜2年目のデザイナー&コーダーは必見です👀 ・ポートフォリオの重要性・初心者がやりがちなNGなポートフォリオ・どんな内容を載せるか・実績少ない時どうするかなどを解説しています！ #デイトラ #WEB 制作

【初心者必見】Webデザイナー・コーダーのポートフォリオの作り方を徹底解説。載せる項目や注意点など

目次ポート��ォリオとはなぜポートフォリオが必要？ポートフォリオは最強の営業ツール自分のスキルを一瞬で伝えられる転職時や仕事の応募には暗黙の了解でポートフォリオが必要ポートフォリオに載せる項目項目その

0

6

56

@dai_webp

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

2 years

WordPressとかでデバッグが劇的にやりやすくなる方法💡 <pre>タグを使うとprint_rやver_dumpが劇的に見やすくなります。 ※リプにbefore/afterのサンプルあります

Tweet media one

1

4

60

@dai_webp

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

3 years

heightの指定は辞めましょう！画像のグレー背景に height: 300px; を指定しているとして、画面幅1,000pxの時はちょうどいいかもしれませんが、画面幅が小さくなったりテキスト量が増えたりしたら、要素からはみ出してしまいます結構height指定やってる人多いので注意です💡 #デイトラ #web 制作

Tweet media one

0

2

50

@dai_webp

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

3 years

transition を指定する時はプロパティも指定しましょう！ transition: .2s; みたいにプロパティを指定しないと、画面幅を変えた時などに変なアニメーションが発生してしまいますとりあえず、「transition を使う時はプロパティを指定する」を癖付ければ大丈夫です！ #デイトラ #web 制作

Tweet media one

1

0

49

@dai_webp

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

3 years

昨日見かけた「仕事を任せたけどコードがぐちゃぐちゃだった」というツイート見て、「キレイor汚いコード」ってどんなんだろうって考えて言語化してみました👻 #デイトラ #web 制作

Tweet media one

Tweet media two

1

5

49

@dai_webp

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

3 years

WordPressはセキュリティが弱い！…って言われたら、「ホワイトハウスのサイトはWordPressで作られてますよ」って言い返せばOK。結局、知識さえあれば安全なサイトは作れるけど、知識が無いとリスクが高くなっちゃうのです。有名なネタでしたね🙏 #デイトラ #web 制作

Tweet card media

ホワイトハウスのWebサイトがリニューアル、引き続きWordPressで構築

大統領選挙でジョー・バイデン候補が勝利したことにより、ホワイトハウスのWebサイトがリニューアルされたのだが、…

0

1

49

@dai_webp

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

2 years

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

Tweet media one

1

3

54

@dai_webp

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

3 years

flexの justify-content: space-between って均等配置をサクッとできてめっちゃ便利ですが、ブログ記事とか数が変わる系は要注意です。要素の数によっては見た目が微妙になります。数が変わる系は素直にmarginなどで余白を調整しましょう😂 #デイトラ #web 制作

Tweet media one

1

1

49