A CSS Grid generator & CSS Flexbox generator. A tool for generating UI layout component code.
This year is about drama: comedy, tragedy and satire. A connection with the human experience. Preparing for this year’s LogoLounge Logo Trend Report, I couldn’t help but land on the word drama. No, not the flippant kind that plays out as passive aggressive jabs between partners, but more like the ancient Greek kind: comedies, tragedies and satire that help us fully connect with the human experienc
あなたのWeb制作をサポートしてくれるWebツール13選Update2023.05.24Release2023.04.28Tools HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する Web制作をサポートしてくれるツールを10個紹介します。mix-blend-modeやgridレイアウト、transformなどのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。 Fuze – CSS Gradient AnimatorFuzeグラデーションアニメーションのCSSジェネレーター。色を複数指定するだけでCSSアニメーション用のコードを作成してくれます。背景色やテキストカラーなどに使えます。 ちなみに、テキストカラーは当サイトのト
こんにちは、マネージャーのJackです。 皆さん、コミュニケーションツールって何を使っていますか? 弊社では、Slackというツールを使っています。IT/Web業界にいる人なら、みんなご存知ですよね。 本日は、普段私がよく利用しているSlackの便利なショートカットキーについてお話できればと思います! チャンネルを移動する:「Command(⌘) + K」 圧倒的に使用頻度が高いものからいきましょう。 このコマンドは、別の会話へ移動するコマンドです。 このコマンドを実行すると、Slackのサーチエリアに「Jump to」と表示されます。そこで、移動したいチャンネル名を入力。その後Enterを押すことで、チャンネル間をスムーズに移動できます。 右サイドバーを折りたたむ:「Command(⌘) + .」 続いてのコマンドは、右サイドバーを折りたたむコマンドです。 右サイドバーは、スレッドでのや
チャートやネットワーク図などを描くのに使われるのがGraphvizです。多くの場合PNGなどの画像で出力して利用しますが、SVGへのエクスポートも可能です。Web向けであれば、画像よりも使い勝手が良いでしょう。 そんなGraphvizで出力したSVGを表示するのがjquery.graphviz.svgです。 jquery.graphviz.svgの使い方 表示しました。 ノードをクリックすると、ハイライト表示されます。 さらにズームイン/アウトができます。 jquery.graphviz.svgはGraphvizのSVGデータに対して、ハイライトとズームイン、ズームアウトを追加します。さらにデータをレスポンシブにしてくれるので、どのデバイスに対しても適切な表示が可能です。 jquery.graphviz.svgはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT L
最近、スクロールと連動するアニメーションを行うWebサイトが増えています。主にLPのような広告系のところに多いですが、スクロールに合わせて制御するのはとても大変です。 今回紹介するAnimateはDOMが表示されたタイミングで発火するイベントを追加できるJavaScriptライブラリです。 Animateの使い方 利用例です。下にスクロールしてDOMが表示されたタイミングでアニメーションが実行されています。 下からのスクロールにも対応しています。 Animateは表示範囲に入ったタイミングで呼ばれますので、アニメーションなどは初期化した上で実行開始すれば良いでしょう。アニメーションに限らず、ユーザが読み進めた場所を記録したり、スクロールに合わせて何らかのアクションを実行するのに利用できます。 AnimateはJavaScript製のオープンソース・ソフトウェア(ISC License)です
画面サイズだけではなく、デバイスのユーザー設定に対してレスポンシブにできる新しいCSSのメディアクエリーが登場しています。スマートフォンやパソコンで、画面サイズに応じてレイアウトが変化する「レスポンシブ・ウェブ・デザイン」はほとんどのウェブサイトで実装されているでしょう。新しい世代のレスポンシブ手法は、画面サイズだけでなくユーザー設定に対して挙動やスタイルを変更させることができ、ユーザービリティーやアクセシビリティーの向上に役立ちます。 本記事では事例とあわせて最近のレスポンシブ手法を紹介します。 この記事で紹介すること ダークモード対応 モーションの無効化設定 iOSのフォントサイズ変更 ダークモード対応 OSには外観モードの設定項目があります。Windows 10やmacOS、iOS、Androidのいずれもライトモードとダークモードの切り替え機能が提供されています。ライトモード・ダー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く