webサイトデザインAI入門科授業用ブログ

池袋フェリカテクニカルアカデミーの求職者支援訓練の授業解説ブログです。

gitとは

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

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

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

Webクリエイター能力認定試験 エキスパート サンプル問題をやってみる

www.sikaku.gr.jp http://school.yachin29.com/web-ex/start.html

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

function sendMailGoogleForm() { Logger.log('sendMailGoogleForm() debug start'); //------------------------------------------------------------ // 設定エリアここから //------------------------------------------------------------ // 件名、本…

EFO - 入力フォーム最適化

EFO(Entry Form Optimisation)は「入力フォーム最適化」の略で、入力フォームをユーザーにとって使いやすく入力しやすい形に最適化し、入力して内容を送信できるように改善を行う施策のことを指します。 対面でのサービスが難しくなった今日「お問い合わせ…

Googleフォームに自作のCSSをあてカスタマイズする

以前授業でも使ったGoogleフォームですが、設置も簡単でスプレットシートと紐付けする事でお問い合わせ内容をデータベース化する事も簡単に出来てしまう、とても便利なツールですが、唯一の問題が「自分でCSSをいじれない」事です。特にレスポンシブサイトに…

srcsetを使ってimg要素を切り替える

img要素を画面幅によって切り替えたい場合、以前はJavascript等でwindow幅によって画像のファイル名を変える、などの方法が取られていましたが、html5.1,で策定された「srcset」を使う事で手間のかかるCSSやJavaScriptを必要とせず、htmlのみでデバイスによ…

LPの作成・実践編

フェリカテクニカルアカデミーwebサイト制作科の生徒募集用のランディングページの作成 コンバージョン フェリカ公式サイトの見学会申し込みページへのリンクボタンをクリックしてもらう URL:http://www.felica.info/kikin/web/web_form/index.shtml LPのア…

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

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

インターネット広告について

seo

Web広告とは、「インターネットの媒体上に掲載される広告」のことです。 広告枠を持つWebサイトや検索エンジンの検索結果ページ、メール、SNSなど、あらゆる媒体に掲載され、web広告やオンライン広告、デジタル広告と呼ばれることもあります。 dentsu-ho.com…

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

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

CSS Scroll Snap

以前はjavascript等で制御していたスクロールスナップも現在ではcssのみで簡単に実装出来ます。またflexやvw、vhを使う事でレスポンシブにも簡単に対応出来ます。 慣性スクロール 慣性スクロールとは、主にマルチタッチインターフェースで採用されている機能…

Canvasでパーティクルを表現する

Canvasとは Canvasとは、ブラウザ上に図を描くために策定された仕様です。これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実現する…

htaccessを使った動的配信

felica29.starfree.jp 「.htaccessファイル」を使った動的配信 動的な配信 | 検索セントラル | Google Developers スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能…

ページネーションの導入が簡単に出来る「paginathing.js」

ページネーション(pagination)とは、日本語でページ割りという意味で、Web制作においては、検索結果一覧など、内容の多いページを複数のWebページに分割し、各ページへのリンクを並べてアクセスしやすくするために設置します。 github.com BootstrapCSS 今…

既存のワイヤーを参考にする

42 件の最適な画像、ストック写真、ベクター | Adobe Stock

sassの便利な機能を使う

入れ子(ネスト)にできる style.scss header { width: 100%; height: 100px; background: #B6E3F4; >h1 { text-align: center; } } style.css header { width: 100%; height: 100px; background: #B6E3F4; } header > h1 { text-align: center; } メデイア…

自身のスキルを丁寧に説明する

自身のスキルを他者に説明する事は、そのスキルを身に付けるのと同じくらい重要であり、意味のある事です。 「htmlとcssが出来ます」だけでは無く、この6ヶ月で具体的にどういう事を学んだか、どういう事が出来るようになったか、をしっかりと説明しましょう…

ポートフォリオの制作

ポートフォリオ制作でまず自身が把握する事は中に入れるコンテンツの分量です。今までの授業で作ったデータをもう一度見直し、手直しする物は手直して、ポートフォリに掲載する物を決めましょう。 次にwebのポートフォリオを何で作るかを決めましょう。選択…

要件定義書の提出

要件定義とは、Web サイトやアプリケーションなどの開発初期段階において、発注者と受注者の情報共有のために、実装すべき機能や満たずべき性能を第3者でも分かるように明確化しておく作業のことです。 要件定義は、Web サイトやアプリ開発において非常に重…

jQueryでのcookieの指定

Cookie(クッキー)とは? Cookie(クッキー)とは、ホームページを訪問した ユーザーの情報を一時的の保存する仕組み、またはそのデータです。ID、パスワード、メールアドレス、訪問回数などが ユーザー情報として保存されます。これによって再訪問したとき…

$.ajax(jQuery)とfetch APIを使ってsvgを外部ファイルとして読み込む

svgをcss3のアニメーションで動かす場合、下記のようにsvgファイルのコードをインラインでbody内に入れる必要があります。 <body> <svg class="likeButton" width="500px" height="500px" viewBox="0 0 500 500"> <circle class="explosion" r="150" cx="250" cy="250"></circle> <g class="particleLayer"> <circle fill="#8CE8C3" cx="130" cy="126.5" r="12.5"/> </circle></g></svg></body>

cssで作るドロップダウンメニュー

コーポレートサイトなど情報量が多いサイトでは、リンク先のページに飛んでからさらにそのページの中から目当てのコンテンツを探さなければならない、といった手間がかかります。 メガドロップダウンメニューであれば、リンク先のページの中の目当てのコンテ…

第4回試験提出用フォーム

docs.google.com Furniture store より快適な毎日を、より多くの方々に<200b> HOME CONCEPT SERVICE ACCESS 新しい習慣でおしゃれな部屋づくりをはじめよう 感性のままに、好きなものを飾る場所を作りませんか? コツはテーマを決めること。そうしたら自分の…

フリー素材集

画像編 burst.shopify.com girlydrop.com https://www.pexels.com/ja-jp/ https://o-dan.net/ja/ stock.adobe.com イラスト編 illust-navi.com www.linustock.com tyoudoii-illust.com loosedrawing.com イラスト・アイソメトリックver isometric.online

過去の生徒の架空サイト

school.yachin29.com xi-s.sub.jp

img要素をobject-fitで自由な大きさにトリミングする

今まではimg要素には「max-width:100%」を指定して、レスポンシブレイアウトに対応させて来ました。俗に言うフルードイメージです。 画像の縦横比(アスペクト比)が一定の場合はフルードイメージでいいのですが、柔軟なレイアウトの場合は「object-fit」を…

モダンリセットCSSのress.css

リセットcssには色々な方法があり、どれが1番優れているかは難しいので、自身の必要な用途に合わせて使い分けましょう。 html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:afte…

連休中の課題

cssは外部参照で記述すること cssに適切なリセットをかける事 767px以下はモバイルレイアウトになるようにメディアクエリーを設定する flexプロパティを使ってコンテンツを横に並べる 画像を自身で用意しトリミングしフルードイメージに設定する h1にGoogle …

Webサイトの構成表の作成

Webサイトの構成を明確にする為に必ず、Webサイト構成表を作成しましょう。 「サイト全体で何ページになるか?」「どのページにどんな内容のコンテツを入れるか?」「どういう順番でコンテンツを並べたら、ユーザーが見やすい・解りやすいか?」 などは、必…