What's New Qiita

20190714のHTMLに関する記事は14件です。

  • 投稿日：2019-07-14T22:07:13+09:00

jQuery で外部 HTML ファイルが表示されないときの原因と対処法

外部ファイルが表示されない

GitHub Pages でサイトを作っており、ヘッダーを1つのファイルにまとめたいと思い、jQuery を使用してヘッダーの HTML を読み込むことにしました。ところが、jQuery で読み込む部分が表示されません。

ちなみに、その現在作っているサイトはこちらです（jQuery に関する問題は修正済みです。）。今度、Python3 と tkinter で AI アシスタントを作ってみたで紹介した AI アシスタントのちょっとした発表をする機会があり、それ用の、AI アシスタントの PR サイトです（本当は AI アシスタント自体その発表の為に作ったんですけどね。）。

状況

問題のコードは、大体以下のような感じでした。

読み込む側

index.html
<!DOCTYPE html>
<html>
    <head>
        <!--サイトのアイコンの設定など-->
    </head>
    <body>
        <header>
        </header>
        <main>
            <!--サイトの内容-->
        </main>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script>
            jQuery(function() {
                jQuery('header').load('/header.html');
            });
        </script>
    </body>
</html>

読み込まれる側

header.html
<!DOCTYPE html>
<html>
    <head>
        <!--サイトのアイコンの設定など-->
    </head>
    <body>
        <main>
            <!--サイトの内容-->
        </main>
    </body>
</html>

index.html を開くと、header 要素の中に header.html の内容が表示されるはずですが、表示されません。

原因

index.html の header 要素に header.html　が入るとどうなるかを考えたところ、原因が分かりました。

index.html の header 要素に header.html　が入ると...

index.html
<!DOCTYPE html>
<html>
    <head>
        <!--サイトのアイコンやスタイルシートの設定など-->
    </head>
    <body>
        <header>
            <!--ここから header.html-->
            <!DOCTYPE html>
            <html>
                <head>
                    <!--サイトのアイコンやスタイルシートの設定など-->
                </head>
                <body>
                    <main>
                        <!--サイトの内容-->
                    </main>
                </body>
            </html>
            <!--header.html ここまで-->
        </header>
        <main>
            <!--サイトの内容-->
        </main>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script>
            jQuery(function() {
                jQuery('header').load('/header.html');
            });
        </script>
    </body>
</html>

何がおかしいか分かりますね？

header 要素の中に本来入らないはずの head 要素や body 要素などが入り、ぐちゃぐちゃになっています。

つまり、header.html は、こうすれば良かったわけです。

header.html
<!--サイトの内容-->

もはや例を示す必要があるのかというレベルです。

ちなみに、スタイルシートは、何も指定しなければ index.html で使用しているものが使用されます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-14T19:43:31+09:00

noindex について調べたこと

はじめに

  • SEO対策のため、metaタグを修正するにあたり、noindexについて調べたことを記載しておきます
  • 何となく知っていたことでしたが、自分用の備忘録として残しておきます

noindexタグとは

  • サイト内のページを検索エンジンにインデックスさせないために使うmetaタグの1つ

noindexの仕組み

  • Googleにページが認識、評価される過程はクロール → インデックス → ランキングの3段階に分かれる
  • noindexはこの過程を2段階目、インデックス前で止める働きをする
    • 検索エンジンのクローラーを制御するmetaタグの一つで、検索エンジンに対して、該当するページを検索エンジンのインデックスへ登録しなくてよい、と伝える効果がある
    • Googleはサイトを認識するが、評価の対象にしないため検索結果には表示されないようにする
    • noindexの記述されているURLは、原則としてどのようなキーワードで検索しても検索結果に表示されることがなる

なぜ noindex を仕込むのか

  • サイト全体の評価を下げてしまうのを防ぐため
    • 文字数が少なかったり、重複コンテンツがあったりするページをGoogleは品質の低いページとみなすため
  • 作成中のページやテストページなどの完成していないページが、検索結果に表示されるのを防ぐため

どんなページに noindex を仕込むのか

  • 重複コンテンツ
  • コピーコンテンツ
  • 情報量（文字数）の少ないページ
  • サイトマップ
  • エラーページ

タグの設置方法

<meta name="robots" content="noindex, nofollow" />
  • noindex とともに nofollow タグを使用して、リンク先にリンクパワーを与えないようにする

Googleのコンテンツ評価基準E-A-Tについて

metaタグに関すること

<meta property="og:url" content="ページのURL" />
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページのタイプ">
<meta property="og:description" content="記事の抜粋" />
<meta property="og:image" content="画像のURL" />
<meta name="twitter:card" content="カード種類" />
<meta name="twitter:site" content="@Twitterユーザー名" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="appIDを入力">

おわりに

  • むやみに noindex を使用したことで流入が減る可能性があるため、設置する際は注意が必要になるかと思います
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-14T19:40:19+09:00

ライブラリ作ってみました（CSS編）　デザインパターン

自作ライブラリを作った経緯

　ソフトを開発するにあたって、自作のライブラリを使用しています。
理由は、勉強のためと言うこともあるし、自分で作った方が痒い所に手が届くということがあるからです。宜しければ、ご覧ください。

CSSライブラリ(github)

cssライブラリ

　下記、各種cssの説明になります。

　cssクラス名とファイル名は同じです。

　clsCommon.css

　　メインのcss

　　呼び出しは、これだけ。

　clsCommonPopupText.css

　　ポップアップに関するcss

sample.html
   [ <a class="clsCommonPopupText">？
    <span class="clsCommonPopupTextEffect">
    <span>オートインクリメントの場合は、NOT NULLにする必要があります。</span><br>
    <span>テーブル更新時に、オートインクリメント追加は出来ません。</span>
    </span></a>
   ]</p>

　clsCommonTab.css

　clsCommonTabJob.css

　clsCommonTabProperty.css

　　タブ表示に関するcss

sample.html
<!-- タブ : ラベル -->
<div class="clsCommonTab">

  <!-- ラベル -->
  <input id="idCommonTab_1" type="radio" name="nameCommonTab" checked>
  <input id="idCommonTab_2" type="radio" name="nameCommonTab">
  <ul>
    <li><label for="idCommonTab_1">メニュー１</label></li>
    <li><label for="idCommonTab_2">メニュー２</label></li>
  </ul>

  <!-- コンテンツ -->
  <div>
    <!-- コンテンツ_1 -->
    <div>
      コンテンツ１
    </div>
    <!-- コンテンツ_2 -->
    <div>
      コンテンツ２
    </div>
  </div>
</div>

　clsCommonTable.css

　clsCommonTableCenter.css

　clsCommonTableGray.css

　　テーブルに関するcss

sample.html
  <table class="clsCommonTable">
    <thead><th>名前</th><th>かな</th><tr></thead>
    <tbody>
      <tr><td>鈴木太郎</td><td>すずきたろう</td></tr>
      <tr><td>山田花子</td><td>やまだはなこ</td></tr>
    </tbody>
  </table>

　clsCommonTitle.css

　　見出しに関するcss

sample.html
  <h1 class="clsCommonTitle">見出し</h1>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-14T19:01:29+09:00

iOS Safariでinput要素のfocusを簡単に外す方法

始めに

iOS Safariでinput要素を選択してキーボードが出ているとき、何も設定しないと画面をタップしただけではfocusを外してキーボードを閉じることができません。これを何とかするために今まではJSでblurするようにしていましたが、もっと単純な方法があったのでその方法を紹介したいと思います。

結論

親のDOMにonclickイベントを設定したら外せます。めちゃくちゃ簡単ですね(笑)。onclickの処理を書かなくても問題ないです。また、どの階層にいても問題ないので、一番上のdiv要素にonclickを設定すればいいと思います。

iOSでfocusが外れるようにする設定
<html>
<body>
  <!-- 親要素に空でもいいのでonclickの設定をする -->
  <div onclick="">
    <input text="" />
  </div>
</body>
</html>

なぜこれで上手くいくか

仕様をちゃんと読んだわけではないので憶測ですが、どうやらonclickイベントを設定していないDOMはこのイベント自体を省略してしまうようです。HTMLの挙動的にはどれかをクリックしたらそちらにfocusが移るのですが、イベント自体が省略されているのでfocusが外れないようです。
なので一番親であるdiv要素とかにonclickイベントを設定することで必ずonclickイベントを拾えるようになるので、focusを外せるということです。（bodyタグでいけるかと思ったのですが、どうやらbodyだと拾ってくれなそうです）

サンプルコード

CodePenでサンプルコードを書きましたのでそれをこちらに載せます。

See the Pen iOSでフォーカスを簡単に外す by wintyo (@wintyo) on CodePen.

スマホで動作を確認する方は以下のURLからアクセスしたほうがいいと思います。
https://codepen.io/wintyo/full/wLbqLN

一番上にbodyのクリックイベントをカウントするようにしましたが、カウントされていない場所があると思います。そこはクリックイベントが送られていないのでfocusも外せない状態になっています。
ついでの発見ですが、どうやらonclickイベントを拾った要素にハイライトカラーが当たるようですね。実際はこれは邪魔だと思うのでハイライトカラーを消さないといけなそうですね。

終わりに

iOS Safariでfocusが外せない問題に結構悩まされていましたが、簡単に対応できる方法が見つかってよかったです。ただこのサンプルコードを書いていたら勝手にズームされたり、キーボード表示中にスクロールすると謎の黒い領域が現れたり、iOS特有の挙動に悩まされてしまいました。ズームはなんとかなりましたが、領域のほうは解決できませんでした・・・。もうちょっと普通の挙動をしてくれると嬉しいんですけどねぇ。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-14T18:41:18+09:00

HTML < div >と< span >の違い

HTML < div >と< span >の違い

< div >/< span >とは？

一言で言うとコードにまとまりを作るためのものです。
じゃあclassと一緒じゃんと思うかもしれませんが違います。
classは[アレとアレとアレとアレ]をひとまとまりだったのに対し
divやspanは[こっからここ！]をひとまとまりという考えです。

< div >って何？

まずは< div >から深掘りしていきます。
< div >というタグ自体にはなんの意味もなくただ単に< div > 〜 < /div >で囲ったところがまとまりになるというだけです。

ページ上.(div挿入前)
こんにちは
いい天気ですね
さようなら
また明日

これを< div >でブロック分けします。

div.
<div class = "A">
<P>こんにちは</p>
<P>いい天気ですね</P>
</div>
<div class = "B">
<P>さようなら</p>
<P>また明日</P>
</div>

↓

ページ上(div挿入後).

こんにちは
いい天気ですね
さようなら
また明日

このように< div >自体に意味を持ってないのでページ上は変わりませんが、内部では

こんにちは
いい天気ですね

さようなら
また明日

とdivでくくる事ができるようになりました。

まとまりで分ける理由は？

div.
<div class = "A">
<P>こんにちは</p>
<P>いい天気ですね</P>
</div>
<div class = "B">
<P>さようなら</p>
<P>また明日</P>
</div>

先ほどのように分けると、例えばCSSで「class = A」の文字を全部赤にしてと命令した場合「class = A」が入ったdivで囲ってあるくくりを全て赤文字にできます。

上のコードで言えば[こんにちは]と[いい天気ですね]が赤文字になります。

< span >とは？

同じ「こっからここまで！」のくくりでも< span >は文の中でのくくりになります。

イメージ.
これは<span class = "A"> 例文 </span>　です

この状態でCSSからclass = "A"に対し赤文字にする命令を出したとすると
「例文」の部分だけ赤文字になる

< div >を無理やり使えばいいんじゃないの？

別に< span >を使わなくても< div >使えば同じ結果でしょ？と思った方もいるかもしれません。

イメージ.
これは<div class = "A"> 例文 </div >　です

↑
これでもいいんじゃないの？？

でもこれでは使えません。なぜなら< div >は使用すると改行が入るからです。

イメージ.
これは<div class = "A"> 例文 </div >　です

↓
これは
例文
です

ページ上でこうなります。

例文ってとこを赤文字に変えたかっただけなのに勝手に改行されたら使いにくいですよね。
そういった理由で< span >を使います。

divやspanは何回使ってもいい？

何回でも使えます。
divの中にdivを入れて管理することもあります。

最後に

HTMLは基本的にほぼほぼdivやclassで作られています。複雑そうに見えるコードも順番に見ていくとなんとなくわかってくると思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-14T17:10:57+09:00

HTML classとidの違い

HTML classとidの違い

classとかidって何？

[class] / [id]とはhtmlのタグにつく属性で後々処理や変更をまとめてしやすいように自分で名前をつけてグループ管理できるものです。

どうやって名前つけるの？

[class]と[id]はどのタグでも使えます。

例えばこんな感じ.
<p class = "red">赤いボールです</p>
<h1 id= "midasi">HTML classとidの違い</h1>

他にもimgタグやaタグにも使えます。

具体的にどんな時使うの？

例えばこんな感じ.
<p class = "red">赤いボールです</p>
<p class = "red">赤いりんごです</p>
<p class = "red">赤いポストです</p>

上のように< p >タグ内でclassを"red"としてあるコードがいくつかある場合。
cssを使って「< p >タグでなおかつclassがredのやつは文字を赤色にしますー」と命令すると
赤いボールです
赤いりんごです
赤いポストです
の文字を一気に赤色に処理できます。

じゃあclassとidの違いって何？

一番大きな違いはページ内にidは１つしか使えないけどclassは何回も使えると言う点です。

idはほとんど変更する必要がなかったり、そのページで１箇所しかないヘッダー部分などに用います。(つまりそこを変更してもページ全体に影響が出ないような箇所)

idがかかっている範囲の中にclassを入れることはできますが、もしidに対し処理がなされた場合、classの処理よりidの処理が優先されます。

以上classとidの違いでした:nerd:

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-14T15:44:45+09:00

HTMLの< body >内でよく使われる基本的なタグ

HTMLの< body >内でよく使われる基本的なタグ

html.
1 <!DOCTYPE html> 

2 <html>
3 <head>
4  <title>HTMLをざっくり理解するための超基本的な大枠</title>
5 </head>
6 <body>
7  <h1>プログラミングを頑張ろう</h1>
8  <p>とりあえずhtmlやってみよ</p>
9 </body>
10</html>

初めにこちらのコードをざっくり説明すると

< html > ~ < /html > ここに挟まれている部分でhtmlの文書部分を教えてくれてて
< head > ~ < /head > ここに挟まれている部分で設定を決めてくれてて
< title >　これがgoogle先生で検索した時に題名で出てきてくれてて
< body > ~ < /body > ここで挟まれている部分がページに表示されている

といった大枠に分類できます。

この記事ではその中の
< body > ~ < /body >
の枠で頻繁に使われる基本的なタグ、つまりページに表示される系の記述に使われるタグの説明をしていきます。

< body > ~ < /body >でよく使われるタグ[ページに表示される系]

< a >タグ
<a href="https://qiita.com/daisuke19840125"> ダイスケのマイページはこちら </a>

こんな感じで< a href ="リンク先のURL”>を書き、そこから< /a >の間に文章を入れれば「"ダイスケのマイページはこちら"と書いてあるところ押したらこのURLに飛びますよー」て意味になります。

このように< a >タグとはリンクを設定するもので、hrefはその属性にあたります。つまり< a >要素が「ここはリンク作るとこやで」と言っててhref属性で「僕を呼んでくれたらリンク入れまっせ」と言ってる感じです。

< h >タグ
<h1>プログラミングを頑張ろう</h1>

一言でいうと見出しです。このページでいう一番上の文字がでっかいやつです。「なんのためにあんの？」と思うかもしれませんが、見出しの存在意義はいくつかあって
1 [文字の大きさに強弱をつけることで単調で見辛くなることを防ぐため]。
2 [読みやすさを作るため]。
3 [検索機能に引っかけるため]
のようです。google先生が検索結果を出す際の判断材料に含まれています。

このh1の数字部分は変えることができて、数字が大きくなるごとに文字は小さくなっていきます。見出し作りたければ< h >タグで、見出しの大きさを変えたいときは数字を変えればいいってことです。

< p >タグ
<p>とりあえずhtmlやってみよ</p>

単純にページ内の文章です。< p >タグで囲めば文字としてページに表示されます。

< img >タグ
<img src="画像.jpg"/>

画像を入れこめるタグです。< img >要素が「ここは画像ファイル貼るとこにするで」と言っててsrc属性で「僕を呼んでくれたら指定の画像入れまっせ」と言ってる感じです。

今までみたいに< img ></ img >と言う書き方ではなく< img 　　/>と言う書き方になります。

< ol >と< li >タグ
<ol>
<li>ひとつめ</li>
<li>ふたつめ</li>
<li>みっつめ</li>
</ol>

上記のようにコードを書くとブラウザでは

1ひとつめ
2ふたつめ
3みっつめ

と番号付きで表示されます。
< ol >とはorder listの略で順番を決めて表示してくれという意味です。< li >はlistの略です。

< ul >と< li >タグ
<ul>
<li>ひとつめ</li>
<li>ふたつめ</li>
<li>みっつめ</li>
</ul>

上記のようにコードを書くとブラウザでは

・ひとつめ
・ふたつめ
・みっつめ

と黒点で表示されます。
< ul >とはunorder listの略で順番を決めないという意味です。つまり番号が割り当てられません。

最後に

とりあえずカリキュラムの範囲内でよく出てくるタグをまとめました。
タグの種類はまだまだあります。調べたら詳しく出てくると思いますよー
< id >と< class >の違いや< div >と< span >の違いなども備忘録用で記事作ってます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-14T15:24:03+09:00

印刷用CSSを使用する

CSSのメディアクエリを使う場合

@media print{
    /* 印刷時に適用させたいスタイルを定義する */
}

参考

別CSSをインポートして使う場合

@import url("print.css") print; /* インポートで指定して、印刷時のみ適用されるようにする */

参考

HTMLのlinkタグに指定する場合

<!-- media属性に指定して、印刷時のみ読み込まれるようにする -->
<link rel="stylesheet" type="text/css" media="print" href="sample.css">

参考

bootstrapの場合

  • bootstrap.cssには以下のスタイルが定義されている
    • ver: 3.2.0の場合
@media print {
  * {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  @page  {
    margin: 2cm .5cm;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  select {
    background: #fff !important;
  }
  .navbar {
    display: none;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }
  .btn > .caret,
  .dropup > .btn > .caret {
    border-top-color: #000 !important;
  }
  .label {
    border: 1px solid #000;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #ddd !important;
  }
}
  • 例えば、navbarをHTML側のclass要素に指定してる場合、印刷時にdisplay: none;が適用される

参考

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-14T15:00:19+09:00

画像を並べた際に出来る謎の隙間を解決！

はじめに

画像を隙間なく並べて表示する際に、謎の隙間が出来てしまったことはありませんか？:astonished:
例えば以下のような感じ！縦に画像を並べたいのですが、画像と画像の間に隙間があいてしまっています！

image.png

こちらを表示させる為のHTMLファイルも載せておきます。

test.html
<!DOCTYPE html>
<html lang ="ja">
  <head>
    <meta charset = "utf-8">
    <link rel="stylesheet" type="text/css" href="../style/test.css">
    <title>テスト</title>
  </head>
  <body>
　　 <!-- ここで画像を設定しています！ -->
    <img src = '../sample.jpeg' class = 'image1'><br>
    <img src = '../sample.jpeg' class = 'image2'>
  </body>
</html>

今回はこの謎の隙間について調べた内容をまとめます！

隙間の正体

この隙間を作っている正体は、インライン要素に設定されているベースラインです！

インライン要素というとわかりづらいですが、テキストの文字、特に英語を考えるとわかりやすいです。
以下の画像をご覧ください。

image.png
(参考画像元URL： https://www.tagindex.com/stylesheet/frame/vertical_align.html)

qやp、yなどはベースラインに対して配置が下にはみ出るのが普通です。
英語を書く際の常識ですね。
文字等のインライン要素も、ベースラインに対してこの"下にはみ出る部分"を余白として設定しています。
そのため、画像を並べるとその分の隙間が空いた状態になってしまいます。
画像を表示させる為のimgタグもインライン要素なので、隙間が空いてしまうんですね。

隙間を埋めるには

謎の隙間を埋めるための方法を２つ紹介します！どちらも1行で書けるので簡単です！
ゴールとしては以下のように、画像と画像の間の隙間が無くなればOKです！
image.png

方法１：インライン要素をブロック要素にする

インライン要素だから空白が空くだけなので、ブロック要素に変えてしまえば良いです！
(※この場合ブロック要素にしているので、htmlのbrタグは不要なので消してくださいね！)

test.css
.image1 {
  display: block;
}

方法２：vertical-alignをbottomに設定する

vertical-alignは、ベースラインの位置を変更することができるプロパティです！
このvertical-alignをbottomにすることで、謎の余白を消すこと出来ます。

test.css
.image1 {
  vertical-align: bottom;
}

さいごに

隙間をなくす方法として２つ紹介しましたが、インライン要素のままにしたいかブロック要素にしたいかで使い分ければ良いかと思います！
プログラミングを始めた当初、ベースラインについて把握していなくて少しだけ詰まってしまったのでまとめてみました！
お役に立てれば幸いです:relaxed:

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-14T11:01:56+09:00

HTML の 要素 を 変更 する

目的

  • HTMLファイルの要素を変更する方法をまとめる。

押さえるポイント

  • HTMLの要素は3種類存在する。
    1. ブロック要素
      width,heightの設定→〇
      margin,paddingの設定→〇
      配置→縦並び
    2. インライン要素
      width,heightの設定→×
      margin,paddingの設定→左右のみ〇
      配置→横並び
    3. インラインブロック要素
      width,heightの設定→〇
      margin,paddingの設定→〇
      配置→横並び
  • インライン要素にwidth.heightを設定したいときは要素を変更する。
  • 要素の変更にはdisplayプロパティを使用する。　

書き方の例

  • 下記にCSSファイルの内容を記載する。
要素の名前かクラス名 {
  display: 変更したい要素;
}

より具体的な例(blockからinline-block)

  • h1要素をinline-blockに設定する。
  • 下記にHTMLファイルの内容を記載する。
<h1>おはようございます。</h1>
  • 下記にCSSファイルの内容を記載する。
h1 {
  display: inline-brock;
}

より具体的な例(inlineからblock)

  • p要素をblockに設定する。
  • 下記にHTMLファイルの内容を記載する。
<p>おはようございます。</p>
  • 下記にCSSファイルの内容を記載する。
h1 {
  display: brock;
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-14T10:47:21+09:00

HTML の テキスト の文字間隔 を 設定する

目的

  • HTMLファイルのテキストの文字間隔を設定する方法をまとめる。

押さえるポイント

  • 文字間隔を調整したい要素やクラス名を指定してletter-spacingプロパティで設定する。
  • 文字間隔の設定はピクセル数を用いて設定する。

書き方の例

  • 下記にCSSファイルの内容を記載する。
要素の名前かクラス名 {
  letter-spacing: 文字間隔のピクセル数;
}

より具体的な例

  • h1要素に記載されている「おはようございます。」の文字間隔を10ピクセルに設定する。
  • 下記にHTMLファイルの内容を記載する。
<h1>おはようございます。</h1>
  • 下記にCSSファイルの内容を記載する。
h1 {
  letter-spasing: 10px;
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-14T10:17:11+09:00

HTMLの< head >内でよく使われる基本的なタグ

HTMLの< head >内でよく使われる基本的なタグ

html.
1 <!DOCTYPE html> 

2 <html>
3 <head>
4  <title>HTMLでよく使われる基本的なタグ</title>
5 </head>
6 <body>
7  <h1>プログラミングを頑張ろう</h1>
8  <p>とりあえずhtmlやってみよ</p>
9 </body>
10</html>

初めにこちらのコードをざっくり説明すると

< html > ~ < /html > ここに挟まれている部分でhtmlの文書部分を教えてくれてて
< head > ~ < /head > ここに挟まれている部分で設定を決めてくれてて
< title >　これがgoogle先生で検索した時に題名で出てきてくれてて
< body > ~ < /body > ここで挟まれている部分がページに表示されている

といった大枠に分類できます。

この記事ではその中の
< head > ~ < /head >
の枠で頻繁に使われる基本的なタグ、つまり設定系の記述に使われるタグの説明をしていきます。

< head > ~ < /head >でよく使われるタグ[つまり設定系]

< meta >タグ
<meta charset="UTF-8" >

< meta >タグとは、ページのweb情報を設定するものです。外部に向けても内部に向けても設定を行うことができます。もう少しわかりやすく言うと、外部に向けてであれば検索キーワードの設定だったり、内部に向けてであれば文字フォントの設定だったりです。上の例は文字フォントを決めているものです。
"UTF-8"とかいうわけわかんない羅列が書かれてますがこれはフォントの種類です。

< title >タグ
<title>HTMLでよく使われる基本的なタグ</title>

< title >タグはgoogle先生で検索した時に検索結果としてバーっと出てくるあの題名の部分ですね。

< link >タグ
<link rel="stylesheet" href="style.css">

外部ファイルをコード内にリンクする時に使います。この場合はCSSファイルをこのページに紐付けようとしてるわけです。ちなみにrelは属性で[現在のファイルとリンク先の外部ファイルとの関係性を表すタグ]です。わかりにくいので他にもいくつか書いてみます。

< link rel="prev" href="001.htm" > ←前のページ(今のファイルから見て)
< link rel="next" href="003.htm" > ←次のページ(今のファイルから見て)

< script >タグ
<script src=”javascript.js”> </script>

JavaScriptとの紐付けをします。srcの部分は「あんたが名前つけた"javascript.js"っていうファイル呼び出すよー」という役割を果たす属性です。まあJavaScriptを呼び出したかったら"< script src="javascriptファイル > "って公式なんだなと覚えておけばいいです。

最後に

ちなみにこれらはページに関する設定を決める部分ですのでページには表示されません。こやつらは裏方さんですねー。まだまだ種類はありますが初めはこのあたりを覚えとけばいいと思います。< head >内で見たことないタグが出てきたら調べてみるといいかもです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-14T01:43:03+09:00

HTMLを書くための超基本的な大枠

HTMLをざっくり理解するための超基本的な大枠

html.
1 <!DOCTYPE html> 

2 <html>
3 <head>
4  <title>HTMLをざっくり理解するための超基本的な大枠</title>
5 </head>
6 <body>
7  <h1>プログラミングを頑張ろう</h1>
8  <p>とりあえずhtmlやってみよ</p>
9 </body>
10</html>

この記事ではHTMLの超基本的な大枠を説明していきます。

１<!DOCTYPE html>
こやつは「このファイルはHTMLの文書なんですよー」と宣言する役割で、[HTMLファイルを作成するにあたってのルールで書いてるだけ]みたいなもんです。

２を見ると"< html > "と書かれています。一番下の10にも同じく< /html >と書かれています。これは「私たちに挟まれているところはHTMLコードですよー」と言ってます。(あーこっからhtml始まってここで終わってんのね)くらいに思っとけばいいです。

3を見ると"< head >"と書かれています。５にも同じく"< /head >"と書かれています。これは「私たちに挟まれているところはこのページに関する設定を決めるところですよー」と言っています。あくまでも設定を決める部分ですのでページには表示されません。こやつらは裏方さんです。フォントを定めたり、別のファイルと結合させたりまあ色々します。

4を見ると"< title > "とあります。これはgoogle先生で検索した時に検索結果としてバーっと出てくるあの題名の部分ですね。裏方の"< head >"さんはこんなこともしてくれてます。

６を見ると"< body >"と書かれています。５にも同じく"< /body >"と書かれています。こやつらがページに表示される部分すなわち私たちが目にする部分です。やっと出てきましたね。

基本の大枠はこんなもんです。

　まとめると

<!DOCTYPE html> HTMLのルールにしたがって記載
< html > ~ < /html > ここに挟まれている部分でhtmlの文書部分を教えてくれてて
< head > ~ < /head > ここに挟まれている部分で設定を決めてくれてて
< title >　これがgoogle先生で検索した時に題名で出てきてくれてて
< body > ~ < /body >ここで挟まれている部分がページに表示されている

複雑そうに見えて簡単です。あとは要所要所に使う様々なタグを深掘りしていけばコードの意味がわかります。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-14T01:31:24+09:00

[Word VBA] HTMLタグをできる限り消去するマクロ

サンプルの取り方 Firefox編

  1. Yahoo!Japanにアクセス。
    2. ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126919/6b4e045e-013e-770e-627d-a627dc833de5.png)

右側がうざいうえに誰も政治を持ち込むなとは言わない件。なので「〇〇に政治を持ち込むな」というのは全部ネトウヨで確定ですわ。あと国民のものの国民は安倍晋三以外は指してないですね。韓国にしか威張り散らせない。さらにいうとこういうあほな広告って税金とかなので、そういった点でもIT業界（ただし働いている人たちを除く）がなんで儲けているのか、コンプライアンスや企業倫理って何ですかね。

image.png

2.気を取り直してF12を押します。
Yahooに限らずhead bodyときます。なのでBodyを開いたところで右クリックします。

image.png

3.Innter HTMLを選択します。

image.png

4.Wordで新規作成で新しいDocumentを開き貼りつけます。
これは新規作成を推奨します。これだけで56ページくらいいくのと、全部置換するので、前の部分も想定外の置換をされる可能性があるからです。

コード

今回は別に検索と置換に手で入力してもいいです

条件や数が多いですが、正規表現や特殊な参照設定は一切使用していないです。文字通りWordの検索と置換に入力してすべて置換するところを自動化しています

マクロの自動記録で作ったんじゃないかって？

ええそうです、なのでオプション項目を削ろう、最初はそう思っていました。
https://tonari-it.com/word-vba-find-option/
これによると、Wordは前のオプション設定を引き継いでしまうそうです。
もちろんクリアは打っているんですが
Selection.Find.Replacement.ClearFormatting
しかしどこか1行だけ入っていません。いれたらおかしくなったからです。
なのでClearFormattingをかければいいというものではないため、オプションは全部明示した方がいいようです。リンク先の人はめっちゃ切れる人なのでsoredemo端折ってますが、自分はやらないです。

Sub WordDeleteHTMLTags()
'For Microsoft Word
'複数の条件でスクリプトとタグを置換によって消去し、タブを消去、2行以上続く改行を1行にします。
'必ず1度自分が削りたい部分だけが削られるか、確認してください。
'想定外の部分が削除される場合は検索文字列を変えるか、コメントにして無効化（コメントアウト）してください。
'ワイルドカード単体で完全に削除するよりは、ある程度削除して残った分を削るほうが安全です。
'<style type => </styrle>で囲まれるstylesheetを控除
Selection.Find.ClearFormatting
Selection.Find.Replacement.ClearFormatting
With Selection.Find
.Text = "\<[\!]--*--\>"
.Replacement.Text = ""
.Forward = True
.Wrap = wdFindContinue
.Format = False
.MatchCase = False
.MatchWholeWord = False
.MatchByte = False
.MatchAllWordForms = False
.MatchSoundsLike = False
.MatchFuzzy = False
.MatchWildcards = True
End With
Selection.Find.Execute Replace:=wdReplaceAll
'<style type => </styrle>で囲まれるstylesheetを控除
Selection.Find.ClearFormatting
Selection.Find.Replacement.ClearFormatting
With Selection.Find
.Text = "\<style?type*\>*\<\/style\>"
.Replacement.Text = ""
.Forward = True
.Wrap = wdFindContinue
.Format = False
.MatchCase = False
.MatchWholeWord = False
.MatchByte = False
.MatchAllWordForms = False
.MatchSoundsLike = False
.MatchFuzzy = False
.MatchWildcards = True
End With
Selection.Find.Execute Replace:=wdReplaceAll
'<if> </endf>で囲まれるスクリプトを削除
Selection.Find.ClearFormatting
Selection.Find.Replacement.ClearFormatting
With Selection.Find
.Text = "\<[\!]??\[if*\]\>*\<[\!]\[endif\]??\>"
.Replacement.Text = ""
.Forward = True
.Wrap = wdFindContinue
.Format = False
.MatchCase = False
.MatchWholeWord = False
.MatchByte = False
.MatchAllWordForms = False
.MatchSoundsLike = False
.MatchFuzzy = False
.MatchWildcards = True
End With
Selection.Find.Execute Replace:=wdReplaceAll
'<script> </script>で囲まれるjavascriptを控除
Selection.Find.ClearFormatting
Selection.Find.Replacement.ClearFormatting
With Selection.Find
.Text = "\<script*\>*\<\/script\>"
.Replacement.Text = ""
.Forward = True
.Wrap = wdFindContinue
.Format = False
.MatchCase = False
.MatchWholeWord = False
.MatchByte = False
.MatchAllWordForms = False
.MatchSoundsLike = False
.MatchFuzzy = False
.MatchWildcards = True
End With
Selection.Find.Execute Replace:=wdReplaceAll
' タグが ダブルクォーテーション不等号記号で終わるパターン。最初に英数字以外の1文字(半角スペースを想定）が入る

Selection.Find.ClearFormatting
Selection.Find.Replacement.ClearFormatting
With Selection.Find
.Text = "\<?[A-z0-9]{1,}*\""\>"
.Replacement.Text = ""
.Forward = True
.Wrap = wdFindContinue
.Format = False
.MatchCase = False
.MatchWholeWord = False
.MatchByte = False
.MatchAllWordForms = False
.MatchSoundsLike = False
.MatchFuzzy = False
.MatchWildcards = True
End With
Selection.Find.Execute Replace:=wdReplaceAll
' タグが ダブルクォーテーション+不等号記号で終わるパターン。
With Selection.Find
.Text = "\<[A-z0-9]{1,}*\""\>"
.Replacement.Text = ""
.Forward = True
.Wrap = wdFindContinue
.Format = False
.MatchCase = False
.MatchWholeWord = False
.MatchByte = False
.MatchAllWordForms = False
.MatchSoundsLike = False
.MatchFuzzy = False
.MatchWildcards = True
End With
Selection.Find.Execute Replace:=wdReplaceAll
' タグが 不等号記号で終わるパターン。
Selection.Find.ClearFormatting
Selection.Find.Replacement.ClearFormatting
With Selection.Find
.Text = "\<[A-z0-9]{1,}*\>"
.Replacement.Text = ""
.Forward = True
.Wrap = wdFindContinue
.Format = False
.MatchCase = False
.MatchWholeWord = False
.MatchByte = False
.MatchAllWordForms = False
.MatchSoundsLike = False
.MatchFuzzy = False
.MatchWildcards = True
End With
Selection.Find.Execute Replace:=wdReplaceAll

With Selection.Find
.Text = "\<?[A-z0-9]{1,}*\>"
.Replacement.Text = ""
.Forward = True
.Wrap = wdFindContinue
.Format = False
.MatchCase = False
.MatchWholeWord = False
.MatchByte = False
.MatchAllWordForms = False
.MatchSoundsLike = False
.MatchFuzzy = False
.MatchWildcards = True
End With
Selection.Find.Execute Replace:=wdReplaceAll
' ////////////////// Clear Tab //////////////////
Selection.Find.ClearFormatting
Selection.Find.Replacement.ClearFormatting
With Selection.Find
.Text = "^t"
.Replacement.Text = ""
.Forward = True
.Wrap = wdFindContinue
.Format = False
.MatchCase = False
.MatchWholeWord = False
.MatchByte = False
.MatchAllWordForms = False
.MatchSoundsLike = False
.MatchFuzzy = False
.MatchWildcards = True
End With
Selection.Find.Execute Replace:=wdReplaceAll
Selection.Find.ClearFormatting
' ////////////////// 2行以上続く改行を1行に //////////////////

With Selection.Find
.Text = "^13{2,}"
.Replacement.Text = "^13"
.Forward = True
.Wrap = wdFindContinue
.Format = False
.MatchCase = False
.MatchWholeWord = False
.MatchByte = False
.MatchAllWordForms = False
.MatchSoundsLike = False
.MatchFuzzy = False
.MatchWildcards = True
End With
Selection.Find.Execute Replace:=wdReplaceAll
Selection.Find.ClearFormatting
With Selection.Find
.Text = "^13"
.Replacement.Text = "^p"
.Forward = False
.Wrap = wdFindContinue
.Format = False
.MatchCase = False
.MatchWholeWord = False
.MatchByte = False
.MatchAllWordForms = False
.MatchSoundsLike = False
.MatchFuzzy = False
.MatchWildcards = False
End With
Selection.Find.Execute Replace:=wdReplaceAll
' ////////////////// 4以上連続する続くスペースを1に //////////////////

With Selection.Find
.Text = "^32{4,}"
.Replacement.Text = "^32"
.Forward = True
.Wrap = wdFindContinue
.Format = False
.MatchCase = False
.MatchWholeWord = False
.MatchByte = False
.MatchAllWordForms = False
.MatchSoundsLike = False
.MatchFuzzy = False
.MatchWildcards = True
End With
Selection.Find.Execute Replace:=wdReplaceAll
' 置換条件をクリア
Selection.Find.ClearFormatting
End Sub

参考

Wordの検索と置換ととRegExpの正規表現との違い

WordにあってRegExpにない

行内に存在するイメージにマッチできる
書式も検索できる
?は任意の1文字を表し、[A-z]{0,1}という表現はできない。このため「特定の1文字があるかないか」という検索ができない。
これができたら上のコードはもっと短かった。
なお直前の文字の繰り返しは@を使用する。
メタ文字がほとんどない（スペースなどはある）例えば円記号+dで数字を表すことができるが、Wordではできない
任意の単語境界がない。

RegExp

Wordほど日本語と英語のオプションが明示されておらずわかりづらい。
単にマクロを起動させるだけではなく、参照設定か RegexpをCreateObjectしなければコードが動かない。
しかも参照設定はRegExpから正式名が思いつかない Microsoft VBScript Regular Expression Version 5.5 なのでマニュアルなどを見ないとわからない。
Wordの場合、Selectionを文字単位で移動させるなどのテクニックが必要で、正規表現を理解してもWord独自の選択範囲の移動が難しい。
文字には強いがオブジェクトはRegExp自身では選択できない。
書式をまとめて検索できない。

VBAではなく普通に検索と置換を呼び出す方法

Word のヘルプとトレーニング 文章入力と編集 文字列を検索および置換する
動画あり。現在のWordの検索と置換はショートカットキーを使う方が早い。
検索 Ctrl+F 置換 Ctrl+H
なおFとHは大文字だがShiftキーを押す必要はない。これはキーに大文字で表示してあるため、こういう表記になっている。

Word や Excel の "置換" 機能で簡単に変換したい
Word 2013までが対象
ワード2013基本講座：特殊文字の検索や置換
画面デザインが違うので、バージョンが同じものを見た方がよい。
Word 2016：高度な検索と置換を行うには - wanichan.com
セルフQ&A : Wordの検索と置換でワイルドカードを使用する基本を教えて下さい。answers.microsoft.com
【Word】ワイルドカードを使う場合の注意点（その1）
Word ：ワイルドカード を使った検索と置換を極める - 教えて！HELPDESK
ワイルドカード例題シリーズ - ofice-qa.com
Wordで文書内の文字を置換する方法 - dekiru.net
置換したら保存しましょうということまで書いているのがDekiru.net 並び替えについても説明がある。
ワイルドカード「*」「?」を検索 relief
Excelではチルダでエスケープする。このようにVBAで正規表現を使用せず各アプリケーションの検索と置換を使用すると、操作性がOffice間でも異なる。

連続する2つ以上のタブを1つにまとめる−置換 relief
タブの置換の使用例

VBA編

段落内改行を一括置換するOutlookマクロ
Outlookではメール本文をWordで編集できる。このWordの機能を使った例。

Word VBAで文字列を置換する方法！いくつかの基本パターンを徹底解説

改行の置換はこの記事 【Word】ネットからのコピペで混ざる「おかしな段落記号」を削除する
WdFindWrap 列挙 (Word)
検索対象の選択範囲または指定範囲内に検索文字列が見つからなかった場合の、折り返し動作を指定します。
Const wdFindContinue = 1
検索範囲の先頭または末尾まで検索し、さらに検索を続けます。
WdFindMatch 列挙 (Word)
この列挙は廃止される可能性があるので使用しないでください。
廃止は2019あたりでもされていないので、オブジェクトブラウザで検索できる。
しかし、現在はすべてサポートされていない定数。しかも使用例も検索できなかった。
しかし、これらの定数は名前からして特殊文字にあたる。

Word.WdReplace
検索および置換を使用したときに置き換える個数を指定します。
Const wdReplaceAll = 2

htmlタグの削除って結構難しい

どういう言語でも専用ソフト（アプリ）を使わないとうまく削除できないようです。
しかもWordでってないかな。なので調べてみました。

https://hodade.com/seiki/page.php?r_tag_sakujo

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧