ちょっと物足りない金属表現も、ヘアライン風のテクスチャを重ねることで、グッとリアルに！ Photoshopの「ノイズ」と「ぼかし」で簡単にヘアラインテクスチャを作成！さらに重ね方も初心者向けに解説！
初心者向けWebデザインのハウツーサイトを目指してます。HTML/CSS、Photoshopの使い方など、わかりやすいサイトを作れるように勉強中です。
はじめまして。ブログ村に登録してみました。よろしくお願いいたします。
【Photoshop】ヘアライン加工っぽい金属テクスチャの作り方
ちょっと物足りない金属表現も、ヘアライン風のテクスチャを重ねることで、グッとリアルに！ Photoshopの「ノイズ」と「ぼかし」で簡単にヘアラインテクスチャを作成！さらに重ね方も初心者向けに解説！
【Photoshop】金属っぽいテクスチャをサクッと作る！【グラデーション】
素材集や AI に頼るのもいいですが、『ちょっとだけ調整したい！』『イメージ通りに作りたい！』なんてことありますよね。今回は、初心者向けに超基本的な“金属っぽい”テクスチャの作り方を解説します！
パスを使った「中マド」の基本的な作り方を初心者向けに解説。ドーナツやカップの取っ手など、穴の切り抜きを Photoshop で実現する方法をわかりやすく紹介します。
パスやシェイプの結合には『重ねて結合』と『完全に結合』の2つの考え方があります。Photoshopの実際の画面を使いながら、操作方法と見方をわかりやすく解説！
パスとシェイプの違いと関係を初心者向けに解説。Photoshop 上で迷いがちなデータの見分け方や使い分けをシンプルに理解できます。
【Photoshop】必須スキル！ペンツールの基本操作をパターン別に紹介！
Photoshopの必須ツール「ペンツール」の基本操作を初心者向けに解説！AltキーやCtrlキーを使ったアンカーポイントやハンドルの操作など、パスを自在に扱うための基礎をまとめました。
Photoshopで人物写真を切り抜く基本手順を初心者向けに解説。「選択とマスク」の使い方や、髪の毛など細かい部分の調整方法まで、ほどほどに使える切り抜きのハウツーをまとめました。
【Photoshop】ペンツールで切り抜く！【かんたんな被写体】
ざっくり手順としては、「ペンツール」でパスを描く⇒「パス」を選択範囲にする⇒「レイヤーマスク」を追加して切り抜くという流れです。個人的にこのやり方を必須でマスターしてほしいと思います！何度もやっているうちに、かんたんな形状ならパパパッと“パスを切れる”ようになっていくのでぜひ積極的にやってみてください！
nav 要素は、いわゆる“ナビ”以外にも、なにげに使われている件【初心者向け】
nav 要素は、サイトやページを案内するためのリンクを囲う要素です。サイト全体の構造を案内する「グローバルナビ」はもちろん、「パンくずリスト」や「関連記事リンク」、「ページネーション（前/次ページリンク）」なども nav 要素で囲ったりする使い方ができます。
nav 要素は、いわゆる“ナビ”以外にも、なにげに使われている件【初心者向け】
nav 要素は、サイトやページを案内するためのリンクを囲う要素です。サイト全体の構造を案内する「グローバルナビ」はもちろん、「パンくずリスト」や「関連記事リンク」、「ページネーション（前/次ページリンク）」なども nav 要素で囲ったりする使い方ができます。
article 要素は、自己完結したコンテンツで使います。例えば1本の記事や投稿などが該当します。また、各記事へのリンクボタン、レビューやコメントなど、さまざまな独立して意味を持つコンテンツにもよく使われます。
aside 要素は、サイドバーや、広告といったメインのコンテンツから明確に独立した情報を囲うために使われます。
main 要素は、主要なコンテンツ部分を囲う要素です。HTML ドキュメントに『main 要素は1つだけ』、hidden 属性で非表示にしている main 要素であれば、複数記述しても問題ありません。
足元をおろそかにすることなかれ！footer 要素についてまとめてみた。【初心者向け】
footer 要素は、「セクショニングコンテンツ」内にある場合はそのセクションのフッターとして、「body 要素」が footer 要素に一番近い先祖なのであれば、Web ページ全体の“フッター”として扱われます。
足元をおろそかにすることなかれ！footer 要素についてまとめてみた。【初心者向け】
footer 要素は、「セクショニングコンテンツ」内にある場合はそのセクションのフッターとして、「body 要素」が footer 要素に一番近い先祖なのであれば、Web ページ全体の“フッター”として扱われます。
セクショニングコンテンツとは、HTML におけるコンテンツモデルのカテゴリのうちの一つで、header 要素および footer 要素の範囲を定義するコンテンツです。
Web ページを作りはじめるときに、ヘッダー部分を header 要素で“セクショニング”してようやっと『さて作るぞ！！』ってな感じで気持ちが入りますよね！そんなヘッダー部分の大枠を担う header 要素、私は『ヘッダーである』ということ
画像は figure 要素で囲え！figure 要素を使えばちょっと賢くなった気になれる件【初心者向け】
画像を囲う figure 要素についてまとめました。 figure 要素は写真や図、グラフなど、意味のある構造として表現する図を適切にマークアップするのに最適です。
head 要素には、ドキュメントのメタデータを記述します。SEO や UI/UX、シェアリングにおいて重要な設定なので丁寧な記述を心がけましょう！
メタという言葉のニュアンスを調べてみたら、哲学的な話で、意識が次元を超えそうになった件。
「メタ発言」や「メタデータ」などいろいろなメタがありますが、いずれの“メタ”も「別次元から物事を見る」という本質は同じ。「神さまの視点」に近いものだと言えます。
いつもコピペだった「メタタグ」とちゃんと向き合ってまとめてみた。【初心者向け】
meta 要素は、Web ページの概要や特性を伝えるための情報、「メタデータ」を設定することができる要素です。title / base / link / style / script 要素では表現できない部分を担当します。
Photoshop の生成 AI 「AI フォトエディター」で遊んでみた。
Photoshop の生成 AI「AI フォト エディター」を使って、テキストだけで、ゼロからの画像生成を体験してみました！
link 要素を何気なく使っていたので、ちゃんと向き合ってみた。
link 要素って、rel 属性を入れればいいの？href 属性？type 属性って入れるんだっけ？media 属性は？コピペをずっと使いまわして、何となく使ってませんか？今こそ、link 要素と向き合い正しい知識で使えるようになりましょう！
HTML でとても大切な要素の1つ、 title 要素！どんな役割があるのか、どんなルールなのか、などなど初心に帰ってまとめてみました。
HTML コーディングするときに、あたりまえのように使う body 要素について、初心に帰ってまとめてみました。 body 要素のルール body 要素のルールはシンプルです。『1つの HTML ドキュメント（HTML ファイル）に1つだけ
img 要素は、src 属性と alt 属性をつけて記述します。基本形はの3点セットで覚えておきましょう。サイズは、CSS で指定するのが個人的にはオススメ！
「絶対パス」、「ルートパス」、「相対パス」の記述方法をよく混乱して、間違えるのでまとめました。特に相対パスは図を用いて解説しています。
Photoshop で Web 用画像の書き出し方2種類をまとめてみた！
「Adobe Photoshop」で Web ページ用に画像を作成したら“書き出し”をします。その方法を初心に帰ってまとめてみました。 この記事でわかること「Web 用に保存（従来）」での画像の書き出し方法「書き出し形式」と「アートボード」
Web ページのテキストの折り返し（ワードラップ）をコントロールするには柔軟に使えるoverflow-wrap: anywhare;の使用をオススメします。
広告少なめでシンプルで使いやすかったブログを見るアプリ「ブログみる」【レビュー】
ブログを見るアプリ「ブログみる」は、インターフェースがシンプルで広告も控えめ！とても使いやすいです。スマホでブログを見るのにとてもオススメです！
CSSだけで背景を固定するパララックス風スタイル【iPhone 対応】
Web ページで背景画像を固定するデザインを作りたいですか？ See the Pen parallax by MATSUDAI (@matsudai) on CodePen. ↑こんな感じ！イケてる感ありますよね！ この記事でわかることiO
HTMLの「dl 要素」、「dt 要素」、「dd 要素」のそれぞれの基本的な使い方や用語や意味についてまとめてみました。
実質1円という売り文句の iPhone 15 を契約してみた。【レビュー】
SoftBankの実質24円のiPhone15を契約してきましたので、ブログやSNS用途を含めた普段使いという視点でレビューをまとめました。写真のクオリティや契約のコストをまとめましたので参考になれば幸いです。
スマホの写真をパソコンに取り込むのに“めんどくさくない”方法として「iCloud」と「Google ドライブ」のオススメなポイントを紹介します。
【Web デザイン】ブログ記事の行間はどれくらいがいいの？【二分四分】
ブログをせっせと書きなぐり『よしできたぞ！』と読み返してみたら、なんだか読みづらいさにガッカリなんてことは日常茶飯事。（内容はさておき……。）そんな感じで読みやすさってなんだろうと考えてみたら、「行間」ということばがおぼろげながら頭に浮かん…
ブログ記事の「見出し」のデザインって、ブログの見やすさに直結する大切な要素だと思いませんか？大きい文字にしたり、下線を引いたり、帯を引いたり、一風変わったデザインでブログのイメージを引き立てたり。今回はそんな「見出し」のデザインについてまと…
span 要素のこと、ちゃんと理解して使えてますか？！私は、span 要素があまり好きではありませんでした。なぜなら、どうしようもなくなったときに苦し紛れで召喚する最後の手段みたいなイメージがあったからです。あと語呂があまり好きじゃないです…
2024年10月11日、まだ少しだけ暑いですね。最近、ブログで写真をよく使うので、せっかくなので、秋を探しに家の周りを探索してきました。この記事を読んで、秋のデザインのヒントになれば幸いです。さて、ちかごろ雨の日が続いていましたが、今日は陽…
ちょっと物足りない金属表現も、ヘアライン風のテクスチャを重ねることで、グッとリアルに！ Photoshopの「ノイズ」と「ぼかし」で簡単にヘアラインテクスチャを作成！さらに重ね方も初心者向けに解説！
素材集や AI に頼るのもいいですが、『ちょっとだけ調整したい！』『イメージ通りに作りたい！』なんてことありますよね。今回は、初心者向けに超基本的な“金属っぽい”テクスチャの作り方を解説します！
パスを使った「中マド」の基本的な作り方を初心者向けに解説。ドーナツやカップの取っ手など、穴の切り抜きを Photoshop で実現する方法をわかりやすく紹介します。
パスやシェイプの結合には『重ねて結合』と『完全に結合』の2つの考え方があります。Photoshopの実際の画面を使いながら、操作方法と見方をわかりやすく解説！
パスとシェイプの違いと関係を初心者向けに解説。Photoshop 上で迷いがちなデータの見分け方や使い分けをシンプルに理解できます。
Photoshopの必須ツール「ペンツール」の基本操作を初心者向けに解説！AltキーやCtrlキーを使ったアンカーポイントやハンドルの操作など、パスを自在に扱うための基礎をまとめました。
Photoshopで人物写真を切り抜く基本手順を初心者向けに解説。「選択とマスク」の使い方や、髪の毛など細かい部分の調整方法まで、ほどほどに使える切り抜きのハウツーをまとめました。
ざっくり手順としては、「ペンツール」でパスを描く⇒「パス」を選択範囲にする⇒「レイヤーマスク」を追加して切り抜くという流れです。個人的にこのやり方を必須でマスターしてほしいと思います！何度もやっているうちに、かんたんな形状ならパパパッと“パスを切れる”ようになっていくのでぜひ積極的にやってみてください！
nav 要素は、サイトやページを案内するためのリンクを囲う要素です。サイト全体の構造を案内する「グローバルナビ」はもちろん、「パンくずリスト」や「関連記事リンク」、「ページネーション（前/次ページリンク）」なども nav 要素で囲ったりする使い方ができます。
nav 要素は、サイトやページを案内するためのリンクを囲う要素です。サイト全体の構造を案内する「グローバルナビ」はもちろん、「パンくずリスト」や「関連記事リンク」、「ページネーション（前/次ページリンク）」なども nav 要素で囲ったりする使い方ができます。
article 要素は、自己完結したコンテンツで使います。例えば1本の記事や投稿などが該当します。また、各記事へのリンクボタン、レビューやコメントなど、さまざまな独立して意味を持つコンテンツにもよく使われます。
aside 要素は、サイドバーや、広告といったメインのコンテンツから明確に独立した情報を囲うために使われます。
main 要素は、主要なコンテンツ部分を囲う要素です。HTML ドキュメントに『main 要素は1つだけ』、hidden 属性で非表示にしている main 要素であれば、複数記述しても問題ありません。
footer 要素は、「セクショニングコンテンツ」内にある場合はそのセクションのフッターとして、「body 要素」が footer 要素に一番近い先祖なのであれば、Web ページ全体の“フッター”として扱われます。
footer 要素は、「セクショニングコンテンツ」内にある場合はそのセクションのフッターとして、「body 要素」が footer 要素に一番近い先祖なのであれば、Web ページ全体の“フッター”として扱われます。
セクショニングコンテンツとは、HTML におけるコンテンツモデルのカテゴリのうちの一つで、header 要素および footer 要素の範囲を定義するコンテンツです。
Web ページを作りはじめるときに、ヘッダー部分を header 要素で“セクショニング”してようやっと『さて作るぞ！！』ってな感じで気持ちが入りますよね！そんなヘッダー部分の大枠を担う header 要素、私は『ヘッダーである』ということ
画像を囲う figure 要素についてまとめました。 figure 要素は写真や図、グラフなど、意味のある構造として表現する図を適切にマークアップするのに最適です。
head 要素には、ドキュメントのメタデータを記述します。SEO や UI/UX、シェアリングにおいて重要な設定なので丁寧な記述を心がけましょう！
「メタ発言」や「メタデータ」などいろいろなメタがありますが、いずれの“メタ”も「別次元から物事を見る」という本質は同じ。「神さまの視点」に近いものだと言えます。
nav 要素は、サイトやページを案内するためのリンクを囲う要素です。サイト全体の構造を案内する「グローバルナビ」はもちろん、「パンくずリスト」や「関連記事リンク」、「ページネーション（前/次ページリンク）」なども nav 要素で囲ったりする使い方ができます。
nav 要素は、サイトやページを案内するためのリンクを囲う要素です。サイト全体の構造を案内する「グローバルナビ」はもちろん、「パンくずリスト」や「関連記事リンク」、「ページネーション（前/次ページリンク）」なども nav 要素で囲ったりする使い方ができます。
article 要素は、自己完結したコンテンツで使います。例えば1本の記事や投稿などが該当します。また、各記事へのリンクボタン、レビューやコメントなど、さまざまな独立して意味を持つコンテンツにもよく使われます。
aside 要素は、サイドバーや、広告といったメインのコンテンツから明確に独立した情報を囲うために使われます。
main 要素は、主要なコンテンツ部分を囲う要素です。HTML ドキュメントに『main 要素は1つだけ』、hidden 属性で非表示にしている main 要素であれば、複数記述しても問題ありません。
footer 要素は、「セクショニングコンテンツ」内にある場合はそのセクションのフッターとして、「body 要素」が footer 要素に一番近い先祖なのであれば、Web ページ全体の“フッター”として扱われます。
footer 要素は、「セクショニングコンテンツ」内にある場合はそのセクションのフッターとして、「body 要素」が footer 要素に一番近い先祖なのであれば、Web ページ全体の“フッター”として扱われます。
セクショニングコンテンツとは、HTML におけるコンテンツモデルのカテゴリのうちの一つで、header 要素および footer 要素の範囲を定義するコンテンツです。
Web ページを作りはじめるときに、ヘッダー部分を header 要素で“セクショニング”してようやっと『さて作るぞ！！』ってな感じで気持ちが入りますよね！そんなヘッダー部分の大枠を担う header 要素、私は『ヘッダーである』ということ
画像を囲う figure 要素についてまとめました。 figure 要素は写真や図、グラフなど、意味のある構造として表現する図を適切にマークアップするのに最適です。
![[works] HOPJAPAN Taproomいわき オリジナルTシャツ](https://img.blogmura.com/sites/356499/post-images/79271940.webp/crop/120x120)
![[diary] 背徳の。](https://img.blogmura.com/sites/356499/post-images/79253156.webp/crop/120x120)
![[diary] ラジカセ](https://img.blogmura.com/sites/356499/post-images/79271941.webp/crop/120x120)
