プログラミングを独学で勉強しても、基礎しか身につかずに挫折した経験のあるあなたへ | レビューログ
世の中には無料でプログラミングを学べるサービスがいっぱいあるが、ほぼ全て基礎しか身につかない 流行りのプログラミングを無料で学べるサービスを羅列します。 ドットインストール：無料なら他言語に渡って一番網羅されているサービス 言わずと知れた大御所プログラミング学習サイト。 僕もこのサービスのRuby入門、Rails入門を何周かやりましたが、何も残りませんでした。 ドットインストールだと身につかない理由が、プログラミングの基礎にしか触れられないこと。実際にウェブアプリを作ろうとすると、ドットインストールだけでは広大な壁にぶつかります。 Progate：プログラミングの仕組みを理解するなら一番分かり易いサービス 独学でRubyやRailsを勉強したいならば、ドットインストールの後にProgateを一通りやると大分イメージ湧くと思います。 しかしRubyとRailsならばこれで勉強するのは良いと思
WordPressで改行するならbrタグはダメ！htmlの文法的に正しいのはpタグでの段落分け | レビューログ
WordPressでブログやサイトを運営している皆さま、こんにちは。 何の気無しに文章を書く時に改行をしていますが、実際のソースコードを見たことはありますか？ 昔から改行はbrタグを使えと教わってきましたが、実はhtmlの文法的に正しい使い方では無い(想定している使い方では正しい記述方法では無い)場合がほとんどです。 結論から言うと、段落分けに用いるpタグで改行するのがベストなんです。(自分で書いていて分かりにくい表現で恐縮ですが、要はbrタグ使わない方が良いってことです) htmlで下線を引くのにuタグはNG！spanタグかCSSで「text-decoration: underline;」で指定しよう htmlで取り消し線を書くstrikeタグは非推奨！delタグか「text-decoration: line-through;」と指定すべし brタグは文章が繋がったまま改行していることを
HTML5/CSS3を挫折せずに独学で勉強するには？プログラミング学習サービス・書籍・スクールまとめ | レビューログ
2017年10月10日2018年9月21日HTMLCSS3,HTML5,まとめ,サービス,スクール,プログラミング,勉強,学習,書籍,独学 僕はデザイン学校に通った訳でも、大学で習った訳でもありませんが、ウェブマーケティング（主にSEO）の勉強のためにHTMLやCSSのマークアップ技術を学ぶ必要がありました。 HTMLやCSSの知識は完全に独学で身につけたのですが、色々な書籍を買って書籍代は無駄にし、無料のプログラミングサービスをいくつもやっては挫折し、を繰り返しました。 そんな中、どのような学習を続けていくのが一番効率が良いのか、自分の体験を元にまとめていきます。 HTML5/CSS3を挫折せずに学習する３つの方法 プログラミング学習サービス「Progate」を使って作りながら学ぶ(980円／月) ありがちなのが、本屋でHTMLやCSSなどウェブデザインに関する書籍を購入して、勉強を始め
１分でおしゃれな店舗ホームページを作れるサービス「グーペ(Goope)」を徹底レビュー！無料でお試しも！[PR] | レビューログ
当サイトはWordPressで構築していますが、SEO対策として有名なプラグインをいくつか入れたり、SEOに強い(HTMLのマークアップをしっかりしている)かつ人と被らなさそうなテーマを選び、導入しています。 セマンティックWebに準拠したHTML5の基本構造と間違いやすいポイント 僕は独学でプログラミングを嗜んでいることもあり、WordPressのテーマ構築であればできます。 WordPress(PHP)を挫折せずにできるだけ独学で勉強する方法・コツをまとめる しかし、このレベルに到達するまでに３ヶ月みっちりのJavaの研修を受けたり、TechAcademyのカリキュラムを受講したことがきっかけで独学でRuby（＋Ruby on Rails）、PHP（＋Laravel）の習得をできたからです。 そこまで時間もお金をかけないと、サイト制作の鉄板として流行っているWordPressのカスタマ
![１分でおしゃれな店舗ホームページを作れるサービス「グーペ(Goope)」を徹底レビュー！無料でお試しも！[PR] | レビューログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/f5e93d4097016adaaa4ffea81c417001280bf4f7/height=288;version=1;width=512/https%3A%2F%2Freviewlog.info%2Fwp-content%2Fuploads%2F2017%2F07%2Ffcd0bbc1f8758d81859d09a03291f918_s.jpg)
HTML5で文字に取り消し線を引く場合、delタグはSEO的にテキストの評価を下げる効果がある | レビューログ
2017年1月17日2018年9月21日HTMLdel,HTML5,SEO,タグ,取り消し線,文字 HTML5でテキストに取り消し線を引きたい場合、del要素を使用するかCSSで指定するかの２通りしかありません。 実はこの２つは曲者で、delタグの場合囲んだテキストの検索エンジンからの評価を下げることが出来ます。(CSSで指定した場合、文字の装飾を行っているだけなのでそのような効果はありません。) そのため、文章中で取り消し線をよく使う人でdel要素を使っている人は、知らず知らずのうちに文章全体の評価を下げている可能性があります。 両者の正しい使い分けを覚えるため、実際にコードを書いて表示される内容も確認してみました。 HTML5で取り消し線を引く場合、内容が古くなり検索エンジンの評価を下げたい&ユーザーに変更の旨を残したい場合はdel要素を使う <meta charset="UTF-8"
SEO対策に大切な見出しタグ(hタグ)の使い方。理解のコツはhtmlの構造理解から！ | レビューログ
ホームページやブログを作ってみようとお考えの方が、最初に「SEO対策」として取り掛かるのがこの「見出しタグ(hタグ)」です。 htmlタグの文章におけるSEO上大事な要素「見出しタグ(h1,h2,h3,h4,h5,h6)」の使い方について 使い方自体については、特に難しいことはありません。 が、このページをご覧の方には小手先だけでなく、htmlの構造から見出しタグの使い方を理解していただきたいのです。 (もちろん、答えだけが知りたいという方のため、見出しに解答を記載しています。答えだけ知りたい方は、そこだけ読んでご自身のHPやブログの改修を進めてください。) セマンティックWebに準拠したHTML5の基本構造と間違いやすいポイント 見出しタグ(hタグ)のSEO対策。それは「h○を数字の順番に使う」こと！それだけ！ ね？簡単でしょ？ ただ、これだけで終わらないのが見出しタグ。 SEO的に最大
HTML5の新要素、section・article・header・footerをSEO的に正しい順序でマークアップする | レビューログ
HTML5にて新しく追加された要素に、section,article,header,footerがありますが、これらをSEO的にもhtmlの構文としても正しい順序でマークアップしているか気になったので、調べてみました。 セマンティックWebに準拠したHTML5の基本構造と間違いやすいポイント 上記でSEO的に正しくと書いていますが、検索エンジンを欺く以前のスパムに近い手法とかでは全く無く、htmlの文法上正しい使い方をしていることが、ユーザーにも検索エンジンにもフレンドリーな内容になるため、結果として検索順位が上がります。 htmlの構造化タグと呼ばれるものは他にも色々ありますが、まずはページを構成する際の基本的な要素であるsection,article,header,footerの４つに絞って使い方を確認していきます。 HTML5でのsection,article,header,foot
htmlタグの文章におけるSEO上大事な要素「見出しタグ(h1,h2,h3,h4,h5,h6)」の使い方について | レビューログ
HTML5になっても変わらず文章におけるSEO上の重要なタグが、「見出しタグ(h1-h6)」です。 もちろん、見出しタグにただキーワードを詰め込めば良いという時代はとうに終わっており、ユーザーが見やすいように見出しを付けていく必要があります。 HTML5におけるtitleタグでSEO効果を高めるための使い方・文字数・キーワード数まとめ 今回は、セマンティックWebに準拠した見出しタグの使い方をまとめます。 セマンティックWebに準拠したHTML5の基本構造と間違いやすいポイント 見出しタグ(h1,h2,h3,h4,h5,h6)を使う上での２つの注意点 h1タグは１ページに１つにしておく 見出しタグは以下のように記述します。 <h1>大見出し</h1> <h2>中見出し</h2> <h3>小見出し</h3> <h4>本当に小見出し</h4> <h5>ほとんど使わない</h5> <h6>使った
htmlタグにおけるlinkタグとaタグは全く別物！rel,href要素の使い方まとめ | レビューログ
HTML5における重要なタグが「linkタグ」です。 これは、linkタグを記述する文書ファイル(≒htmlファイル)に関係する別の文書ファイルを指定して、呼び出す(定義する)ものになっています。 似たhtml要素に「aタグ」が存在しますが、こちらはlinkタグが<head>～</head>内に記述するのに対して、<body>～</body>内に記述して外部リンクを記述します。 html要素として必要不可欠なheadタグとbodyタグの違いとは そのため、両者を混同することが最初よくあったので、まとめておきます。 html文書の情報(メタデータ)を指定するmetaタグの使い方と主な属性まとめ <head>～</head>内で関連する文書の定義を記述する<link>タグの使い方と頻出な属性とは 全ての属性やその中身を覚える必要は全くありません。 以下、SEO対策をそれなりに行っている当サイト
HTML5におけるtitleタグでSEO効果を高めるための使い方・文字数・キーワード数まとめ | レビューログ
そのため、以下のようにheadタグ内に記述します。 <!DOCTYPE html> <html> <head> <title>ここにページタイトルを記述する</title> </head> <body> <!--ここに本文を記述する。--> </body> </html> titleタグの推奨文字数はGoogle,Yahoo!の検索結果において省略されない「30文字」が良い Google,Yahoo!での検索結果ですが、Googleでは32文字まで、Yahoo!では30文字まで検索エンジンのタイトルに表示されているのに対して、その先は「…」で省略されてしまっています。 そのため、titleタグの内容もGoogle,Yahoo!双方で省略されない30文字以内にしておくのが無難だと思います。 titleタグに入れるキーワードは「狙っているキーワードだけ」にしておくべき 以前ほど、Googleは
htmlタグに属性を付与して要素の補足情報を記述するHTML5の書き方について | レビューログ
HTML5でもこれまでのhtmlタグの属性の書き方は変わりありません。 htmlタグにおける属性とは、そのhtml要素に補足情報を付与する場合に記述するものになります。 例えば、リンク先のURLを指定したり、画像のリンク先を指定したりと数限りなくあるのです。 ですが、どの属性追加においても注意しておくべき使い方は、１つのポイントに集約されます。 htmlタグが何か分からない方は、以下記事も参考にしてくださいね。 HTML5におけるhtmlタグの開始・終了タグの基本的な書き方と閉じタグのいらない要素とは htmlタグの属性の指定方法は１つの書き方だけ守ればOK 属性とhtmlタグ(要素)の間は「半角スペース」を空ける(属性同士も同様) 論より証拠、具体的な書き方を先の例のリンク先指定で行ってみます。 <a href="link.html" target="_blank">アンカーテキスト</
html文書の情報(メタデータ)を指定するmetaタグの使い方と主な属性まとめ | レビューログ
html文書の情報(メタデータ)を指定するのが、metaタグです。 SEO的に重要なdescription要素など、覚えておかなければいけない要素も目白押しです。 【WordPress】プラグイン無しでカスタムフィールドを利用してmeta keywordsとmeta descriptionを実装する HTML5における属性の指定方法は別ページにて解説していますので、そちらもご参考にしていただければと思います。 htmlタグに属性を付与して要素の補足情報を記述するHTML5の書き方について metaタグの使い方と主な属性について 必ず<head>タグ内で<meta>タグを使う <head> <meta name="description" content="検索エンジンでの説明文"> </head> 上記はname属性、content属性の指定(descriptionにより、検索エンジンに説
HTML5におけるhtmlタグの開始・終了タグの基本的な書き方と閉じタグのいらない要素とは | レビューログ
HTML5の勉強をしていると、真っ先に覚える必要があるのがhtmlタグの開始タグと終了タグの書き方です。 htmlの文法というか構文は、基本的にこの開始タグと終了タグを適切な順序で配置することで完了します。 セマンティックWebに準拠したHTML5の基本構造と間違いやすいポイント 例えばタイトルタグ(<title>)を例に出してみると、以下のようになります。 <title>ここにタイトルを記述する</title> 開始タグはそのまま、終了タグは開始タグの前に「/(スラッシュ)」を書くだけです。 htmlタグには終了タグ(閉じタグ)を省略できるものも存在する そもそも終了タグ(閉じタグ)が存在しない ≒ 付けるとエラーになる <br> <hr> <img> <input> <meta> <area> <base> <col> <embed> <keygen> <link> <param> <
HTML5になって追加された「header要素」はheadタグと何が違うの？ | レビューログ
HTML5になって追加された「header」要素ですが、これまでのXHTMLやHTML4.01には無かった要素になります。 タイトルに記載しているheader要素とheadタグは全く別物となっています。 html要素として必要不可欠なheadタグとbodyタグの違いとは 以前は<div id=”header”>とマークアップしていたのを、<header>タグで記述すれば良くなったというのが(ほぼ)正しいところになっています。 header要素はHTML5で何のために必要なのか。仕様や注意点まとめ header要素はページのヘッダー部に使用する(ただし、各セクションで使用することも可能＝複数使用もOK) 基本的に、これまでの<div id=”header”>のような記述を全て<header>で書き換えてOKです。 また各セクションにおいても使用可能であり、ページ内で複数使用することも可能です
html要素として必要不可欠なheadタグとbodyタグの違いとは | レビューログ
HTMLの勉強をしていると最初に戸惑うのが、headタグとbodyタグの使い方だと思います。 HTML5にて色々な記述の仕方がこれまでのHTML4.01までとはガラリと変わったのですが、HTMLの基本を表すheadタグとbodyタグについては変更がありませんでした。 HTML5のDOCTYPE宣言とXHTMLやHTML4.01の過去バージョンのDTDとは HTML5のルート要素であるhtmlタグ使用時の注意事項とlang=”ja”の設定方法とは 今回は、html要素として非常に重要な<head>と<body>の違いをまとめます。 headタグとbodyタグに書ける、html要素は全く別である 以下にheadタグとbodyタグを利用したhtmlの構文の例を示します。 <!DOCTYPE html> <html> <head> <meta description="検索で表示される説明文を記載
HTML5でfigure,figcaption要素を使って図表のタイトルやキャプションを設定する | レビューログ
HTML5において追加された、figure要素とfigcaption要素というものがあります。 当サイトでも使っている機会は殆ど無いため、管理人も全く知識がありませんでした。 しかし、htmlの正しいマークアップを心掛けることはSEO的にも良いことは確かなため、今一度まとめ直してみます。 HTML5で廃止されたブロックレベル要素とインライン要素の違いとCSSのdisplayプロパティーについて figureタグは図表や画像であることを示し、figcaptionタグは図表の注釈やキャプションを示す <figure> <img src="camera.png" alt="Canonの一眼レフカメラの画像"> <figcaption>Canonの一眼レフ</figcaption> </figure> 上記のように、figure要素は画像を表示するimg要素を囲む使い方が出来ます。 また、figc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
htmlの強調タグ(bold,strong,em,i)の意味とSEO効果について、太字にするならどれが良いか考える | レビューログ
HTML5のルート要素であるhtmlタグ使用時の注意事項とlang=”ja”の設定方法とは | レビューログ
HTML5のDOCTYPE宣言とXHTMLやHTML4.01の過去バージョンのDTDとは | レビューログ
セマンティックWebに準拠したHTML5の基本構造と間違いやすいポイント | レビューログ