WEBサイト制作の勉強

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

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

レスポンシブ レイアウトの作成

ポイント

  • レスポンシブサイトに必要なmetaの設定
  • cssは外部参照で記述し、適切なリセットをかける事
  • 960pxまではPC、959~641pxまではタブレット、640px以下はモバイルレイアウトになるようにメディアクエリーを設定する
  • flexプロパティを使ってコンテンツを横に並べる
  • 画像を自身で用意、適切なサイズにトリミングしフルードイメージに設定する
  • ロゴをsvgで作成
  • font-awesomeを使ってアイコンを表示させる
  • transformとtranstionを使ってホバーアクションを設定する
  • GoogleMapを貼り付け、GoogleMapをcssで幅・高さを指定出来るように設定する-


作例
f:id:yachin29:20200901010715j:plain





使用するテキスト

Net Smart
よりスマートなインターネットライフを

HOME
CONCEPT
SERVICE
ACCESS

必要なものは、ビジネスの価値を届けるデザインの力。
Net Smartは、ビジネスとユーザーを理解し、<br>関係性を構築するためのストーリーの設計とUXデザインをご提供し、よりスマートなインターネットライフを送るお手伝いを致します。

CONCEPT
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

SERVICE
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

ACCESS
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore




会社情報

会社名
株式会社Net Smart

住所
東京都豊島区南池袋

電話番号
03-0000-0000

従業員
1000名

資本金
100,000,000円


© Net Smart all rights reserved.