質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

9回答

2469閲覧

制作中サイトのアドバイスをお願いします

pac894398

総合スコア429

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

8クリップ

投稿2014/12/07 02:05

http://one-text.tk/template/

上記サイトをHTML5で制作しました。

HTML5 や CSS のかきかたで改善した方が良い点がありましたら教えてください。

また、デザインなどについての意見もお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答9

0

こういった、フロントの制作物を見てレビューしてもらうっていう使い方も素敵ですね!
みなさますごく具体的かつ的確なご回答で素晴らしいです。
デザイナーの視点でコメントしてみます!

■ユーザビリティを考慮するなら、このサイトの
画面右上のハンバーガーメニュー格納は必要無いと感じました。
なぜなら、ナビゲーションが3つしかないのでヘッダー内に格納してあげたほうが一覧性が良いからです。
また、スマホで見た場合でも3つなら入るだろう、と感じました。
ナビゲーションが増えてきたら、使えるUIですよね!

■雪(?)が降っているのがとても気になりました…。
技術的にはとてもすごいと思うのですが、やはり情報を読み取りづらいと感じてしまいました。
こういったアニメーション技術は、「注目させたい」場所(例えばサービスの特徴を表すメインビジュアル部分など)に使用するととても効果的だと思います!

■テキストリンクの色は、基本的に大体がデフォルトである青色にしたほうがリンクであることを認識しやすいと思います!

■メインカラムの見出しレベル > サイドカラムの見出しレベル
であることが一般的であると思います。
リボンの見出しスタイルをメインに使用して、サイトカラムの見出しは下線にするなど装飾を弱めた方がコンテンツの強弱がついて、ユーザーに伝えたい情報に優先順位がつけられます!

とても有意義な質疑応答ですね!
頑張ってください!

投稿2014/12/03 13:42

hirai0110

総合スコア240

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pac894398

2014/12/03 15:07

◆メニューについて 実際に運用するときにはメニュー数は増えるのでこのままいきたいと思います。 ◆雪について やはり、ホームページは情報の伝達性が第一にあると思うので今回は消したいと思います。 年明けのカウントダウンページなどに使うのもよさそうですね。 ◆リンク色 ヘッダーフッター内では リンク色を青にすると背景色が黒で見づらいということ、 デザイン性が落ちることから 下線を追加してみました。 記事内では 青色のリンク色を使っていこうと思いまう。 ◆見出し メインの方の装飾を強めに変更してみました。 スマホからのアクセス時もメインコンテンツとサブコンテンツの区別がついてよくなりました。 今回はよいご指摘をありがとうございました。
guest

0

HTML
h1タグはサイトのタイトルに使った方がいい。サイトの顔は目立たせないと。
記事タイトルはh2からで充分。サイズが足りなければスタイル上書き

CSS
フォントサイズの単位の指定が混在してる。remとかで統一したほうが後々楽。 
transitionプロパティはallにするよりtransitionをかけるプロパティを指定する方がいい。
色の指定で色名とhexが混在している。hexも3桁6桁が混在しているため統一

デザイン
サイドバー表示のボタンの位置は左側の方がいいんじゃないかな?
footerがブラウザ下部から浮いて見えてしまう可能性。html要素にbackground-color:#000000しとくといいかも。

ぱっと見こんなところでしょうか

投稿2014/11/29 19:45

Ryo

総合スコア507

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pac894398

2014/12/03 14:47

h1 h2 ダグは修正させていただきました。 ご指摘 ありがとうございました。 メニューボタン・フッターについては試行錯誤してみます。
guest

0

デザイン:
メニューを表示するためのボタンが右過ぎる気がする。押しにくかった。
パンくずリストで、色がすべて一緒になっているが、自分の現在位置以外の色を替えるとかしたほうがよりわかりやすい。

コード:

  1. <script src="http://www.schillmania.com/projects/snowstorm/snowstorm.js"></script>が効いてないのではないか?という疑問。リンクを押したら、Forbiddenと表示されているので、無駄なコードは消したほうがよい。
  2. 表示速度の観点から言うと、javascriptのソースコードは一番下に記述するほうが良い。

投稿2014/11/24 07:52

takehiro_pink

総合スコア23

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pac894398

2014/11/24 08:36

ありがとうございます! JSの方は正しく表示されるときされない時があるようです。 外部サーバーではなく内部サーバーにし、一番下に記述したいと思います
guest

0

ベストアンサー

こういう相談って、ありそうでなかったですね。
新しい利用方法だと思います。 不躾ながら言いたいこと言わせて頂きます。
■デザイン
・右上のメニュー呼び出しボタンがある場合、スライドメニューが出るのは右からがいいと思います。
(ボタンが右にあるなら右からスライドするのが直感的な為。)
・右上メニューを付けるならば、大きくして視認性を高めた方がいい。
<aside><article>の1つ目のタイトルのタイトル背景(黒背景部分)の上位置を合わせたほうが良い。
・各ブロックの余白がなく圧迫感があるので、余白をもう少し多く取ったほうが良い
・フッターを下固定にさせた方がスッキリ見えそう。

■コード
・リンク先の無い<a>タグのhrefには「href="javascript:void(0)"」を付けるか、コメントアウトしておけばいい。
・フッターのコピーライトにある「(c)」は実体参照文字を使った方がいい?

頑張ってください。

投稿2014/12/03 18:47

ebonawake

総合スコア44

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

スマホとpcで共用ならwidthとheightを%、autoなどにすると良いのではないでしょうか?
幅の固定はスマホでは見えにくいです
回答ではないのですが、
もしモバイルとpc別で作るなら.htaccessやユーザーエージェントで判別すると良いと思います

投稿2014/12/02 12:37

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pac894398

2014/12/03 08:24

レスポンシブデザインに対応化させてみました。 よいご指摘をありがとうございました。
guest

0

他の方もおっしゃっていますが、個人的にはフッターが浮いてしまっている(フッターの下に無駄なスペースがある)のが気になります。

lang

1html,body { 2 height: 100%; 3}

として、ウィンドウいっぱいに高さを確保し、

lang

1main,aside { 2 padding-bottom: 150px; 3} 4footer{ 5 position: absolute; 6 bottom: 0; 7 height: 150px; 8}

footerをabsolute(絶対位置)で下部に固定することで無駄なスペースを省くことができます。

投稿2014/11/30 07:48

toppo

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pac894398

2014/12/03 12:31

position: absolute; の指定をすると... メインコンテンツが画面下まであるとき(ウィンドウの高さが狭いとき)に フッターのバーがメインコンテンツの上に出てきてしまいました。 対処方法を教えてください。 お手数ですが、お願いします。
guest

0

サイトのブランディングについての方針を決めることがまずは必要とおもいます。
サイトの雰囲気は、色、レイアウトに大きく左右されます。

検討事項例:

  • ファビコンのデザイン (現状は設定されていない)
  • 基本の色 (現状は黒と黄色)。

現状では、ページ左上のタイトルをクリックしたときに現れるホームページの色調と一致していない...

  • フォント、画面の基本構造

フォントサイズや色も ホームページのものと一致していない...
画面構成 (ナビゲーション、リンクの区分レイアウト、列挙のレイアウト...) も一致していない。

まずは、ホームページのものと合わせることが必要なのかを決定することが必要です。
(大抵は一致させるのが好ましいはずです。)
一致させる必要がないなら、それなりにデザインをすることが必要です。
デザイナーと協力して作業するべきです。

ブラウザの開発ツールなどをつかって, css, html, javascript でのエラーが発生していないことのチェックも必要です。
(現状では chrom での開発ツールのコンソールにいくつかエラーが表示されるようです)

投稿2014/11/24 10:59

katoy

総合スコア22324

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pac894398

2014/11/24 11:39

説明不足で申し訳ございませんでした。 リンク先は現在のホームページのリニューアル用のテンプレートです。 ファビコンの件、考えさせていただこうと思います。 貴重な意見をありがとうございました。
guest

0

リンク先サイトは リニューアル用のテンプレートです。

投稿2014/11/24 08:36

pac894398

総合スコア429

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

たくさんのご回答 感謝します。
時間があるときに少しずつ反映させていただきたいと思います!

投稿2014/12/03 15:04

pac894398

総合スコア429

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問