はてなブックマーク

font-sizeはCSSのcalcとvwを使った公式にあてはめて、画面枠に応じた最適なサイズを自動計算できます。 必要なのはフォントの最小値と最大値、画面枠の最大値と最小値の4つの数値です。 calcの公式自体を丸覚えしてfont-sizeやpaddingの算出に流用できるようにしておきましょう。 レスポンシブルデザインの見やすさを決める「フォント」 レスポンシブデザインは、WEBの世界において必須のレイアウトになっていますよね。 その中でユーザー目線の優れたサイト作りをするための要因の一つが、「文字の見やすさ」を保つ事でしょう。 常に見やすいページを作るためには、表示デバイスごとに最適な大きさの文字を表示する必要があります。 ユーザーのデバイスはコントロールできない ただ、ユーザーがどんなデバイスで閲覧するかを制限する事はできませんよね。 となれば理想とするのは臨機応変に対応できる仕組

テキストエディタに入れた改行タグや段落タグが、消える事がたまにあります。 もともとエディタ上の改行や段落位置は、brやpタグとしてHTMLソースに反映される様になっています。 Advanced Editor Toolsプラグイン等を使えば、設置したbrやpタグを維持でき、エディタ上の改行や段落をタグ表示してくれるようになります。 書いた改行タグや段落タグが消えてしまう テキストエディタへのhtmlソース掲載 Wordpressのクラシックエディタには、ビジュアルエディタとテキストエディタの2種類があります。 ビジュアルエディタはタグをあまり考えずWordの様に文章を掲載する時に使っていました。 それに対しテキストエディタには、htmlタグをそのまま入れる事ができます。 Wordpressでは、テキストエディタに直接htmlタグを入れて作るのが普通です。 brタグやpタグが消えている この時

Instagramの投稿をWordpressサイトで表示するなら「Smash Balloon Social Photo Feed」プラグインがお勧めです。 自分のアカウント認証を済ませれば、投稿・固定ページやウィジェットにショートコードで埋め込む事ができます。 インスタのアカウントは複数登録でき、アクセストークンを使ったマニュアル登録も可能です。 Wordpressにインスタグラムを埋め込む方法 本記事ではWordpressを使ってInstagramのフィードを表示させる方法についてご紹介します。 Instagramが更新されれば自動で連携されるので、Wordpressサイト上にも反映されます。 インスタの1つの投稿画像だけを貼るよりも、自動連携させる方が便利ですよね。 Instagramの投稿は、Wordpress以外のサイトでも埋め込む事ができます。 プラグインのインストール Inst

WEBページをA4サイズで印刷できるようにする場合、様々な設定が必要になります。 A4で連続して印刷される場合と、A4用紙1枚で収まるケースとでCSSが変わってきます。 印刷ボタンを非表示にしたり、ヘッダー・フッターを非表示にする設定も忘れずにおこないましょう。 任意に印刷向けWEBページを作る 本記事はA4印刷向けのWEBページを作る大まかな手順です。 印刷を前提としたページを前もって準備するタイプですね。 印刷を前提としていないWEBページをユーザーが印刷する場合、ある程度ユーザー任せで構わないと思います。 元々印刷向けに作っていない事を唄っておけば、多少レイアウトが変でも文句は言われないはずです。 あえて印刷ボタンを準備するケース しかしあえて印刷専用ページとして公開する場合は、きちんとした整備が必要になります。 まず内容はA4判サイズに収まるコンテンツを準備するようにしましょう。

DNSとは ここでDNSレコードについて説明する前にDNS（ネームサーバー）とは何か、おさらいをしておきましょう。 DNSとはネームサーバーとも呼ばれ、インターネット上でドメイン名を管理・運用するために開発されたシステムのことを指しています。 全世界共通の紐づけ情報を管理 例えば本サイトである「lpeg.info」を表示させる際に と全世界共通の紐づけ情報が登録されています。 これにより世界中のどこでいつ見ても同じWEBサイトが映る訳ですね。 ※DNSの正式名称は「Domain Name System」です。「Domain Name Server」ではありません。 1つのドメインに対し1つのIPアドレスが原則 この様にDNSサーバーには「一つのドメイン名に対して一つのIPアドレス」の原則が登録されています。 一つのドメイン名に対して基本２つ・３つのIPアドレスが登録されたりはしません。 こ

更新頻度が低く量量が大きいファイルは.htaccessにブラウザキャッシュを設定して高速化しましょう。 逆に更新頻度が高いファイルはユーザーのためにキャッシュをさせないでおくべき（無効化）ですね。 ブラウザキャッシュ以外にgzip圧縮やmod_paegspeedが併用できれば、より表示速度UPにつながります。 ブラウザキャッシュ制御で表示速度UP WEBサイトは表示速度が命 WEBサイトの表示速度を上げることはSEO対策にとって重要な項目であり、アクセス数アップにつながります。 実際に表示速度が遅いWEBサイトはユーザーの半数以上が離脱するというデータもあると言います。 人は瞬時に映るサイトに対して高評価を持つのですね。 そしてサイトの表示速度が速ければ速いほど、ユーザーの滞在時間が長くなる傾向にあると覚えておきましょう。 キャッシュ機能を利用する では少しでもWEBページの表示を早くする

スクロールすると、それぞれ色のついた見出し部分が順に固定されていきます。 列・行（横1列・縦1列）両方の固定化 このパターンでは縦をスクロールすると見出し列が固定され、横スクロールすると左の見出し行が固定されます。 わかりやすくするため、表示枠を固定（iframeで固定）し、縦横にスクロールバーを付けています。 htmlソース <table class="st-tbl1"> <thead> <tr> <th>見出し</th> <th>見出し</th> <th>見出し</th> <th>見出し</th> <th>見出し</th> <th>見出し</th> <th>見出し</th> <th>見出し</th> <th>見出し</th> <th>見出し</th> </tr> </thead> <tbody> <tr> <th>縦軸</th> <td>データ</td> <td>データ</td> <t

Google Fontsを利用する際も細かい工夫を重ねる事でWEBパフォーマンスをさらに向上させる事ができます。 Google Fontsは常にユーザー環境・ブラウザに応じた最適な形式を提供する機能・キャッシュ機能が搭載されています。 基本は全てのバリエーションではなく、部分的に限定して利用する事です。 Google Fontsとは Google Fontsは、現在WEB全体で29兆回以上も利用されているフォントです。 実に900種を超える美しいフォント群が用意されていて、それらが無料で利用できるのです。 逆にGoogle Fontsを使わないままだと、デバイスにインストールされている「システムフォント」に頼らざるを得なくなります。 Google Fontsを工夫してパフォーマンスを上げる ブラウザが各フォントをダウンロードするため多少の通信が必要ですが、所要時間は微々たるものです。 しか

ホームページは更新作業をしてもすぐには反映されない場合があります。これはブラウザのキャッシュが保存されているからです。 CSSや画像・JSファイル名の後ろにクエリ値を入れれば、新しく自動で読込してくれます。しかし全部の新規読込は避けましょう。 F5を押す・スーパーリロードをする・キャッシュをクリアするなどすれば、新しい情報に更新されますが任意作業になります。

無料で使えるオンラインストレージサービスであるGoogle DriveをWEBサーバーとして利用する事ができます。 公開できるのはHTML・CSS・JSなどの静的ページのWEBサイトだけです。 独自ドメインのDNSレコードを追加して紐づけが必要です。 Google Driveとは Google Driveはご存じの通り、Googleが提供しているクラウドストレージサービスですね。 このストレージ上にデータをアップしておけば、Googleアカウントでログインする事で、場所やパソコンを問わずどこからでもファイルアクセスができます。 ファイル送信ツールやデータのバックアップとしても使える大変便利なサービスです。 皆さんも既に利用されているのではないでしょうか。 本記事ではこのGoogle Driveの中にWEBサイトデータを入れ、WEBサーバーとして機能させる方法をご紹介します。 Google

Instagramアカウントをプロアカウントに変更する Instagramアカウントはそのままでは「Instagram Graph API」を利用する事ができません。 「プロアカウント」という上位権限のものに変更する必要があります（無料です）。 Facebookページと連動できるようになる Instagramのプロアカウントに変更すれば、Facebookページと紐づけできるようになります。 この紐づけにより「Instagram Graph API」のサポート機能を利用できるようになるのです。 プロアカウント変更時の注意 プロアカウントはいつでも通常アカウントに戻す事ができます。 ただ通常アカウントに戻すと、今回のInstagram埋め込みに関する紐づけやビジネスアカウントIDなどが無効になる場合があります。 一度APIを使って埋め込みをしたら、通常アカウントには戻さないようにしましょう。

.htaccessのリダイレクトはmod_rewrite構文による正規表現を使った非常に便利な機能です。特定ページやディレクトリ階層へと転送できます。 301リダイレクトで転送元の価値をそのまま転送先へ継承する事ができますのでSEO・url正規化によく利用されます。 mod_rewrite構文でよく見かける正規表現記号や後方参照については、コピペで済まさずにきちんと理解しておきましょう。 mod_rewriteによるリダイレクト構文 .htaccessでリダイレクトを掛ける場合、.htaccessではmod_rewrite機能を実行しています。 mod_rewriteとは mod_rewriteとはWEBサーバーApacheのモジュールの一つで、さまざまな条件を指定してURL書き換えができる機能です。 命令数に制限はないですし、正規表現を使ってURLの書き換えができるため多彩な処理が行えま

AVIF画像は様々な可能性を秘めた高い圧縮率を誇る画像フォーマットです。 もともとはロイヤリティフリーの映像コーデックの静止画版として開発されています。 AVIFはHDRカラーをサポートしており、アルファチャンネルやアニメーションにも対応します。 より最適な画像フォーマット形式「AVIF」 現在画像フォーマットの中で一番注目されているの技術の1つが、「.avif」画像ファイル形式です。 .avif形式は無料で利用でき、超圧縮が可能な画像フォーマットです。 JPEGやPNG、そして新しい画像フォーマット「WebP」よりも優れているとされています。 AVIFは映像コーデックの無料版・静止画版 AVIF形式が生まれる背景には、動画・映像コーデックの存在がありました。 もともとH.264と呼ばれるAVC（Advanced Video Coding）の後継として開発された映像コーデックが、H.265

Javascriptは万能で高速なWEB開発に必須の言語ですが、どうしてもセキュリティ面の脆弱性があります。 Javascriptおよびライブラリに脆弱性がないかはセキュリティ診断ツールを利用しましょう。 コードの書き方次第で攻撃者の侵入をある程度防ぐ事ができます。そしてプロジェクトニーズに応じたAPIのセキュリティ対策を取る事です。 JavaScriptはWEB開発の基盤言語 ブラウザサイドのスクリプト言語であるJavaScriptの人気が最近ますます高まっています。 JavaScriptは超高速の応答時間を実現しつつインタラクティブな要素も持っています。 ユーザーを引き付けるWEBアプリケーション開発の基盤として、Javascriptは頻繁に使われているのですね。 セキュリティ面で難題を抱えるJavascript ただしことセキュリティの面においては、JavaScriptを避けようとい

javascriptとCSSを組み合わせた標準WEBカレンダーを実装する方法をご紹介しています。 javascriptを導入する際コピペしただけでは動かないサンプルもありますので、注意が必要です。 カレンダーを構成する全ての箇所を自由にカスタマイズしてみる事がマスターへの近道だと思います。 標準の基本的なJavaScriptカレンダー ページ上に月間カレンダーをレンダリングするためのシンプルなJavaScriptライブラリです。 表示・機能としても申し分ありませんし、導入も非常に簡単でシンプルな一押しのカレンダー機能です。 月間カレンダーの導入方法 スタイルシートcalendar.cssをheaderタグ内に追加します。 <link rel="stylesheet" href="css/calendar.css"> HTMLソース カレンダーのHTMLを作成します。 <div class=

imgタグにはwidthとheightを直接設定する事はSEO上重要 最近まではimgタグにwidthやheightなど幅と高さの数値を入れずに、CSSでコントロールする流れが主流でした。 しかしGoogleの新しいアルゴリズム「Core Web Vitals」の要素が発表された事で、その状況は一変する事になります。 Googleが導入した新しいアルゴリズムの要素として 上記の現象を持つWEBページについては、改善をしなければ検索順位に影響する事になります。 SEO評価を上げるチャンス しかし逆に言えば、それらを改善する事でWEBサイトの検索順位が上がる可能性も示唆しています。 このアルゴリズムに対応するためのSEO対策の一つが、画像タグにwidth・heightの数値を直接入れておく事です。 今後検索で上位を目指すWEBサイト制作にとって、imgタグに幅と高さのサイズ設定をしておく事は必

パララックスWEBサイトとはパララックス効果による視覚的PRを目的としたWEBサイトの事です。 WEBページ上に奥行の概念を持たせ、各要素の奥行きの差により立体的な演出効果を出しています。 cssによるparallax効果ポイント パララックスWEBサイトとは？ あなたは「パララックスサイト」という言葉をご存知ですか？ パララックスサイトとは、parallax（視差）の効果を適用したWEBサイトのことです。 parallaxとはページをスクロールする際、手前と奥とでスクロールの速度に差をつけることで、奥行きや立体感を表現するものを指します。 パララックス効果のメリット この手前と奥とでスクロールの速度に違いがでると、通常2次元の世界にあるWEBページが3次元の奥行きを感じる様になります。 視覚差を使ったエフェクトはPRしたい部分を強調でき、ユーザーにインパクトを与える事ができます。 その効

TOPページはSEO上h1タグにロゴマーク画像を使っても良いです。Altテキストが画像の説明とサイトの固有名詞を兼ねるためです。 TOP以外のコンテンツページはSEO上h1とロゴ画像とは分けるべきです。Altテキストが画像の説明とh1のテキストをを兼ねないためです。 それ以外のhタグは画像見出しを使ってもいいです。Altにキーワードをきちんと入れましょう。 今はコンテンツSEOの時代と呼ばれています 今SEOで何より重要なのは、価値ある有益な情報をユーザーに提供できているかどうかですよね。 それまでは外部リンクやheadタグのキーワードやディスクリプション、そして本記事で紹介するh1などの見出しタグの工夫が騒がれていました。 しかし最近は上記のような細かい部分にあまりこだわる必要は無いというのが一般認識でしょうか。 重要視されるのはコンテンツ ではなぜ以前のように記述の工夫が重要視されなく

.htaccessファイルによるgzip圧縮は画像以外の構成ファイルを圧縮する事でWEBサイトの表示速度をアップさせる手法です。 設定すると表示速度は劇的に上がる場合があるし、表示速度が向上する事はSEO対策も有利に働きます。 mod_deflateが使えるサーバーであればサーバー側が圧縮をしてくれるが、使えない場合は自前で圧縮ファイルを用意する必要がある。 gzip圧縮とは？ gzip圧縮とはファイルサイズを小さくする圧縮方法の1つであり、gzipは「GNU zip」の略称です。 名前にzipが含まれていますが元々はUNIXというOSで独自に作られた圧縮プログラムです。 WEBサイトを構成しているhtml、JS、css、xmlなどを圧縮することで、データ量が軽くなりWEBサイトの表示速度を向上させる効果があります。 高いパフォーマンスと完璧な圧縮・復元 mod_deflateという圧縮方