Webサイトを見る Webの勉強を始めるうえで大事な事はまず数多くのWebサイトを見る事です。 もちろん見ているだけで作れるようにはなりませんが、画家を志している人が名画を見るように、建築家を志している人が建築物を見るように、音楽家を志している人が音…
PCの使い方 物を作るうえで、その物を作る為の道具の使い方を覚える、という事が非常に大事になってきます。web制作者にとってパーソナルコンピューター（PC）は料理人にとっての包丁や美容師にとってのハサミと同様に、非常に大事な道具です。 今までのよう…
まず最初にパソコンで覚える事はファイルとフォルダーの作成、及び使い方です。 PCを使って働くのであれば、この記事の内容は必ず理解しなければいけない事です。とにかく読んで、意味の解らない箇所や語句を書き出してみましょう。 次に解らない箇所・語句…
今回の制作のポイント メインビジュアルはヒーローヘッダーでbxsliderを使ってフェードで見せる お知らせ部分はajaxを使って外部データを読み込む Movie部分にmp4データを設置 Menu部分にモーダルウィンドを設置（jQuery） Access部分にGoogleMapを設置 Form…
Webサイトの構成を明確にする為に必ず、Webサイト構成表を作成しましょう。 「サイト全体で何ページになるか？」「どのページにどんな内容のコンテツを入れるか？」「どういう順番でコンテンツを並べたら、ユーザーが見やすい・解りやすいか？」 などは、必…
www.sikaku.gr.jp http://school.yachin29.com/web-ex/start.html UIデザインが勉強出来るUIデザインクイズサイト「can't unsee」 cantunsee.space
授業も残り3週間になりました。残りの期間はとにかく今まで授業でインプットして来た物をポートフォリオという形でアウトプットしていきます。 けれど、ただ漠然とポートフォリオを作るというのも難しいので、目標となる物（入りたい会社や仕事でやりたい事…
「.htaccessファイル」を使った動的配信 動的な配信 | Google 検索セントラル | Google Developers スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を作ってみま…
フェリカテクニカルアカデミーwebサイト制作科の生徒募集用のランディングページの作成 ゴール フェリカ公式サイトの見学会申し込みページへのリンクボタンをクリックしてもらう URL:http://www.felica.info/kikin/web/web_form/index.shtml ポイント ユーザ…
ランディングページ（Landing Page）とは本来、訪問者が最初に着地する（land）ページという意味合いでサイトのトップページの事をLPと呼んでいましたが、今ではLPというと「訪問者のアクションを誘導することに特化した縦長のレイアウトのページ」のことを…
ある程度スクロールする必要がある縦長ページでは現在地を示すようにナジゲーションボタンにカレント表示をした方が良いでしょう。 各要素の「.offset().top」の位置を取得し、if文を使い、各要素の開始位置以上スクロールしたら、その要素にaddClassします…
SEOに適した無限スクロールの導入 FacebookやTwitter、Pinterestなどのソーシャルメディアサイトが使っている事で一躍有名になった無限スクロール（英: Infinite Scrolling）ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が豊富…
Illustratorの様々な機能を使用すればインパクトのある企画書を作成する事が出来ます。サイト制作のスケジュールにある程度余裕がある人はIllustratorで企画書の清書をしてみましょう。 さらに、完成後就活時を想定してPDF化してメール等で送れるようにして…
READMEというのは、GitHub等で公開されるソフトウェア（リポジトリ）の説明書きのことです。 そのリポジトリーがどういった趣旨の物なのか、しっかりと説明しましょう。 readmeに記載する物 プロジェクトのタイトル プロジェクトの概要説明 プロジェクトのUR…
今回トレースするサイトは非常にシンプルで今時な感じがする全画面を使ったグリッドデザインで出来たサイトです。 www.bloomingville.com 今回のレイアウトのポイント 最大幅を指定したグリッドレイアウト cssはモバイルサイズから指定（モバイルファースト…
wordpressで特定のカテゴリー記事を表示させる為には「 get_posts( );」を使って表示させます。カテゴリーに指定したスラッグを使う事で特定のカテゴリー記事のみを表示する事が出来ます。また、「foreach」を使う事で配列に入っている値を全て出力させます…
自身のスキルを他者に説明する事は、そのスキルを身に付けるのと同じくらい重要であり、意味のある事です。 「htmlとcssが出来ます」だけでは無く、この6ヶ月で具体的にどういう事を学んだか、どういう事が出来るようになったか、をしっかりと説明しましょう…
note.com swingroot.com cocoda-design.com ctrlq.org stylifyme.com ten-navi.com frontendweekly.tokyo www.noupe.com icomoon.io bitwarden.com webで生活を便利にするメディア shogo-log.com もぐもぐ食べる、おいしいWebデザイン。 mogumogu-design.com…
まずは自身のPCに入っているgitのバージョンを確認してみましょう。 コマンド画面で簡単に確認出来るので、コマンド画面で以下のコマンドを入力しましょう。 gitのバージョン確認 $ git --version macは最初からgitがインストールされていますが、windowsは…
フィルター機能、ソート機能が付いて可変グリッドレイアウトも実現出来さらにレスポンシブにも対応した、無料で商用利用も可能な Javascriptプラグインの「muuri.js」 haltu.github.io 付いている機能 フィルター機能 ソート機能 検索機能 Masonryレイアウト…
JavaScriptで乱数を取得したい場合には「random関数」を使います。 覚えるメソッド Math.random Math.random()は、0〜0.9999...(1未満)の間から、1つの数値をランダムで返すメソッドです。0は含みますが、1は含みません。 Math.round Math.floor()は、小数点…
radial-gradientを使ったあしらい See the Pen css3での使ったあしらい1 by yachin29 (@yachin29) on CodePen. transformのrotateを使ったあしらい See the Pen css3を使ったあしらい2 by yachin29 (@yachin29) on CodePen.
canvasとは Canvasとは、ブラウザ上に図を描くために策定された仕様です。これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実現する…
Sassとは？ Sass(Syntactically Awesome Stylesheets）とはcssのメタ言語で、簡単にいうとcssの機能を拡張した高機能版cssといった感じです。 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; } メデイアクエ…
年表や沿革などで使うタイムラインを作ってみましょう。cssのみで作れるシンプルな物のありますが、今回は「CodyHouse Framework」というフレームワークを使ったアニメーションタイムラインを作成してみます。 Vertical Timeline codyhouse.co さらにCodyHou…
『Web制作会社年鑑』フリーダウンロードキャンペーン | マイナビブックス
素材 http://school.yachin29.com/0815test.zip レスポンシブサイトを作る際にはメディアクエリーが必須ですが、これもSassのmixinを使う事で見通しの良い記述に変える事が出来ます。 またブレイクポイントやメインのカラーコードを変数化する事で効率化が図…
ガラス工房 すみれではギフト、贈答品等にも最適な小物・インテリア用品を手づくりで作成しております。 www.glass-sumire.jp
スニペットを使ってホバーにエフェクトをつけましょう。 photoshopvip.net