「SEOに強いHTMLの書き方」についての個人的な見解
「SEO に強い HTML の書き方」というツイートがそこそこバズっていて、その内容に対して駆け出しエンジニアの方たちが「参考になった」などと称賛の声を挙げていたのを見かけて思うところがあったのでこの記事を書きました。 元ツイの概要は次の通り。 body > main > article > sectionに h1は 1 ページに 1 つ（要キーワード） 見出しタグは毎度 section で囲む ヘッダーメニューは nav で囲む 画像に適切な alt を設定する title / description を書く 階層を意識して書く div はあまり使わない 画像は p で囲む この記事は元ツイおよび元ツイの投稿者を批判する意図で書いたものではなく、あくまで挙げられている内容に対する個人的見解をまとめたものです。 正しいか正しくないかをそれぞれの項目のはじめに書いていますが、あくまで僕個人の
無料のおすすめ最新HTML5テンプレート厳選45個まとめ【2020年版】
スマートフォンからウェブサイトを閲覧するひとが増えたことで、あらゆる端末に対応するレスポンシブなWebサイトが主流となっています。 しかし、「HTML5でWebサイトをゼロから作成するのはちょっと、。」というときは、HTML5でできたテンプレートを活用してみましょう。 この記事では、無料ダウンロードできるオススメのHTML5テンプレートをまとめてご紹介します。 2020年に公開されたものを中心に最新テンプレートを揃えています。Bootstrapフレームワークを利用しているものも多く、手軽にカスタマイズできる点もポイント。あらゆる業種にマッチする、お好みの無料HTMLテンプレートを探してみましょう。 商用利用もできる無料HTMLテンプレートまとめ Switch あらゆるデバイスでの表示に対応するランディングページ向けテンプレート。ダークモード切り替えも可能で、イラストを背景として効果的に活用
HTMLとCSSも進化している！JavaScriptを使用せずに、HTMLとCSSだけで実装できるUI要素のまとめ
以前まではJavaScriptでないと実装できないと思われていたものも、最近ではHTMLとCSSのみで実装できるものが増えてきました。HTMLとCSSには新しい機能が追加され、そして古いブラウザのサポートも必要なくなり、より簡単に実装できます。 実はJavaScriptを使用せずに、HTMLとCSSで実装できるUI要素を紹介します。 You can create these elements without JavaScript by Adrian Bece (@AdrianBDesigns) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに レスポンシブ対応のテキスト省略 スター レイティング ツールチップ・ドロップダウンメニュー モーダル フロートするラベル アコーディオン・トグル 終わりに はじめに スマホやWeb
便利すぎる！さまざまなデバイスのサイズを同時に確認しながら作業できる、Web制作の連携支援ツール -Solis
最近のWeb制作では、異なるスクリーンサイズでの確認が欠かせません。 スマホ、タブレット、デスクトップ、それぞれに異なるスクリーンサイズが多数あり、これらを一つ一つ確認するのはなかなか大変です。 そこで作業しながら、同時に確認できるツールの登場です。 HTML, CSS, JavaScriptで使用しているエディタ、Photoshop, Illustratorなどの画像編集ソフトで作業しながら、異なるスクリーンサイズでシームレスに確認できるWeb制作の連携支援ツールを紹介します。 私もさっそく使用してみましたが、Web制作のワークフローが劇的に便利になります！ Solis -A Live Design Output Solisの大きな特徴は、さまざまなスクリーンサイズに対応したマルチビューポートのプレビューを備えていることです。デフォルトで主要デバイスのビューポートが用意されており、コード
初心者でも使いやすい！おすすめのHTMLテンプレート25選！ - 屍Hacks
HTMLテンプレートは、あらかじめさまざまな場面を想定して容易されたテンプレート、つまり「ひな形」 を使用してWEBページを作成します。 学習のために自分で一から作るということも大事ですが、ある程度慣れてきたら、テンプレートを使用して 効率よく作るのも重要です。 今回は、そんな時に役立つ無料のHTMLテンプレートを集めてみました。 海外サイトのものもありますが、日本語表示は問題ありません。 レスポンシブWEB対応のテンプレがおすすめ 現在では、スマートフォンやタブレットの普及に伴って、Webサイトを作成する際、単純にPCだけという ことはなく、多くのデバイスに対応することが必要になってきました。 その1つの解決策として、「レスポンシブWebデザイン」が多く使われています。 レスポンシブWebデザインとは、あらゆるデバイスに最適化したWebサイトを、1つのHTMLで実現できる手法です。 スマ
商用利用無料で、サイトの主要ページがまるごと揃ってる新しいHTMLのテンプレート素材 -Mashup Template
HTMLの無料テンプレートのほとんどは単一ページのみですが、今回紹介するのはなんと、サイトの主要ページまるごと無料テンプレートとして、しかもデザインファイルやフォントファイルまでもまとめてダウンロードできるMashup Templateを紹介します。 時間がないときに、予算がないときに、さくっと作成できるテンプレートです。 また、最近のトレンドを採用したさまざまなコンポーネントが用意されているので、デザインやコードの引き出しとして、勉強にもいいですね。 Mashup Template Mashup Templateの特徴 複数ページとコンポーネントが含まれたテンプレート 単一ページのテンプレート素材が多いですが、Mashup Templateはサイトやブログで使われる複数のページとコンポーネントが用意されています。 カスタマイズが簡単 そのまま使ってもよいですが、コンポーネントが用意されて
Webサイトのヘッダー/フッター用アイデア満載！コピペできるHTML/CSSスニペット48個まとめ
ウェブサイトを訪れたとき、まずユーザーが目にする「ヘッダー」部分は、魅力的なデザインコンセプトを取り入れることで、オリジナル性の高い表現が可能になります。 今回は、魅力的なヘッダー/フッターデザインを実装できる、コピペ可能なHTML/CSSスニペット48個をまとめてご紹介します。ブログ記事向けレイアウトやランディングページ向けなど、5つのカテゴリに分けています。用途に応じて最先端のWebデザインテクニックを活用し、デザインの参考にしてみてはいかがでしょう。 2017年大本命！HTML/CSSで表現できる、参考にしたいカード型レイアウト60個まとめ コピペで利用可！思わず押したくなるボタンエフェクト用HTMLスニペット40個まとめ 【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選 コンテンツ目次 1. 記事向けヘッダーデザイン 2. 記事向けフルスクリーン・ヘッダ
改行<br>を複数連続しない方がいい理由【そんなHTMLで大丈夫か？#1】 - Pepabo Tech Portal
はじめまして。技術部 シニアデザイナーの @sizucca です。 HTML のマークアップを担当する職種は会社によって異なると思いますが、ペパボでは主にデザイナーが担当しています。 HTML は、プログラミング言語などに比べるとコードを書くこと自体はそれほど難しくありません。しかし、「正しい HTML」を書こうとすると一気にその難易度は高くなります。HTML のマークアップには、「間違い」はあっても「唯一の正解」が無いからです。 何を表現するのか、何を優先するのか（意味付けの適切さ、制作コスト、メンテナンス性、etc … ）によって、適切と思われるマークアップは変わってきます。そのため、10 人いれば 10 通りのマークアップがあっても不思議ではありません。例えるならば、法律はあれど判決は裁判官次第、だからです。 そんな、悩ましさとの格闘は避けられないマークアップですが、押さえておくとコ
サイト設計の手間を大幅に削減する、実用HTMLテンプレート素材30個まとめ 2016年10月度
Bootstrapなどのフレームワークの登場によって、ウェブサイト制作は以前よりも手軽に、そして身近になってきています。特にデザイントレンドをうまく採用したHTMLテンプレートを利用することで、モバイル端末へのレスポンシブ対応はもちろん、簡単にサイトデザインを作成できるようになっています。 今回は、無料ダウンロードできる新作HTML5/CSS3テンプレート素材をまとめてご紹介します。どの素材も高品質なだけでなく、テキストエディタで編集しやすい仕様となっており、サイト制作が捗るアイテムが揃っています。今後のデザイン制作に活用してみてはいかがでしょう。 詳細は以下から。 サイト設計の手間を大幅に削減する、実用HTMLテンプレート素材まとめ Material Design for Bootstrap Google 公式のデザインガイド「マテリアル・デザイン」をコンセプトに、人気フレームワーク B
【HTML/CSS/JavaScript】ウェブサイトの背景画像を全画面表示する方法まとめ +α | デザイン事務所 たろうハウス
ウェブ標準の変化に伴い、960pxの固定幅で中央寄せするコンテンツレイアウトは少なくなってきました。かわりに、背景画像に高画質の写真素材やイメージ画像を用意し、ブラウザ幅いっぱいに拡大して魅せる、というのがオシャレな最新デザインとして定着しつつあります。 これは考えてみれば自然なことで、基本的にウェブサイトの閲覧はユーザーの任意のサイズ（ブラウザ幅、ウィンドウ幅）で見ることができるのが当然であり、制作側の意図で強制的に任意の幅までしか表示しないというのは、おかしなことです。 いまだに地方自治体や行政のウェブサイトでは、左寄せで固定幅のデザインレイアウトとなっており、ブラウザをPCの幅いっぱいに表示しても、右側には無意味な余白が表示される、なんてことはよくありますが、この記事ではウェブサイトの背景画像を全画面表示する方法について解説したいと思います。 一番単純な方法―background-s
検索じゃ学べない！ HTML/CSS/JavaScriptの気づきTipsまとめ31こ | _level0 - KAYAC Front Engineer Blog
HTMLファイ部のほんだです。 気づきTips！ Σ(・ロ・) カヤックの中でもHTML5のWebフロントエンド実装を担当する エンジニアを集めた部署「HTMLファイ部」では、 制作にあたってはまったことや、気づいたことをメモ的に蓄積・共有しています。 通常は、 1. 制作で何かわからないことがでた ▼ 2. Google等で検索して解決の糸口をさがす ▼ 3. こんな方法があったのか〜 と気づきを得る というフローでスキルアップしていくことがもっぱらだと思うのですが、 学びを増やしていくためには違うアプローチも必要なんじゃないかと思います。 カヤックHTMLファイ部では、 1. みんなで蓄積したTipsをざぁっと読む ▼ 2. こんな方法があったのか〜 と気づきを得る ▼ 3. 制作の際に導入していく というフローを繰り返し実践していくことで、 検索では気づけないことを学び、実装力アップ
コレは使ってみたいな！CSSで作成されたアイコンをモーフィングで変形させるスクリプト -Marka
画像やSVGは使用せず、CSSで作成されたサークル・アロー・チェック・リストなど、Webページで使うさまざまなアイコンをJavaScriptで変形させるMarkaを紹介します。 変形は下記のように異なる形状へ変えたり、サイズやカラーだけを変更することもできます。もちろん、CSSで実装されたアイコンをそのまま利用するだけでもOKです。 Marka Marka -GitHub Markaのデモ Markaの使い方 Markaのデモ 上記gifアニメーションの実際の動きは、下記ページで楽しめます。 Chrome, Safari, Firefox, Opera, IEは10+でご覧ください。 各アイコンのスタイルシートファイル では、Markaの使い方を。 Step 1: 外部ファイル 当スタイルシートとスクリプトを外部ファイルとして記述します。 <head> ... <link rel="sty
私がよく使っているウェブサイト作成に役立つサイトやツールのまとめ【2014年8月】
こういの記事を定期的に書いていますが、以前のものは古くなっているので書いてみます。ウェブサイト、ブックマークレット、拡張機能（Chrome）から本当によく使っているものを無理やり数を増やすことなく厳選して紹介します。 実際にウェブサイトを作成する時にお世話になるであろう順番で紹介します。ウェブサイト、ブックマークレット、拡張機能（Chrome）ごとで分けていませんのでご注意ください。 I/O 3000 | Webデザインギャラリー 【ウェブサイト】 ギャラリーサイトって同じサイトが紹介されていることも多いので、あまり色々を見ません。最近はこちらをよく見ます。更新頻度も高く、カテゴリやタグ分けも使いやすくなっています。 とはいうものの、もっと色々見たいというときもあるので、そんなときは以下のサイトもよくみます。どれもきれいで見やすいサイトです。やっぱり無限スクロールがいいですね。 【S5-S
［ウェブサービスレビュー］ワンクリックでExcelをHTMLのテーブルに変換「TABLEIZER!」
内容：「TABLEIZER!」は、Excelの表を貼り付けるだけで、ワンクリックでHTMLのテーブルに変換してくれるツールだ。ホームページやブログに表を貼り付けたい場合、Excelでいったん表を作成し、本サービスを経由してHTMLに変換すれば、ウェブページに貼り付けるテーブルのソースコードをすばやく作成できる。 「TABLEIZER!」は、Excelの表を貼り付けるだけで、ワンクリックでHTMLのテーブルに変換してくれるツールだ。ホームページやブログに表を貼り付けたい場合、Excelでいったん表を作成し、本サービスを経由してHTMLに変換すれば、ウェブページに貼り付けるテーブルのソースコードをすばやく作成できる。 使い方は簡単で、Excelで作成した表を範囲選択してコピーし、本サービストップページにあるフォームにペースト。「Tableize It!」と書かれたボタンをクリックすれば、次のペ
スマホ対応の告知サイトをサクッと作れるHTMLテンプレート「OSHIRASE」
アンソロジーや合同誌やイベントなどの告知サイトを、スマートフォンページやTwitter・Facebook・LINEなどのソーシャルメディアにも完全対応で、サクッと簡単に作ることができるHTMLテンプレートが「OSHIRASE」です。 OSHIRASE http://monsier-oui.github.io/OSHIRASE/ ◆テンプレートについて OSHIRASEテンプレートでは、このデモページのような体裁でサイトを簡単に作ることが可能です。 テンプレートにはTwitterやFacebookのボタンも完備。 なお、スマートフォンページにも完全対応しているので、画面サイズを小さくしていくとこんな感じでLINEのアイコンが現れ、スマートフォンのサイトページイメージを確認できます。 OSHIRASEはアンソロジーや合同誌の告知サイトを作ることを想定しているため、Sampleページや…… Co
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
新着記事
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
