ゆめの学習記録

★職業訓練校修了後の復習用★

2022-01-01から1年間の記事一覧

タイムラインをサイトに埋め込む

年表や沿革などで使うタイムラインを作ってみましょう。cssのみで作れるシンプルな物のありますが、今回は「CodyHouse Framework」というフレームワークを使ったアニメーションタイムラインを作成してみます。 Vertical Timeline codyhouse.co さらにCodyHou…

バナー制作の復習2

授業で制作したかぎこうのバナー 元バナー 模写したバナー Photoshopのレイヤー 使用した背景画像

バナー制作の復習1

授業で制作したローソンフレッシュのバナー 元バナー 模写バナー Photoshopのレイヤー

infinite-scrollの実装

http://felica29.starfree.jp/infinite-scroll-0507/

Google Fromに自動返信機能を付ける

Googleスプレットシートにはスクリプトを埋め込む機能が付いています。今回はこの機能を使って、自動返信メールを送ってみます。 function sendMailGoogleForm() { Logger.log('sendMailGoogleForm() debug start'); //------------------------------------…

エキスパート サンプル問題をやってみる

www.sikaku.gr.jp felica29.starfree.jp

GoogleサーチコンソールとGoogle アナリティクス

Google Search Consoleとは Search ConsoleとはWebサイトの検索結果の状況とそれに付随する情報(Webサイトの改善案・被リンク数・キーワードなど)やGoogleが認識しているページ数、Googleクローラーのクロール状況が把握できるツールです。Search Console…

送信フォーム作業データ(postでデータを送信)

post.php <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>postでデータを送信</title> </head> <body> <h1>送信画面</h1> <form action="output.php" method="post"> </form></body></html>

フォーム-ラジオボタンが選ばれた状態でページ遷移させる

今回のフォームは、商品紹介ページに「商品A」「商品B」「商品C」の3つのコンテンツがあり、それぞれの購入ボタンをクリックして申し込みページに遷移した時、それぞれの商品のラジオボタンにチェックがはいっている状態にしたい。申し込みページ以降は基本…

pushStateとajaxを使ってSEOに強い無限スクロールページを作成する

SEOに適した無限スクロールの導入 FacebookやTwitter、Pinterestなどのソーシャルメディアサイトが使っている事で一躍有名になった無限スクロール(英: Infinite Scrolling)ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が豊富…

新しいcssを使ってみる

ユーザーのアンケート結果からその年のCSSの流行りや動向がわかるThe State of CSS 2020というサイトの中で、今後さらに利用頻度が増していくであろう、新しいプロパティをいくつか試してみましょう。 ただ、新しいプロパティはブラウザごとに対応状況が違う…

ロゴを作成しモックアップに載せる

www.anthonyboyd.graphics photoshopvip.net note.com www.youtube.com

タイムラインをサイトに埋め込む

年表や沿革などで使うタイムラインを作ってみましょう。cssのみで作れるシンプルな物のありますが、今回は「CodyHouse Framework」というフレームワークを使ったアニメーションタイムラインを作成してみます。 Vertical Timeline codyhouse.co さらにCodyHou…

プラグインを使ったwordpressのデプロイ

以前、バックアップを取って、sql文を使ってwordpressのデータを移動させましたが、今回はプラグインを使ってデプロイさせます。 ja.wordpress.org このプラグインは検索 & 置換操作中に発生する、あらゆるシリアライゼーションの問題も解決します。とても簡…

wordpress の作業データ(4月25日分)

トップページ front-page.php <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>wp-blogのトップページ</title> </meta></meta></meta></head></html>

wordpressの作業データ

トップページ front-page.php <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>wp-blogのトップページ</title> </meta></meta></meta></head></html>

wordpressで特定のカテゴリー記事を表示させる

wordpressで特定のカテゴリー記事を表示させる為には「 get_posts( );」を使って表示させます。カテゴリーに指定したスラッグを使う事で特定のカテゴリー記事のみを表示する事が出来ます。また、「foreach」を使う事で配列に入っている値を全て出力させます…

wordpressの投稿記事をループさせる

wordpressで特定のカテゴリー記事を表示させる為には「 get_posts( );」を使って表示させます。カテゴリーに指定したスラッグを使う事で特定のカテゴリー記事のみを表示する事が出来ます。また、「foreach」を使う事で配列に入っている値を全て出力させます…

4月25日の作業データ

トップページ front-page.php <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>wp-blogのトップページ</title> </meta></meta></meta></head></html>

スクロールを促すスクロールダウンアニメーション

www.nxworld.net

フォントサイズを画面幅に応じて可変にする

emを使ったフォントサイズ emは親要素のフォントサイズをそのまま継承します。一見すると判りやすいですが構造が複雑になってくると、複利計算されてしまい判り難くなってしまいます。 remを使ったフォントサイズ 次にremを使ったフォントサイズの指定です。…

フリー素材集

画像編 burst.shopify.com girlydrop.com https://www.pexels.com/ja-jp/ O-DAN (オーダン)- 無料写真素材・フリーフォト検索 stock.adobe.com イラスト編 illust-navi.com www.linustock.com tyoudoii-illust.com loosedrawing.com www.opendoodles.com en…

第 5 回目試験の解答

###//index.html//### <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>5回目の試験 | バナー作成</title> <link rel="stylesheet" href="css/banner.css"> </head> <body> …</body></html>

LPの作成・実践編

テクニカルアカデミーwebサイト制作科の生徒募集用のランディングページの作成 LPのアウトライン(あくまでも一例) Attention部分のコンテンツ タイトル(ロゴ画像orテクニカルアカデミーwebサイト制作科) キャッチーなコピーが入ったリード文(テクニカルア…

LP(ランディングページ)の作成

ランディングページ(Landing Page)とは本来、訪問者が最初に着地する(land)ページという意味合いでサイトのトップページの事をLPと呼んでいましたが、今ではLPというと「訪問者のアクションを誘導することに特化した縦長のレイアウトのページ」のことを…

ポートフォリオの参考サイト

http://tomoyukiarasuna.com/data/arasuna_portforio.pdf www.concentinc.jp

PDFをIllustratorから書き出す

ポートフォリオをPDF形式で面接先の会社にメールで送りたいのにPDFのデータが非常に大きく、困ってしまう。就職活動中によくある事です。IllustratorからデータをPDFで書き出す場合、書き出す形式に気をつけないと、必要以上にデータ量が大きくなってしまう…

Illustratorでロゴを作る

Illustratorのアートブラシとアピアランス機能を使ってブラシで描いたイメージのクールなロゴを制作してみましょう。Illustratorのブラシライブラリーにはアーティスティックなものから幾何学模様まで、さまざまな種類のブラシが用意されています。これらを…

Gitを使う

git

Gitとは? Git(ギット)とは、バージョン管理を行うためのツールのことです。複数人でプログラミングやコーディングを行う場合、ソースコードを効率的に管理・運用する必要があります。「誰がどのファイルのどの部分を修正したのか?」や「リリース予定の機…

4月14日作業データ(パーティクルその2)

index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>particles.jsその2</title> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></meta></head></html>