WEBサイト制作の勉強

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

フェリカテクニカルアカデミー

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

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

レスポンシブイメージをpicture要素で作成する

img要素を画面幅によって切り替えたい場合、以前はJavascript等でwindow幅によって画像のファイル名を変える、などの方法が取られていましたが、html5.1,で策定された「レスポンシブイメージ」を使う事で手間のかかるCSSやJavaScriptを必要とせず、htmlのみ…

htaccessを使った動的配信

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

cssだけで作るドロワーメニュー

css3のUI疑似クラス「E:checked」を使うことでcssのみでクリックイベントの指定が可能になります。 UI疑似クラス「E:checked」はフォームの部品である「ラジオボタン」「チェックボックス」の2つで使用可能です。さらに「~」や「+」などのセレクターを使う…

Canvasを使ってグラフが作れる「Chart.js」

canvasとは Canvasとは、ブラウザ上に図を描くために策定された仕様です。これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実現する…

pushStateとajaxを使ってSEOに強い無限スクロールページを作成する

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

スマホで見た時にjQueryを無効・有効にする(ユーザーエージェントで判別する方法)

前回の授業では if($(window).innerWidth() <= 767){ }; のようにwindowの横幅を基準に条件分岐させるパターンをやりました。 今回のやり方はユーザーエージェントでスマホかPCか判別してやる方法です。 ユーザーエージェント ユーザーエージェント(UserAge…

フィルタリング機能とモーダルウィンドウを使ったギャラリー

複数のjQueryプラグインを使って、フィルタリング機能とモーダルウィンドウを使ったギャラリーを作成しましょう。 複数のプラグインを使うことで、管理すべきファイルの数が多くなるので、気を付けましょう。 参考サイト chiyo-katsumasa.com フィルタリング…

プラグインを使ったwordpressのデプロイ

以前、バックアップを取って、sql文を使ってwordpressのデータを移動させましたが、今回はプラグインを使ってデプロイさせます。ja.wordpress.org このプラグインは検索 & 置換操作中に発生する、あらゆるシリアライゼーションの問題も解決します。 とても簡…

既存サイトのトレース|ポカリスエット

index.html <html lang="ja"> <head> <meta charset="utf-8"> <title>既存サイトのトレース|ポカリスエット</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/slick.css"> <link rel="stylesheet" href="css/slick-theme.css">…</link></link></link></meta></meta></head></html>

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

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

Illustratorでロゴを作る

Illustratorのアートブラシとアピアランス機能を使ってブラシで描いたイメージのクールなロゴを制作してみましょう。Illustratorのブラシライブラリーにはアーティスティックなものから幾何学模様まで、さまざまな種類のブラシが用意されています。これらを…

1つのプラグインでフェードとカルーセルの動きを実装する

使用するプラグインはkenwheeler.github.io 今回はページ上部に「fade」 ページ中央部にカルーセル(pc時は3枚表示、sp時は1枚表示)を実装 <script> $(document).on('ready', function() { //フェード $('.fade').slick({ dots: true, infinite: true, speed: 500, …

Illustratorチュートリアルまとめ

パターンの作成 helpx.adobe.com パスファインダーの使い方 uxmilk.jp design-trekker.jp バナーの作成 blog.digimerce.jp イベントポスターの作り方 helpx.adobe.com チュートリアルまとめ note.mu アイデア探し www.pinterest.com

cssのみで作るドロップダウンメニュー

コーポレートサイトなど情報量が多いサイトでは、リンク先のページに飛んでからさらにそのページの中から目当てのコンテンツを探さなければならない、といった手間がかかります。 メガドロップダウンメニューであれば、リンク先のページの中の目当てのコンテ…

jQueryを記述する上で気をつけるポイント

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

スクロールアニメーションが簡単に実装できる「Animate on scroll library」

スクロールに合わせて「Fade」「Flip」「slide」「Zoom」の4種類のアニメーションを簡単に実装出来、「duration」などの細かい設定も行えます。michalsnik.github.io index.html <html lang="ja"> <head> <meta charset="utf-8"> <title>AOSを実装してみる</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></head></html>

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; } メデイアクエ…

ワイヤーフレームの作成

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

第3回実技試験ー再試験

再試験のチェック項目 レスポンシブ化(ブレイクポイント:640px)配点:50点 スムーススクロールでアニメーションしながらトップに戻る h1にgoogle fontsを適用させる GoogoleMapをサイト内に表示させる(レスポンシブ化) 適切な余白を入れる .boxをhoverした…

コピーライトの記述方法

フッター要素などにあるコピーライトの記述。サイトによって色々な書き方がありどう書いて良いか迷う所ですが、そもそもコピーライトの記述は絶対に必要なものでは無く、記述しようがしまいが、日本では著作物は法律でちゃんと守られます。それでも何となく…

cssの正規表現を使って要素を絞り込む

divなどの要素に複数のクラス名を付けてcssでコントロールする、という事自体は以前からやって来ましたが、クラス名が増え過ぎてしまうと、逆にコントロールし難くなってしまいます。 そういう場合に正規表現を上手に使う事でコントロールしたい要素を絞り込…

jQueryでのcookieの指定

Cookie(クッキー)とは? Cookie(クッキー)とは、ホームページを訪問した ユーザーの情報を一時的の保存する仕組み、またはそのデータです。ID、パスワード、メールアドレス、訪問回数などが ユーザー情報として保存されます。これによって再訪問したとき…

<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 674.4 347.4" style="enable-background:new 0 0 674.4 347.4;" xml:space="preserve"> <style type="text/css"> .st0{fill:none;stroke:#005CFF;stroke-width:10;stroke-mit…</svg>

nth-child()とnth-of-type()を使い分ける

これまでの授業でもCSS3の疑似クラス「:nth-child(odd)」「:nth-child(even)」や「:nth-child(3)」は使って来ましたが、()の内に数式を入れる事で非常に便利になります。「:nth-child(2n+1)」= 「:nth-child(odd)」(奇数のみ指定)計算式 n=0: 2*0+1= 1 =…

アコーディオンパネルの作成

今回は、パネル部分が展開されると他のパネル部分は閉じるようにしたいので、 「開いているパネル部分以外のパネル部分は閉じる」という命令が必要です。 $('ul').not($(this).next('ul')) という記述で、複数あるulの中で、「クリックされたthisのnextのul…

第3回試験データ

レスポンシブ化(ブレイクポイント:640px) SP時にメニューをハンバーガーメニュー(ドロワーメニュー)にする スムーススクロールでアニメーションしながらトップに戻る h1にgoogle fontsを適用させる GoogoleMap(南池袋公園)をサイト内に表示させる(レ…

cssプラグインを使ってハンバーガーメニューを作る

前回の授業では擬似要素(before・after)を使ってハンバーガーメニューの3本線を作りましたが、スニペットを使う事で簡単に作る事が出来ます。 jonsuh.com アイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしま…

既存サイトをトレース|LUMINE 会社情報

既存のサイトを模写するというのは昔からデザイン上達のコツとしてよく取り上げられます。デザインを細かく観察して自分で再現してみることで、自身のパターンを増やすことが出来ます。またトレースで覚えたパターンを実践でも活かしてみましょう。www.lumin…

CSS3によるアニメーション・animation

CSS3によるアニメーションは大きく分けて、トランジション(transition)とアニメーション(animation)の2つに別ける事が出来ます。CSS3におけるトランジション(transition)とアニメーション(animation)の違い 「transition」 動かすために:hoverなど…