アプリで作成

エンジニアにしかわからないはみ出しデザイン、CSS・完全に理解したTシャツが誕生「一般人にはただのミスデザインに見える」

極度乾燥的な?
81
IKeJI @ikeji

AIのおしごと/やわらかエンジニア/シリコンバレーから生還/WORD/AC/coins02/為桜

https://t.co/Ei8vzJ9SPm

これは欲しい

yuuri:) @yuri_hentai2001

@ikeji @haluokmr webの授業にこれ着ていきたいです笑笑 通販とかはされないんですか?

2019-09-19 19:49:51
暁ノワ_Unity勉強中(超初心者) @Akatsuki_Nowa

@ikeji @MantleHat センス良すぎwww 個人的には背中にはソースコードが書いていて欲しい(笑)

2019-09-19 20:49:57
IKeJI @ikeji

@KazushiNagayama 手作りです。 いくらなら買いますかw

2019-09-19 16:22:35

正しく理解したからこそのデザイン

SKA 🌕@ICT系YouTuber・ニコ厨 @SK_Animation

一般人「ズレてるじゃんw」   エンジニア「このズレ方、CSS完全に理解してる!」 ってなってそう twitter.com/ikeji/status/1…

2019-09-20 18:18:45
Yutaka(σ´ω`)σShiomi @yut403

@ikeji @yumekurage0965 body { position:relative; } .box { display:block; width:66.666vw; height:20vh; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .text{ position:absolute; top:10%; left:45%; }

2019-09-19 16:16:37
畳ステェキ @TatamiSteak

@yut403 @ikeji /* FF外から失礼します */ .box { border: solid 5mm #000; border-radius: 3vw; } /* 失礼しました */

2019-09-19 20:10:55
amon @amonphys

@ikeji はみ出すって逆に難しい。 完全ではないが position: absolute; は覚えた。 pic.twitter.com/phqRL3Oz8M

2019-09-19 19:05:13
拡大
amon @amonphys

@ikeji white-space: pre; を用いた、より自然な実現。てか何やってんだ俺… pic.twitter.com/1SfAryzoHH

2019-09-20 06:46:19
拡大
このヅさん@裏垢上司 @_kono_d

解らない人に再現させるのは意外と難しい絶妙なライン twitter.com/ikeji/status/1…

2019-09-20 18:24:33
小鳥遊ルリ⚙️ @takanashiruri__

cssと格闘してるからとても刺さるTシャツだ(笑) こういうの作ればよかったかな😂 twitter.com/ikeji/status/1…

2019-09-20 17:17:42
Satoshi @fuku_sato1

理解してるから、意図的にそのレイアウトなんだな(笑) twitter.com/ikeji/status/1…

2019-09-20 13:38:27
くれあ @kuuuu1218

全世界のWEBデザイナーとコーダーでこれ着よ twitter.com/ikeji/status/1…

2019-09-20 13:02:33

コメント

エルオゥ @PizzaElbow 2019年9月20日
出来たときちょっと嬉しくなったやつだ!
1
gehakun @gehakun 2019年9月20日
EXCELで印刷したときプレビューと違うやん!ってなるやつかと思った
27
萩野 @Lespedeza_t 2019年9月20日
お腹が出てる感じなのもデザインなんでしょうか(大変失礼)
7
白墨 @amanilo_ 2019年9月21日
お腹が出てるのはリチウムイオン電池が膨張したMacBookの再現ですよね
18
ざっぷ @zap3 2019年9月21日
Wordで表の上にテキストをオブジェクトで貼りたいときになるやつでもある(貼ったテキストボックスの位置もセルの中のテキストもズレる)
1
和菓子 @nkltsl2 2019年9月21日
マグカップは一般人からもオシャンティにも見えるので欲しい。
2
FX-702P @fx702p 2019年9月21日
ワタシCSSチョットデキル
15
ゆうき @F001Yuki 2019年9月21日
しかし個人的にはブラウザのウィンドウサイズ変えたときにレイアウト崩れてホゲエエってなった思い出がよみがえるのであった
3
SAKURA87@多摩丙丁督 @Sakura87_net 2019年9月21日
Trident「は?間違ってないやんバカなん?」
0
SAKURA87@多摩丙丁督 @Sakura87_net 2019年9月21日
個人的にはこの話題を扱ったネットニュース記者が理解してない感じのこの記事もお勧めしたい。 https://www.excite.co.jp/news/article/Jtownnet_294912/
6
reef @rhialeskizar 2019年9月21日
white-spaceではみ出せば座標ではなくpaddingの指定で済み、要素が1個で事足りるのでとてもスマートですね。3番目の方のに1番目の方のTシャツの中央に揃える部分をプラスすれば完璧に見える
1
reef @rhialeskizar 2019年9月21日
疑似要素とかセレクタを活用したバージョンもほしい
0
takatakattata @takatakattata1 2019年9月21日
positionプロパティの功罪は大きい 何も考えてない人と紙デザインから来た人は何かと固定したがる
4
カラスモドキ @karasumodoki 2019年9月21日
transform:translatex()でも可能か、やり方は色々あるよね
0
Winterfan @siorinyuuna 2019年9月21日
枠部分をbackground-imageで作ると簡単に出来るw (実用性はないw)
0
zzz @zzz09288714 2019年9月21日
ふむふむ・・ 判らん(´・ω・`)
0
@wanwanbawbaw 2019年9月24日
F001Yuki ギッチギチにデザインされていたため肝心のリンクが画面幅から溢れてスマホから不可視不可触となってるサイト結構見ますw なおTABキーでリンク踏みました
0