CSS Flexboxの基礎となる考え方や構造、各プロパティの使い方を一通り学べるチュートリアルを紹介します。チュートリアルはステップ形式で、簡単なものから始まるので独学の人、そして初心者にもオススメです！ 30日分のチュートリアルですが、1日分は3分くらいなので、正味1,2時間でCSS Flexboxをマスターできると思います。 Flexbox30 -GitHub by Samantha Ming 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1日目: Flexboxとは Flexboxの前は、レイアウトをするためにfloatを主に使用していました。CSSのデベロッパーは、floatは古い方法で限界があり、フラストレーションが貯まることをよく知っています。 しかし、現在は違います！ レスポンシブ対応の柔軟なレイアウトはもちろ

Photoshopレタッチビジュアル / 制作動画 こんにちは。 札幌を拠点とし活動中のレタッチャーの大谷キミトです。 またまた久しぶりのnoteです。 １月に書いて以来。 さて今回は文字で説明というよりはこんな感じで作っているよというPhotoshop画面を動画で撮っているので是非参考にしてみてください。 いつも光やエフェクトに意味を持たせたりするのですが、今回はそこまで深く考えずにエフェクトを入れてみました。 なんとなくかっこよくなるように勢いってやつですね。 たまにはそんな勢いで作る絵も良き。 前回の記事はこ

CSSでブロック要素を上下中央揃え（天地左右の中央に配置）する方法はいくつかありますが、CSS Gridを使う方法が現在では一番手軽です。CSS Gridレイアウトを使うと、たった2行で上下中央揃えができます。 ▼ CSS .container { display: grid; place-items: center; } デモを別ウインドウで再生する ソースコードを確認する ※CSS GridだとIE 11に対応できません。しかし、IE 11は2022年6月にサポートを終了しているので、ウェブ制作者が気にする必要はないでしょう。 Flexboxだと3行 対して、Flexboxでも上下中央は実現できます。Flexboxの場合、中央揃えしたい要素の親に対してたった3行記述するだけです。モダンブラウザはもちろん、Internet Explorer 11（以下、IE 11）でもベンダープレフィッ

Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミック デザインにおけるHTMLとCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in Modular Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様・元サイト様にライセンスを得て翻訳しています。 最近のWeb制作の手法は、数多くあるフレームワークやUIキットからあらゆる種類のコンテンツのブロックを組み立てています。しかしながら、モジュール性と汎用性はまだWeb要素レベルでは達成されていないと言えるでしょう。 LEGOブロックの考え方を

こんにちは、デザイナーのぺちこです。 以前、「Tumblrでもここまでデザインできる！オリジナルカスタマイズの実例解説」という記事で、「いいオフィスBLOG」の例を出して解説をしたのですが、汎用性がないなあと今更反省をしています。 前回はまだTumblr初心者ということもあったので許してもらうとして……。今回は、本気でTumblrテーマを作りたい人のために出直してきました！ 1つの記事にすると長い戦いになると思ったので、以下の順で連載のかたちをとってご紹介したいと思います。 Vol.1 テーマカスタマイズの基本編 Vol.2 テーマカスタマイズの独自タグ理解編 Vol.3 テーマカスタマイズ実践編 テーマカスタマイズということで、あらかじめ「HTML／CSSの理解がある」「Tumblrの管理画面くらいは知っている」というのを前提に話を進めていきます。 Vol.1「テーマカスタマイズの基本編

こんにちは、デザイナーの姐さんです。 今回は、Photoshopで8bitゲーム風デザインをするときの設定やおすすめツールをご紹介します。 なお、この記事ではPhotoshopCC2021:22.3.1を使用しています。 「ググってわからないこと」が一瞬で解決するかも？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーがマンツーマンで指導します！ ▼少しでも気になる方は、ぜひ公式サイトをご覧ください！ Photoshopの基本設定 ドットの大きさに合わせてグリッドを設定する まず、100×100の新規ファイルを作りました。 次に「編集」→「環境設定」→「ガイド・グリッド・スライス」を開きます。 出てきた画面のグリッドのところを調整します。区切り方もお好みですが、今回はサ

こんにちは。 幼い頃、祖父母のスパルタ油絵教育から逃げ出した過去を持つ、デザイナーの佐藤タカアキ（@sato_tkaaki）です。 そんな過去にリベンジすべく、今年のお盆休みは、4日間の油絵講習を受講してきました。 さて、僕の主な業務の1つに背景ジャックのデザインがあります。 使用しているツールはPhotoshopです。 下記の画像のような劇画チックなデザインをする上で、絵の具ブラシに非常に助けられました。 が、自分の求める絵の具ブラシを探すのに、思いのほか時間がかかってしまいました。 特に駆け出しデザイナーの方には、同じ思いをしてほしくない！ そこで今回は、そのうちきっと役に立つ、使い勝手のよい絵の具ブラシをまとめさせていただきました。 これらのブラシツールを上手く使いこなせば先程の画像のようなデザインだってちょちょいのちょいです。 あまり使用する機会のない絵の具ブラシかもしれませんが、

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

ここではスリームデザインが実際に仕事をする際に使っているほぼ全ての技術を紹介します（追加していきますのでブックマークしてご活用ください）。 初心者の方でもしっかりと取り組めば短期間で全ての技術を身につけることができると思いますので、是非習得してあなたのセンスを思いっきり表現できるようになりましょう！

2014年3月19日 Illustrator, Webサイト制作 これまでは「WebデザインといえばPhotoshop」というのが通例でした。しかしIllustratorもWeb制作の環境に適応されてきた今、フラットデザインやイラストを多く扱うWebサイトでは断然Illustratorをおすすめします！今回はあまり知られていないIllustratorとWebデザインの相性や、Webデザイン用の設定方法等をご紹介します。 ↑私が10年以上利用している会計ソフト！ Illustrator初心者さんへ Illustratorはベクター形式の画像を作成できるAdobe社のアプリです。ロゴやイラストを作る時にはかかせません。Adobeの公式チュートリアルサイト、Adobe TVではIllustratorの概要やチュートリアルをはじめ、新しい機能の紹介も随時追加されています。 Illustratorは

まだリリース前だが期待できそうなのでご紹介。 A to Z CSSでは、CSSのいろいろが学べる動画を提供していくようだ。 動画の数は26、ちょうどアルファベットの数だ。 またAの動画は「auto」、Bの動画は「box-model」といった具合にもなっている。 AからZで学ぶことにより、直感的に進捗がわかるかもですな。リリースに期待したい。

本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、「Adobe Dreamweaver CC」（以下、Dreamweaver）をメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗（はかど）らせる方法を解説していく。さまざまなモダンな技術としては、「Sass」「Compass」「Emmet」（旧、Zen-Coding）を想定している。 今回は、Dreamweaverの概要と最新版Dreamweaverの新機能、WordPressの概要、Dreamweaver＋WordPressの環境構築を行う際に必要な初期設定などを紹介していこう。 そもそもDreamweaverとは、なぜDreamweaverを使うのか DreamweaverはWebサイト／Webアプリケーションの制作ツールだ。HTMLエディタという見方をすれば非常に動作が重そうで、他の軽量なエデ

露出不足写真悩ましいですね、こんな暗いの入稿するんだ…なんて思ったり、しませんけど、しませんてば。 でももっと楽に明るくしてベースを作っちゃえばいつもの補正でいけるのになぁ、とは思いますよ…ね？ そこで！ 効果のほどをごらんください。 どうでしょ？むりくり明るくした感あまりありません。色もそれほど破綻してませんよね。 では、やり方。 ちょー簡単です。 いじょ。 トーンカーブやレベル補正などを描画モード「除算」で乗せるだけ、です。 （注意：描画モード「除算」の搭載はPhotoshop CS5以降です） 乗せた直後は、 こうなっちゃったり真っ白になったりするんでビビりますが、 シャドウポイントをそのまま、ぐいっと持ち上げると、どんどん色が出てきます。 一番上まで持ち上げると元の画像に。反応が敏感なので、トーンカーブをキーボード操作した方がいいですね。 ショートカットキーはこちらで→Photos

テストしてますか！ スマホブラウザ対応の結合テストとか辛いですね。そうですね。 というわけでSeleniumでiOSシュミレーターのブラウザを動かして見ました。 Seleniumには、iPhone driverというのがあるのでそれを使いますです。 http://code.google.com/p/selenium/wiki/IPhoneDriver 以下の行動をとります。もちろんMac上です。 XCode の4.2以上を入れます #git clone https://code.google.com/p/selenium/ #cd selenium #./go iphone #open iphone/iWebDriver.xcodeproj #Xcode が立ち上がるはずなので、適切なiPhoneを選択し、Runします 上記が全部うまくいくと、Xcodeのシュミレーター上で、RemoteD

最近はアニメーションをFlashではなく、CSSやJavaScriptで実装されているサイトをよく見るようになりました。 今回は復習も兼ねて、CSSで動きを付けられるanimationとtransitionのおさらいをしてみたいと思います。 ベンダープレフィックスをつけないと動かないブラウザもありますが、省略します。 animationとtransitionの違い どう違うのかなと思って調べたのですが、いまいちわからなかったので、違いを並べてみました。 animation ループ可能 keyframesで細かい設定が可能 ウインドウ読み込んで即実行が可能 transition ループがない 自然に最初の状態に戻る hoverなどのキッカケを与えてあげないと動かない JS使えば違うかもしれないですが、一応こんな印象です。違ったらすみません。 それぞれを翻訳すると、animationはそのまま

現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。 もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応 属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応 透過PNGに対応 opacityに対応 といったことが可能になります。要はCS

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

2014年8月17日 Photoshop, Webサイト制作, Webデザイン 「連載！実践で学ぶWebサイト制作ガイド」第四弾はAdobe Photoshopというツールを使って実寸のサイトデザインを作成します。Photoshopで説明していきますが、同様のグラフィックツールでもOK。Photoshopは体験版もあるのでぜひご利用ください。説明しやすいよう、簡単なデザインにしたつもりですが、すごく長くなってしまったような…。わかりにくくてすみません X( ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その4 目標：実際の幅にあったサイトデザインが作れる・Photoshopの基本的なツールを使った装飾ができる 必要なもの：Adobe Photoshop 対象レベル：Photoshopの基本的なツールの使い方がわかる 事前知識は以下の記事でおさらい！ これからP