WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

Photoshop 基礎

Photoshopの基本的な使い方 Photoshopで行う作業は大きく別けると以下の3つ 画像を作る。 画像を補正する。 画像を加工する。 ・Photoshopの初期化 目的は、無駄に消費されているメモリの記憶をリセットすること。 アイコンをダブルクリック等で起動。 この…

東久留米市のトリミングハウストパーズ

東京都東久留米市の犬の美容室トリミングハウストパーズです。わんちゃんのトリミングはぜひ当店へお任せください。 trimtopaz.html.xdomain.jp

横浜のおいしいパン屋、日々ブロート

横浜のおいしいパン屋、日々ブロート ブロートとはドイツ語でパンの意。日々のパンを素材から見極めより自然体で味わえる。そんなパンを焼かせて頂いています。 hibibrot.starfree.jp

webライティングについて

webライティング Webライティング11のルール from Tsutomu Sogitani www.slideshare.net 今回のテーマは webの利便性と危険性 以下の記事を読み、今後のwebがどうなるか、自らの考えを述べよ。 死にゆくウェブ、犯人はアプリ-便利さの裏で消える開放性 jp.w…

第6回実技試験|レスポンシブサイトの制作

モバイルファーストでレスポンシブサイトにする事(ブレイクポイントは自由) ロゴはsvg形式にする事 flexboxを1箇所以上で使用する事 .containerの幅には最大値を指定する事 img要素をフルード化する事 画像のホバーアニメーションにcssのfilter機能を使う…

CSS3 filterでの画像加工

今までPhotoshopで行っていた、ぼかしやグレースケールなどの加工がcssだけで可能になりました。 それにより、フェルタ毎に複数の画像を用意する必要がなくなります。 cssのfilterプロパティで出来る事 grayscale(グレースケール) saturate(彩度) sepia…

モバイルファーストでのコーディング

<html lang="ja"> <head> <meta charset="utf-8"> <title>北欧家具のECサイトをモバイルファーストでトレース</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <div class="header-inner"> <h1><img src="img/logo.svg" alt="ロゴ"></h1> </div></header></body></html>

高機能なフィルタリングjQueryプラグイン 「Shuffle.js」

vestride.github.io デモページ http://yachin29.com/school/shuffle/ jQuery $(function() { $('#btn li').on('click', function() { var $this = $(this), $grid = $('#animationList'); $('#btn .active').removeClass('active'); $this.addClass('active…

background-clipとtext-fill-colorを使ってcssを使って文字で画像を切り抜く

以前、Photoshopでクリッピングマスクを使い、文字で画像を切り抜く加工を行いましたが、css3の「background-clip」と「text-fill-color」を使う事で同じような表現が出来るようになります。 background-clip background-clipプロパティは、背景の適用範囲を…

SEOに適した無限スクロールの制作

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

ポートフォリオのテンプレート

ポートフォリオを作るに当たって、WordPressやBootstrapなどのフレームワークを使用する事も視野に入れておきましょう。 それぞれの長所・短所を理解し、自身にとって最も有効だと思う物を選択する事が大事です。 wordpressのテンプレート ポートフォリオ <…

.htaccessの作成

「.htaccessファイル」を使った自動振り分け スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を作ってみましょう。この授業では「.htaccessファイル」を使って、…

Fetch API を使ってみる

フェッチ 【 fetch 】とは ソフトウェアやネットワーク通信の分野では、データなどの受信側・需要側が(送信側・供給側から送られてくるのを待つのではなく)能動的に読み出しに行く、相手に送信するよう要求する、といった意味合いでフェッチという用語が用い…

SVGを使ったアニメーション

carlphilippebrenner.comtympanus.netgardenstudio.com.brjakearchibald.com SVGとは? SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。 ベクター画像は画像をビットマップ形式ではなく、…

css3を使ったドロワーメニュー

右端から出てくるドロワーメニューindex.html <html lang="ja"> <head> <meta charset="utf-8"> <title>ドロワーメニュー</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> </link></meta></meta></head></html>

jQueryを記述する上で気をつける点

jQueryはライブラリーという性質上、どうしても動作が重くなってしまいます。PCではあまり気にならなくても、パフォーマンスの低いスマートフォンでは読み込み速度が遅くなる、という事が良くあります。 jQueryを適切に記述する事である程度の改善は出来るの…

jQuery演習問題

「変更」ボタンを押したら、既存のh1要素内のテキストが変更されるよう記さい。 変更前 クリック前 変更後 クリック後 「変更」ボタンを押したら「on」と「off」が繰り返し、交互に変更されるよう記述し問なさい。 「変更」ボタンを押したら、jQueryのCSSメ…

Instagram API を使ってインスタグラムの画像をサイトに表示させる

最近はwebサイト上にインスタグラムに投稿した画像を表示しているサイトも珍しくなくなってきました。 ここではInstagram API を使ってインスタグラムのデータをhtmlファイルに埋め込む方法を説明していきます。 Instagram APIを使って出来る事・出来ない事 …

TwitterやFacebookなどのSNSをサイトに埋め込む

Webサイト上で新着情報や更新頻度の高い情報を表示させたい時には、TwitterやFacebookなど既存のSNSのプラグインを使うのが非常に便利です。SNSのプラグインを使用すれば、わざわざHTML内のデータを触る事無く、SNSに記事を投稿するだけでWebサイト内の情報…

jQueryでのパララックス

パララックスとは、視差効果のことです。 Webデザインにおけるパララックスはスクロールなどの動作に応じて、複数のレイヤー(層)にある要素を異なるスピードで動かすことで、「立体感や奥行きを演出」、「フェード・拡大縮小・回転などの視覚的エフェクト…

jQueryでのパララックス

パララックスとは、視差効果のことです。 Webデザインにおけるパララックスはスクロールなどの動作に応じて、複数のレイヤー(層)にある要素を異なるスピードで動かすことで、「立体感や奥行きを演出」、「フェード・拡大縮小・回転などの視覚的エフェクト…

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

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

Googleフォームに自動返信機能を付ける

Googleフォームに自動返信機能を付ける 以前作ったフォームをカスタマイズして、フォームを記入してくれた人に自動でメール返信が出来る機能を追加します。 自動返信機能を付ける事でフォームを利用したユーザーにタスクの進行状況を伝える事が出来るので、…

webサイトにGoogleAPIを導入する

Googleが提供しているGoogleAPIを使うことで簡単に様々な便利な機能をwebサイトに導入する事が出来ます。 Webサイトにスケジュール表やメールフォームを追加したい場合、PHPで作成する事が可能ですが、「Googleカレンダー」と「Googleフォーム」を使うのも選…

鈴木さや香のイラストレーションは、まるさんかくしかく

鈴木さや香(イラストレーター)のサイトです。猫のヘリの日々のスケッチや、パステルのイラスト作品など、シンプルでピリリと個性的な作品集です。ロゴデザインや、ショップを飾るイラスト、季節の花、人物画、オリジナルの模様、キッチンの風景、など様々…

object-fitを使って動画を要素にはめ込む

object-fitプロパティは、置換要素(img要素やvideo要素など)をボックスにどのようにはめ込むかを指定する際に使用します。 fill 置換要素(img要素やvideo要素など)をボックスサイズに合わせて縦横比を維持しないでリサイズして、全体が見えるようにはめ…

スムーススクロール

サイトのトップに戻すだけであれば、以下のようにシンプルな記述で大丈夫です。 $(function() { $("#to_top").on('click', function () { $('html,body').animate({ scrollTop: 0 }, 'swing'); return false; }); }); 複数の場所にスムーススクロールで移動…

jQueryの「animate」メソッドを使ったアニメーション

animateメソッドとは? jQueryのanimateメソッドを使うと簡単にアニメーション(値を変化)させることが出来ます。 animateメソッドは値で指定出来る物(margin、color、widthなど)に対し有効です。 $('#box').animate({ 'left': '500px', 'top': '300px' });…

「クックパッドを支える仕組み」

株式会社クックパッドの総合職・デザイナー向け技術基礎研修で使った資料がネット上で公開されています。webの基礎知識が非常に解り易くまとまっているので、web初学者は一度目を通す事をお勧めします。 speakerdeck.com

静岡市葵区にあるヨガ教室 | mogariyoga

静岡市葵区にあるヨガ教室、mogariyoga。少人数制でアットホームなヨガ教室です。 アロマやお茶など、リラックスした雰囲気で行える環境です。 はじめてヨガをする方もお気軽にお越しください。 www.mogariyoga.me