未分類 【テキスト縁取り】テキストの周りに枠線をつける方法【簡単キレイ】
結論から言うとつぎのようにやります HTML <h1 class="strokeBlack" style="--word:'テキストデコレーション！';"> テキストデコレーション！ </h1> <h2 class="strokeRed" ...
Photogentle
未分類 
イラストレーターの練習問題 ロゴの作成課題
概要 キャンバスサイズ 4cm * 4cmなど（ガイドラインはA4推奨） 納品形式 svgデータ 作業内容 新規ファイルを作成し、ロゴ・マークを作成してください。 作成するロゴのテーマ例 自身の名前 フリーランスで活動することを想定した屋号...
イラストレーターの練習問題 名刺の作成課題
概要 画像サイズ 55mm×91mm 納品形式 aiデータ / 文字のアウトラインをすること ※アウトライン前のデータも別で保存しておくこと フォント 自由に選んでください 作業内容 新規ファイルを作成し、自分の名刺を作成してください。 ...
コーディング練習問題 CSSアニメーション練習問題
概要 ファイルを編集し、要素にアニメーションをつけてください。 トランジション アニメーションはトランジションを使用すること ホバーしたら発動 3秒かけて背景が黒に変わる ホバーを外す時もアニメーションが動くようにする キーフレームアニメー...
コーディング練習問題 Gridレイアウト実践問題
概要 ファイルを編集し、以下のようなレイアウトを作成してください。 横並びにはグリッドレイアウトを使用すること を使っても良い 目的 グリッドレイアウトの使い方の基本をマスターする。 データ 使用ソフト VisualStudioCode 答...
未分類 【News-cms】管理画面搭載の「お知らせ一覧」をサイトに追加できるシステムを作りました【無料配布】
News-cms：導入ガイドと紹介 このシステムについて Webサイト制作の際にwordpressを構築するほどではないが「サイトに簡単更新ができるお知らせ欄を追加したい！」というケースがあるのではないでしょうか。 そんな方のために軽量かつ...
WEB制作基礎知識 Sass超入門 （さわりだけ）
Web制作でよく使われるSassについて知っておこう！ CSSを作成するために言語、Sass(SCSS)があります。 がっつり使っての現場も当然ありますのでまずは概要を知っておきましょう！ PHP（Hypertext Preprocesso...
CSSレイアウトテクニック SVGArtistaの使い方
SVGデータでパスのアニメーションを実装しよう！ このサイトでパスアニメーションが作成できます。やってみましょう！ SVGデータを作る まずはSVGデータを作る必要があります。 イラストレーターで作成してください。 データの注意点として パ...
CSSレイアウトテクニック youtubeとgooglemap埋め込みのレスポンシブ化
youtubeとgooglemapのスマホ対応しよう スマホでうまく埋め込みの「iframe」のサイズ指定がうまくできないのはあるある！対象方法を学ぼう！ なんでうまく制御できないのかな？ iframeは外部サイトの埋め込みです。 CSSで...
WEB制作基礎知識 PHP超入門 （さわりだけ）
Web制作でよく使われるPHPについて知っておこう！ サーバーサイドのプログラミング言語として「PHP」があります。 こちらについて学んで、Web制作についてより深く理解しましょう！ PHP（Hypertext Preprocessor）は...
WEB制作基礎知識 GitとGitHub超入門 （さわりだけ）
Web制作でも使うよ、GitとGitHubを知っておこう バージョン管理ツールとして「Git」があります。 概念が理解しにくいものなのですが、使えると大変便利なので把握してみましょう！ Gitは、プログラミングやWeb制作で使用されるバージ...
プログラムを作ってみよう 【やってみよう】ページ遷移アニメーション
作ったサイトにページ遷移アニメーションを追加しよう！ ページ遷移のアニメーションをちょっと追加するだけでサイトがリッチになります。チャレンジしてみましょう！ 今回はCSSのみで実装してみます。 デモページ htmlはbodyにclassをつ...