マガジンのカバー画像

デイトラWeb制作

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

#fff

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

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

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

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

ren_k0227

DAY32.デザインカンプからコーディング編 ヘッダーとメインビジュアルのコーディング

01.デザインデータからコーディングWeb制作の流れ ①ヒアリング ②仕様決定 ③デザイナーがデザインを作成 ④デザインデータから静的にコーディング ⑤案件によってはWPテーマ化など ⑥納品 マークアップエンジニアが担当するのは主に④と⑤ マークアップエンジニアにとって デザインデータからコーディングするスキルは必須 02.ヘッダーとメインビジュアルのコーディング実案件でデザインカンプはPC版のみで、レスポンシブは制作者が調整 というのはよくあるパターン 分からないな

ren_k0227