programingo's profile picture. 仕事でラクがしたくてVBAを勉強しはじめた女です。
好きなものは鳥と便利なもの!

業務自動化するとラクだよ〜とみんなに伝えたくなり
ブログをはじめました。
https://programingo.com

よかったら覗いてみてください!

ぐらみ

@programingo

仕事でラクがしたくてVBAを勉強しはじめた女です。 好きなものは鳥と便利なもの! 業務自動化するとラクだよ〜とみんなに伝えたくなり ブログをはじめました。 https://programingo.com よかったら覗いてみてください!

HTML&CSSとWebデザインが1冊できちんと身につく本 学習の進捗 送信ボタンの大きさを画面いっぱいに広げて、モバイル表示の調整も完了です。 これでサンプルサイトの制作はすべて完了しました! やったー🙌

programingo's tweet image. HTML&CSSとWebデザインが1冊できちんと身につく本

学習の進捗

送信ボタンの大きさを画面いっぱいに広げて、モバイル表示の調整も完了です。
これでサンプルサイトの制作はすべて完了しました!
やったー🙌

HTML&CSSとWebデザインが1冊できちんと身につく本 学習の進捗 最後にモバイル表示を調整します。 問い合わせフォームはスマホ画面に合わせて項目と入力欄を縦並びに変更します。

programingo's tweet image. HTML&CSSとWebデザインが1冊できちんと身につく本

学習の進捗

最後にモバイル表示を調整します。
問い合わせフォームはスマホ画面に合わせて項目と入力欄を縦並びに変更します。

HTML&CSSとWebデザインが1冊できちんと身につく本 学習の進捗 送信ボタンのところも整えました。 ボタンの上にカーソルを合わせるとボタンの色が変わり、カーソルが指のマークになる仕様です。

programingo's tweet image. HTML&CSSとWebデザインが1冊できちんと身につく本

学習の進捗

送信ボタンのところも整えました。
ボタンの上にカーソルを合わせるとボタンの色が変わり、カーソルが指のマークになる仕様です。

HTML&CSSとWebデザインが1冊できちんと身につく本 学習の進捗 フォームの中も調整しました。 適度な行間をとり、入力欄の大きさも少し大きくして入力しやすくなりました。

programingo's tweet image. HTML&CSSとWebデザインが1冊できちんと身につく本

学習の進捗

フォームの中も調整しました。
適度な行間をとり、入力欄の大きさも少し大きくして入力しやすくなりました。

HTML&CSSとWebデザインが1冊できちんと身につく本 学習の進捗 問い合わせエリアの位置も調整しました。 続いてフォームの中も調整していきます。

programingo's tweet image. HTML&CSSとWebデザインが1冊できちんと身につく本

学習の進捗

問い合わせエリアの位置も調整しました。
続いてフォームの中も調整していきます。

HTML&CSSとWebデザインが1冊できちんと身につく本 学習の進捗 アクセスマップのエリアを整えます。 マップエリアの位置を真ん中あたりに指定して、地図の大きさを変更します。

programingo's tweet image. HTML&CSSとWebデザインが1冊できちんと身につく本

学習の進捗

アクセスマップのエリアを整えます。
マップエリアの位置を真ん中あたりに指定して、地図の大きさを変更します。

HTML&CSSとWebデザインが1冊できちんと身につく本 学習の進捗 この本もいよいよ終盤戦。 問い合わせページをCSSで整えていきます。 まずはタイトル部分、コンセプトページから流用できる部分はコピーしてきちゃいます。

programingo's tweet image. HTML&CSSとWebデザインが1冊できちんと身につく本

学習の進捗

この本もいよいよ終盤戦。
問い合わせページをCSSで整えていきます。

まずはタイトル部分、コンセプトページから流用できる部分はコピーしてきちゃいます。

HTML&CSSとWebデザインが1冊できちんと身につく本 学習の進捗 送信ボタンを作成したら、すべての要素を並べ終えました。

programingo's tweet image. HTML&CSSとWebデザインが1冊できちんと身につく本

学習の進捗

送信ボタンを作成したら、すべての要素を並べ終えました。

HTML&CSSとWebデザインが1冊できちんと身につく本 学習の進捗 お問い合わせ内容の項目は名前やメールアドレスなどの項目とは違い、長文用の要素を設定します。 欄が少し大きいですね

programingo's tweet image. HTML&CSSとWebデザインが1冊できちんと身につく本

学習の進捗

お問い合わせ内容の項目は名前やメールアドレスなどの項目とは違い、長文用の要素を設定します。
欄が少し大きいですね

HTML&CSSとWebデザインが1冊できちんと身につく本 学習の進捗 選択式の項目を作成します。 「お客様について」のところの丸いボタンはラジオボタンというそうです!

programingo's tweet image. HTML&CSSとWebデザインが1冊できちんと身につく本

学習の進捗

選択式の項目を作成します。
「お客様について」のところの丸いボタンはラジオボタンというそうです!

HTML&CSSとWebデザインが1冊できちんと身につく本 学習の進捗 項目を並べたら入力欄を作ります。 まずはノーマルな入力欄から

programingo's tweet image. HTML&CSSとWebデザインが1冊できちんと身につく本

学習の進捗

項目を並べたら入力欄を作ります。
まずはノーマルな入力欄から

HTML&CSSとWebデザインが1冊できちんと身につく本 学習の進捗 お問い合わせフォームを作ります。 まずは項目を並べます。

programingo's tweet image. HTML&CSSとWebデザインが1冊できちんと身につく本

学習の進捗

お問い合わせフォームを作ります。
まずは項目を並べます。

HTML&CSSとWebデザインが1冊できちんと身につく本 学習の進捗 HTML内にある大きさを指定する属性を削除しました。 地図の大きさはCSSで設定していくようです。

programingo's tweet image. HTML&CSSとWebデザインが1冊できちんと身につく本

学習の進捗

HTML内にある大きさを指定する属性を削除しました。
地図の大きさはCSSで設定していくようです。

HTML&CSSとWebデザインが1冊できちんと身につく本 学習の進捗 問い合わせページにGoogleマップを埋め込みました。 GoogleマップのHPから簡単に設定できるのでとても便利ですね🥰

programingo's tweet image. HTML&CSSとWebデザインが1冊できちんと身につく本

学習の進捗

問い合わせページにGoogleマップを埋め込みました。
GoogleマップのHPから簡単に設定できるのでとても便利ですね🥰

HTML&CSSとWebデザインが1冊できちんと身につく本 学習の進捗 ショップページができたので、次は問い合わせページを作ります。 ついに最後のページ!

programingo's tweet image. HTML&CSSとWebデザインが1冊できちんと身につく本

学習の進捗

ショップページができたので、次は問い合わせページを作ります。
ついに最後のページ!

HTML&CSSとWebデザインが1冊できちんと身につく本 学習の進捗をブログにまとめました🦩 今回は2カラムレイアウトを使ってショップページを作りました。 programingo.com/webdesign-5/


HTML&CSSとWebデザインが1冊できちんと身につく本 学習の進捗 フッターの上の余白を調整して、ショップページの完成です!🥰

programingo's tweet image. HTML&CSSとWebデザインが1冊できちんと身につく本

学習の進捗

フッターの上の余白を調整して、ショップページの完成です!🥰

HTML&CSSとWebデザインが1冊できちんと身につく本 学習の進捗 商品詳細ページを調整しました。 画像の幅、商品説明の位置、購入ボタンの幅を調整しました。

programingo's tweet image. HTML&CSSとWebデザインが1冊できちんと身につく本

学習の進捗

商品詳細ページを調整しました。
画像の幅、商品説明の位置、購入ボタンの幅を調整しました。

HTML&CSSとWebデザインが1冊できちんと身につく本 学習の進捗 サイドバーの表示を微調整しました。 次は商品詳細ページのスタイリングをします。

programingo's tweet image. HTML&CSSとWebデザインが1冊できちんと身につく本

学習の進捗

サイドバーの表示を微調整しました。
次は商品詳細ページのスタイリングをします。

HTML&CSSとWebデザインが1冊できちんと身につく本 学習の進捗 メインコンテンツエリアを2列に変更しました。

programingo's tweet image. HTML&CSSとWebデザインが1冊できちんと身につく本

学習の進捗

メインコンテンツエリアを2列に変更しました。

United States 趨勢

Loading...

Something went wrong.


Something went wrong.