Web広告の運用に欠かせない“コンバージョン計測”の計測方法｜LP ノウハウ
WordPressを使ったランディングページの作り方とは？テンプレートと制作のポイント
WordPressは世界でもっとも利用されるWebサイト構築のCMSツールで、ランディングページも簡単に制作可能です。 しかし、WordPressでランディングページを制作できると知らなかったため、制作費用をかけすぎてしまったというケースをよく耳にします。 そこで今回は、WordPressからランディングページを制作する方法について解説します。 ■合わせてよく読まれている資料：成果の出るLPの構成も →広告運用の重要なカギ！？ランディングページ改善ガイド WordPressの固定ページとランディングページの違い WordPressの固定ページを利用して、ランディングページが作成できます。 そもそもWordPressの固定ページとは、投稿機能と違い、カテゴリ分けされない独立したWebページ作成機能のことです。固定ページは、主に会社概要やお問い合わせページ作成などで利用されます。 一方でランデ
フレックスアイテムの折り返しをマスターする - 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 の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
CSSで文字詰めができる【font-feature-settings】を使用してサイトの見栄えを良くしよう！
font-feature-settingsプロパティとは font-feature-settingsプロパティの読み方 font-feature-settingsプロパティは「フォントフィーチャーセッティングス」と読みます。 font-feature-settingsプロパティの説明 font-feature-settingsプロパティは、OpenTypeフォントの文字詰めを行う機能です。OpenTypeフォントとは、現在アドビが提供しているフォントのこと。異なるプラットフォーム（WindowsやmacOSなど）仕様が異なるシステム上で稼働するフォントとなっています。 OpenType形式の主なメリットとしては、クロスプラットフォームで活用できること（同じフォントファイルをMacintoshとWindowsの両方で利用できます）、そして豊かな言語サポートと高度なタイポグラフィを可能にする広
【頻出デザイン】テキストと写真を交互にレイアウトするには『flex-direction: row-reverse;』
LPなどでテキストと写真が交互にレイアウトされているデザインを見たことはありませんか。今回はそのままコピペするだけで、テキストと写真を交互にレイアウトしたデザインを反映させることのできるコードを詳しく解説していきます。 結論：テキストと写真を交互にするためには『flex-direction: row-reverse;』と疑似クラス『nth-child(odd)』 テキストと写真を交互にするレイアウトを作るためには疑似クラス『nth-child(odd)』を使用したセレクタのプロパティ、値に『flex-direction: row-reverse;』を指定する必要があります。 それではここから、この『flex-direction: row-reverse;』と疑似クラス『nth-child(odd)』についての解説やそれ以外のコードについても順序立てて解説していきます。 <main> <se
Flexboxで均等幅(同じサイズ)で横並び配置する方法！ | 模写修行メディア
図のようにflexアイテムを均等に配置する方法となぜ均等になるのかを解説します。 <div class ="flex-container"> <div class ="flex-item">1</div> <div class ="flex-item">2</div> <div class ="flex-item">3</div> </div> .flex-container { display: flex; ... } .flex-item { flex: 1; /* これが重要！ */ ... } このようにflexアイテムに対して、flex: 1;を指定するだけで、flexアイテムの個数に限らず均等幅(同じサイズ)になります。 たったこれだけなのでコピペして使えますが、なぜこうなるかも理解してみてください。次のセクションでなぜ均等幅になるか解説します。 【駆け出しの方へ】独学に限界を
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
【CSS】画像のサイズ・縦横比・トリミング指定方法（初心者向け）
「画像のサイズ変更」「画像の縦横比を維持したままの指定方法」「画像のトリミング」の3点を中心に初心者のかた向けに解説。 3点の基礎知識に加えて、理解しやすく、すぐ実践的に使用できるようになる為、各方法をサンプルコード付きで解説。 実際に手を動かして学ぶことができますので、初心者の方も安心して読み進める事ができます。
CSSで何番目や何個分を前から、後ろから自由自在に指定するための疑似要素まとめ - YCOMのホームページの制作・運営に役立つブログ
わかりやすくまとめたつもりなので、ある程度わかってる人はこの表があれば備忘用には充分だと思います。 ここから下は、初心者のために補足的に説明入れておきます。 -child と -of-typeの違いの話 この特定の要素に対する指定の方法は大きく2つの指定方法があって、要素名つまりはタグの種類にかかわらず対象とする方法と、特定の要素に対してだけ（<P>だけとか）対象とする方法があります。 -childは要素の種類にかかわらず全てを対象として、-of-typeは特定の要素に対してだけ対象になります。 こんな感じですね。 図を見てもらったらわかるように、黄色いのが対象になる要素です。 複数の要素が混在しても、-childではすべての要素が対象になります。 -of-typeでは、その中の特定の要素（タグ）が対象です。 説明だけではわかりにくいので、以下の説明でのコードの例を簡単に見てみます。 最初
CSSでborderの上に見出しを重ねたボックスを作る - Qiita
.caption_box{ position: relative; margin-top: 1em; padding: 1em 2em; border: 1px solid black; } .caption_box .caption{ position: absolute; top: 0; left: 0; font-size: 1em; padding: 0 1em; margin: 0; background-color: white; transform: translateY(-50%) translateX(1em); } 解説 親要素にborderとposition: relativeを指定します。 子要素にposition: absoluteを指定、配置したい位置に動かします。 左上に配置する場合: top: 0; left: 0; 右上に配置する場合: top: 0; r
CSSのcalcで片側だけグリッドガイドライン外へ飛び出したカラム ｜ Tips Note by TAM
中央揃えになっている固定グリッド（Fixed grids）から片側だけ外へ飛び出させた装飾のカラムを リキッドレイアウトのレスポンシブデザインでスタイリングする方法です。 IE11も対応している CSSの calc() で相対値と絶対値をかけあわせたサイズを設定するので 画面幅がかわっても、片側は中央揃えのカラムとツラをあわせたまま（端をそろえたまま） もう片側は画面端までのびたサイズをキープできます。 ※IEはpaddingの仕様に落とし穴があったので、最終的にはIEバグ対策のJavaScriptも併用しています。 INDEX よくある中央揃えのレスポンシブなカラム アシンメトリーなカラム まとめ サンプルソース とりあえず実物から見てみたい方は、CodePenのサンプルソースからどうぞ！ See the Pen Asymmetry Column by webdev (@webdev-j
flexboxで要素の順番を入れ替える。 - Qiita
flexboxでbox内の順番を入れ替える、cssを紹介します。レスポンシブなサイトを使う時に結構使ったりするので覚えておくと便利です。 flexboxの入れ替え、orderプロパティ 以下を使います。
CSS | display:flexで横並びの個数を固定して折り返す方法 | 1 NOTES
CSSのflexbox（display:flex）で横並びで個数を固定して折り返す方法を紹介しています。 See the Pen CSS flexbox Fix the number by yochans (@yochans) on CodePen. display:flexで横並びの個数を固定して折り返すflexbox（display:flex）で横並びの個数を固定して折り返すサンプルコードです。 上記サンプルのHTMLコードです。 こちらを利用して実装方法を紹介しています。 <div id="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div>flexboxは個数を折返しまでの直接指定する事はでき
【検証】スマートフォンで読み易いfont-sizeとは？ | SEO対策なら株式会社ペコプラ
フォントサイズと行間は、ユーザーにコンテンツをストレスなく読んでもらう為の重要な要素のひとつです。 PCサイトでは、読みやすさはもとより、デザインも考慮した文字の使い方が多いと感じる一方、スマホ化されているサイトでは比較的どれも同じぐらいのフォントサイズが使われている為、ここは改めてどれぐらいのフォントサイズが読みやすく、よく使われているのかを検証しました。 読みやすいフォントサイズとは？読み物系30サイトを検証 検証するにあたり、まず「読みやすい」とは？ 読みやすい=多くの人が読んでいる=有名・人気サイト！ と言うことで、今回は記事を読ませる事を目的とした、ポータルサイト、バイラルメディア、キュレーションサイト、WEB系のブログなどから30サイトをピックアップしました。 検証方法は、本文と見出しのフォントサイズと行間をWhatFontというgoogleの拡張機能を使い調べます。 1番多か
現場で使えるFlexboxレイアウト12選 | BUILD Journal
現場で使えるFlexboxレイアウト12選Update2023.05.12Release2021.06.24Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する 現場で使えるFlexboxレイアウトを12パターン紹介します。flexboxを紹介する記事はたくさんありますが、知識のみで実例付きで紹介されているページはあまり見かけなかったので、本記事にて詳しく紹介していきます。 flexboxに慣れていない方だけではなくコードを短縮化させたい方も対象の内容となっております。ぜひご一読ください。 flexboxを使った横並び1行レイアウトflexboxを使った横並び1行レイアウトカードUIでよくある横並び1行レイアウトのFlexbox実装。同じ横幅のカードを等間隔で配置するもので、間の余白ももちろん等間隔。これを使う機会は多いので確実
HTMLとCSSのコピペでできるボタンデザイン50選
CSS /* 001 */ .button001 a { background: #eee; border-radius: 3px; position: relative; display: flex; justify-content: space-around; align-items: center; margin: 0 auto; max-width: 280px; padding: 10px 25px; color: #313131; transition: 0.3s ease-in-out; font-weight: 500; } .button001 a:hover { background: #313131; color: #FFF; } .button001 a:after { content: ''; width: 5px; height: 5px; border-top
スクロールすると上から降りてくる
HTML <body>直下 <div class="gmenu"> コンテンツ </div> css .gmenu { position: fixed; width: 100%; z-index: 100; top: -100px; //gmenuの高さ height: 100px; } .gmenu.fixed { position: fixed; top: 0; left: 0; } js $(function () { var headNav = $('.gmenu'); $(window).on('load scroll', function () { if ($(this).scrollTop() > 500 && headNav.hasClass('fixed') == false) { headNav.css({ "top": '-100px' }); headNav.add
【jQuery】ページ内リンクでスムーズスクロール（固定ヘッダーがあったら） | 125naroom / デザインするところ（会社）です。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> $(function(){ var headerHeight = $('header').outerHeight(); // ヘッダーについているID、クラス名など、余白を開けたい場合は + 10を追記する。 var urlHash = location.hash; // ハッシュ値があればページ内スクロール if(urlHash) { // 外部リンクからのクリック時 $('body,html').stop().scrollTop(0); // スクロールを0に戻す setTimeout(function(){ // ロード時の処理を待ち、時間差でスクロール実行 var target = $(urlHash);
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
grid不要！PCとスマホで要素の順番が全然違うときのcss小技
【CSS】縦・横・斜めに背景色(background)を2色で分ける方法 | Webエンジニア Wiki
