HTMLとCSS Youtubeのiframeを印刷時に表示する方法
Youtubeのiframeは印刷できるのか？ Youtubeはiframeで読込されていますが、印刷時にはブラウザによって異なります。ChromeやFirefoxでの印刷では、youtube部分が、真っ白やグレー、真っ黒の状態になります。...
HTMLとCSS
HTMLとCSS 
HTMLとCSS OGP画像情報をHTMLに追加する方法
SNSでWEBサイトのリンクがシェアされた際に、目を引くのは画像です。 OGPはFacebookやTwitterなどのSNSで表示される画像になります。フルサイズ画面で表示ができるように、大きめの画像サイズになっています。OGPを設定するに...
HTMLとCSS WEBページの構造化と構造データについて
WEBページの構造化について 構造化することで、ページのコンテンツを正確に伝えることが出来る。各ブラウザでページの構造化が推奨されていることから、今後も注目してHTMLを記述していく。 構造化については、HTMLで記載するもの、構造化データ...
HTMLとCSS HTML5廃止と新規格HTML Living Standardについてのまとめ
HTML5廃止と新規格のHTML Living Standardについて それぞれの組織の成り立ち WHATWG 2004年にApple・Mozilla・Operaの3社によって設立。 W3C 正式名称は World Wide Web Co...
HTMLとCSS 多言語サイトのhreflang属性による言語指定方法について
多言語サイトのページの言語していについて hreflang属性は、Webページがどの国の言語向けに作られているのかを示すために使う属性で、多言語サイトで利用する。 hreflang属性を指定できるHTML要素 要素 hreflang属性の用...
HTMLとCSS 2021年Google推奨のWEBサイトの記述について
Googleの推奨にあわせて記述、プログラミング点を見直す。HTML省略化とプログラム記載の際のタグの廃止が推奨されているので確認しておく。 Google推奨のWEB記載にする Google推奨記載について 参考Googleが推薦するHTM...
HTMLとCSS schema.orgが定義している構造化についての詳細な説明、JSON-LDとRDFa
schema.orgが定義している構造化 構造化については、日本語で詳細まで説明されたものが少ないので、ここでまとめます。構造化についてはschema.orgの公式サイトから英語で確認できます。Google翻訳と英語版を比較すれば、大抵のこ...
HTMLとCSS CSSの縦書き、CSSで右読みの指定と新しいCSS配置
CSSコーディングはStylus CSS多言語化による縦読み、右読み、左読みの指定 CSSでの表現方法 従来のCSS 新しいCSS設定 文字列の方向を指定する writing-mode 要素の幅と高さを指定する width / height...
HTMLとCSS 2021年最新HTML5、head記載、meta（メタタグ）設置について
トップページのみに設置する HTML <link rel="appendix" title="ページタイトル" href="（ニュースやブログのURLを指定）"/> URLに日本語が含まれる場合の指定 日本語ドメインや、日本語のURLを利用...
HTMLとCSS 2021年最新のSEO対策とモバイルファーストなどについて
2021最新HTML5まとめ サイトをモバイルに最適化する 2021年3月からは全てのサイトがモバイルファーストインデックス(MFI)になる。それに合わせて、ページスピードを改善することも重要で、Googleでは、３秒以内に表示完了するのが...
HTMLとCSS 外部リンクは target=”_blank” rel=”noreferrer”とセットで記述する
target="_blank"でリンクをした場合、別ドメインへのリンクであっても、リンク元のページの「リファラー情報」を引き継ぐ事が出来る。リファラ情報から、リンク元のサイトをopnerコマンドで操作が可能になるため、 target="_b...
HTMLとCSS 2021年レスポンシブデザイン画像サイズを検討
レスポンシブ画像サイズ iphoneMax Proの横サイズ428pxに合わせてスマホサイズを基準に制作する。 SNSでFacebook、Twitterの推奨：横1200px 画像を拡大することを前提としていて、画面上では、画像サイズは圧縮...
HTMLとCSS よく使うCSS3
文字の間隔（文字詰め）と太さ PHP p{ letter-spacing : 0.1em; font-weight: bold; text-align: center; } 絶対配置 PHP position：「absolute」「rela...
HTMLとCSS inputのCSSカスタマイズ
inputの罫線を消す+影を消す PHP input{ border: none ; /* 罫線なし */ border-color: transparent;/* 線を透明 */ border: medium none;/* 縁影なし *...
HTMLとCSS css要素の高さの真ん中にそろえる方法
相対配置と絶対配置で高さを50％設定する PHP #box1 { position: relative; top: 0; } .box { position: absolute; top: 50%; }
HTMLとCSS HTMLの meta に記載する内容一覧
基本のmeta情報 PHP name=name //名前を指定します。 http-equiv=http-equiv //TTPヘッダ名を指定します。 content=content //内容を指定します。HTML4.01 では必須の属性。 ...
HTMLとCSS googleなど検索サイトの登録拒否 （robots許可と拒否の設定）
robots.txt サイトマップの場所指定 PHP User-agent: * Sitemap: Sitemap: Sitemap: Disallow: htmlにインデックス登録拒否設定を記述する PHP <!-- インデックス拒否 -...