プロゲートというプログラミング学習サイトにて勉強しています。 今回はそのプロゲートにて、MySOLを導入したWINDOWS版ログの記録です。 MySQLでデータベースを作成しよう prog-8.com 手順通りにすれば、下記のようにインストールするところまですんなりと進…

2. トップ部分をレスポンシブ対応させよう 目視にて作業内容を確認する タブレット表示 CSS・top-wrapper h1のフォントサイズ変更 32px モバイル表示 CSS・top-wrapper h1のフォントサイズ変更 24px・top-wrapper pのフォントサイズ変更 14px facebookとtwit…

ヘッダーをレスポンシブ対応させよう！ 目的１：タブレット・スマートフォン様にヘッダーを調整する。 作業達成目標 ・モバイル用アイコンを表示させる ・デフォルトメニューを隠す ・メニューアイコンを表示させる 上記の工程目標が見えていれば、分からな…

スマートフォンのヘッダーレイアウト メニューのアイコン化メニューのアイコン化メニューのアイコン化メニューのアイ 先ずはHTMLにて <span class="fa fa-bars menu-icon"></span> このように書く ※上記のようにアイコン表示化をする事が前提となる。 要素の表示/非表示 display: none;display: block;d…

スマートフォンのヘッダーレイアウト メニューのアイコン化メニューのアイコン化メニューのアイコン化メニューのアイ 先ずはHTMLにて <span class="fa fa-bars menu-icon"></span> このように書く ※上記のようにアイコン表示化をする事が前提となる。 要素の表示/非表示 display: none;display: block;d…

今回の学習ポイント ・PC，タブレット，スマートフォンそれぞれの文字を調整する ・画面小さければ小さいほど文字を小さくする フォントのレスポンシブ化 font-sizefont-sizefont-sizefont-sizefont-sizefont-sizefont-sizefont-size 演習問題 タブレット向…

今回の学習ポイント width: 100%,btm, margin, text-align: left; padding-top SNSボタンの調整 width: 100%,btm, margin-bottm,width: 100%,btm, margin-bottm, width: 100%,btm, ma ・従来設定ボタンだと狭い ・めいっぱい幅を広げる（width: 100%) ・ボタ…

スマートフォン向けのメディアクエリ ・ブレイクポイントの設定 ・画像を縦並びに変更する @media(max or min -width: 設定ｐｘ) 参考 https://prog-8.com/html/study/3/8#/19 footerの位置調整 ・中央寄せにすることで見やすく調整する 参考 https://prog-8…