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

WordPressとは?

WordPressとは wordpressとはヒューストンに住んでいた若者とイギリスに住んでいた若者がインターネットを通じてコラボレーションで開発を進めたオープンソースのプロジェクトです。2003年にリリース。 WordPressとは、オープンソースのブログソフトウェアで…

SEO概論

SEOとは、”Search Engine Optimization” の略であり、検索エンジン最適化を意味する言葉です。検索結果でWebサイトがより多く露出されるために行う一連の取り組みのことを指します。 オーガニック検索 オーガニック検索(自然検索 / Organic Search)とは、…

CMS(コンテンツ・マネジメント・システム)とは

CMSとは? CMSとは、コンテンツ・マネジメント・システムの略で、Webサイトを管理・更新できるシステムのことをいいます。Webサイトの更新は、テキストや画像の情報だけでなく、HTMLやCSSと呼ばれるプログラム言語の専門的な知識が必要で、他のページからの…

課題提出用フォーム

docs.google.com basic認証をかけている場合はIDとパスワードを備考欄に入力して下さい。

CSS Scroll Snap

www.nike.com 以前はjavascript等で制御していたスクロールスナップも現在ではcssのみで簡単に実装出来ます。またflexやvw、vhを使う事でレスポンシブにも簡単に対応出来ます。 Y方向にスクロールスナップ X方向にスクロールスナップ スクロールの方向とスナ…

ブランチモデル

mainブランチメインブランチ。基本的には現在サーバーで運用されているデータ。このブランチに直接コミットはせずに下のdevelopブランチをマージするだけ。 backlog.com developブランチ開発用メインブランチ。細かい修正がコミットされる featureブランチ機…

自身のスキルを説明する

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

スクロール位置に応じてナジゲーションボタンにカレント表示をする

ある程度スクロールする必要がある縦長ページでは現在地を示すようにナジゲーションボタンにカレント表示をした方が良いでしょう。各要素の「.offset().top」の位置を取得し、if文を使い、各要素の開始位置以上スクロールしたら、その要素にaddClassします。…

Gitを使う

Gitとは? gitとは、「誰が」、「いつ」、「何を」、編集したかを記録・追跡するためのバージョン管理システムです。ゲームなどで複数セーブデータを取っておいて、直前のデータ以外にも都合に応じてフラグが立つ前のデータに戻す事が出来る、と同じようなと…

github Pagesの設定方法

GitHub Pagesとは、GitHubがユーザーに提供している静的なウェブページのためのウェブホスティングサービスです。GitHubのアカウントがあればすぐに使えるので、gitの基本的な仕組みを覚える為にも使ってみましょう。html、css、js、画像等、静的なサイトで…

要素が画面に表示されたらカーテンが開くアニメーション

cgworks.jp 要素が画面に表示されたらその要素にクラス名をaddするというアニメーションです。ここで重要なのはどうしたら要素が画面に表示するタイミングを取得出来るかです。要素が画面に表示するタイミングを取得には以下の4つの値が必要です。 自分のス…

jQueryでのeach()メソッド

jQueryで複数のオブジェクトに対して繰り返し処理を行う場合は、each() メソッドを使用します。 まとめて処理されるパターン <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script> <script> $(function(){ alert($('li').text()); }); </script> jQuery.each() の使い方 複数あるli要素に対して…

Webサイトの構成表の作成

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

8月9日の作業データ モバイルファーストで作る家具屋のECサイト

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="preconnect" href="https://fonts.googleapis.com"> </link></meta></meta></head></html>

8月8日作業データ

<html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>モバイルファーストで作る家具屋のECサイト</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> …</link></link></meta></meta></head></html>

要件定義の作成

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

vs code でコメントアウトを横並びで表示させる

"emmet.preferences": { "filter.commentAfter": "" }

文字サイズにremを使ってみる

これまで文字サイズはpxを使って指定してきましたが、font-sizeをpxで指定してしまうと「font-sizeをpxで指定するとブラウザの文字調節機能が作動しない」という問題が起こります。Chrome だと「設定 → デザイン → フォントサイズ」の項目です。 emを使った…

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

remを使う時の注意点 remで起こる問題を解決するにはSCSSであれば自作関数を使う事で解決出来ます。 scssでのfunction関数の設定 @function 関数名(引数) { @return } @function rem($px) { @return ($px / 16) * 1rem; } h1 { font-size: rem(36); /* font-…

sassを使ってみる

Sassとは? Sass(Syntactically Awesome Stylesheets)とはcssのメタ言語で、簡単にいうとcssの機能を拡張した高機能版cssといった感じです。 Sassを使うメリット 変数などプログラム的な使い方が可能 メンテナンス性が高い 記述量を減らし、データの圧縮が…

レストランサイトのデータ

作例felica29.starfree.jp 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="トラットリ ア・ソラーレは、厳選食材と自家製パスタで創る、こだわりのイタリアンです。太陽の光を浴びたような、あたたかい空間で、心ゆくまでイタリアの味を楽しむ事ができます。"> <title>イタリ…</meta></meta></meta></head></html>

レストランサイトのデータ

作例felica29.starfree.jp 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="トラットリ ア・ソラーレは、厳選食材と自家製パスタで創る、こだわりのイタリアンです。太陽の光を浴びたような、あたたかい空間で、心ゆくまでイタリアの味を楽しむ事ができます。"> <title>イタリ…</meta></meta></meta></head></html>

スニペットまとめ

cssファイル "css reset": { "prefix": "reset", "body": [ "html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit…

ワイヤーフレーム の作成

ワイヤーフレームとは「サイトの設計図」です。サイトを作成する前に「何を・どこに・どのように」画面に配置するかを明らかにする事で、実際の作成作業をスムーズに進める事が出来ます。また複数人で作業する場合やクライアントとデザインイメージを共有す…

thanks.htmlにリダイレクトさせる

//thanks.htmlへのリダイレクト let load = 0; $('#google-form').on('load', function(){ load++; if (load > 1) { window.location.href = "thanks.html"; // リダイレクトさせるファイルのパスを入れる } }); このコードは、`#google-form`というIDを持つ…

背景画像をcssアニメーションで動かす「VEGAS2」

vegas.jaysalvat.com 画像を背景画像にする事でcssアニメーションが手軽にかけてるようになるスライド用プラグインです。bxsliderのようなシンプルなスライドとは違って、様々なアニメーションを掛けることが可能です。 関数の呼び出し $("#example, body").…

配色の基本

webサイトはおおまかに別けるとテキスト・画像・色の3つの情報から成り立っています。3つの中でも色はユーザーに最初に伝わる情報なので、配色次第でサイトの第一印象が決まってしまいます。初心者にとって配色は難しい部分ですが、まずは既存のサイトやサー…

Traversingメソッドを使ったタブパネルの作成

Traversingメソッドを利用 Traversingのメリット トラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。ボタンが複数ある場合などは「this」を使う事になりますが、このトラバースを使えば操作したい要素を「this」か…

スクロールイベントの設定

scrollイベント 要素がスクロールした時のイベントとして関数を指定できます。 $(window).scroll(function() { var a=$('html,body').scrollTop(); console.log(a); }); scrollTopイベント 「scrollTop()」を使用した場合、要素の最上部から縦スクロールした…

css animation-timing-functionの違い

animation-timing-functionとは、アニメーションの変化(速度)のスタイルを指定します。cssのkeyframe animation には非常に多くのtiming-functionが用意されています。ちなみにjQueryでデフォルトで使えるのは2種類です。それぞれのanimation-timing-functio…