読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

レスポンシブデザイン

レスポンシブデザインにおけるブレイクポイントの値

レスポンシブデザインサイトを制作するうえで、ブレイクポイントの設定は必須です。しかし授業でも述べているように、ブレイクポイントの値は今の所これといった決まった値があるわけでは無く、その時々の主要デバイスの大きさによって変化していきます。ま…

レスポンシブデザインの復習

豆はカラダにイイホーム枝豆一覧枝豆隊アクセス 枝豆の栄養素はスゴい枝豆は大豆が未成熟で収穫したものですが、たくさんの栄養がつまっています。枝豆のタンパク質に含まれる成分はアルコールを分解を促します。カリウムも含まれており塩分を体の外に排出す…

レスポンシブデザイン・可変+固定レイアウト

index.html <html> <head> <meta charset="utf-8"> <title>SAMPLE</title> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="style-l.css"> <link rel="stylesheet" href="style-m.css" media="only screen and (min-width:640px) and (max-width:979px)"> </link></link></link></meta></head></html>

レスポンシブデザイン・可変+固定レイアウト

index.html <html> <head> <meta charset="utf-8"> <title>SAMPLE</title> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="style-l.css"> <link rel="stylesheet" href="style-m.css" media="only screen and (min-width:640px) and (max-width:979px)"> </link></link></link></meta></head></html>

レスポンシブデザインの基本

index.html <html> <head> <meta charset="utf-8"> <title>2カラムレイアウトRWD風</title> <link rel="stylesheet" href="rwd.css"> </head> <body> <div id="container"> <header>header</header> <nav>nav</nav> <div id="wrapper"> <div id="content">content</div> <div id="sidebar">sidebar</div> </div></div></body></html>

マウスホバーした進入方向からオーバーレイ要素がスライドしてくるjQuery

http://yachin29.html.xdomain.jp/sample2.html 参考サイト wiseyeti.co.ukwiseyeti.co.uk index.html <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>無題ドキュメント</title> </meta></meta></head></html>

レスポンシブデザインのまとめ

これまでの授業でモバイルサイトから作っていくモバイルファーストや、既存の企業サイトをモデルにした物など数種類のレスポンシブデザインのサイトを制作してきましたが、大事なポイントをまとめると、 - メディアクエリー メディアクエリーの使い方には、1…

既存のサイトをモデルにする レスポンシブデザイン編

授業で制作したレスポンシブデザインのサイトをモデルとして使用した既存サイトと同じ動きになるよう細かい修正を加えました。 PC・タブレットサイズでは2×2サイズの大きなピザの写真がスマートフォンサイズでは相対的に大きく見え過ぎるので、スマートフ…

レスポンシブデザインサイト

<html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no, email=no"> <title>キリン風レスポンシブ対応サイト</title> <link rel="apple-touch-icon" href="touch-icon.png"> <…</link></meta></meta></meta></head></html>

モバイルファーストを意識したレスポンシブサイト(データ)

完成データ index.html <html lang="ja"> <head> <meta charset="UTF-8"> <title>株式会社ネットスマート</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no, email=no"> </meta></meta></meta></head></html>

モバイルサイトをレスポンシブデザインにする

現在のモバイルサイトではメニューボタンを押すとナビゲーションが出てくるようになっていますが、PCサイズで見た時は常にナビゲーションが表示されているように記述します。まずはHTMLファイルに必要なクラス名を加えます。 <header id="globalHeader"> <div class="headerInner"> <h1><img src="img/logo.png" alt="株式会社ネットスマート" width="118"></h1> <div class="search"> <p id="searchToggle"></p></div></div></header>

スマホのタッチアイコンに任意のタイトルを表示させる

以前の「Faviconの設定」の中で2種類のサイズのFavicon以外に、スマートフォン用に「touch-icon」の設定も少し説明しました。 yachin29.hatenablog.com ここ数年スマートフォン利用者数が急激に伸び、今までのようにブラウザーから検索してWebサイトに行くよ…