便利なWordPressの条件分岐16パターン：カスタマイズで活躍するものを厳選！
CSSでbr要素みたいに改行する方法
サンプルコード.br::before { content: "\A" ; white-space: pre ; }デモbrというclassを作成しました。下記は対象要素の直前に改行を挿入する例です。直後に挿入するには、::beforeではなく、::afterに指定します。 <!-- このコードは編集できます。 --> <!DOCTYPE html> <html> <head> <style> .br::before { content: "\A" ; white-space: pre ; } </style> </head> <body> <p>われわれは<span class="br">宇宙人</span>だ</p> </body> </html> 備考\Aとは？"\A"は、改行を示すコードです。スタイルシートのcontentプロパティにこの値を加えると、その場所に改行が挿入されます。ち
HTML の 〜 内に書くタグの順番にも気を遣ってみた。
今アナタがご覧になっている、このオンズのウェブサイトでは読み込み速度のスピードアップや各種マークアップのクオリティ維持のために随時徹底した改善作業を行っています。 これまでも本ブログにて様々なテクニックを紹介してきましたが、今日は<head>〜</head>タグ内のコードにフォーカスして、弊社が実際に行っているHTMLマークアップの考え方を紹介していきます。 ブラウザで「要素を検証」して実際にコードを見てもらうのが手っ取り早いのですが、参考までに以下にコードをコピーして記載します。 今日（2016年1月20日）現在のオンズのウェブサイトの<head>〜</head>タグは次のように記載されています。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="author" content="//on
今どきの見出しとしてのhタグの正しい使い方
[レベル: 初級] hタグに対するGoogleの扱いについて、GoogleのJohn Mueller（ジョン・ミューラー）氏が英語版のウェブマスターオフィスアワーで参加者からの質問に回答しました。 コンテンツを内容を正確に反映したhタグを使うべきなのでしょうか？ 複数のh1タグは検索エンジンの評価に影響を与えるのでしょうか？ 見出しには、階層をきちんと反映したhタグを使うべきか 次のような質問が出ます。 h2タグの見出しの下にコンテンツを書いています。 そのなかには小見出しもあります。 小見出しにはh3タグを使うべきでしょうか？ それともh2タグのなかにすべて置いたままにしておいたほうがいいでしょうか？ ミューラー氏は次のように答えます。 見出しタグはコンテンツの文脈を理解するのに少しだけ手助けになる。 だが特効薬となるようなものではない。 なので、見出しを正しく使っていないからといって、
フロントエンドで知っておきたい要素指定の考え方 - pixiv inside [archive]
みなさんはじめまして、ピクシブのフロントエンドエンジニア id:koharusugiura です。 JavaScript を用いた開発を行う際に jQuery や React、vue.js といったライブラリーを使う方は多いでしょう。これらのライブラリーは共通して DOM を扱うライブラリーとなります。 DOM についての説明は長くなるのでここでは省きますが、簡単に説明すると HTML や XML の構造を表現するための仕様です。DOM は JavaScript のためだけにある仕様ではなく、 Java や Python など、多くの言語に対応する仕様です。 前述した各ライブラリーは多くのウェブブラウザー間の差異を吸収してくれるため、非常に便利なものです。しかし、その機能の豊富さからライブラリー自体のサイズは大きく、ウェブブラウザーで読み込むファイルの数や合計の容量が増えてしまいます。状況
![フロントエンドで知っておきたい要素指定の考え方 - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/06141560504fa4e927919dd41de3eab52a11d032/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fk%2Fkoharusugiura%2F20151222%2F20151222103513.png)
SEO対策にh1～6見出しタグを正しく設置！検索に好まれるページ作りとは？ | SEO Packブログ by ディーボ
ページを構成する際、見出しタグをなんとなくで設定していませんか？ 見出しタグは、SEO目的に設定する訳ではありませんが、目次のように見出しタグを使い、ユーザーにもGoogleにもわかりやすくコンテンツを作ります。 中でも、h1タグは重要とされています。 見出しタグの使い方は、h1～h6まですべて使う必要もなく、h2の下にh1があったとしても評価されないわけではありませんが、正しい構造をGoogleに伝えることにより、重要とされるh1タグに入っているテキストがそのページのキーワードと認識されることから、必ずh1タグは設定しましょう。 見出しタグの基本的な使い方 見出しタグは、理想的なサイト構造にも似た使い方で、コンテンツ内容を構成していきます。 そして、h1タグは1ページに1つ、html5で記述する場合は、1つのsectionにつきhタグをそれぞれネスト階層に合わせたhタグを入れること
そのHTML5のタグは合ってますか？間違えやすいタグ15選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先日、HTML5カルタ大会という大会で優勝させていただきました。 いやあ、実に光栄です。 そこで今回は、HTML5ネタ繋がりで、“間違えて使ってしまいがちなんじゃないかと思うややこしいHTML5タグ”をまとめてみました。 あ、でも皆さん誤解しないでくださいね。 この記事は大会前にカルタの準備がてら執筆したものなので、決して「このキング・オブ・HTML5こと俺様がレクチャーしてやんよ！」なんてことは1mmも考えておりません。 どうか、一Web制作会社の端くれエンジニアが戯言ほざいてやがるな、まあ暇だし読んでやるかくらいのノリでお付き合いくだされば幸いです。ありがとうございます。 【こちらもおすすめ】 その使い方合っていますか？間違えやすいタグ15選（HTML5対応） “定義”に関わるタグ <dt>,<df
[WordPress]初心者でもカテゴリー、タグリンクを1から作れるようになるための説明いろいろ
This domain may be for sale!
![[WordPress]初心者でもカテゴリー、タグリンクを1から作れるようになるための説明いろいろ](https://cdn-ak-scissors.b.st-hatena.com/image/square/d9ff0db2081d629ce3b53b6db7153e4026473555/height=288;version=1;width=512/http%3A%2F%2Fomotan.com%2Fwp-content%2Fuploads%2F2014%2F01%2Fwordpress-standard-140x105.png)
セマンティックSEOを考慮したhタグとliタグの上手な使い方
[対象: 中級] この記事では、意味的な繋がりをGoogleに確実に伝える（ことに役立つかもしれない）「hタグ」と「liタグ」の上手な使い方を解説します。 見出しを意味するhタグと項目を列挙するためのliタグに関する特許をGoogleは2010年5月に取得しています。 その継続出願となる特許が先日承認されました。 この件に関して、Googleの特許研究の第一人者であるBill Slawski（ビル・スロースキ）がGoogle+で共有した投稿が情報元になります。 hタグの下に出てくるliタグは意味的に等しく近い 見出しとしての「hタグ」の下に、リスト形式で列挙する項目に「liタグ」が設定されている場合、あとに出てくる項目ほど見た目の距離が見出しから遠くなります。 しかし、見た目の距離が離れていたとしても見出しとの意味的な関係は先頭に出てきた項目と等しい扱いになります。 言葉だけだとわかりづら
【悲報】HTML5のタグが109個になってる…(またはdialog要素について)【今更】
こんにちは、webcre8です。今日は最近気付いた、個人的に非常に残念なことを書かなければいけません。 HTML5のタグは百八つまであるぞ…？ 私はかねてよりHTML5の仕様に正式に採用されているタグは108個である、という事を記事等で報告していて、ハッシュタグを使って色々ツイートもしていたんですが…。 HTML5のタグって現時点(2012年8月)でいくつあるの？ ― #HTML5のタグは百八つまであるぞ …？ ― – WEBCRE8.jp ちょっとこの辺でHTML5のタグを全部確認してみようぜ！！ – WEBCRE8.jp しれっとdialogが追加されてる 最近何気なくHTML5.jpを覗いてみてみたところ2012年12月17日のCandidate Recommendation(勧告候補)に対応していて、おおーと思いながら眺めていると…。 そこにはdialog要素の項目が。 http:
Markdown記法
HTMLは、手軽なマークアップ言語ですが、開始タグや終了タグなどあり、文章作成やちょっとしたメモ書きには不向きです。 今回紹介するのは、Markdownという軽量なマークアップ言語です。 GitHubのREADMEや、Tumblrなどでも採用されており、様々なCMSのプラグインも存在しています。 汎用性が高く便利な記法なので紹介します。 Markdownとは Markdown は、文書を記述するための軽量マークアップ言語のひとつである。 「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML(もしくはHTML)文書へと変換できるフォーマット」として、ジョン・グル―バー(John Gruber)とアーロン・スワーツ(Aaron Swartz)によって考案された。 Markdownの記法の多くは、電子メールにおいてプレーンテキストを装飾する際の慣習から着想を得ている。
[HTML5]遊びながらタグを覚える「HTML5KARUTA」を作りました
本日HTML5の各タグを遊びながら覚えられる「HTML5KARUTA」を公開しました。これがどういうモノかを紹介します！ 9月くらいから構想していた、ゲームを通してHTML5を覚えるというコンセプトから作られたHTML5KARUTAを作成、公開しました。まだイメージしていたものの80％程度の出来ですが、どうぞご覧ください★ http://roadstohtml5.com/html5karuta/ HTML5KARUTAは、日本の遊びカルタというゲームを通してHTML5のタグを覚えようという主旨のゲームです。 読み札にはHTML5の各タグの説明が書いてあります。絵札にはタグの名前自体があるだけです。タグの説明を聞いて、それが何のことかわかったら札を取る。日本人にはおなじみのルールですね！最近の若い人が知っているのかは知りませんけど…ｗ HTML5KARUTAを作った動機 まずなぜこれを作った
![[HTML5]遊びながらタグを覚える「HTML5KARUTA」を作りました](https://cdn-ak-scissors.b.st-hatena.com/image/square/ed4b0ae9d3cd3869de4fb9a3f429e329064fe56b/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2012%2F12%2Flaunch-html5-karuta-04-150x150.png)
HugeDomains.com
Captcha security check actyway.com is for sale Please prove you're not a robot View Price Processing
SEOを考慮したタグページの取り扱いベストプラクティス
[対象: 初級] あなたは“タグページ”を利用していますか？ “タグ”は使い方によっては便利ですが、ついうっかりすると数を増やしすぎてしまうという難点があります。 結果として起こりがちなのが無節操に作られた大量のタグページです。 とにかくページ数が多いほうが評価が高くなる傾向にあった数年前と比べてパンダアップデートが導入された今は単にページ数が多いことはプラスになるどころかマイナスになることすらあります。 タグページはどのように扱うのがベストなのかをこの記事では考えてみます。 タグページで起こる問題 タグページそのものは悪いものでもなんでもありません。 ユーザーがコンテンツを探しやすく整理しやすくすることに役だっているなら価値のある仕組みと言えます。 タグページが問題になってくるのは大きく分けて次の2つのパターンです。 同じようなコンテンツが含まれるタグがたくさん作られ重複コンテンツに近い
ちょっとこの辺でHTML5のタグを全部確認してみようぜ！！
HTML5のタグは108つある って話は以前このブログでしましたねー。なんの偶然か、108っていう数字には厨二心をくすぐられますｗ 何か意味があるような気がしてなりませんね★ HTML5のタグって現時点(2012年8月)でいくつあるの？ ― #HTML5のタグは百八つまであるぞ …？ ― 現在HTML5は最終草案の状態です。この108と言う美しい数字を崩す可能性のある要素として、以前から仕様から外れるかもしれないという話のあったhgroup、Editor’s Draftから追加される可能性のあったdialogやdata、そして新しく追加しようという話の持ち上がったpictureやmainなどがあります。 ただとりあえずHTML5.0のうちは変化することは多分無さそうです。この辺のことはこのAdvent Calendarの初日の記事、覚え書き＠kazuhi.to: 巷（何処）で話題のmain
HTML5のスマホ対応の基礎知識とハマリどころ3選
HTML5のスマホ対応の基礎知識とハマリどころ3選：スマホ向けサイト制作で泣かないための秘伝ノウハウ（2）（1/3 ページ） スマートフォン向けWebサイト構築支援ツールを開発・販売するため、国内すべてのケータイ・スマートフォン・タブレットを所有している企業に勤める筆者が、サイト構築のハマリどころとも言えるノウハウを紹介する連載。今回は、HTML5についておさらいし、OSごとの対応状況や、iPhone／Androidなどで表示する際のハマリどころを紹介 こんにちは。KSK「フレックスファームビジネスユニット」の渡辺です。前回の「スマホ向けサイト制作3手法の基礎知識と課題、OS／機種依存のハマリどころ3選」では、スマートフォン向けサイト制作についての注意点や、代表的なOS／機種依存を紹介しました。 今回は、KSKの製品「x-fit（クロスフィット）の開発・販売や、実機での検証サービス事業で蓄
レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
『スマホブラウザサービスのボタン』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。2011年入社の根岸と申します。 9月まで「あそんで♪HuggPet」というゲームのディベロッパーをしており、10月から新規ゲームのプロジェクト責任者（PS）をしております。 今回の記事では、「あそんで♪HuggPet」で使用している「ボタン」の実装方法について、少しだけお話させていただきたいと思います。 ボタンは押したらハイライトしてほしい先日、居酒屋で「すみませ～ん！」と大声で店員を呼んだのですが、反応がありませんでした。 その後、すぐに店員が来たので問題無いと言えば無いのですが、私は店員に声が届いているのか不安で、危うくもう一度大
ブックマーク・検索・それの活用に便利なサービス5つ
昨日の記事、あなたのブックマークをwebの肥やしにしない為の実用タグ付け規則考で説明したタグは、読んで為になった記事ほぼ全てにつけています。このような作業をスムーズに行うにあたってどのサービスを使えばいいのか。webcre8はFirefoxユーザですので、アドオンを中心に活用の仕方を紹介します。 Google ブックマーク 何はなくともこれです。昔はブラウザのお気に入りとDeliciousを使っていましたが現在はこれがメインです。 Google ブックマークは、パーソナルなブックマークサービスです。はてなブックマーク等のソーシャルブックマークが流行っていますが、これはあえて共有する必要もないものをブクマする事が出来ます。はてなブックマークにも非公開ブクマはありますけどね。 他には、タグに親子の概念がないことが挙げられます。タグをたくさんつけて絞るのが便利であろうという設計なのでしょう。例え
スニペット管理とかダルいって人にオススメ！超シンプルなスニペット管理ツールの『Snippi』！ | バンクーバーのうぇぶ屋
よく使うHTMLやCSS、PHP等のコードはスニペットとして保管しておいて、後からすぐに使えるようにしたい物ですよね？更には人と共有できればチーム全体の作業効率にも繋がるしで良い事尽くめかなと思います。これまではDreamweaverだと既存のスニペット機能、Codaだとクリップ機能とかを使っていたんですが共有するとなるとちょっと面倒くさい。Wikiなんかでもいいけど構築するのも時間かかるし、いつやろうか。って感じでした。 そんなこんなで、今日ご紹介させて頂くのは、個人的にスニペット管理の決定版になるかもしれないと思った「Snippi」というサービスです。 別にめちゃめちゃ珍しい機能とか無いんですが、とにかく超シンプルで使いやすい！FBやTwitterログインは当然可能で、スニペットに対するタグ付けや言語別ソート、各スニペットにはコメントが可能で簡単な説明なんかすぐ可能。 説明する必要が無
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
