はじめてのフォトショップ レイヤーとは？完全ガイド【動く図解付き】| レッスン２
この記事は、初心者のためのPhotoshop入門完全ガイドです。 ２回目のレッスンとなる今回は、フォトショップでの編集作業に欠かせない、「レイヤー」について詳しくご紹介します。 「フォトショップのレイヤーって何？」 「なんでレイヤーを利用すべきなの？」 「基本的なレイヤーの使い方を知りたい」 このレッスンが終わる頃には、そんな悩みが吹き飛び、レイヤーのすべてを知っていることでしょう。 これからフォトショップをはじめる人も、しっかりとした基礎を学びたい人も、必要なことがすべて詰め込まれています。 すぐにでも始められるよう、必要なことのみに絞り、できるだけシンプルに、だれにでも理解できるよう心がけています。 では、早速はじめていきましょう。
はじめてのフォトショップ使い方入門完全ガイド【動く図解付き】
このレッスンが終わるころには、フォトショップを怖いと感じることはなくなるでしょう。 この記事は、初心者のためのPhotoshop入門完全ガイドです。 これからフォトショップをはじめる人も、しっかりとした基礎を学びたい人も、必要なことがすべて詰め込まれています。 すぐにでも始められるよう、必要なことのみに絞り、できるだけシンプルに、だれにでも理解できるよう心がけています。 では、フォトショップの世界をのぞいてみましょう。
初心者に分かりやすい！JavaScript 入門チートシート - コムテブログ
TL;DR このページでは、Jamstack を使った構築や、Next.js を使う上で必要となる JavaScript の基礎知識をまとめたものを初心者向けにチートシート形式でご紹介します。JavaScript の主要な特性や概念を分かりやすく網羅していますので、JavaScript の学び直しにもご活用できるかと思います。定期的に見返しましょう！ 項目 内容
CSSのブレンドモードを美しいデモでインタラクティブに学べる -Brad Woods' Digital Garden
CSSのブランドモードは、知っているけどあまり使用したことがないという人もいると思います。そんなCSSのブレンドモードを使用して、さまざまな美しいデモでインタラクティブに学べるサイトを紹介します。 CSSのブレンドモードは、IEを除くデスクトップ・スマホのすべてのブラウザでサポートされています。 CSS Blend Modes Brad Woods' Digital Gardenは、Web上で作成するための設計図になることを目的としたサイトです。CSSをはじめ、HTMLやSVG、JavaScript、WebAPIなど、Webの実装に役立つさまざまなコンテンツが揃っています。 それらの中から最近リリースされた、CSSのブレンドモードを紹介します。ページのデザインも美しく、インタラクティブなデモがたくさんあるので、見ているだけでも楽しめます。 CSS Blend Modes まずは、CSSブレ
JavaScriptの配列メソッド: オブジェクトの配列を扱うときに役立つ便利な配列メソッドを分かりやすく解説
JavaScriptでオブジェクトの配列を操作するためにもっとも有用な配列メソッドとコードを紹介します。 JavaScript Array Methods: A Comprehensive Guide by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに filter()メソッド: オブジェクトの配列からキーstatusがactiveと等しいオブジェクトの配列を取得する find()メソッド: 配列内から特定のidを持つオブジェクトを検索する findIndex()メソッド: 配列内の特定のキーを持つオブジェクトのインデックスを検索する reduce()メソッド: オブジェクトの配列内にある特定のキーの値を合計する map()メソッド: オブジェクトの配列内に含まれる特定のキーに対応する一意
今すぐにNext.jsでフロントエンド開発 or Web制作を快適に始めたい方におすすめの簡単セットアップを紹介する
はじめに 株式会社LCLでフロントエンドエンジニアとして働いている「おとの」と申します。 今回は、今をときめくフロントエンドのフレームワーク「Next.js」を使って、個人もしくは複数人のチームで快適にフロントエンド開発を行いたい方にオススメのセットアップを紹介します。 本セットアップを行うメリットは以下の通りです。 （自動formatが有効になる等）開発速度が増す （StylelintやEslintの静的解析により）不具合の発生や潜在的なエラーを防ぎやすくなる コードの品質と一貫性を保つことができる Next.jsを使いこなせれば、フロントエンド開発だけに限らず、ランディングページ（LP）など静的なWebサイトの実装を行うWeb制作にも有用です。 私自身、Webサイト1ページのコーディングが求められる際もNext.jsを使っています。本セットアップも簡単に終わるので、今すぐ始めたい方はぜ
JavaScriptをもうちょっと理解する54のトピック - Qiita
この記事について JavaScriptはお好きですか？ Reactなどフロンドエンドを中心に人気の言語なので、触ってる人はたくさんいると思います。 奥深くて自分も好きな言語ですが、結構なんとなくで触っていたりしませんか？ 今回は自分が後輩によく聞かれた事や、自分が引っかかった事をたくさん書いていきます。 つまり基本的には初心者向け、よくても中級者向けです。 何か一個でも知らない事があれば御の字のつもりで書いたので、ぜひ気軽に読んでください！ JavaScript編 略称はJS、Javaダメぜったい いなさそうなのに稀にいるという・・ Web開発から入ってプログラムを広く知らない場合に発生しやすい？ Javaは全く別に王者がいるので、万が一使っていたららやめましょう。 略称は JS（じぇーえす） でお願いします。 データ型、Object Objectはキーと値をいくつも持てるJSのデータ型で
これでもうPhotoshopの描画モードに迷わない！ 「乗算」「焼き込みカラー」など、各描画モードがどのように機能するか解説
Photoshopなどのデザインソフトにある「乗算」「スクリーン」「焼き込みカラー」「覆い焼きカラー」など、各描画モードがどのように機能するかを解説します。 それぞれの違いがよく分からない、どんな効果があるのか分からないという人に、これを読めば描画モードでどれを使うか迷うことはなくなります。 Blending Modes by Dan Hollick (@DanHollick) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 描画（ブレンディング）モードとは 各描画（ブレンディング）モードについて解説 はじめに 見た目が思い通りになるまで、描画モードをいろいろ試していませんか？ 描画モードの種類 この記事を読んでもあまり変わらないかもしれませんが、少なくとも「比較（明）」や「比較（暗）」を使用することはなくなるでしょう
Reactを学ぶ上で知っておくべきJavaScriptの基本概念 - Qiita
はじめに 今回はFlyCode氏が紹介していた、Reactを学ぶ上で知っておくべきJavaScriptの基本概念を紹介します。 具体的なJavaScriptでのコード解説と、Reactではそれがどのように使われるのかを紹介します。 この記事の対象者 JavaScriptのよく使う基本文法を学びたい人 Reactの初心者から中級者 この記事の目標 React開発でよく使われるJavaScriptの文法や処理を理解する JavaScriptの基礎文法 本記事では下記の7つをピックアップして紹介します 三項演算子 分割代入 スプレッド構文 配列操作 アロー関数 非同期処理(Async/Await/Promise) APIコール 三項演算子 三項演算子はMDNでは下記のように解説されています。 条件 (三項) 演算子は JavaScript では唯一の、3 つのオペランドをとる演算子です。 三項演
フロントエンド開発をマスターする上で必要な知識 8選 2022年版
はじめに フロントエンドは、簡単に言えばWebアプリケーションやWebサイトにおけるユーザが目に見える部分のことを指す。ひとくちにフロントエンドと言っても、学ばなければならないことや知識が数多くあるので初心者にとっては何から勉強すればいいのかわからない人も少なくないだろう。 今回の記事では、個人の一見解としてフロントエンド開発をマスターするのに必要な基礎知識を徹底解説する。今回の記事を通して、フロントエンドの学習方法やその魅力を十分に理解していただければ非常に幸いである。 バックエンドに関しては以下の記事を参照してほしい。 フロントエンド開発に必要な知識 １．基本的な知識 フロントエンド開発をマスターする上では、以下の言語の基本文法や知識をマスターしておこう。これはWeb制作やWebデザインにも共通していることである。 HTML：Webページを作成するための言語。主にページ内の情報を構造化
定番のコード規約とライブラリから学ぶJavaScriptの命名テクニック（上級編） - ICS MEDIA
一般にプログラマーはコードを書いている時間より読んでいる時間の方が長いと言われており、わかりやすい命名は可読性や保守性の観点から非常に重要です。 この記事ではGoogleやAirbnbといった企業が採用しているスタイルガイドや、世界中で使われているJavaScriptライブラリであるReactとVue.jsのコードを調査する中で見つけた、わかりやすい命名をするためのテクニックを初級編と上級編の2回に分けて紹介します。 前回の初級編では、わかりにくい命名をした場合の問題点や、JavaScriptで共通認識となっているルール、すぐに使える命名テクニックを紹介しました。 上級編の今回は初級編で紹介したものでは表現しきれない、より複雑な処理を行いたいときに役立つ表現を集めました。 命名テクニック上級編 1. 有効 / 無効 の状態の表現 オブジェクトやステータスが有効か無効かを表現する単語です。
定番のコード規約とライブラリから学ぶJavaScriptの命名テクニック（初級編） - ICS MEDIA
プログラミングをしているとき、変数名や関数名の命名に迷ったことはないでしょうか？ 時間をかけて考えた変数名や関数名を後で見返したときに何の処理なのかわからないと思ったり、他の人が書いたコードを理解するのに時間がかかった経験は誰でもあると思います。 一般に、プログラマーはコードを書いている時間より読んでいる時間の方が長いと言われています。 わかりにくい命名はコードを読んでいる時間を長くしたり、バグを生む原因になってしまいます。 この記事ではGoogleやAirbnbといった企業が採用しているスタイルガイドや、世界中で使われているJavaScriptライブラリであるReactとVue.jsのコードを調査する中で見つけた、わかりやすい命名をするためのテクニックを初級編と上級編の2回に分けて紹介します。 初級編では、実際に仕事をする中でよく目にしたり自分でも使うことの多いものなど、すぐに使えるテク
SEOの学び方 ～ SEO初心者から上級者への道 - SEMリサーチ
2年ほど前に「SEOの学び方」という記事を公開しました。今回は改めて初級・中級・上級と3つの段階に分けて再整理しました。これからSEO関連のお仕事を始める方、SEOの勉強方法を知りたい方の参考になれば幸いです。 目次 SEOの学び方（初級） SEOは、Web経験がない新卒にはハードなお仕事 世界中の企業がSEOに取り組んでいる理由を理解する SEOはオーディエンスと事業の理解から始まる 自分でサイト運営・集客の経験をする 身近なものを題材にSEO施策を考えてみる 「この領域だけは、自信がある」というスキルの柱をつくる 自分自身もインターネットを活用する SEOの学び方（中級） SEOの全体図を学ぶ 英語 ケーススタディ（他社事例）を研究する 他人にSEOを教える Googleが公開しているドキュメントに全部目を通す 失敗してもいいので、施策を実施する 「今は学ばない」領域を決める 人が検索
フロント学習の最高の教材集 - Qiita
はじめに 今回はフロント学習で重宝できる教材をまとめました。 軽く自己紹介として、自分は新卒でフロントエンジニアとして入社し2022年で2年目になります。 実際に実務を通す中で「この教材のおかげで実装がスムーズにできた」「この教材をやってたおかげで理解ができた」といったような場面が2年の間で多々ありました。 今回紹介する教材は自分自身が実際に使ってよかったものかつ、そのほとんどが無料で学べるor低価格の教材になっています。 「フロントエンドを網羅的に学べかつ実務の基礎作り」という目的で教材を紹介します。 この記事の主な対象者 フロントエンドの学習をこれからしていきたい人 何を学べばよいのかがわからない人 HTMLとCSSはある程度かける人 この記事の目標 フロント学習の指針が立てられる 実務現場でも活用できるスキルを学べる教材を知れる JavaScript ドットインストールのJavaSc
【Docker】初心者向けDocker基礎編 | バシャログ。
こんにちは。nakagiriです。 今年は梅雨が明けるのが早くて毎日真夏並みに暑いですね。( ´∵｀) みなさんも熱中症にならないように気をつけてください。 今回からDockerについて全四回に分けて解説していきます。 一回目の本記事では、「Dockerって何だろう？」、「Dockerを使うとどんなメリットがあるのだろう？」といった疑問を解決するDockerの基礎編です。 Dockerに関する記事はたくさんありますが、難しい言葉が多く羅列されていてなんとなく難しいイメージを持たれている方もいるかもしれません。そこで、イラストを使ってなるべくわかりやすく噛み砕いてお伝えしていきたいと思います。 二回目以降の記事では、実際にDockerを使って解説していくので、ぜひ一緒にやってみてください。（※実際の構築は、Docker Composeを使用して解説する予定です。） Dockerとは？ Doc
【React】イラストで基礎を解説してみる（初心者向け） | バシャログ。
はじめまして。去年の9月にコーダーとして入社したnakagiriです！ 今日は、勉強中のReactについて解説します。 勉強する前は、先輩がReactをつかって開発をしているのは知っているけど、実際よく分からない。 そんな状態だったので、この機会にReactについてどのような特徴があるのか一つ一つ整理してまとめてみます。 この記事のゴール Reactにはどのような特徴があるか理解すること この記事の対象となる方 HTML、CSS、jQueryを使ってWEBサイトを作ってみたことがある方 Reactの特徴を知りたい方 そもそもReactとは？ Facebookが開発しているUIに特化したJavaScriptライブラリです。 FacebookやInstagram、Netflix やYahoo!にも使われている技術。 Vue.jsやAngular.jsと比較されること多い。 Reactの特徴 R
サーバ構築の初心者がAWSでサーバ構築をしてみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。テクニカルディレクターのタケです。 私はこれまでサーバ構築についてはあまりやっておらず、案件で必要な際はいつも業者に依頼していました。しかし勉強する機会があり、今回の記事はAWSでサーバ構築をしてみた話です。 細かく説明しだすと文字数が半端なく増えてしまうため、今回は作業内容を簡単に説明します！ 構成 今回構築する構成はAPサーバ用のパブリックサブネットとDBサーバ用のプライベートサブネットとなります。WEBサービスを行うときのシンプルな構成です。 VPCの作成 まずはVPCの作成から行います。VPC（Virtual Private Cloud）はAWSのネットワーク内に自分専用のネットワークを仮想的に構築したネットワークです。 VPCダッシュボードを表示し左のメニューにあるVPC→VPC作成をクリックします。 VPC作成画面が表示されるのでVPCの名前とCIDRブロック入力し
業務ができる中級者になるためのJavaScript入門（DOM編）
✨無料公開中✨ 業務ができる中級者になるためのJavaScript入門の第2弾となります。何度学んでも今一つ理解できないDOMに関して、できるだけわかりやすく説明しています。 業務ができる中級者になるためのJavaScript入門（文法編） https://zenn.dev/books/568dd4d86562a1/edit ✨開発環境に役立ててください✨ 👾 やっぱりwebpackがわからない（エピソード1） https://zenn.dev/antez/articles/58307946cf4f3e 👾 やっぱりwebpackがわからない（エピソード2） https://zenn.dev/antez/articles/638382faa06bd7 👾 そもそもnpmからわからない https://zenn.dev/antez/articles/a9d9d12178b7b2 ✨Wo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【最新のHTML仕様まとめ】「HTML Living Standard」がマークアップにとってなぜ大切なのか？ - Qiita
Reactを関数型プログラミングの文脈で理解する｜こわくない関数型プログラミング
