For web developers. React, Next.js, TypeScript, JavaScript, CSS and Web Development.

Flexboxのプロパティってめっちゃ多いですが、全部を覚えなくても実務レベルで使うことはできます。わたしも最初のころはFlexboxのプロパティを試していましたが、実際に使うようになって「あれ、ほとんどのプロパティは使わなくて実装できるよね？」ってなりました。 もちろん全部を使いこなせるに越したことはないですが、まずは使うところから覚えるのが勉強の王道だと思います。 この記事では、現役コーダーのわたしが実際によく使うFlexboxのパターンを5つ厳選しました。これから勉強する方は、まずはこの5パターンから覚えていくことをおすすめします！ Flexboxで覚えるべき5パターン 以前ツイートしたのですが、普段コーディングを仕事にしていても、ほぼこの3パターンで足ります（どんだけ簡単なコーディングしているだ！ってツッコミは禁止） 今回は、この3パターンに2パターン加えました。おそらくシンプルな

こんにちは、HALです。 今回は、動画をWeb用に軽量化するための方法を紹介します！ 軽量化を行わないと、たとえば 1280px × 720pxの30秒ぐらいの動画の場合40MBほどの重さになってしまいます。そのままだと videoタグなどでWebブラウザ上で再生するには大きすぎてしまいます。モバイル端末ならさらに軽量化が必要です。 動画の軽量化をするにはさまざまなツールがありますが、 HandBrakeというツールがとても使いやすかったので、基本の設定方法を紹介していきます。 ※この記事は2022年3月に編集部が情報を更新しました 動画を埋め込む方法 外部リンクで埋め込む YouTubeやVimioに動画をアップロードし、それを外部リンクとして埋め込む方法があります。 YouTubeではさまざまなサイズの動画をアップロードすることができますが、標準のYouTube動画のサイズは1920×

ブランドの顔でもあるブランドロゴをデザインする際に、ロゴガイドラインも同時に必要だということをご存知でしょうか？知らない方はロゴが完成した時点で満足していませんか？もしかすれば「ロゴガイドライン」という言葉を初めて耳にした方もいらっしゃるかも知れません。もし、まだブランドロゴをデザインする前なら、遅くはありません。ロゴガイドラインは、単にロゴマークのことだけでなく、企業や商品のブランディングを考える上で、なくてはならないものなのです。ロゴガイドラインとは、その名の通り「ロゴマークのガイドライン」を表すもので、ブランドガイドラインと呼ぶこともあります。ブランドロゴに大切なのは「標準化」です。ブランドロゴを使用するのが一人なら、標準化はさほど難しくはないでしょう。しかし、たくさんの人がブランドロゴを扱うなら、決まり事を作っておく必要があります。その決まり事をまとめたものが「ロゴガイドライン」な

あなたのWebページにWebPを導入するとどのくらいデータが軽くなるのかシミュレートし、変換されたWebP画像を一括ダウンロードできます。

アニメーションというか、jQueryでスクロールを監視して数値化し、それをリアルタイムに反映させることで滑らかに動かす方法。スクロール量に連動させているので、スクロールするたびにアニメーションのような滑らかな動きをします。 色々な使い方があると思うけど、ここではwidthの値をリアルタイムに更新し、スクロール量に応じて幅を広げたり狭めたりする方法をのせています。 デモとHTMLとCSS 言葉だけだと説明が難しいので、デモを見てもらうと何をやりたいのか分かるかと思います。とてもシンプルです。※古いIEでは見れません。 DEMO デモでは５種類ありますが、基本的にはスタート位置(CSS)が違うだけで、内容はほとんど同じ。 HTML HTMLは何でも良くて、便宜上、空divの要素を更新するような形にしています。 <div class="contents"> <div class="line"><

こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 コーディングをしていて、クラス名に迷うことってありませんか？ ボタンや見出しといった、比較的単純なコンポーネントなら「.button」「.headline」など、すぐに思いつくかもしれません。 しかし、それが複雑なコンポーネントだったりすると、なかなか思いつかないものです。 そんな悩みを解消したいと思いまして、いろいろなサイトのソースコードを見て、開発者がどんなクラス名をつけているのか調査してみました。 今回は、その中からよく使われていたクラス名と、「これはナイスネーミング！」と思ったクラス名をピックアップしたいと思います。 thumbnail サムネイル画像。 アイキャッチ画像やギャラリーページの画像一覧などで用いられます。 avatar ユーザのアバター画像。 Webサービスのユーザ情報ページや、ブ

[PR] フロントエンドで副業する学習方法を動画で公開中 スムーススクロールの書き方 スムーススクロールの書き方について紹介していきます。 JavaScriptのコード $(function(){ $('a[href^="#"]').click(function(){ let speed = 500; let href= $(this).attr("href"); let target = $(href == "#" || href == "" ? 'html' : href); let position = target.offset().top; $("html, body").animate({scrollTop:position}, speed, "swing"); return false; }); }); 解説 1行目の、$(function(){では、jQueryの無名関数を

コーディング時に意外と使われがちな背景画像のCSSについて紹介です。 背景で最も覚えておくべきは「background-size」だと思います。この指定の違いによって表示がどのように変わってくるのか、マウスでドラッグしながら直感的に理解していこうという目的で作成しました。 また、ヒーローイメージや背景固定など、よく使わがちな背景の指定方法についても少しだけまとめました。 わたしがコーダーとして仕事するようになって、たぶん一番くらいの衝撃が「こんなにも背景使うの？」でした笑 コーディングを仕事にしている方は、ここに書かれていることは当たり前に理解しておくといいかもしれません！

Webページやスマホアプリのデザインカンプを作成する時に、大幅な時短になる便利な機能がたくさん詰まったPhotoshop CC2015.5対応の機能拡張を紹介します。 Bootstrapでつくる時はもちろん、それ以外のデザイン作業でも強力な機能を発揮します。 Web制作に携わるすべての人が、入れておいて損はない機能拡張です。 Bootcomp Bootcompの特徴 Bootcompのインストール Bootcompの使い方 Bootcompの特徴 先日当ブログで紹介したBootcompが昨日、CC2015.5にも対応してアップデートされました。1.0でも便利でしたが、2.0で更に便利になっています！ OS X, Win両対応で、日本語にも完全対応の無料の機能拡張です。

フリーのパターン素材はデザインやイラストの背景に使ったり、質感を与えたり、ちょっとした飾りとして使ったり、非常に重宝します。 シンプルなラインやドットで構成されたものから、細かい柄で構成されたかわいいものまで、デザインやイラストの幅が広がるPhotoshopで使える無料のパターン素材を紹介します。 34 Pixel Patterns 個人・商用利用、無料。 小さなピクセルでデザインされたパターン素材。 かわいい小さな柄、ジグザグの線、斜めの線など、いざ作ると手間のかかるものがたくさん揃っています。

普段利用しているソーシャルメディアのユーザーおよそ40%が、文字テキストだけの投稿に比べて、写真などのイメージを好むそうです。それだけ魅力的なビジュアルが重要になってきているということでしょう。今回は、フォトショップを利用せずデザイン編集作業できるツールやアプリをまとめてご紹介します。 ドラッグ&ドロップの手軽な操作だけでなく、オンラインやスマートフォン端末など Photoshopがインストールされていない環境でも無料で利用できるツールを中心に揃えています。用途に応じて利用してみてはいかがでしょう。 Photoshopにも負けない！無料で使える手軽なデザインツール、アプリ20個まとめ Canva Canva は、オンラインで利用できるもっともシンプルなデザインツールのひとつ。文字やシェイプの追加など直感的に行うことができ、無料で利用できる点もポイント。 料金: 無料、写真のライセンスは$1

こんにちは。エディターの坂口です。まだまだフォトショが使いこなせないので、フリーの画像編集ツールを使い倒しています。 最近、画像編集スキルが求められる案件が急激に増えたため、より簡単で確実なツールを求めて取捨選択を行いました。その結果、「最低でもこの5つを押さえておけば大丈夫」と言える無料の画像編集ツールが浮かびあがって参りましたので、この機会にご紹介したいと思います。 [目次] 必要な画像編集はこれ一本で大体クリア！「PhotoScapeX」 動画をGIFに一発変換「PicGif Lite」 GIFの容量を瞬間圧縮「Compressor」 集中線が思いのままに「集中線追加ツール」 画像に矢印や枠線をつけたいなら「Skitch」 ※本記事は主にmacユーザー向けの内容となっておりますが、ご紹介する5つのうち、「PicGif Lite」以外はwindowsでも利用可能です 必要な画像編集はこ

こんにちは、デザイナーのトミーです。 技術の進歩とともに表現が変わるWebデザイン。トレンドの移り変わりも早くなってきましたね。 そこで、今回は2016年のWebデザイントレンドを探ってみようと思います。なぜ流行ったのかを考えることで、新しい表現にも挑戦していきたいところ。 後編はデザイナー藤田さんがまとめてくれますよ。それでは前編・後編でサクッと2016年のトレンドを振り返ってみましょ。 2016年のWebデザイントレンド（前編） 1.高解像度 参考サイト：pixelmator HD,svg,Retina対応など、高解像度モニターへの対応も増えてきました。通信速度の向上やベクターデータのブラウザ対応など技術の進歩に合わせ、「できるだけ綺麗に表示したい」といったところでしょうか。Macのretinaモニターなどターゲットに合わせて必須になる項目です。� 2.ドラッグを用いたUI 参考サイト

機能的なアニメーション（英: Functional Animation）とは、論理的ではっきりとした目的を持った、控えめなアニメーションを指します。読み込み時間を短く感じさせるだけでなく、ユーザーインターフェースに生命を吹き込みます。 インターフェースデザインを掛けあわせたり、分割したり、シェイプやサイズを変更することで、まるで人間のように、生きているような動きを実現できます。ナビメニューに応じてユーザーをスムーズに移動させたり、スクリーンに応じて要素が整理、変更されるのを伝えたり、デザイン要素の階層を補強するために、機能的なアニメーションを利用するように心がけましょう。 今回は、アニメーションをうまく利用する6つの基本原則、テクニックをまとめてご紹介します。 詳細は以下から。 01. レスポンシブなアニメーション UIデザインにおいてビジュアル・フィードバック（英: Visual Fee

2016年12月7日 Illustrator 昔からIllustratorラブ！な私ですが、いつの間にやらWebデザインをする上での便利な機能が増えてきて、ますます嬉しい次第です。その中で今回は画像アセットを使った書き出し方法を紹介します。昔はスライスツールを使っていましたが、そんな面倒なことをしなくてもオブジェクトをドラッグ＆ドロップで簡単に書き出せちゃいますよ。 ↑私が10年以上利用している会計ソフト！ アセットの書き出しって何？ 2016年6月にアップデートされたIllustrator CCでは、従来のスライスとは違う、新感覚の画像書き出し方法である「アセットの書き出し」という機能が追加されました。オブジェクトをパネルにドラッグして追加すると、サイズや解像度、デバイスに合わせたフォーマットに書き出せます。Webやアプリ用のアイコンや、画面全体のデザインを行う上でも欠かせない、便利な機

Webを取り巻く技術の進歩で、グラデーションやシームレスな背景パターンなど、Webサイトをカラフルに彩る技術も発達していますが、いまだに根強い人気を誇るのが「白」をベースとしたWebサイトです。もともと、HTMLやCSSのデフォルトでも背景が白地だということも、採用される理由のひとつです。しかし、最近立ち上げられたWebサイトでは、新しい意味での「白地」の使い方を提案しているようです。 そこで今回は、Web技術が発達したいまだからこそ押さえておきたい「白」ベースのWebサイトの構築の7つのポイントを、事例とともにお伝えしていきます。 デザイナーがあえて白地を使う理由 王道の白地背景パターンですが、まだTableレイアウトが主流だったWebの黎明期と比較すると、デザイナーは少し違った意味合いで白地のデザインを選択することが多いようです。通販サイトやブログでは昔から頻繁に使われていましたが、最