リストを左揃え中央寄せにするcss３選 | 五平餅くんの部屋
こんにちは。五平餅くんです。 テキストを左揃え中央寄せにしたい場面って実務では結構あると思います。 例えばこんな感じです。 しかし、text-align: leftにすると左よせになってしまいますし、そこにmargin: autoを指定してもうまくいきません。 ↑text-align: leftとmargin: autoしてもうまくいかない例 今回はテキストは左揃えだけど、中央に寄せたい時のcssを3パターンご紹介指定と思います！ 一番一般的な方法：親要素にtext-align: center まずは一番一般的な方法です。 親要素にtext-align: centerを指定し、子要素にtext-align: leftとdisplay: inline-blockを指定します。 <div id="content"> <div class="inner"> <div class="text-ce
スパイラル株式会社
夜市始まる！下北沢へ古着を探しに出かけよう「下北沢古着マーケット+（プラス）古着夜市」を9月14日（土）、15日（日）、16日（月・祝）、21日（土）、22日（日）、23日（月・休）の6日間開催！
フローティングバナーをスクロール中に非表示にする
はじめに サイトに固定ヘッダーやフッター、フローティングバナー等を設置していると、 メインコンテンツの見える範囲が狭まってしまいます（ノートPCやスマホは特に）。 その対策として、 固定要素をスクロール中は非表示に、止まったら表示されるようにします。 記述例 まずjQueryを読み込みます。
フォームからの迷惑な営業メールを減らそう！5つの対策と実施結果
皆様こんにちは。株式会社火燵です。 今回は弊社で実際に行った、お問い合わせフォームからの営業メールを減らす施策と、その結果をご報告いたします。 お問い合わせフォームから届く営業メールに困っていませんか？サイトやブログなどがある方の多くは、お問い合わせフォームを設置していると思います。フォームへの送信があると、通知が届くように設定している方もいるでしょう。 弊社でもフォームを設置しており、送信の通知が来ると喜ばしい気持ちになります。お仕事をいただけるきっかけになりますし、成果の証といえますからね。 ただしそれは、お問い合わせやご相談などの内容に限ります。 頂いたお問い合わせメールの冒頭で、以下のような文が目に入り、がっかりしたことはございませんか？ 「是非、御社と契約を結ばせていただきたく・・・」 「○○のお仕事に興味は・・・」 「○○キャンペーン実施中！」 こういった文言で始まる場合、ほぼ
問い合わせフォームを悪用した迷惑な売り込みへの対処法 | ウェブマネジメント・アカデミー | ウェブ担当者スキルアップと悩み解決メディア
#プロジェクト管理#コンテンツ制作#顧客サポート#手法・技術#成功事例・失敗事例コロナ禍になり、訪問営業や電話営業がしづらくなるなかで、Webサイトのフォームを利用した営業活動が増えました。こういった売り込みは迷惑なだけでなく、Webサイト運営業務にも支障をきたします。 ここでは、問い合わせフォームを利用した売り込みへの対処法をご紹介します。 インサイドセールスでお困りではありませんか？御社の営業代行を支援します・・・ 貴社HPの制作を格安でお手伝いします・・・ 当社は営業や販促活動にてお力になれるリストを作成する会社です。この度、●●の会社リストが、お役に立てると思い、ご連絡致しました・・・ 管理部門に特化した人材紹介・派遣を行っております。貴社で人材採用をお考えでいらっしゃいましたら、オンラインお打ち合わせのお時間をいただけないでしょうか？日時は●日●時と●日●時と●日●時のなかからお
【基本】.htaccessとは SEOにおける活用方法やディレクトリへの有効範囲について
.htaccess とは .htaccessとは、ウェブサーバーをディレクトリ単位で制御するファイルのことです。 Apache（アパッチ）というウェブサーバーソフトウェアが使用されている環境の中で利用できます。 .htaccessを利用すれば、特定のウェブページに対してリダイレクトやアクセス制限、カスタム404ページを表示するように指示を出すことが可能です。 .htaccessを設置したディレクトリでは、サブディレクトリを含むすべてのファイルに効果があります。例えば下図のように、「/sample/」に.htaccessを設置した場合、下層の「/sample/1/」「/sample/2/」「/sample/2.1/」にも制限が適用されるイメージです。 .htaccessは、サブディレクトリにも設置が可能です。上層のディレクトリ（/sample/）と下層のディレクトリ（「/sample/2/」
【基本】.htaccessとは SEOにおける活用方法やディレクトリへの有効範囲について
.htaccess とは .htaccessとは、ウェブサーバーをディレクトリ単位で制御するファイルのことです。 Apache（アパッチ）というウェブサーバーソフトウェアが使用されている環境の中で利用できます。 .htaccessを利用すれば、特定のウェブページに対してリダイレクトやアクセス制限、カスタム404ページを表示するように指示を出すことが可能です。 .htaccessを設置したディレクトリでは、サブディレクトリを含むすべてのファイルに効果があります。例えば下図のように、「/sample/」に.htaccessを設置した場合、下層の「/sample/1/」「/sample/2/」「/sample/2.1/」にも制限が適用されるイメージです。 .htaccessは、サブディレクトリにも設置が可能です。上層のディレクトリ（/sample/）と下層のディレクトリ（「/sample/2/」
【CSS】画像の縦横比を固定したトリミング方法（レスポンシブにも対応） | ウェブスペ
画像の縦横比（アスペクト比）を維持したまま、レスポンシブにサイズを変えたい サイズの異なる画像を並べて表示する際に、同じサイズで綺麗に表示したい WordPress化（CMS化）後に、どんなサイズの画像に変更されても同じ比率で表示したい 特にWordPressの記事サムネイル画像など、どんなサイズの画像が挿入されるかわからない箇所の場合、表示崩れを起こさないために画像の縦横比を固定し、その領域をはみ出す部分をトリミングする実装が必要になります。 そのようなケースを想定したコーディング方法を、 aspect-ratioを使用する方法 padding-topを使用する方法 の２つに分けて詳しく解説します。 aspect-ratioを使用する方法（最新版） CSSの「aspect-ratio」は、アスペクト比（縦横比）を指定することができるプロパティです。 2021年頃にリリースされた比較的新し
コピペでOK！ワードプレスにスプラッシュスクリーンを追加する方法 - 勝てるホームページ作成会社ぞろ屋
スプラッシュスクリーン、あるいはスプラッシュページは、ホームページのファーストインパクトを印象付けるのに効果的な手法です。たとえば、こんな感じ。 ブランディング的な価値の向上も期待できますし、強いメッセージがあれば「見ない壁」を一瞬で突破してしまうかもしれません。また、トップページのコンテンツが多すぎて、読み込む際の待ち時間が2秒以上かかるときは検討する価値があります。実装する際には、よくよく検討しないといけないこともありますが、訪問ユーザーに強烈な第一印象を与える方法の一つであることは確かです。 この記事では、コピー＆ペーストするだけで、簡単にワードプレスサイトにスプラッシュスクリーンを実装する方法と、スプラッシュスクリーンを実装する際の注意点や戦略的価値についても当社の考えをお伝えします。 スプラッシュスクリーン（スプラッシュページ）とは？スプラッシュスクリーン、またはスプラッシュペー
【2022年最新】WebPよりも軽いAVIFとは？最強の次世代画像フォーマットの解説と作り方 | 株式会社ココログラフ
コアウェブバイタルズの影響も受けて、表示速度に関する知識や、画像の圧縮に関してなどの情報集めに奔走している運営者様は多いでのはないでしょうか？ 現在では『WebP』がブラウザの対応もだいぶ浸透し、使いやすく圧縮率の高い画像フォーマットとな理ましたが、今回はなんとそのwebpをも超える軽量化を可能にした画像フォーマットである『AVIF』というものについて解説します。 AVIFとは？ AVIFとは、AV1 Image File Formatの略称で、画像や画像シーケンスをAV1で圧縮してHEIFファイル形式で保存するための画像ファイルフォーマットの仕様です。 HDR（ハイダイナミックレンジ）カラーをサポートしているので、アルファチャンネルやアニメーションにも対応可能。 jpgと比較すると約95％以上、WebPと比較しても30％近くのサイズ削減が可能なフォーマットとなっています。 元々は、有料ラ
コード整形で困った改行位置 PrettierからBeautifyに変更したお話【VS Code】
※2021.5.23 settings.jsonに設定を追加したため加筆・修正しました。内容はhtmlのフォーマットで行の文字数制限を無くす記述を追記したことです。 コーディングのエディターにVS Codeを使っている方は多いですね。私も元々Atomだったところから乗り換えました。コードの自動整形は効率化に必須で定番のPrettierを追加してラクラク〜！っとなっていたのですが、1つだけ…！ 「そんな所で改行する！？」っていう困った状況が多々ありませんか？ 結論として私はコードの自動整形をPrettierからBeautifyに変更することにしました。 同じように困っている方の参考のひとつになればと思い、コードの自動整形をPrettierからBeautifyに変更した流れを紹介します。 Prettierの難点 Prettierを有効にしてHTMLにコードを書いて保存すると、下記のように整形さ
CSSボタンデザイン120個以上！どこよりも詳しく作り方を解説！
なぜCSSでボタンを作るのか？その前に、なぜCSSでボタンを作るのか？について少しだけ考えたいと思います。 簡単に言ってしまえば、 軽い！拡張性がある！解像度の心配がない！簡単！と言った理由ではないでしょうか？ 画像でボタンを作ることも多いと思いますが、「画像じゃないほうがいいなあ」と思うことも多いと思います。 もちろん、デザイナーから上がってきたデザインデータからボタンを切り取って、HTMLに設置して、CSSでホバーはopacity:0.8、とかやれば簡単ではありますが、デザインツールの進化やレスポンシブの一般化に伴い、そういったイケてなくて古臭いやり方はあまり望ましくないです。 特にWebの場合、テストの繰り返しが必要ですが、画像でボタンを作るとなるとテスト用にいくつもの画像を作らなくてはいけません。色やテキストを変えるとなると画像すべてを修正する必要があります。しかし、CSSボタンで
background-imageの表示ラグ問題を（ほぼ）CSSのみで実装するCSS遅延読み込みで解決
ベストプラクティスとも限らないですが、プレーンなHTML・CSSサイトでも手軽に実装できる方法を紹介します。 background-imageの一瞬表示されない問題 CSSのbackground-imageはその画像が表示されるまで読み込まれません。例えばユーザーのアクションに応じてbackground-imageを変える場合、変更後の画像はユーザーアクションが行われてから初めて読み込まれます。（この読み込みは初回のみ行われるので、2回目以降は発生しません） 遅延表示のサンプル より具体的な現象としては、独自デザインのラジオボタンやチェックボックスをクリックした時、初回のみ一瞬遅れて表示される、というのがあります。他にもdisplay: noneで非表示にしている要素を表示させた場合でも同様の表示ラグが発生します。 ▼初回のみ表示が遅くなっている様子（分かりやすくするためにネットワーク速度
Notionを使ったWeb制作会社の社内ナレッジブログ作成手順 〜記事のカテゴライズ、実装、デザインまで〜｜Blog｜株式会社デパート
Blog 2023.5.31 Notionを使ったWeb制作会社の社内ナレッジブログ作成手順 〜記事のカテゴライズ、実装、デザインまで〜 Notionは、個人のタスク管理や企業の情報発信など、さまざまな目的に使える多機能なツールです。また、見た目もシンプルで使いやすく多様なアレンジが可能です。ですが、多機能すぎて逆にどうやって使ったらいいか困ることもあると思います。 株式会社デパートでは昨年、全社内の仕組み化やナレッジ・情報の蓄積を行うとしてNotionを導入しました。その上で、クリエイティブ部門で蓄積していた社内のナレッジ共有データを、他のツールからNotionに移行いたしました。この記事では、この事例をもとに、”社内ナレッジ共有のためのNotion”の実装方法や使いやすくするデザイン方法についてご紹介いたします。自社のナレッジシェアをNotionでやってみようか考えているという方の参考
今更聞けない特色入稿データの作り方 | 株式会社フィールド
こんにちは。最近は京都の銭湯サウナめぐりを楽しんでいる、デザイナーのyoshidaです。 水風呂後の外気浴が気持ち良い季節になってきましたね。 さて、今回も意外と知られていない（？）特色入稿データの作り方をアドバイスさせていただこうと思います。 今更聞くのが恥ずかしい…。そんな中堅デザイナーさん、ディレクターさん、こっそりとご覧ください！ 特色とは？ 印刷においてプロセスカラーでは再現できない色を表現するために、あらかじめ調合（調色）されたインクのこと。（フリー百科事典『ウィキペディア（Wikipedia）』より）金や銀、蛍光色がその代表です。 特色を使う場面 □企業のコーポレートカラーが指定されている □CMYKで再現できない色を使うとき □色数が少ないとき □カラーで印刷するより安く抑えたいとき etc. 主なカラーチップ 紙を選ぶように、カラーチップで色を探す時が好きです。ちなみにカ
新画像形式(WebP/AVIF)を使ったサイト軽量化・SEOの基礎知識と注意点
大きな画像を派手に使いたい、でもコンバージョン率やSEOを考えると軽量化も実現したい……そんなサイトにおすすめのサイト改善策として、WebPやAVIFといった新世代画像形式への移行について解説します。 要点 コンバージョン増加やSEOのためには画像軽量化・表示高速化が必要 WebPやAVIFといった軽量な新画像形式が主要ブラウザで一通り対応しており、Photoshop・GIMPやコマンドラインツール等で変換できる 画像の種類によって最適な形式・設定は異なるが、うまく使えば半分～1/10等劇的な圧縮も可能。とりあえずはWebP(可逆or品質値70～80)あたりからが無難 画像の高速化・軽量化が必要な背景 離脱率の低減 サイト表示や読み込みの軽量化は、離脱率低減・コンバージョン増加を狙う上で必要不可欠です。ブランドサイト・ECサイト・広告ランディングページ等大きな画像を派手に使いがちなサイトで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フローティングバナーとは？初心者でも簡単設置！効果的な活用方法とポイントも解説
WordPressのユーザー権限の種類と設定方法
ウマい人事｜人材業界（HR業界）専門メディア
AVIFとは？ファイルの開き方や変換方法をわかりやすく解説！
