chevron_left

PCサイトコーディング入門
PREMIUM
第5回

PCサイトコーディング入門 -googleマップをサイトの全幅にする-

2016年5月8日 60min
PCサイトコーディング入門 -googleマップをサイトの全幅にする- play_arrow おためし受講

スライド資料

会員登録して、全てのスライドを見よう

1 / 36

授業の概要

「PCサイトコーディング入門」ではPCサイトの特性と振る舞いを学び、デザインカンプ通りにCSSコーディングしてシングルページのPC用UIを完成させるまでを学んでいきます。難易度はターミナルのWebデザイナールート、「A-1 WebデザインのためのHTML入門」「A-2 WebデザインのためのCSS入門」をご受講済みの方、または同程度のレベルの方に合わせてあります。

第5回「googleマップの全幅コーディング」では、googleマップで吐き出させれるiframeのhtmlタグをサイト全幅に設置し、リキッドデザインにするcssコーディング手法を学びます。

■ 事前準備 この授業はテキストエディタとブラウザ(GoogleChrome)を使用します。

またHTML／CSSの基本を理解している方を対象としています。自信の無い方は、下記授業をご受講ください。

・WebデザインのためのHTML入門

・WebデザインのためのCSS入門

「PCサイトコーディング入門」1〜4回もあわせてご覧ください。

こんな人にオススメ

サイト幅を変えても幅一杯に配置されるgoogleマップのcss成型方法を学びたい方

担当の先生／パーソナリティ

授業で使用する教材

※授業以外での使用は禁止します

チャプター

play_arrow
アジェンダ
00:35
play_arrow
授業に必要なもの
00:45
play_arrow
formの送信ボタンのコーディング
03:43
play_arrow
submitボタンの設置をしよう
06:14
play_arrow
googleマップの埋め込みコード
00:22
play_arrow
asideのcssを指定しよう
03:07
play_arrow
google mapのiframeを指定しよう
06:25
play_arrow
jquery-axgmapを利用しよう
03:37
play_arrow
axgmapのデータを指定しよう
07:32
play_arrow
吹き出し用のpタブを設置しよう
05:23
play_arrow
吹き出し用のpタブのcssを指定しよう
04:34
play_arrow
Q,paddingの中の要素を中央揃えにする方法を教えてください
02:17
play_arrow
iFrameが排出される仕組みをしろう
03:48
play_arrow
Q,高さを0にしてpaddingに対応するのはなぜですか？
01:04
play_arrow
Q,cssのimportantはどういった場合に使うのが望ましいでしょうか？
05:17
play_arrow
Q,フォームの自動入力機能に対応させた方が良いですか？
02:26
play_arrow
お知らせ