今回の要件定義 制作するサイト：スマホに特化したLP スイーツお取り寄せのサブスクサービス店舗名：Sweet Box タグライン1:enjoy sweet at home タグライン2:おうちで楽しむ新しいスイーツ体験 コンセプト 全国の選りすぐりのお店から 自慢のスイーツセット…
HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、Webページを作るための最も基本的なマークアップ言語のひとつです。 普段、私たちがブラウザで観ているWebページのほとんどが、HTMLで作られています。 もちろ…
基本的にはJavascriptと同じですが、PHP独自のフォーマットをしっかりと覚えましょう。 １、「どのような形式で」を指定できる関数：date関数（フォーマット文字列） ２、「いつの日付を」を指定できる関数：mktime関数（タイムスタンプ） timezoneの設定 本…
PHPとは？ HP: Hypertext Preprocessor（ピー・エイチ・ピー ハイパーテキスト プリプロセッサー）とは、動的にHTMLデータを生成することによって、動的なウェブページを実現することを主な目的としたプログラミング言語、およびその言語処理系である。一般…
index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="ここにサイトの要約文を入れる。100~120文字位の文章が良い"> <title>レストランサイトの演習</title> <link rel="preconnect" href="https://fonts.googleapis.com"> …</link></meta></meta></meta></head></html>
グラスモーフィズムとは、透明度・ぼかしを組み合わせ、要素をすりガラスのように見せられる表現手法です。ぼやけた透明度のある背景が特徴で、透明感や光沢感を演出でき、立体感を出す事ができます。 2020年、Appleが新しいOS Big Surにこのグラスモーフィ…
index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>新しいcssを使ってみる</title> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></meta></meta></head></html>
<html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>1カラムレイアウトの作成</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>Net Smart</h1> <p class="tag-line">よりスマートなインターネットライフを。</p> </header></body></html>
店舗名：トラットリア南池袋 タグライン：南池袋で、イタリアの旅をメインコピー：テイクアウト専門の本格イタリアレストラン リード文：南池袋に、本格イタリアンのテイクアウト専門店がオープン！自宅でも、本場の味を堪能しよう。
index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="ここにサイトの要約文を入れる。100~120文字位の文章が良い"> <title>レストランサイトの演習</title> <link rel="preconnect" href="https://fonts.googleapis.com"> …</link></meta></meta></meta></head></html>
ポートフォリオ制作でまず自身が把握する事は中に入れるコンテンツの分量です。今までの授業で作ったデータをもう一度見直し、手直しする物は手直して、ポートフォリに掲載する物を決めましょう。 次にwebのポートフォリオを何で作るかを決めましょう。選択…
お知らせ1： タイトル: 割引キャンペーン実施中！ 内容: 平日限定で、パスタメニューが10%OFFになります。ぜひご利用ください。 お知らせ2： タイトル: ポイントカード導入！ 内容: ポイントカードを導入しました。ご利用金額に応じてポイントが貯まり、貯ま…
index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表組の作成</title> </head> <body> <img src="img/main.jpg" alt=""> <h1>ホテル・フェリカ</h1> <p>芸術の街池袋西口のランドマークとして聳え立つ「ホテル・フェリカ」JR池袋西口至近の好立地はビジネスにレジャーにアクセス抜群です。</p></body></html>
jQuery（ジェイクエリー）とは、ウェブブラウザー用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月にリリースした。様々な場面で活用されており、JavaScriptライブラリ…
動画を色々なパターンで使用する例です。 ただ無料レンタルサーバーではファイルの上限が厳しいので動画は注意が必要です。 index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>動画を沢山載せる</title> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></meta></meta></head></html>
動画を色々なパターンで使用する例です。 ただ無料レンタルサーバーではファイルの上限が厳しいので動画は注意が必要です。 index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>動画を沢山載せる</title> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></meta></meta></head></html>
State of CSS 2023は、State of CSSでおこなわれたアンケートの調査結果（9,190人分）をまとめたものです。 2023.stateofcss.com
www.anthonyboyd.graphics https://photoshopvip.net/freebies/mockupphotoshopvip.net www.youtube.com Metaが、誰でも無料で利用可能なApple・Samsung・Google・HTC・Microsoftの各メーカーのスマートフォン・タブレット・スマートウォッチ・スマートTVの…
自身のスキルを他者に説明する事は、そのスキルを身に付けるのと同じくらい重要であり、意味のある事です。 「htmlとcssが出来ます」だけでは無く、この6ヶ月で具体的にどういう事を学んだか、どういう事が出来るようになったか、をしっかりと説明しましょう…
1.IllustratorでSVG画像を作成 See the Pen svgで手書き風アニメーション by yachin29 (@yachin29) on CodePen. まずはIllustratorでアニメーションで動かしたい文字を書きます。この時、なるべく細い筆記体のフォントを選ぶと良いでしょう。レイヤー名はtex…
Cookie（クッキー）とは？ Cookie（クッキー）とは、ホームページを訪問した ユーザーの情報を一時的の保存する仕組み、またはそのデータです。ID、パスワード、メールアドレス、訪問回数などが ユーザー情報として保存されます。これによって再訪問したとき…
index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>インテリアショップのECサイト</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>Furniture-store</h1> <button id="ham-btn"><span></span></button></header></body></html>
vegas.jaysalvat.com 画像を背景画像にする事でcssアニメーションが手軽にかけてるようになるスライド用プラグインです。 bxsliderのようなシンプルなスライドとは違って、様々なアニメーションを掛けることが可能です。 関数の呼び出し $("#example, body")…
制作ポイント ・PC時は横並びのナビゲーションで、sp時はハンガーガーメニューに切り替える、その際にmatchMediaを使用する ・モバイルファーストでのサイト制作 ・トーンを合わせたカラーマネジメント ・ハンガーガーボタンをプラグインを使わずに自作 ・ロ…
GitHub Pagesとは、GitHubがユーザーに提供している静的なウェブページのためのウェブホスティングサービスです。GitHubのアカウントがあればすぐに使えるので、gitの基本的な仕組みを覚える為にも使ってみましょう。 html、css、js、画像等、静的なサイトで…
gitとは、「誰が」、「いつ」、「何を」、編集したかを記録・追跡するためのバージョン管理システムです。ゲームなんかで複数セーブデータを取っておいて、直前のデータ以外にも都合に応じて少し前のデータに戻す事が出来る、便利なシステムです。 git-scm.c…
resizeイベント 「resize()」はウィンドウサイズの変化を検出するメソッドで、windowオブジェクトに対して実行します。 $(window).resize(function(){ $('body').css('background-color','#F00'); }); window.matchMedia window.matchMediaというメソッド使…
index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>インテリアショップのECサイト</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>Furniture-store</h1> <button id="ham-btn"><span></span></button></header></body></html>
画像編 burst.shopify.com girlydrop.com https://www.pexels.com/ja-jp/ O-DAN (オーダン）- 無料写真素材・フリーフォト検索 stock.adobe.com イラスト編 undraw.co www.openpeeps.com illust-navi.com www.linustock.com tyoudoii-illust.com loosedrawin…
バナー広告とはディスプレイ広告の1つです。 広告代理店によってバナー広告のサイズは細かく決まっています。ここではGoogleのディスプレイ広告のガイドラインに沿って、モバイル用のバナーを作成してみましょう。 バナー広告の種類 モバイル用のバナーはPC…
