TAK
@tak_dcxi
Followers
16,108
Following
815
Media
912
Statuses
23,343
Webデザイン&マークアップ&フロントエンドをしていたWeb制作者 → 自社開発サービスのフロントエンドエンジニア | 個人サイト | Zenn
東京都
Joined January 2019
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
#WeAreSeriesEP15
• 510252 Tweets
CENTURY OF LOVE EP1
• 217747 Tweets
PondPhuwin WeAre EP15
• 195226 Tweets
JISOO CARTIER TRINITY
• 147629 Tweets
Coutinho
• 99778 Tweets
#GalaxyZFlip6
• 94442 Tweets
#GalaxyZFold6
• 92424 Tweets
Morgan
• 58388 Tweets
XO MV TEASER 2
• 52150 Tweets
WeAre WinnySatang EP15
• 45488 Tweets
Team USA
• 42985 Tweets
ヴォルタ
• 41812 Tweets
#JO1ANNX
• 37576 Tweets
#BliblixSamsung
• 30927 Tweets
Andrew Garfield
• 30441 Tweets
F-16
• 29318 Tweets
Kawhi
• 28608 Tweets
アーリャさん
• 27440 Tweets
Leandro
• 26916 Tweets
Florence Pugh
• 26260 Tweets
A. Interpreter
• 25726 Tweets
George Clooney
• 18365 Tweets
TXT & Enhypen
• 17811 Tweets
ボムギュ
• 16932 Tweets
VASCO DA GAMA
• 16668 Tweets
先行セール
• 13559 Tweets
Derrick White
• 12532 Tweets
Balotelli
• 12393 Tweets
Vingegaard
• 11015 Tweets
Ingrid
• 10906 Tweets
Kyrie
• 10223 Tweets
OUR DREAM IN TIME CAPSULE
• 10006 Tweets
Pinned Tweet
ブログはじめました 。
しばらくはこちらで技術記事を投稿していきます🙏
・デザイン：Figma
・静的サイトジェネレーター：Astro
・CSS：Pure CSS
・JS：Vanilla TypeScript（OG画像生成のみReact）
・投稿：MDX
・お問い合わせフォーム：SSGform
・ホスティング：Vercel
ブログはじめました
1
24
290
40Xエラーは「お前が〇〇エラー」で50Xエラーは「俺が〇〇エラー」
400「お前は何を言ってるんだ？」
401「お前は許可貰ってから来い」
403「すまん、お前には見せないわ」
404「お前の求めてる物はここには無い」
500「俺は今調子が悪い」
502「俺は変な物受け取ってしまった」
503「俺は今忙しい」
93
46K
105K
フォトショとかで一枚一枚サイズ揃えてる人いるけど、何か適当なフォルダ作ってサイズ揃えたい画像そこに入れてそこでターミナル開いてJPEG画像なら「sips -Z 800 *.jpg」ってコマンドを実行したらそのフォルダの全JPEGファイルを比率を保ちつつ縦横どちらか大きい方を800pxにリサイズしてくれるよ？
12
6K
32K
デジタル庁のデザインシステム見る度に感動する。全人類見た方がいい。
0
360
4K
マネるデザイン研究所
ただ優れたサイトを掲載するだけでなく、そのサイトのどこが優れているのか「マネしたいデザイン」をポイントに絞って纏めている。それがどんなサイトで応用できるのか、またそれを実装するにあたっての注意点も分かりやすく文章にされているので好き。
0
636
3K
肩書きはwebデザイナーなので僕個人が実践しているデザインガイドラインをnoteに書きました。全7記事。
あくまで僕個人の感想なので参考程度に留めて欲しいです。ただ、個人的には間違いはないと信じています。
時間があればぜひ。
3
251
2K
デザイナーに知ってほしいWebでのフォント周りの話
✅Androidは明朝体がない
✅Windowsはヒラギノは買わないと無い
✅游フォントはWindowsでは汚く見える可能性
✅10px以下は原則的にブラウザで表示できない(※)
✅文字組を妥協する勇気
✅そのフォント、Webフォントとして使えるか確認必須
1
276
1K
無料で学習できるオススメサイト。怪しさを感じたらここで学びましょう
・サルワカ
めちゃくちゃ説明が分かりやすい。サイト名に嘘偽りなし
・webliker
記事の質の高さにはついつい脱帽してしまいます…もっと早く知っておけばって後悔するレベル
2
155
1K
CSS書く人はアウターかインナーどちらかの角丸を基準として、基準とした`border-radius`と`padding`をローカルスコープの変数にして、基準でない角丸はcalc()を経由して指定するんだぞ🫵
でないと基準でない角丸は見返したときになんでこの数値やねんってなるからな🫵あと変更にも弱い
#Web
制作
もう一度言わせてほしい・・・初心者WEBデザイナーさんの脳内に話しかけてます・・・２つの図形の角丸を設定するとき・・・同じ数字で設定しちゃ・・・だめなんだ・・・下の・・・図解に・・・説明しているから・・・見てほしい・・・
41
1K
13K
1
124
1K
スクロールがある要素を超えたら固定ヘッダーのスタイルを変化させるやつ(サンプル参照)、現代のJavaScriptならこれだけで実装できます。jQuery使ってスクロール量取得してなんとかする方法より圧倒的にバグ少ないのでオススメ。
サンプル
3
100
1K
予期せぬ余白や横スクロールが生じた際に全称セレクタ＋outline指定で確認している人が多いけど、デベロッパーツールのConsoleに以下のスクリプトをコピペしたほうが速いと思ってます
枠線の表示だけでなく、実際に横スクロールを起こしている要素も出力可能です
サンプル:
0
141
1K
個人的にどんな案件でもベースのCSSで指定しておきたい4大ルールセット。Normalize.cssで平坦化した上での指定を想定しています。
1
100
1K
もうWeb制作をプログラミングと呼ぶのやめよう、切実に。HTMLとCSSとjQueryで静的サイト制作はデザイン寄りの仕���だから、制作で稼ぐならデザインの知識(とAdobe製品の知識)は持った方がいいけどそこら辺触れられてないし。ついこの間まで制作会社でWeb制作してた僕はそう思うよ。
0
147
906
誰とは言わないけど意識高いツイート発信botがプログラミング(Web制作)副業で楽に稼ごうみたいなこと発信するおかげで、Web制作が舐められるのはひどく悲しい。Webデザイナー目指して勉強して、やっとの思いでWeb制作を職にした経験から「そんな甘いもんじゃねぇよ」って言いたい。
14
104
893
フッターのコピーライトには translate=no 付与しておいた方がいいですよ。smallでマークアップはどっちでもいいと思うけど。
<p translate="no">©︎ xxx, Inc.</p>
2
90
860
個人的JSプラグインの結論
モーダル 👉 Micromodal.js
ハンバーガーメニュー 👉 Micromodal.js
カルーセル 👉 Swiper.js
ダイアログ 👉 SweetAlert2
DOMアニメーション 👉 anime.js
パララックス 👉 Rellax.js
ここら辺の実装は自作するよりプラグイン使った方が良さげ
4
84
787
CSSの色指定にrgba()関数使っている人見かけますが、互換性のために残っているレガシーな指定なのでrgb()関数に切り替えたほうがいいと思いまーす
（加えてカンマ区切りも古い構文です）
🙅♂️background-color: rgba(0, 0, 0, .8);
🙆♂️background-color: rgb(0 0 0 / .8);
2
114
767
コーディングする時はbackgroundに半透明化したデザインカンプを敷いて上からなぞるようにCSS調整した方が楽だしデザインと違うって怒られたりしないですよ！！
#駆け出しエンジニアと繋がりたい
6
54
729
個人的な拘りだけど、CSS変数でもSassの変数でもそうだけど、汎用的な数値を変数化して使う時は、そのまま汎用的な数値を指定した変数を使うのではなく、一旦その用途を示した変数を作ってそれにinしてから使うようにしている。（画像参照）
これやっとくだけで改修の時楽だから…。広まって欲しい。
4
102
715
button要素で作ったハンバーガーボタンなどをうっかり連打するとiOSで拡大ズームが起きてウザいから全人類デフォルトのCSSにtouch-action: manipulation指定しておいて欲しい
0
56
671
CSSを書く時のコツは
1. CSSをなるべく書かない方がいいけどコードが長くなっても気にしないをメンタルを持つ
2. 一番大事なのは保守性
3. 無理に共通化すると改修の時に死ぬ
4. 最初から最適化しようとしない
5. 誰が触っても問題が起きにくい設計がゴール
だよ
1
51
638
わいのコーディング方法
1. 各デバイス、およびトップと下層のカンプを見比べる
2. Markdownでコンテンツを書き出す
3. 2で書いたものをHTMLに変換(divやspanは禁止)
4. ブラウザのデフォルトスタイルで コンテンツがしっかり読めるか確認
続く
1
65
630
テキストの中央寄せはtext-align: centerではなく、display: flex&justify-content: centerでなるべく行うようにしている。
理由: 見出しなどに改行が起こった時に最終行が中央寄せだと見栄え悪くなりがちなため。
2
46
634
めっちゃ大切なこと言うぞ…。顧客や外部の運用担当がコンテンツの文章を更新する案件ではflexアイテムには「min-width:0」を指定しておくんだ…。指定しておかないとテキストによっては折り返しがされなくなってレイアウトが崩れる可能性があるんだ…。メモしておくといいぞ…。
1
51
623
現代ではチェックボックスやラジオボタンに独自のデザインを適用する場合にinputを隠して空のspan要素等を用意する必要はなく、`appearance:none`しておけばinput要素にスタイル直書きで問題ないです🫵(疑似要素も使用できます)
2
49
626
「HTMLとCSSはプログラミング言語ではない」ってのはそうだけど、「HTMLとCSSは簡単」って言ってる人は是非とも書いたマークアップを見せて欲しいところではある。ガチ目に採点するので。
8
90
580
Zennの記事を投稿しました。以前そこそこ反響があったツイートの説明をまとめたものです。
デザイナーとフロントエンドエンジニアに知ってほしいWebのフォント周りのお話｜TAK
#zenn
0
104
596
駆け出しWeb制作者へ
文字が小さめのデザインでも入力フォームの文字サイズは16px以上に設定しておきましょう。
渡されたデザインが16pxよりも小さかったら、デザイナーに入力フォームの文字サイズを大きくしてもOKか相談しましょう。
多分先輩方の何人かは一度はそれでハマってると思うから…。
1
45
571
コーダーやフロントエンドエンジニアが実装する前にデザイナーに確認しておいた方が良いことを「独断と偏見で」まとめました。実装者向けに書きましたが、デザイナーの方にも読んでいただきたい内容です…。
実装者が作業前にデザイナーへ確認しておくとよいこと｜TAK
#zenn
0
80
560
ブレークポイントについてはやっぱりBootstrap4のそれを参考にするのが一番良い気がする。
・～543px
・544～767px
・768～991px
・992～1199px
・1200px～
こんなにいる？って思われるかもだけど、デザインによってはスマホ・タブレット・デスクトップの3つじゃ都合が悪いって場合が多々ある。
2
54
530
ぶっちゃけCSSは書くだけならそこまで難易度が高いわけではない。HTMLとかJSのほうが難しい。ただ、CSSは規模がデカくなって追加や改修を繰り返すほど辛くなる。それを見越してどこまで先手を打って楽なフェーズで書けるかが難しい。結論CSSは難しい。
2
49
523
margin-block: calc((1em - 1lh) / 2);
line-heightの「ここ」を消し飛ばす方法ないかなぁ ないかなぁというか何通りか思いつくんだけど、どうするのがスマートなんだろう
4
2
110
0
41
526
✏メニューを中央に表示して左右にロゴやボタンを置くヘッダーを実装する際にjustify-content:space-betweenで実装してしまいがちですが、左右のコンテンツの幅が均等でないと中央寄せしたいメニューが片方に寄ってしまいます。
こういった場合はdisplay:gridでレイアウトを組むのをオススメします。
0
38
502
px,em,remの使い分け
px → borderなどの環境設定によって1px未満になる可能性のある箇所
em → 親要素のfont-sizeによって変動させたい各サイズ。それとletter-spacingとメディアクエリのwidth
rem → 固定値
基本的にはrem。状況によってem。1px未満になりそうなところはpxって感じ。個人の見解。
1
71
515
読んだ。正直もうイラレやフォトショでカンプ作られるのはしんどい。
フロントエンドエンジニア目線で Web のデザインには Illustrator や Photoshop ではなく Figma を使ってほしい理由｜seya
@sekikazu01
#note
0
76
509
「IE11対応やるなら追加料金頂きます！」と言うよりも基本料金を値上げして「IE11を対象外にしていただくと基本料金から割引致します！！」って言った方がクライアントからの心証良くなると思う。
1
90
497
これに苦しめられたけど、htmlにmin-height: 100vh指定したら解決した思い出。試してみて。
オーバーレイコンテンツを表示時に、うしろのコンテンツがスクロールしないように、bodyにposition: fixedと100vhとかで固定する手法、iOS15だとURLバーのセーフエリア分だけ、微妙な余白が生じちゃうな…
#web
デザイン
2
7
115
0
42
503
Webデザイン100トレース
エンジニアの筆者がデザインを学ぶべく100ものwebサイトをトレースして学んだこととその際のトレースのやり方の説明を紹介されている記事。webデザインのトレースのやり方の模範となる記事だと思った(小並感)
#エモい記事紹介
1
66
495
欧米ではデザインだけでなくコーディングやJSプログラミングができて「Webデザイナー」らしいので、イケてる海外のWebサイトのデザインを考えた人がコーディングの知識がないと言うのは疑問があるな。
1
71
487
Macだったらcdで画像フォルダに移動して、例えば「sips -Z 800 *.jpg」ってコマンドを実行したら画像フォルダの全JPEGファイルを比率を保ちつつ縦横どちらか大きい方を800pxにリサイズしてくれます。へぇーって感じですね
2
60
474
とても真面目な話になりますが、以前「自分が好きなことと自分が得意なこと、どっちを仕事にした方がいいか」といった質問を受けたことがあります。この問題に関しては人それぞれ意見が分かれるとは思いますが、僕はとある二人の格言に感銘を受けて「得意なことを仕事にした方が良い」と答えました。
2
106
479
僕がめちゃくちゃ好きな女性への心の距離が5cm。
でもその人は僕のことをどうでもいいと思ってて、心の距離は3kmだとするじゃん？
僕がその人のこといくら好きでも、その人との心の距離を客観的に見たら3kmなんですよ。
CSS界ではこういうことを「marginの相殺」と呼ぶんです。
7
41
479
【web制作はじめての方におすすめのJSプラグイン】
完全に独断と偏見です。2年前の自分を振り返って、当時このプラグイン使えばいい感じのサイト作れただろうなってものを挙げてみました。パララックス等は省略して必要最低限のギミックしか触れません。
2
42
470
背景に写真敷く時はCSSのbackground-imageではなくobject-fit指定したimg要素を絶対配置で背景に置く派
・decoding=asyncによるパフォーマンス面の向上
・picture要素やsrcset属性による最適な画像の読み込み
・opacity等CSSによる画像加工が容易
正直background-imageにあまりメリットを感じない
1
41
479
グラデーションは一歩間違えるとめっちゃダサくなってしまうので、グラデーションのギャラリーサイトを参考にするのがベストだと思います。例えばWebGradientsとか。
CSSもコピーできるから偉い👏
0
72
468
Webデザイナーはカンプを作ったらスタイルガイドも作っておく。
コーダーはそのスタイルガイドで決められた配色・フォント・各要素の幅や大きさなどをSassの変数として纏める。
これでデザイン変更にも強くなるし、効率性も良くなると。
スタイルガイドの作り方
0
77
475
テキストを一文字ずつアニメーションさせる方法
現代の力を持ってしてもspan等で地道に一文字ずつ囲ってそれぞれ動かす必要があります。一文字ずつspanで囲み、animation-delayを付与するのは人間の仕事ではないのでJSに任せましょう。アクセシビリティ対応もしてます。
1
31
473
HTMLのコンテンツモデルを初心者が暗記するのは厳しいので、こういったツールをブックマークして適宜調べながら慣れていく方がいいのかなって思う。ここら辺は慣れ。
0
85
459
Google様のコーディング規約には以下のような文言があります。
「HTML(構造)とCSS(見た目)とScript(動き)は独立させて、3つの相互関係はなるべく最小限にする。」
この考え方はとても重要。
1
71
450
駆け出しの方がフォローすべきアカウントになりたいので、有益なツイートします。 Webサイトのヘッダーをまとめたサイトです。ヘッダーのデザインに困ったときに見ると良さそうですね。
2
50
454
1
69
456
あとはWebデザインの目的って「お問い合わせを増やす」ことだからね。Webデザイナーに必要なものはマーケ力なんじゃないかなと思ったりする。ワクワクするデザインとか、1pxに拘るとかあくまで部分最適化。もちろん部分最適化も大切なんだけど、そこばっかり気にして本質から逸れてるデザイン多い。
1
40
461
一時期SEOを勉強した時にめっちゃ有益だと思った本があって、【現場のプロから学ぶ SEO技術バイブル】って本なんですけど他のSEO対策の解説書より群を抜いているって印象でした。SEO対策のポイントを1点1点丁寧に説明し、その実践的な対策法を現場の視点から網羅的にまとめているので本当にオススメ
2
35
448
マジな話するとコーディング初心者はモバイル版からコーディングする練習する癖つけとくと後々楽だと思う。PC版から慣れると、後からスマホ版からコーディングした方が上書き減ってコード量減って楽だということに気づきつつも癖で抜け出せない自体が発生する。身近な例だと僕とか。
5
35
436
個人的な意見だけどモーダル実装する時に自作でやりがちだけど、絶対に「Micromodal.js」というプラグイン使ってモーダルは実装した方がいい。escでモーダル閉じるかとかモーダル出ている間裏側のコンテンツにフォーカス当てないとかそこら辺のアクセシブルの問題をクリアしたモーダル実装できるから。
2
46
445
320px対応はもうやらなくて良いと思っている皆様へ
お使いのiPhoneの設定→画面の表示と明るさ→拡大表示から「拡大」を選択すると320px相当での表示となります
1
58
442
記事投稿しました。
:root {
--leading-trim: calc((1em - 1lh) / 2);
}
これをグローバルスコープのCSS変数で定義しておくとオススメだという内容です。
line-heightのハーフ・レディングを打ち消す"calc((1em - 1lh) / 2)"をCSS変数に定義しておくとよい
1
60
445
imgタグをpタグで囲むのが初耳だったというツイートが多く見受けられたので個人的な補足として。もしその画像が【無かったらコンテンツの意味が分からなくなるような画像】であればpタグで囲みます。(続く)
2
64
426
【記事投稿しました】
初学者のポスト見ていると古の手法を教わっている方をよく見かけるので、そのCSSテクニックはもう古いってものを紹介します。
今教わっている方も教えている方も是非。
あなたが教わってるそのCSSテクニックはもう古い
0
93
433
記事投稿しました
少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集
0
54
425
「どんなデザインが良いですか？」「参考サイトはありますか？」を聞くデザイナーは地雷ってツイートを観測したけど、馴染みの相手なら兎も角初めましての方の求めているものとか聞かないと分からなくない？デザイナーはエスパータイプじゃないんだから。好みの料理が分かるまで料理出し続けるの？
7
40
417
三井住友銀行アクセシビリティガイドライン
普段利用している銀行のサイトのアクセシビリティガイドラインがWebサイトのアクセシビリティ対策の教科書として使えるくらい内容が濃かったので共有。HTMLとCSSの書き方も分かりやすく説明されていてびっくりした。すごい。
0
66
420
📎これはデザインカンプに対して忠実に再現することをリクエストされた時にline-heightの上下の余白問題を解決するSassのmixin
2
25
420
過去に僕なりにWebデザインのガイドラインをnoteに纏めたから、Web制作者の方々に見て欲しいな。無料だよ。
1
60
416
【webデザイナーの僕が薦めるこれだけは入れとけってChrome拡張機能】
＜ato-ichinen＞
Google検索の結果を1年以内に公開されたものに限定する拡張機能
webに関する情報は賞味期限が短いので期間を絞ったほうが絶対に良い
＜Awesome Screenshot＞
ページ全体のスクリーンショットを撮れるプラグイン
2
56
405
XDから生成されたCSSをそのまま適応すなー！line-heightにpx指定すなー！マジックナンバーのwidthやheightを無闇に多用すなー！繰り返し利用されるコンポーネントにmarginの付与すなー！JSで取得しているセレクタにスタイリングすなー！ネストを深くすなー！transitionのall指定すなー！vwを無闇に使…
2
42
406