WEBサイト制作の勉強スマートフォン用の表示で見るWEBサイト制作の勉強WEBサイト制作の勉強の為の解説ブログです。2020-02-19cssプラグインを使ってハンバーガーメニューを作るHTML5+CSS3前回の授業では擬似要素(before・after)を使ってハンバーガーメニューの3本線を作りましたが、スニペットを使う事で簡単に作る事が出来ます。jonsuh.comアイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしまいましょう。00:00広告を非表示にする2020-02-18フリー素材を編集してロゴ画像を作成するIllustratorベクター形式のロゴデータであれば、文字などを自由に編集できるので、場合によってはフリー素材などを使って編集してみましょう。11:24広告を非表示にする2020-02-18スマートフォンでのナビメニューHTML5+CSS3ナビゲーションメニューの押し易さ(使い易さ)というのはページ全体の使い易さに繋がる為、非常に大切です。PCレイアウトの場合は、ある程度大きい面積の中でホバーアクションと組み合わせる事で、ある程度の解り易さは確保出来ます。スマホでは制限された面積の中でメニューを作らないといけない為、PC以上に解り易いメニューの作成を心掛ける必要があります。今現在、「ハンバーガーメニュー」がスマホ時のメニューのスタンダードになっていますが、しかし必ずしも全ての状況でハンバーガーメニューが良いという訳ではなく、色々なパターンから適切なスマホ用のナビを選べるようになりましょう。09:46広告を非表示にする2020-02-18スプリットレイアウトの作成Webサイト制作スプリット=分割するデザインレイアウトのことです。画面を縦2つに分割して見せることで左右の対比が生まれます。「スプリットレイアウト」の中でも、デザイン上のスプリットレイアウトのみのスクロール一体タイプと、CSSで画面半分を固定表示にして、残りの半分のみスクロールさせるスクロール分割タイプに大別されます。画面を4分割や5分割など、色々なパターンがあります。食とアートと音楽が交差する空間を創造します。シェフ・矢島が提供するのは、イタリア料理に「東京」のエッセンスを取り入れたモダンイタリアン。店内は、新進気鋭のアーティストとコラボレーションしたアートギャラリー。心地よいチルアウトミュージックが流れる空間でくつろぎのひとときをお過ごしください。食とアートと音楽が交差する空間を創造します。</h2><p>シェフ・矢島が提供するのは、イタリア料理に「東京」のエッセンスを取り入れたモダンイタリアン。<br>店内は、新進気鋭のアーティストとコラボレーションしたアートギャラリー。<br>心地よいチルアウトミュージックが流れる空間でくつろぎのひとときをお過ごしください。13:55広告を非表示にする2020-01-28レスポンシブデザイン基礎レスポンシブデザインレスポンシブWebデザイン(RWD)の制作レスポンシブWebデザインでは、あらゆるデバイスに対して単一のWebページ(HTML)を使い、スクリーンサイズ(画面幅)を基準にCSSだけを切り替えてレイアウトを調整します。小さいスクリーンに対しては小さいスクリーンで見やすく操作しやすいレイアウトを、大きいスクリーンに対しては大きいスクリーンに適したレイアウトを提供します。Query)」の3つの技術的な要素で構成されます。Design)」を合わせたものです。レスポンシブWebデザインでは、最初にグリッドデザインによって部品や表示領域をpx単位で配置していき、レイアウトが整った後に、値を%に変換してフルードデザインに変更します。●フルードイメージフルードイメージは、レイアウトの大きさに追随して画像のサイズを拡大・縮小する手法で、CSSのみで実装できます。Rutter)氏によって提唱されました。●メディアクエリーメディアクエリーは、画像解像度、ウィンドウの幅、デバイスの向きなどの指定条件にあわせて別々のCSSを適用する技術です。レスポンシブWebデザインではメディアクエリーを使ってスクリーンサイズに応じたCSSに切り替えます。●ブレイクポイントブレイクポイントとはデバイスサイズによってCSSを個別に適用させるために指定した画面サイズの値のことです。メディアクエリで指定します。ブレークポイントのデバイスサイズの値は特に決まっている訳ではなく、また、何分割にするのかも自由です。Point)」を決め、それぞれの条件に沿ったスタイルシートを記述していきます。ブレイクポイントは決まった数や値がある訳ではありません。Bootstrap3ではブレイクポインが4つあり、1200px以上がPC(大画面)用1199px~992pxがPC用991px~768pxがタブレット用767px以下がスマホ用に分かれていましたが、バージョンアップしたBootstrap4ではブレイクポイントが5つあり、1200px以上がPC(大画面)用1199px~992pxがPC用991px~768pxがタブレット用767px~544pxがスマホ用543px以下がスマホ(小さいサイズ)用に分かれました。6のポートレート/ランドスケープ時に、表示を切り替えることができるようになり、より柔軟にモバイル最適化が行えるようになりました。767px以下ブレイクポイントは絶対的に決まった数値ではなく、その時々の要件や主要のデバイスサイズによって変わっていくので、数字を暗記するのではなく、意味を理解する必要があります。今回は1つのCSSファイル内にブレイクポイント毎にメディアクエリーを設定する方法で記述します。FELICAは、あなたのもうひとつの「おうち」になりたいごはんやさんです。毎日食べたくなるような、どこかホッとするごはんにおやつ、飲みものを揃えて、ゆっくりくつろげる空間でお迎えします。「ただいま」を心よりお待ちしています。ただいま、夏限定のメニューを多数ご用意しております。16:03広告を非表示にする次のページプロフィールid:yachin29WEBサイト制作の勉強の為の解説ブログです。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。