CSSレイアウトテクニック SVGArtistaの使い方
SVGデータでパスのアニメーションを実装しよう！ このサイトでパスアニメーションが作成できます。やってみましょう！ SVGデータを作る まずはSVGデータを作る必要があります。 イラストレーターで作成してください。 データの注意点として パ...
2024-11
CSSレイアウトテクニック 
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をつ...
プログラムを作ってみよう 【やってみよう】JavaScriptでTODOリストを作る
「TODOリスト」プログラムを作る！ 腕試しとして、jQueryとJavaScriptでシンプルなプログラムを作ってみましょう 初心者向けのプログラムで「TODOリスト」をよく作るらしいので、 やってみましょう！ どう実装するか考えてみまし...
プログラムを作ってみよう 【やってみよう】JavaScriptでおみくじを作る
「おみくじ」プログラムを作る！ 腕試しとして、jQueryとJavaScriptでシンプルなプログラムを作ってみましょう 初心者向けのプログラムで「おみくじ」をよく作るらしいので、 やってみましょう！ どう実装するか考えてみましょう。 まず...
プログラムを作ってみよう 【やってみよう】AOSプラグインでスクロールアニメーション
作ったサイトにスクロールアニメーションを追加しよう！ サイトにスクロールアニメーションをちょっとつけるだけでもとてもリッチに見えます。ぜひ実装していきましょう！ 今回使用するのは「AOSプラグイン」です。 このサイトで説明しなくてもいいくら...
プログラムを作ってみよう 【やってみよう】JavaScriptで消費税計算機を作る
「商品の税金を計算する」プログラムを作る！ 腕試しとして、jQueryとJavaScriptでシンプルなプログラムを作ってみましょう 税抜金額を入力したら、税込金額のアラートができるサイトを作ってください このような依頼があったら、作れるで...
プログラムを作ってみよう slackのスタンプジェネレータを作った
オリジナルプログラムを作るには考え方が大事 jQueryとJavaScriptの基本をおぼえたら、プログラムを作ってみましょう。 ここで難しいのが、オリジナルプログラム作成は「サンプルコードを写して動かす」先にはないということです。 まず「...