box-sizing－CSS3リファレンス
box-sizingプロパティは、ボックスサイズの算出方法を指定する際に使用します。 値にcontent-boxを指定すると、 widthとheightで指定する幅と高さが内容領域に対して適用されます。 幅と高さにはパディングとボーダーは含まれません。 これはCSS2.1の仕様通りの解釈で、DOCTYPEスイッチの標準モードのような表示になります。 値にborder-boxを指定すると、widthとheightで指定する幅と高さがボーダーボックスに対して適用されます。 内容領域にパディングとボーダーを含んだ範囲に対して幅と高さが適用されるため、 パディングとボーダーの分だけボックスサイズが小さくなります。 DOCTYPEスイッチの互換モードのような表示になります。 ■値 content-box パディングとボーダーを幅と高さに含めない（初期値） border-box パディングとボーダーを
【実例あり】position:「absolute」「relative」でレスポンシブECサイトのレイアウトを！ - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
実際の上下左右の距離は「top」「bottom」「left」「right」プロパティを併用します。これらはpositionプロパティの値がstatic以外の時に有効となります。 またこの4つ全てを使う必要はなく、「top」だけ、「top」と「right」だけと必要なもののみ使い、配置された位置からの距離を指定します。 言葉だけではイメージがつきにくいと思いますので、以下より実際配置した時の画像と併せてご説明します。 ２．“relative”と“absolute”の動きの違い ｉ）relative 【その１】 100px × 100pxの灰色のボックスの下に、relative指定した を配置しました。 今回は上から0pxの距離を指定しています。 <div class="box">box</div> <div class="relative">relative</div> .box { wid
opacity－CSS3リファレンス
CSSソースは外部ファイル（sample.css）に記述 p.sample1 {background-color:blue;} p.sample2 {opacity:0.7; background-color:blue;} p.sample3 {opacity:0.5; background-color:blue;} p.sample4 {opacity:0.3; background-color:blue;} HTMLソース <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <p class="sample1"> opacityプロパティを適用していません。<br> <img src="../images/kaeru.gif"> </p> <p class="sam
box-shadow－CSS3リファレンス
box-shadowプロパティは、ボックスに1つまたは複数の影をつける際に使用します。 box-shadowプロパティでは、例えば以下のように影を指定します。 box-shadow: 10px 10px; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4); box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset; 影は２～４つの長さの値で定義されますが、任意で色、insetキーワードを指定することもできます。 insetキーワードを付けると、影がボックスの外側ではなく内側につくようになります。 長さの指定を省略すると0となり、色の指定を省略するとユーザーエージェントが選んだ色になります。 複数の影を指定する
:nth-child() - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
【簡単】Webフォントの使い方！Google web fontsを使ってみよう
こんにちは、ディレクターのせりなです。 Webフォントって聞いたことありますか？ 最近はそれなりに普及してきたんじゃないかなと思うのですが まだまだ知らない人の為に、今日はとっても簡単で便利なWebフォントの 使い方とメリット・デメリットをご紹介します。 目次 1. Webフォントとは 2. Webフォントのメリット・デメリット 3. Webフォントの設置方法は2パターン 4. Google web fontsを使ってみよう！ 5. 関連サイト 6. さいごに 1. Webフォントとは みなさんが普段見ているWebページに使われている”文字” この文字の種類について考えたことはありますか？ 実は、使っているパソコンのOSやスマートフォンの端末によって 見えている文字の書体(フォント)って違うんです。 Webサイトを構築するときに特に何も設定していないと、 パソコンはそれぞれ自分が最初から持
機械がHTML文章の中のメタデータをより認識しやすくする「Microdata」 | DevelopersIO
機械がHTML文章の中のメタデータをより認識しやすくするための仕様です。 具体的には「itemscope」や「itemprop」などの特殊な属性を利用します。この属性を利用して、HTML文章内の情報を意味づけすることができます。 Microdataのサンプル <section itemscope> <p itemprop="name">Ryuichi Nonaka</p> <p itemprop="age">24</p> <p itemprop="desc">都内で働く気ままなWeb制作者です。</p> <p itemprop="image"><img src="profile.png" alt="プロフィール画像" /></p> </section> Microdata専用の属性 以下を見てもらえればわかるように、Microdataはアイテム（item）という単位を重要視します。 ite
今さら聞けない！読みづらいCSSプロパティの正しい読み方
creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 新人時代、CSSプロパティの書き方は分かっても、「…これなんて読むんだろ…?」と思うものが数多くありました。自分だけが知らないのかも…と思ってごまかしているうちにはや数年…こんな思いをしているのは自分だけじゃないはず！ ということで、今回は読みづらいCSSプロパティ(というか以前僕が間違えて読んでいたCSSプロパティ…orz)についてまとめてみました。発音見本のリンクをつけましたので不安な方は聞いてみてください！ 読みづらいCSSプロパティ目次 alt a href img src width height text-align vertical-align opacity visibility hidden border-collapse backg
linear-gradient() - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
overflow - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
3/3 idとclassの違いと使い分け！スタイルシート(CSS)適用法 [ホームページ作成] All About
idとclassの違いと使い分け！スタイルシート(CSS)適用法(3ページ目)idとclassの違いと、使い分け方法をご紹介いたします。HTMLにスタイルシート(CSS)を適用する方法には、class属性を使う方法と、id属性を使う方法があります。この「class」と「id」は明確に役割が異なります。全部にclass属性を使っている場合は問題ありませんが、全部にid属性を使っている場合は問題がある可能性があります。 id属性を使うと「ページ内リンク」も作れる ある要素にid名が割り振られていれば、対象を一意に特定できます。そのため、id名は「ページ内リンク」のリンク先を指し示す用途としても使えます。 たとえば次のようにリンク(a要素)を記述した場合を考えます。 <a href="#footer">ページ末尾へ</a> 上記は「ページ内リンク」を作るHTMLソースです。このように記述した場合
![3/3 idとclassの違いと使い分け！スタイルシート(CSS)適用法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
メタキーワード（meta name=”keywords”）はSEOに重要なのか？ | 株式会社WEB企画
過去にはSEOにおいて、メタキーワードをいくつも詰め込むような設定が有効といわれてきました。ですが果たして現在でもメタキーワードの設定が重要なのかどうか、気になる方も多いのではないでしょうか。そこで今回は、各検索エンジンの見解を元にメタキーワードがSEOにおいて重要なのかどうか調べてみました。 ちなみに結論から申し上げますと、メタキーワードの設定は必要性は薄いでしょう。ただ、あくまでも現在SEOのために設定する必要性が薄いという意味ですので誤解のないようにお願いいたします。 メタキーワードとは メタキーワードとは、<head>内に設定するタグで、 <meta name=”keywords” content=”キーワードA,キーワードB,キーワードC”> 上記のようなタグです。キーワードとキーワードはコンマで区切るルールです。個数は３〜５個くらいが適切といわれることが多いのではないでしょうか
WordPressのSEO効果を劇的に高める５つの基本項目の設定方法
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. WordPressのSEOは、Googleの開発責任者Matt Cutssも認めているぐらいに優れている。 なぜなら、WordPressは構造的に、検索エンジンのメカニズムの大半をカバーできるように作られているからだ。 従って、私は、誰に対してもWordPressを使ったブログやサイト構築をオススメしている。 さて、本日は、そんなWordPressのSEO効果を更に高めるための設定方法に関してご紹介する。 もちろん、バズ部でも行っているものでもあるので、あなたがWordPressを導入したら、まず最初にこれらの設定を行うようにしよう。 また、私たちバズ部は12年で400社以上のメディア支援を行い、 立ち上げから10ヶ月で14.6億円の売上
Jetpack – WP セキュリティ、バックアップ、高速化、成長
説明 Jetpack – 最適な WordPress プラグイン Jetpack は、より優れたコンテンツを作成し、購読者を増やし、サイトから収益を上げ、サイトの安全性、高速性、セキュリティを保つのに役立つ WordPress プラグインです。 Jetpack 統計を使用してサイトのトラフィックを増やして追跡し、Jetpack AI を使用してより優れたコンテンツを作成できます。 メールマガジンを始めて読者を増やし、ファンを有料購読者にすることができます。 Jetpack Creator では美しいコンテンツを作成でき、Jetpack ブーストではサイトの高速性を維持できます。 Jetpack を始める方法 無料で素早く簡単にインストールできます。 すぐに Jetpack を設定できます。 有料プランにアップグレードして、WordPress サイトセキュリティ、デザイン、成長ツールなどのさ
初めてでもSEO対策ができる！WordPressプラグイン「All in One SEO Pack」の設定方法 | mariweb
All in One SEO PackはWordPressで作成したサイトのSEOの設定を簡単に行ってくれるプラグインです。プラグインを有効化するだけでも効果はありますが、きちんと設定すればさらなる効果を得ることができます。今回は、設定画面を見てもよく分からん！という初心者の方にも分かりやすいように、細かい設定方法を解説します。 All in One SEO Packのインストール方法 まずはAll in One SEO Packをインストール、有効化する手順です。 管理画面の左にある「プラグイン」の中の「新規追加」」をクリックしてください。 右上の検索窓に「All in One SEO Pack」と入力すると、検索結果に「All in One SEO Pack」が出てくるので、「今すぐインストール」をクリックし、「有効化」します。 この手順だけでも基本的なSEO対策は有効になりますが、こ
マイクロデータ - HTML: ハイパーテキストマークアップ言語 | MDN
マイクロデータは WHATWG HTML 標準の一部であり、ウェブページ上の既存のコンテンツ内でメタデータをネストするために使用されます。検索エンジンやウェブクローラーは、ウェブページからマイクロデータを抽出して処理し、ユーザーへ高度な閲覧操作を提供するために使用することができます。検索エンジンは、ウェブページ上の情報を理解し、ユーザーにより関連性の高い結果を提供することを可能にするため、この構造化されたデータを直接利用できることから大きな利益を得ます。マイクロデータは、値をプロパティに割り当てるためにアイテムと名前と値の組み合わせを記述するためのサポート語彙を使用します。マイクロデータは、機械可読なタグとともに HTML 要素に注釈する試みで、古い RDFa やマイクロフォーマットの同様のアプローチよりも簡単な方法を提供します。 高い水準では、マイクロデータは名前と値の組み合わせのグルー
ブログのHTMLをmicrodata（schema.org）を使って構造化する | HALAWATA.NET
今回はブログの記事部分のHTMLをschema.orgのスキーマ（語彙）を使って構造化する方法を紹介します。 schema.orgとはGoogle、Microsoft、Yahoo!の3社が共同で開発している構造化データマークアップのためのスキーマのことで、セマンティックウェブを実現するためのものです。（schema.org以外にも様々なスキーマがあります）セマンティックウェブを実現することによって、検索エンジンなどのコンピュータがHTMLの構造を正しく理解することができるようになり、効率よく情報を収集し、ユーザーに提供できるようになります。 例えばパンくずリストを構造化のスキーマを使ってマークアップすることで、検索結果にパンくずリストを表示させることができるようになります。このブログでもHTML5 microdataを使ってWordPressでパンくずリストをGoogleに表示する方法を書
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Blocked
CSSで背景画像を右から（下から）指定する方法 | キタックCGソリューションセンター｜Webマーケティング
The W3C Markup Validation Service
CSSを使ってIEを含めた各ブラウザで角丸を表現する方法｜ヨシキミナトヤ.COM
【2018最新版】WordPressプラグイン『Jetpack by WordPress.com』の設定方法と使い方｜孤高blog