マガジンのカバー画像

デイトラWeb制作

49
本
運営しているクリエイター
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

DAY35.デザインカンプからコーディング編 PerfectPixelを使ったチェック＆修正

01.PerfectPixelのダウンロード・活用方法PerfectPixel ・実際のサイトの上に透過した画像を重ねる ・ブラウザ上でコーディングのズレを確認できる拡張機能 ・修正もデベロッパーツールで簡単に出来る 必ずしもピクセルパーフェクトで納品が求められるわけでは無い プロとして再現度の高いコーディングができる実力は身につけておくべき 02.PerfectPixelの使い方1.重ねる画像を取得する 2.サイトに重ねてみる ①デベロッパーを幅をカンプと合わせる

ren_k0227

DAY34.デザインカンプからコーディング編 横並びカードのコーディング

01.PC時のカードのコードディング横並びをするために”display: flex;” 改行するために”flex-wrap: wrap;” 実務ではカードの増減を考慮する必要がある 横並びをピッタリにする （100% / カード枚数 - 余白の幅 * 余白の数 / カード枚数 ) :nth-child() cssを適用する要素を指定するときに使う :not() 指定した要素以外に適用する 改行ありで使える横並び3パターン ①display: flex; ②disp

ren_k0227

DAY33.デザインカンプからコーディング編 横並びカードのコーディング

01.カードのコーディング横並びをするために”display: flex;” 改行するために”flex-wrap: wrap;” 1.フレキシブルな横並びをつくる width: calc(33.3% - 24px * 2 / 3); （100% / カード枚数 - 余白の幅 * 余白の数 / カード枚数 ) ポイント 行の最初のカードだけは除外する形でmargin-leftで余白をつける 02.PerfectPixelを使ったチェック＆修正PerfectPixelを

ren_k0227

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

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

ren_k0227

DAY31.デザインカンプからコーディング編 AdobeXDでWebカンプ制作②

01.スマートフォン版のWebカンプガイドは一般的に15px サイズの調整 コピーすると違うアートボードから持ってきてしまうこともある 一回消してアートボードを選択し直す XDはあくまで設計図 グループ化でまとめる ⌘＋G 02.開発する為に必要な素材の書き出し方や機能1.画像の書き出し レイヤーを右クリックして書き出しを選択 jpgデータ ・写真に向いている pngデータ ・色味の少ない物（イラストなど） ・四角でないもの ・透明な部分があるもの 丸い写真

ren_k0227

DAY30.デザインカンプからコーディング編 AdobeXDでWebカンプ制作①

01.AdobeXDをダウンロードコーディング業務は、Webカンプと呼ばれる「コーディングの設計図」 のような役割のものがあり、そのデザインの通りに実装していくのが 基本の流れ AdobeIllustrator・photoshop・AdobeXD・figma ダウンロードには、Adobeへのアカウントを作ることが必須 02.AdobeXDの基本操作1.配置 右側のバーは要素に対する細かい指定が出来る 左側のバーは要素の積み重ねなどを見れる 配置は自分の好きなように

ren_k0227