search

flsvo / share

情報共有用リポジトリ
0 stars 0 forks source link

html/css #4

Open masa401 opened 5 years ago

masa401 commented 5 years ago

以下をヒントにhtml/cssについて調べたことをコメントしてください。

woody233 commented 5 years ago

html5でできること

woody233 commented 5 years ago

SEO

woody233 commented 5 years ago

sass/less

  1. sass
    • Rubyがベース、sassとscssの記法を使うことがでる。scssはcssに近い記法、sassはカッコを省略できる
    • cssファイルの自動整形機能
    • 条件分岐や繰り返し処理が可能
    • フレームワークCompass
  2. less
    • JavaScriptがベース、Node.jsを元にしている、JavaScriptの関数を使用して文字列を扱うことができる
    • cssに近い記述方法
    • htmlに直接読み込みが可能
    • コンパイルして、cssファイルを生成することが可能
masa401 commented 5 years ago

明日はsass/less の書き方の違いについて調べて見て下さい。

alkinb commented 5 years ago

ブラックハットSEOとホワイトハットSEOって？

alkinb commented 5 years ago

Node.jsとは？

woody233 commented 5 years ago

masa401さん まずｈｔｍｌ/ｃｓｓとjavascriptの書きを勉強した後、sass/lessの書き方を調べようと考えてます。

woody233 commented 5 years ago

ブラックハットSEOとホワイトハットSEO

woody233 commented 5 years ago

Node.jsとは

ino008 commented 5 years ago

sass/less

  1. sass

    • Rubyがベース、sassとscssの記法を使うことがでる。scssはcssに近い記法、sassはカッコを省略できる
    • cssファイルの自動整形機能
    • 条件分岐や繰り返し処理が可能
    • フレームワークCompass

  2. less

    • JavaScriptがベース、Node.jsを元にしている、JavaScriptの関数を使用して文字列を扱うことができる
    • cssに近い記述方法
    • htmlに直接読み込みが可能
    • コンパイルして、cssファイルを生成することが可能

less や sass は何をするためのものなのでしょうか？ 書き方がcssに似ているということですが、cssとはどのような関係がありますか？ Webサイト制作における、css の役割と合わせて、まとめると分かりやすくなるかもしれません。

ino008 commented 5 years ago

SEO

  • Search Engine Optimizationの略、検索エンジン最適化は、検索エンジンのオーガニックな検索結果において特定のウェブサイトが上位に表示されるようウェブサイトの構成などを調整すること。
  • 順位決定にはの独自アルゴリズムが用いられるが、アルゴリズムは公開されていない場合も多い。
  • ブラックハットSEOとホワイトハットSEOが存在する。

Webサイトを構築するとき、SEOの効果を得るためにはどんなことができるでしょうか？ また、SEOの効果を調べるには、どのような方法があるでしょうか？

woody233 commented 5 years ago

Webサイトを構築するとき、SEOの効果を得るためにはどんなことができるでしょうか？

例として
alkinb commented 5 years ago
woody233 commented 5 years ago
ino008 commented 5 years ago

Webサイトを構築するとき、SEOの効果を得るためにはどんなことができるでしょうか？

例として

  • たくさん被リンクを獲得している人気コンテンツを探す

    • SEOツールのAhrefsを使用することで、リンクを得られやすいテーマのリストを構築できる

  • コンテンツテーマに適切なキーワードを選ぶ

    • SEMrush を使用するとで、作成予定に似たコンテンツがどのようなキーワードでアクセスを集めているかを調べることができる

  • 既存のコンテンツよりも優れたコンテンツを作る

    • コンテンツ量を増やす、画像のデザインをよくする、既存のコンテンツに新たな情報を入れる、コンテンツに対する説明を詳細にするべき

「Webサイトに何を掲載するか？」というコンテンツ制作者の観点が多いように思いますが、HTML、css、javascriptを実装する側の観点では、何かできることはあるでしょうか？

woody233 commented 5 years ago

Webサイトを構築するとき、SEOの効果を得るためにはどんなことができるでしょうか?

実装する側の観点から

検索エンジンはHTMLで以下のタグを重視している

woody233 commented 5 years ago
masa401 commented 5 years ago

基本的な考え方として、Htmlでは構造を定義します。

cssはそれらにスタイル（幅や高さ、フォントサイズや位置等）を指定します。

sass/lessについてはcssの上位言語となりますがそのままブラウザに読み込ませてもスタイルは変わりません。

ですので、sass/lessは一旦cssに変換してブラウザに読み込ませる必要があります。

sass/lessとcssの違いについては、sass/lessでは階層を意識した書き方できる

.main {
  height: 10px
  .hoge {
    width: 100px;
  }
}

のに対しcssでは上記を

.main {
   height: 10px;
}
.main .hoge {
   width: 100px;
}

のように書くことになります。上だけならあまり変わりませんが、階層構造が深くなるとsass/lessのほうが書きやすくなります。

sass/lessには他にも便利な書き方がありますのでよかったら調べてみてください。