コラージュとは？ コラージュとは絵画の技法の1つで、フランス語の「糊付け」を意味する言葉である。 通常の描画法によってではなく、ありとあらゆる性質とロジックのばらばらの素材を組み合わせることで、例えば壁画のような造形作品を構成する芸術的な創作…
img要素の表示方法は3通り １.「max-width:100%」を使ったフルードイメージ 設定は一番簡単、幅と同じ比率で高さも低くなる２.「object-fit」幅も高さも自由に指定、img要素の親要素に表示させたい幅と高さを指定、img要素には「object-fit:cover」と幅と高…
See the Pen スマホ時にスクロールスナップ by yachin29 (@yachin29) on CodePen. www.nike.com 以前はjavascript等で制御していたスクロールスナップも現在ではcssのみで簡単に実装出来ます。またflexやvw、vhを使う事でレスポンシブにも簡単に対応出来ます…
通常のサイトであれば以前やったように各ページのg-nav liにcurrentというクラス名を付与すれば良いのですが、wordpressのようにナビゲーション部分をテンプレート化している場合、すべてのページのナビゲーションは同じnav.phpを呼び出しているので、wpテン…
wordpressテンプレートタグを使う事で、静的なコンテンツを動的なコンテンツにする事が出来ます。wordpressテンプレートタグは1つ1つ目的が決まっているので、wordpressテンプレートタグの記述全てを覚えるのではなく、目的にあったwordpressテンプレートタ…
WordPressとは wordpressとはヒューストンに住んでいた若者とイギリスに住んでいた若者がインターネットを通じてコラボレーションで開発を進めたオープンソースのプロジェクトです。2003年にリリース。 WordPressとは、オープンソースのブログソフトウェアで…
多くのコンテンツを見せる際にフィルタリング機能やソート機能などを付けて、ユーザーの利便性を向上させましょう。 さらにモーダルウィンドウを追加して、ページ遷移することなく、動線をそのページで完結出来るようにしましょう。 github.com 高機能モーダ…
javascriptのlocation.hashプロパティを使う事でURLのハッシュを取得することが出来ます。 今回の ポイント トップページの「資料請求ボタン」と「お問い合わせボタン」をクリックしてページ遷移した時にJavaScriptの「location.hash 」を使って、選んだ方の…
第4回試験データ提出フォーム docs.google.com basic認証をかけている場合は IDとパスワードを備考欄に入力して下さい。
www.anthonyboyd.graphics https://photoshopvip.net/freebies/mockupphotoshopvip.net www.youtube.com 自身の制作したサイトをモックアップで見せる Gif画像でアニメーションで見せる chromewebstore.google.com
Googleスプレットシートにはスクリプトを埋め込む機能が付いています。今回はこの機能を使って、自動返信メールを送ってみます。自動返信メールの本文を改行したい場合は「¥n」で「;」で本文が終了します。 function sendMailGoogleForm() { Logger.log('sen…
入力画面 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="世界各地のコーヒー豆をお取り寄せ出来るサブスクリプションサービスの紹介サイトです。毎月1回、月初めにお届けします。コーヒー豆のセット内容は毎月変更され、季節やイベントに合わせて特別なコーヒーやスイーツも提供致します。"> </meta></meta></meta></head></html>
以前授業でも使ったGoogleフォームですが、設置も簡単でスプレットシートと紐付けする事でお問い合わせ内容をデータベース化する事も簡単に出来てしまう、とても便利なツールですが、唯一の問題が「自分でCSSをいじれない」事です。特にレスポンシブサイトに…
小・中規模でのサイト制作では、それほど明確なcss設計をしなくても問題は起こりませんが、大規模案件になるとhtmlもcssもかなりの量になり、css設計がないと保守性が悪くなってしまったり、意図しないところに影響してしまったりします。また、複数人で制作…
配色を考えるのは非常に難しい作業ですが、今はキーワードでカラーパレットを生成してくれるAIなどが豊富にあるので、これらを使って作業を効率よく進めましょう キーワードから配色を提案するColor Magic（日本語可） colormagic.app キーワードから配色を…
曲線を使う事で柔らかい表現が出来ます。以前は画像で表現していた曲線や流体シェイプなども今はCSSで簡単に作成が可能なので、テーマによっては使って見ましょう。 www.haruta-shoes.co.jp hazeruassabu.com ginza6.tokyo border-radiusを使う border-radiu…
郵便番号を入れると自動的に住所が入るプラグインです。 使い方は非常に簡単で、基本的にはformのパーツにclassを付与するだけです。1、まずformタグに指定されたclassを指定します。 <form class="h-adr">2、つぎにform中に、国名(p-country-name) をJapan に指定します <span class="p-country-name" style="display:none;">Japan</span> 3</form>…
作例 https://codepen.io/yachin29/pen/ZEBNENN EFO（Entry Form Optimisation）は「入力フォーム最適化」の略で、入力フォームをユーザーにとって使いやすく入力しやすい形に最適化し、入力して内容を送信できるように改善を行う施策のことを指します。 対…
SEOとは、”Search Engine Optimization” の略であり、検索エンジン最適化を意味する言葉です。検索結果でWebサイトがより多く露出されるために行う一連の取り組みのことを指します。 オーガニック検索 オーガニック検索（自然検索 / Organic Search）とは、…
SEO対策にはサイトが必ず自動的に掲載順位 1 位になるような秘訣は無く、とにかく自身のコンテンツの品質を高める事が結果として検索結果の上位表示に繋がるという事をしっかりと理解しましょう。 www.dentsudigital.co.jp 低品質のページに該当されやすいペ…
PHPでは情報を別のデータに受け渡すときにGETとPOSTの２つの方法（メソッド）が使われます。 GET GETメソッドはURLの末尾に「?」をつけ、「パラメーター名="値"」という形式でデータを送ります。 そのせいで、URLにデータが表示されてしまい、誰からでも見る…
PHPとは？ HP: Hypertext Preprocessor（ピー・エイチ・ピー ハイパーテキスト プリプロセッサー）とは、動的にHTMLデータを生成することによって、動的なウェブページを実現することを主な目的としたプログラミング言語、およびその言語処理系である。一般…
2月29日 1.サイトの概要： スマホに特化した、サブスク型のコーヒー豆のお取り寄せサービスの紹介ページ 2.クライアントの情報 会社名：Coffee Journey タグライン：おうちで楽しむ本格コーヒー体験 サービスの特徴： 全国各地の有名なコーヒー店から厳選し…
Figmaのオートレイアウト機能は、フレーム内の要素を自動的に配置・調整する機能です。これはFigma全体的に言える事ですが、HTMLとCSSでコーディングする事が前提になっていて、このオートレイアウト機能はCSSで言う「Flexbox」です。それ以外にもPositionの…
Figmaとは、ブラウザ上で動作するUI/UXデザインツールです。2016年にリリースされて以降、その使いやすさや豊富な機能から、多くのデザイナーに愛用されています。 Figma の特徴 ブラウザ上で動作する: インストール不要で、どこからでも作業可能です。 リア…
Sassとは？ Sass(Syntactically Awesome Stylesheets）とはcssのメタ言語で、簡単にいうとcssの機能を拡張した高機能版cssといった感じです。 Sassを使うメリット 変数などプログラム的な使い方が可能 メンテナンス性が高い 記述量を減らし、データの圧縮が…
mainブランチ メインブランチ。基本的には現在サーバーで運用されているデータ。このブランチに直接コミットはせずに下のdevelopブランチをマージするだけ。 backlog.com developブランチ 開発用メインブランチ。細かい修正がコミットされる featureブランチ…
GitHub Pagesとは、GitHubがユーザーに提供している静的なウェブページのためのウェブホスティングサービスです。GitHubのアカウントがあればすぐに使えるので、gitの基本的な仕組みを覚える為にも使ってみましょう。 html、css、js、画像等、静的なサイトで…
githubを使う時に登録したIDとメールアドレスを削除する場合、「コントロールパネル」→「資格情報マネージャー」→「windows資格情報」の中の「github」関連の情報を削除する
Gitとは？ gitとは、「誰が」、「いつ」、「何を」、編集したかを記録・追跡するためのバージョン管理システムです。 ゲームなどで複数セーブデータを取っておいて、直前のデータ以外にも都合に応じてフラグが立つ前のデータに戻す事が出来る、と同じような…
