target=”_blank”とは、リンク先を別タブで開くよう指定できるHTMLタグの1つです。 リンク先を別タブで開くよう指定できるメリットとしては、以下のような例があります。 ①現ページ内で音楽を再生している場合、通常リンクをクリックすると、音楽が中断してしまうためそれを防ぐ ②現ページ内でなんらかの編集作業をしている場合、通常リンクをクリック(例えば、画面内のプレビュー)すると、編集データが自動保存されていない場合は、編集データが消えてしまうため、それを防ぐ
従来では、Webサイトに訪れるユーザー向けサイトマップのみを実装することが主流でした。ユーザー向けサイトマップには「自分がWebサイト上のどこにいるのか」「どのようなページが用意されているのか」といった要素が含まれており、別名“HTMLサイトマップ”とも呼ばれています。 しかし、近年では検索エンジン向けの“XMLサイトマップ”もセットで導入しているWebサイトが大半です。XMLサイトマップを使うと、Googleなどの検索エンジンに各ページ構造を理解してもらえるため、クローラビリティが向上してSEO効果も高まるとされています。 この記事では、ユーザーや検索エンジンに好まれるサイトマップとはどのようなものか、サイトマップの効果や作り方をご紹介します。 最後まで読み終わる頃には、自社サイトの検索順位を上げる効果的なサイトマップを作成できるようになっているでしょう。 サイトマップを作成する重要性と
以下のHTMLの表は横幅を指定していますが、 すごく横長な表になってしまいます。セルの幅を指定してもセル内の文字を折り返す事は不可能なのでしょうか? <html> <head> <title>table</title> </head> <body> <table width="570" border="1"> <tr><td width="130"> test1</td> <td bgcolor="#CCCCCC" width="440"> ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
それに対し今も一般的に使っているGIF・JPG・PNGはいずれもビットマップ形式の画像と呼ばれ、画像を点の集合で表現しています。 ビットマップ形式とベクター形式 ビットマップ形式はその性質上、画像を構成しているピクセル数が作成時点で決まっています。 ですので想定サイズを超過(拡大)してしまうと画像が荒くなり、ぼやけた状態になってしまいます。 それに対してベクター形式フォーマットのSVG画像は拡大縮小に柔軟に対応します。 演算により効率良く形や色を表現するので、サイズ変更がされてもその都度鮮明な画像を維持できるのです。 ここが通常のGIF・JPG・PNGを使うよりもSVG画像を使う方が利点となる部分ですね。 SVGの2種類の書き方 SVG画像の具体的な記述の仕方については割愛しますが、大きく分けて2種類の記述方法があります。 インラインによるSVG画像の記述例 <svg role="img"
その当時、こういったレイアウトは、革新的で「なぜ、こんなことができるんだ」「やってみたい!」となりましたが、テキストがばらばらに表のセルに入っている状態では、検索エンジンも読み上げソフトも、まともに文章を読むことができませんでした。 そして、HTMLを書く人(コーダー)は、この文字の回り込みの表を組むことに大変な時間をかけていました。それを救うように出てきたのが「CSS(カスケーディング・スタイル・シート(Cascading Style Sheets))」です。 レイアウトは「CSS」に任せようHTMLの記述がどんどん複雑になり、レイアウトのために文章を表で細切れにしてしまうようになると、第3回で解説した「文書を世界で共有する」というハイパーテキストの理想がどこかに行ってしまいます。 そこで、W3C(HTMLなどについて決める国際組織)は1996年に「CSS」について勧告を行い、「あまり複
はじめに 本記事はブログでよく使うHTMLタグについて解説します。ブログの他に、企業のコーポレートサイトや情報サイトなどでも共通です。「HTMLは難しい」と思われている方でも今日から使える情報をご紹介します。一つのブログ記事を書く際に必要な「description」についてや、「無料でも使えるHTMLやCSSの編集ができるブログサービス」についてもご紹介します。 スポンサードサーチ ブログでHTMLタグを使う方法 ブログでHTMLタグを使うには入力形式を「HTML編集モード」を選択します。ブログサービスによって「HTML編集モード」の呼び方は異なりますので、詳しくはお使いのブログサービスにてご確認ください。一部のブログサービスでは、有料版でHTML編集が可能になるものや、編集制限があったり、編集自体できないものもあるのでご注意ください。 次項に各種ブログサービスのカスタマイズ性能(HTML
この記事では、Webサイトやモバイルアプリにあっと驚くエフェクトを、コピー&ペーストで実装できる最新 HTML/CSS スニペットをまとめてご紹介します。 スニペット(英: Snippet)とは、一般的に「切れ端、断片」といった意味で、ウェブサイトなどのプログラミングで簡単に切り貼り、再利用できる部品を指します。 これらのスニペットを利用すれば、他のサイトではあまり見かけない差のつくデザインエフェクトを実現できます。今後のウェブ制作に活用してみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. イメージスライダー系 2. テキストエフェクト系 3. テキストエフェクト系スニペット 4. ページレイアウト系 5. ナビゲーションメニュー系 6. ホバーエフェクト系 7. SVGアニメーション系 8. 便利、面白系スニペット 9.
みなさん、こんにちわ! ジャングルオーシャンのラファエロです! みなさんはユーザー登録やお問い合わせのページって作ったことありますか? See the Pen XGgMrB by JOラファエロ (@jo_raffaello) on CodePen. このようなフォームのページを作成するには、inputタグやtextareaタグなどといったフォーム部品タグと呼ばれる専用のHTMLタグを使います。 多分、Webデザイン初心者の方はほどんど触ったことなかったりするんじゃないでしょうか(^^;) 実はフォーム部品タグには、ユーザビリティを向上させるための専用の属性や便利なCSSの設定が色々あるんですよ! ということで、今回はフォームのHTML・CSS基本テクをご紹介します!
思わずクリックしてコンテンツを読み続けたくなるような、コピー&ペーストで利用できる最新 HTML/CSS スニペットをまとめてご紹介します。 新しいテクニックを利用した、ますます進化するWebの可能性を感じさせてくる作品ばかりで、今後のデザイン制作に活用してみてはいかがでしょう。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 2018年人気だったすごいHTMLスニペットベスト100選【Codepen編】 コピペで実装できる、最新WebテクHTML/CSSコードスニペットまとめ Turbulence font – SVG マウスの動きに合わせて、
今回は、無料ダウンロードできる高品質HTML5/CSS3テンプレート素材をまとめてご紹介します。どの素材も高品質なだけでなく、テキストエディタで編集しやすい仕様となっており、サイト制作が捗るアイテムが揃っています。 ここで紹介するHTMLテンプレートは、どれも無料で、Bootstrap 4フレームワークを中心にした、デザイントレンドもうまく取り込んだ、あらゆるウェブデザイン案件に対応してくれます。2018年のウェブデザイントレンドもうまく取り入れているので、サイト開発のデザインやレイアウトの参考にもいかがでしょう。 レイアウトで選ぶウェブデザイン・HTMLテンプレート厳選40個総まとめ 2018年版 Argon Design System Bootstrap 4フレームワークを利用し、100種類を超える独自コンポーネントを揃えたテンプレート。ウェブサイトに必要なパーツはもちろん、サンプルペ
ウェブ制作で差がつくテクニックをつかった、コピー&ペーストで利用できる HTML/CSS スニペットを、定期的にまとめてご紹介しています。SVGを使ったアッと驚くアニメーションから、普段使いがしやすくなる小技テクニック、現在利用するデザイナーが増えているCSS Gridの可能性を探る実践向けスニペットまで、今後のウェブサイト制作で参考にしたい作品を中心に揃えています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。これらのスニペットを利用することで、他とは一味違うユニークなウェブサイトを制作してみましょう。 ウェブサイトをもっと面白く!コピペ可能
[HTML] 今更だけど、ちゃんとレスポンシブな画像の設定方法を理解する。srcsetとsizesを使いこなそう。HTMLレスポンシブMediaQuery 世間のWebサイトをみてみると「横幅120pxのサムネイルに、1600pxの画像が使われている」ということがちょいちょいありまして、ソースコードを確認してみると ウインドウサイズが2000pxの場合の場合は800pxで表示して、スマホだと120pxで表示する。 またRetina対応をしているから、解像度の2倍が必要で、800px@2xだから、大きい方にあわせてる というパターンを結構みかけるので、あらためてimgの属性であるsrcsetとsizesについてまとめておきます。 大きい画像はファイルサイズが大きい おそらくこの記事をご覧いただく方には「何を当たり前な」と思われると思うのですが、もう少しお付き合いください。 猫のオリジナル画像
Webページに実装されているHTML要素の構造を可視化し、header, nav, main, articleなどセマンティック要素が正しく実装されているか検証できるスタイルシートを紹介します。 デバッグ機能も備えており、不正なマークアップや問題のあるマークアップを表示することもできます。 Construct.css Construct.css -GitHub Construct.cssはセマンティックHTMLの使い方をより身近にするために、スタイルをフックとしてクラス名を使用するのではなく、直接タグをスタイルするCSSのライブラリです。目に見えないセマンティックのタグであることを視覚的に確認することができます。 ブラウザで簡単に利用できるブックマークレットも用意されています。 ブックマークレット Construct.cssのブックマークレット ブックマークレットを使用すると、以下のCSS
HTMLとCSSで作るボタンの作り方 では、まず簡単なボタンを作ってみましょう。便利なボタンタグがありますが、ここでは一旦使わずに作ります。以下のようにコードを書いてみましょう。 ボタンを押すことでなんらかのアクションに繋がります。以下ではボタンを押すことで別のページ移動するように、「aタグ」の中に書きます。 [code lang=”html”] <a href="/contact.html" class="btn">これはボタンです。</a> [/code] CSSでは次のように設定しましょう。 [code lang=”css”] .btn{ border: 1px solid green; border-radius: 5px; background-color: green; padding: 20px; text-al
ウェブ制作で差がつくテクニックをつかった、コピー&ペーストで利用できる HTML/CSS スニペットをまとめてご紹介します。2018年を代表するグラフィックデザインのトレンドでもある、グラデーションやグリッチエフェクト、ちょっとした動きが魅力的なマイクロインタラクション、CSS Gridプロパティの実践的な使い方など、今後のウェブサイト制作で参考にしたい作品を中心に揃えています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。これらのスニペットを利用することで、他とは一味違うユニークなウェブサイトを制作してみましょう。 Webサイトを使いやすく!
GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau
ビジネスサイトの検索順位を上げるSEO対策に取り組む際、大きな役割を果たすのが、h1タグ(大見出しタグ)です。 h1タグは、あなたのサイトの内容(コンテンツ)を、検索エンジンに対しても、検索でやってきた訪問ユーザーに対しても、正しく適切に伝える役目を持っています。サイトの検索順位を効率よく上げたいとき、こうしたh1タグが持っている価値をうまく利用することができます。 Google公式ブログにあるように、h1タグは用途に応じて適切に使用する必要があります。本記事で、Googleガイドラインを考慮した、SEO対策に最も効果的なh1タグの活用方法を説明します。 hタグ(見出しタグ)とは h1タグ等のhタグ(見出しタグ)は、あなたのWebページを訪問ユーザーもしくは検索エンジンにとって理解しやすくなるよう、本文内(bodyタグ内)に設定する見出しタグです。 簡単に説明するなら、hタグの役目は次のよ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く