つちだにんじん

様々なジャンルで自分のメモや得た知識をnoteに書いていく予定です。 誰かの役に立つこ…

つちだにんじん

様々なジャンルで自分のメモや得た知識をnoteに書いていく予定です。 誰かの役に立つことがあればいいなと思っています。 よく聞かれますが、別に特別にんじんが好きなわけではありません。 http://ninjin.stars.ne.jp/ningenninjin/ (個人HP)

【graphic】飛び出す文字の作り方

こんにちは、つちだにんじんです。 今回はAdobe Illustratorで飛び出す文字を作る方法を書きます。 テキストを用意するまずは飛び出させたいテキストを用意します。 フォ…

つちだにんじん
つちだにんじん
3日前
1

【web】:rootで変数を定義する

こんにちは、つちだにんじんです。 今回は、cssの「:root」について書きます。 実は私も最近知って、「はえー！便利ー！」と感動したばかりです笑 :rootについて「:root」…

つちだにんじん
つちだにんじん
2週間前
2

【web】アイコン付きリンクボタンの作り方

こんにちは、つちだ にんじんです。 今回は、よく見かけるアイコン付きのリンクボタンの作り方を書きます。 初心者向けにしっかり説明できたらと思います（自分も初心者） …

つちだにんじん
つちだにんじん
3週間前
4

【web】テキストの装飾

こんにちは、つちだにんじんです。 今回は、web制作の際にテキストに装飾をつける方法について書きます。 「文字を一部装飾して目立たせたい！」ということはよくあるかと…

つちだにんじん
つちだにんじん
1か月前

【web/graphic】パス切りで透過画像を作成

こんにちは、つちだにんじんです。 今回はAdobe Photoshopを使用して透過画像を作成する方法を書きます。 Photoshopの機能が増えて、今では自動でオブジェクトを認識し、…

つちだにんじん
つちだにんじん
1か月前

【web】PHPなしでフォームを作成する方法

こんばんは、つちだにんじんです。 今回は、「PHPなんてそんなもの知らん！でもお問合せフォーム作りたい！」という方でも簡単にフォームの作成ができる方法をお伝えします…

つちだにんじん
つちだにんじん
1か月前
7

【ブログ】島根・鳥取に行きました

こんにちは、つちだにんじんです。 GWに島根の松江・出雲と鳥取の境港に遊びに行ってきました。 鳥取では境港市の「水木しげるロード」に行き、島根では「松江フォーゲル…

つちだにんじん
つちだにんじん
1か月前
14

【web】便利サイト

web制作初心者である私にとっては、いろんな方の知恵や力を借りてこそなんですよね・・・。 今回は、そんな初心者の私が活用させていただいているサイトをご紹介します。 …

つちだにんじん
つちだにんじん
1か月前
2

SVGatorのデータ書き出し・webサイトに貼り付け

webサイトを制作する際に「動くイラストをHPに使用したい！」という時に、CSSやJSを使わず感覚的にアニメーションを付与することのできる便利ツールがSVGatorです。 前回…

つちだにんじん
つちだにんじん
1か月前

SVGatorの使い方

自分用のメモも兼ねて、SVGatorの使い方を書きます。 ちなみにSVGatorはSVGデータのイラスト等に感覚的にアニメーションを付与することのできるweb上のツールです。 機能制…

つちだにんじん
つちだにんじん
1か月前
1

【graphic】飛び出す文字の作り方

こんにちは、つちだにんじんです。 今回はAdobe Illustratorで飛び出す文字を作る方法を書きます。 テキストを用意するまずは飛び出させたいテキストを用意します。 フォントはなんでもOKです！ アウトラインをかけなくてもできますので、後々テキスト修正する可能性があることを考えれば、アウトラインはかけない方がいいかと思います！ テキストに境界線をつける 次に、テキストに境界線を設定します。 普通に線を設定するだけだと、きっと文字の内側に線が入っていってしまうと

つちだにんじん

【web】:rootで変数を定義する

こんにちは、つちだにんじんです。 今回は、cssの「:root」について書きます。 実は私も最近知って、「はえー！便利ー！」と感動したばかりです笑 :rootについて「:root」は、cssの擬似クラスの一つです。 擬似クラスは他にも「:hover」「::before」「::after」「:nth-of-type」などたくさんあって、セレクタに付与して使うものです。 今回は:rootを使って変数を定義する便利な方法を紹介します。 （cssの値のテンプレみたいなのが設定でき

つちだにんじん

【web】アイコン付きリンクボタンの作り方

こんにちは、つちだ にんじんです。 今回は、よく見かけるアイコン付きのリンクボタンの作り方を書きます。 初心者向けにしっかり説明できたらと思います（自分も初心者） こういうボタンです↑ 色々なところでよく見かけ、汎用性の高いボタンです。 ちなみにこのボタンは、 <!---HTML--><a href="URL"> <div class="text">問合せはこちら</div> <div class="icon"></div></a> /*CSS*/a{

つちだにんじん

【web】テキストの装飾

こんにちは、つちだにんじんです。 今回は、web制作の際にテキストに装飾をつける方法について書きます。 「文字を一部装飾して目立たせたい！」ということはよくあるかと思います。 下線やラインマーカー風、ストライプや点線等々様々なライン装飾がありますよね！ 私はできるだけ面倒でなく、画面幅が変わってもできるだけ崩れないやり方はないのかと血眼になって調べています笑 面倒臭いのはイヤ・・・(切実) まずはHTMLです。 spanタグで括ってクラス名をつけています。 <!---

つちだにんじん

【web/graphic】パス切りで透過画像を作成

こんにちは、つちだにんじんです。 今回はAdobe Photoshopを使用して透過画像を作成する方法を書きます。 Photoshopの機能が増えて、今では自動でオブジェクトを認識し、選択範囲を作成してくれるため、細かいところの範囲修正くらいですぐできてしまいます。 私も、ずっとその機能に頼って「透過作業なんて誰にでもできて楽チンじゃん」と思っていました。 しかし、制作の仕事に携わるようになってから、「これだとデータ重くなるし、パス切りの方が綺麗に抜けるからパス切りで」

つちだにんじん

【web】PHPなしでフォームを作成する方法

こんばんは、つちだにんじんです。 今回は、「PHPなんてそんなもの知らん！でもお問合せフォーム作りたい！」という方でも簡単にフォームの作成ができる方法をお伝えします。 この方法は、 ・HTML・CSSでフォームのマークアップと装飾ができる ・Googleフォームを作成できる という人なら問題ありません！ ちなみに私も「PHPなんて知らん民」です。 追記：nameプロパティのところ間違えて記載していましたので、修正しました。（2024/05/30） 1.フォームのマークア

つちだにんじん

【ブログ】島根・鳥取に行きました

こんにちは、つちだにんじんです。 GWに島根の松江・出雲と鳥取の境港に遊びに行ってきました。 鳥取では境港市の「水木しげるロード」に行き、島根では「松江フォーゲルパーク」と「出雲大社」に行きました。 鳥取県境港市「水木しげるロード」 実は私水木しげる先生の作品が大好きで、水木しげるロードが一番楽しみでした。 楽しみすぎて夜しか寝れませんでした。 水木しげる先生の絵柄はもちろん、キャラクターも個性豊かで大好きです！ ちょうど水木しげる記念館のリニューアルオープンもあって

つちだにんじん

【web】便利サイト

web制作初心者である私にとっては、いろんな方の知恵や力を借りてこそなんですよね・・・。 今回は、そんな初心者の私が活用させていただいているサイトをご紹介します。 ダミーテキストジェネレータまずは「ダミーテキストジェネレータ」です。 ワイヤーフレームを作成する際や、文章が決まっていないけどここに50文字くらいテキストを挿入するなどの場合に、自分で打ち込むのは面倒ですよね・・・。 そんな時に私はこの「ダミーテキストジェネレータ」を活用しています。 とてもシンプルで使いやす

つちだにんじん

SVGatorのデータ書き出し・webサイトに貼り付け

webサイトを制作する際に「動くイラストをHPに使用したい！」という時に、CSSやJSを使わず感覚的にアニメーションを付与することのできる便利ツールがSVGatorです。 前回アニメーションの設定の仕方を書きましたので、今回はデータの書き出しと、そのアニメーションSVGを実際にweb制作で使用するやり方（webサイトへの貼り付け方）について書いていきます。 SVGatorの使い方については前回の記事 に記載していますので、ご存じない方はご参考にどうぞ！ SVGアニメー

つちだにんじん

SVGatorの使い方

自分用のメモも兼ねて、SVGatorの使い方を書きます。 ちなみにSVGatorはSVGデータのイラスト等に感覚的にアニメーションを付与することのできるweb上のツールです。 機能制限はありますが、無料版もあります。 アカウントを作成するまずはアカウントの作成です。 SVGatorのサイトへ行き、「サインアップ」からアカウントを作成できます。 ちなみに日本語対応されていないため、私はGoogleの翻訳機能を使用しています。 SVGのデータをアップロードor SVGato

つちだにんじん