第8回webのひみつ(divなどの指定)

皆さんこんにちは。
インターン生の明瀬と申します。

今回は前回書いていた、オラクル社のホームページを見て、どのようなデザインがあるかを見たいと思います。
(参考HP)
https://www.oracle.com/jp/index.html

こちらが参考のホームページとなっています。

まず、こちらのサイトは以前書いていた、フレシキブルwebデザインになっており、スマホやPCなどの画面表示に応じてページを変化させることが出来ます。
また、こちらのサイトで良いと感じた点は、その変化をさせる際に@mediaを使い1600px、770px、500px、のようにいろいろなスマホサイズやPCサイズに対応させている点です。

そのほかにも、ページが見やすいように区切りを色々な方法で入れていたり、見てる人が飽きないようにコンテンツの中身をアイコンで表示したり、スライドのように表示したりなど細かな配慮がしてある点がすごくわかりやすく良いと感じました。

また、よくあるフッターの部分に企業の電話番号や公式ツイッターなどの固定しているフッターを作成していることで電話番号などがわからなくても素早く連絡や問い合わせなどができるため、利便性が高いものとなっているところも良いと感じました。

自分もこのようなHPを作成してみたいと感じています。ですが難しいので、一つ一つの要素の作り方をを覚えて作っていくことが大事だと思っています。

次に自分が興味を持った、ホームページのトップにあるスライドの簡単な作り方について書いていきたいと思います。
(参考HP)
http://blog.keisuke11.com/webdesign/css-slider/

今回はこのホームページを参考にして書いていきたいと思います。
こちらのサイトではdivを使用して作成しています。
まずdivを3つ囲むdivを作成しています。
その全体を囲んでいる,css-sliderのdivには表示する箱の大きさなどをしています。そしてこちらにはoverflowを入れてはみ出した分を隠すようにしています。(ここが大事)
そして次に、slide-itemの方を説明します。こちらには画像のサイズをsliderと同じサイズにしています。それをfloatにすることで横並びになるようにしてあり、これで3つの画像のスライダーの画像が用意してあります。

次にwappaerと指定してある部分について説明していきたいと思います。ここが一番大事で、これをwidthのサイズを300%にすることで、通常100%の箱の状態が現在300pxの幅となっているため、900pxの幅に変わっており画像がしっかりと格納されることになります、これをkeyフレームで300pxでの移動幅を加えていくことで、横スライドをする(実際には横移動を繰り返している)スライドの完成となります。

そのほかにも様々な方法で作成することができるため、また調べてみてください。

今回はこの辺で終了にしたいと思います。次回は最後のため、cssのことやhtmlに関することについてまた書けていけたらなと思います。

興味を持たれた方はお気軽にお問い合わせください。

インターンシップへの申し込み・お問い合わせ先

インターンシップへの申し込み・お問い合わせ先
メールでのお問い合わせは、下記フォームに入力して送信してください。
ご氏名 (例)山田 太郎
メールアドレス 半角英数字:ご入力間違いのないようにご注意ください
メールアドレス(確認用) 半角英数字:ご入力間違いのないようにご注意ください
電話番号 (例)0354339211 ※ハイフン抜きで入力してください
題名
お問合わせ内容

アーカイブ

カテゴリー