マガジンのカバー画像

デイトラWeb制作

49
本
運営しているクリエイター
ren_k0227

DAY49.実務でよく使うアニメーションの付け方編 アコーディオン

01.slideToggle()で簡単アコーディオン実装jQuery('.accordion__head').click(function() { 　jQuery(this).next().slideToggle(); 　jQuery(this).children('.accordion__icon').toggleClass( 'is-open' ); }); jQuery(this)に対する、next()やchildren()といった 相対的な位置関係もよく使う .

ren_k0227

DAY48.実務でよく使うアニメーションの付け方編 クリックイベントの処理

01.ページ内リンクでクリックした要素に下線を引くメニューやタブをクリックしたとき、 クリックしたメニューの色が変わったり太字になったりする ユーザーにとって、どれが選択されているのかを見分けるための大事な表現 ①クリックされた時にメニューの全てのリンクの下線を削除する ②クリックされた要素に対して下線を引く addClass、removeClassを活用 02.クリック時にクラスをつけ外しアクションイベントの多くは 「◯◯したら□□のクラスをつける」 「◯◯したら□

ren_k0227

DAY47.実務でよく使うアニメーションの付け方編 スムーススクロールとフローティングアイテム

01.スムーススクロール内部リンクをクリックした時に「ぐいーん」と移動した方が ページ内を移動していることが理解できて少し親切 スムーススクロールが鉄板で使われるパーツといえば、 「トップへ戻るボタン」 1.ページ内リンクのクリックを検知する スムーススクロールは ページ内リンクをアニメーションをつけて移動させること ページ内リンクの発動キーはhrefが「#」から始まるリンクとなる // #から始まるURLがクリックされた時 jQuery('a[href^="#"]

ren_k0227

DAY46.実務でよく使うアニメーションの付け方編 スマホ時のドロワーメニュー

01.ドロワーが作れるライブラリ1.drawer.js 対応ブラウザ ・IE10~ ・Safari ・Chrome ・Firefox 2.hiraku.js 日本人が開発している ドキュメントも全部日本語 02.ドロワーメニューを開いた時のレイヤー階層ドロワーが開いた時の重なりを意識してz-indexを指定する 下から順 ①通常のbody内のコンテンツ ②ヘッダー（※上部に固定表示するため） ③ドロワー開いた時の黒背景 ④ドロワーメニュー ⑤ハンバーガーメニュー（

ren_k0227

DAY45.実務でよく使うアニメーションの付け方編 スクロールで「フワッ」と登場

01.WOW.jsで「フワッと」表示するフワッとした動きを実装するなら「WOW」ライブラリを使うのが一番楽 ※WOW.jsには商用利用も無料の「MIT版」商用利用は有料の「本家」 の２種類があります！ 無料のMIT版を使わないとお金がかかる animate.css クラス名をつけるだけでアニメーションがつけられるcssパッケージ wow.js アニメーションのトリガーや詳細を操作できるJavaScriptパッケージ wow.min.jsを読み込むだけじゃなく 「new

ren_k0227

DAY44.実務でよく使うアニメーションの付け方編 スライダー（カルーセル）

01.スライダーの実装ライブラリの使い方を覚えてそのライブラリをカスタマイズ出来る デザインカンプ上にアローボタンやページネーションが 用意されていたら「スライダーで実装する」と判断する ※デザイナーさんに意図を聞く 2枚目以降の画像がない場合、適当に同じようなサイズの仮の画像を入れる 先方が画像を差し替えたらいいだけの状態にして納品 02.扱いやすいスライダー系ライブラリを１つ持つスライダーは自作してもいいが、先人の凄い人が作ってくれた JavaScriptのライブ

ren_k0227

DAY43.実務でよく使うアニメーションの付け方編 品質を担保するテスト

01.チェック項目の一覧とチェック方法コーディングの品質を担保するために、 最低限チェックしておいた方がいい項目がいくつかある ・誤字脱字がないか　テキスト比較ツールで比較 ・改行位置は適切か　タブレットやスマホ時の<br> ・フォントは適切か　WhatFontで確認 ・色が適切か　デベロッパーツールでcolorをデザインカンプと比較 ・スムーズにレスポンシブ化されるか　目視確認 ・スマホ(320px)tab(768px)PC(カンプ)表示に崩れはないか　目視確認 ・水平ス

ren_k0227

DAY42.実務でよく使うアニメーションの付け方編 Webフォント/デバイスフォント

01.CSSのフォントの指定を理解する1.font-familyに複数のフォントを書く理由 セレクタ {font-family: フォント名;} OSによって入っているフォントが異なるから 複数のフォントを書いて対応 MacでもiPhoneでもiOSでも使えるフォントを複数個並べてカバーする 間に半角スペースの入るフォント名は「’」ではさむ 2.記載する順番 前に書かれたフォントが優先される 英語フォントは前に並べる 3.最後に登場する「sans-serif

ren_k0227

DAY41.実務でよく使うアニメーションの付け方編 マウスホバー時の動きを付ける

01.マウスホバーのパターン１０選hover { 　display: inline-block; 　padding: 0.6em 2em; 　margin: 0 0 1em; 　background-color: #4CAF50; 　color: #fff; 　cursor: pointer; 　transition: all 0.3s ease 0s; } 1.透明に近づける .hover:hover { 　opacity: 0.6; } 2.色が反転 .hover

ren_k0227

DAY40.デザインカンプからコーディング編 フッターのコーディング

01.フッターの3ブロックの作り方3つの固まりが横並びになっている様子をイメージ それぞれの割合の大まかに定義して”display: flex;” で大枠を横並び /* 左、中央、右を囲うエリア */ .footer__contents { 　display: flex; } /* 左のエリア */ .footer__left { 　width: ◯%; } /* 中央のエリア */ .footer__center { 　width: ◯%; } /* 右のエリア

ren_k0227

DAY39.デザインカンプからコーディング編 お問い合わせフォーム

01.ブラウザ間の差異を極力なくす全てのフォーム要素のデザインをフラットな状態にする ・フォームの各要素はブラウザによって基本となるデザインが異なる ・文言や大きさや色、アイコンなど 1.テキスト　 <input class="text-test" type="text"> .text-test { 　-moz-appearance: none; 　-webkit-appearance: none; 　appearance: none; 　background-

ren_k0227

DAY38.デザインカンプからコーディング編 テーブルとiframe埋め込み

01.テーブル作成1.覚えておきたいこと ①table-layout: fixed; ・テーブルに複数の列がある場合は、勝手に幅が調整される ・table-layout: fixed;でテーブルの列を均等にする ・幅（width）を指定しないと機能しない ・幅を指定した列だけにwidthが反映されるが他は均等を保つ性質 ②ボーダーを統一 ・border-collapse: collapse;という指定をする 　table/th/tdの重なったボーダーを１本としてみなしてる

ren_k0227

DAY37.デザインカンプからコーディング編 ニュース系のコーディング

1.フレックスボックス利用時の注意点 ”display: flex;” は中のコンテンツ量に応じて自動で幅を調整してくれる 便利な反面、デザインを再現するときは意図しない幅で設定されてしまう 子要素の幅を指定して制御してあげる必要がある 幅を指定するパターン ・%で指定する方法 ・固定値 + calcで指定する方法 %で指定する方法 ・可変しても不格好にならないであろう場合 ・カード系のコンテンツや画像がベースとなっているコンテンツ 固定値 + calcで指定する

ren_k0227

DAY36.デザインカンプからコーディング編 ボタン・見出し作成

01.ボタン、見出しを自在に作れるようになるWebサイトを制作する時は、見出しやボタンのパーツの利用頻度が一番多い 見出しやボタンはHTML/CSSで自在に作れる状態になっておくのがベスト 02.ボタン・見出しコーディングのメリット擬似要素・position・transformなど、CSS活用のコツが詰まっている 一度作った見出しやボタンのパターンは、 メモ帳に保存していつでも引き出せるようにしておく CSSの装飾でよく使われる「背景画像」「疑似要素」の使い方・位置関

ren_k0227