WEB LABNEW
画像トリミング・縦横比変更｜正方形・16:9・9:16に切り抜き
画像をドラッグで切り抜き、正方形（1:1）・4:3・16:9・9:16・3:2などの縦横比に調整。ズームや長辺の上限を設定し、PNG・JPG・WebPで保存できる無料ツールです。
YUKI DIGITAL LAB / WEB
WEB LAB
Web制作・運用ツール。公開済みツールと、これから開発するNEXT EXPERIMENTSを同じLABで追えるページです。
PUBLISHED16TOOLS
PIPELINE4IDEAS
LABONLINEREADY
// TOOL DIRECTORY
WEB LAB TOOLS
16件のツールを公開中。
WEB LABNEW
HTMLフォーム作成メーカー｜入力欄を選んでHTML・CSS生成
入力欄やチェックボックス、セレクトボックスを画面で編集してHTML・CSSフォームを生成。必須項目や色を調整し、プレビュー・コピー・HTML保存まで無料で利用できます。※送信機能はありません。
WEB LABNEW
HTML・CSSコード整形｜インデント・改行を整理する無料ツール
HTML・CSSのコードをブラウザで無料整形。改行・インデントを2または4スペースに整理し、見やすくした結果をコピー・HTML/CSSファイルとして保存できます。
WEB LABNEW
CSS Flexbox・Gridレイアウトメーカー｜配置を見ながらコード生成
Flexbox・CSS Gridの要素数、余白、整列方法、列数を画面で調整。PC・スマホ幅のプレビューを見ながらHTML/CSSを自動生成し、コピー・HTML保存できる無料レイアウトメーカー。
WEB LABNEW
SEOメタタグ・OGPプレビュー｜title・description・共有タグ生成
SEOタイトル・meta description・OGP情報を入力して検索結果風／SNS共有カード風プレビューを確認。HTMLメタタグをまとめて生成し、コピー・保存できる無料ツールです。
WEB LABNEW
HTMLテーブル作成｜表を編集してコード生成
行・列を直接編集し、タイトル、見出し、交互配色、行・セルごとの文字色や太字を設定できる無料HTMLテーブル作成ツール。表示を確認し、WordPressで使えるHTMLコードのコピーやファイル保存ができます。
WEB LABNEW
画像圧縮・WebP変換｜一括リサイズ・容量比較
JPG・PNG・WebP画像をブラウザで無料一括WebP変換。画質と長辺サイズを調整して容量を比較でき、変換後の画像は個別保存またはZIPでまとめて保存できます。画像はツールのサーバーへ送信されません。
WEB LABNEW
JSON整形・エラーチェック｜構文検証と圧縮
JSONを貼り付けるだけで整形・圧縮・構文チェック。エラー位置のヒントとツリー表示で内容を確認し、結果をコピーまたはJSONファイルで保存できます。
WEB LABNEW
BOX MODEL QUEST｜margin・padding・borderをゲーム感覚で学ぶ
CSSのmargin・padding・border・contentを可視化し、短いミッションを通してボックスモデルの違いをゲーム感覚で学べるWEB LABの無料学習ツールです。
WEB LABLIVE
AI×仮想世界タイピング「NEURAL TYPE : WORLD LINK」
NEURAL TYPE : WORLD LINKとは NEURAL TYPE : WORLD LINKは、表示された日本語をローマ字で入力しながら、AI通信回線と仮想世界の同期を進める無料タイピングゲームです。YUKI ...
WEB LABLIVE
書いて、壊して、直して学ぶ「CODE LAB : HTML & CSS」
CODE LAB : HTML & CSSでできること CODE LAB : HTML & CSSは、HTMLとCSSを読むだけではなく、実際にコードを書き、表示結果を確認しながら学ぶための初心者向け学習...
WEB LABLIVE
YouTubeのURLからサムネイルを取得・保存する「THUMBNAIL FETCHER」
THUMBNAIL FETCHERでできること THUMBNAIL FETCHERは、YouTube動画のURLを入力すると、その動画で利用できるサムネイル画像を解像度別に確認できるWEBツールです。YouTube St...
// IDEA PIPELINE
NEXT EXPERIMENTS
4件の構想
VIEW ALL IDEAS →
[ PROJECT-081 ]
IDEA
WEB LAB JavaScriptのイベント伝播を目で理解する「JS EVENT FLOW VISUALIZER」
JavaScriptのイベントがDOMを伝わる順序をアニメーション表示し、バブリングやキャプチャリングを学ぶWEB LAB実験構想。
[ PROJECT-080 ]
IDEA
WEB LAB FlexboxとGridをパズルで身につける「LAYOUT PUZZLE」
FlexboxやCSS Gridのプロパティを選び、指定レイアウトを再現するパズル形式のWEB LAB学習ツール構想。
[ PROJECT-079 ]
IDEA
WEB LAB CSSセレクタと詳細度を勝負で覚える「SELECTOR BATTLE」
どのCSSセレクタが勝つかを予想し、詳細度・継承・指定順を対戦形式で覚えるWEB LAB学習ゲーム構想。
[ PROJECT-078 ]
IDEA
WEB LAB ブラウザ標準スタイルを見比べて理解する「RESET CSS LAB」
ブラウザ標準スタイルとReset CSS適用後を比較し、必要な初期化だけを理解しながら選ぶWEB LAB実験構想。