20210305のHTMLに関する記事は9件です。

えっ、iタグってiconのiじゃないんですか?

違います

Font Awesomeをはじめとしたアイコンフォントの実装例にはiタグが使われていることが多いですよね。

それもあってかときどきiタグを「アイコンを表すタグ」として認識している方を見かけます。1

ですが、そうではありません。
比較的わかりやすいので日本語版のMDN Web Docsを見てみましょう。2

HTML の興味深いテキスト要素 (<i>)は、何らかの理由で他のテキストと区別されるテキストの範囲を表します。例えば、技術用語、外国語のフレーズ、架空の人物の思考などです。英文においてはよく斜体で表示されるものです。

「アイコンは文章の中で区別されるべき存在である」と捉えられなくはないですが、そもそもアイコンはテキストではありません。
少なくともアイコンを表しているわけではないのは間違いないですね。

それを踏まえてアイコンには何のタグを使えば良いのか

基本的にはspanで良いはずです。

アイコンが使われるのは「前後にテキストがあり、その上で視覚的な装飾を施したい」といった場合が多いのではないでしょうか。
そのため、セマンティックな意味をもたないspanがかえって適切だと思われます。

もちろん様々なケースがあるため一概には言えませんが、筆者は大抵spanを使っています。3

おまけ:なぜアイコンにはiを使うのかを考えてみた

そもそも何故アイコンにはiが使われるようになったのかを調べてみましたが、決定的な原因は分かりませんでした。
そのため以下はあくまで筆者の推測に過ぎません。
もしご存じの方がいたらコメントで教えていただけると幸いです。

  • 1文字のタグなのでタイピングが楽
  • 役割は違えどiconの頭文字がiであるのは事実だから覚えやすい
  • hみたいにデカい影響力を持っていないし、多少変な使い方しても良いよね」の気持ちになってしまった

  1. あくまで筆者の観測範囲における話です。 

  2. 筆者はHTMLタグの役割などを確認する際は、標準仕様を参照するためにもHTML Living Standardを閲覧する場合が多いのですが、iタグに関しては若干詩的な表現で理解が難しかったため今回はMDNを引用しました。 

  3. HTMLでのアイコンの扱い方というスコープからは外れるかもしれませんが、アイコンそのものがボタンの場合はbuttonにFont Awesomeのクラスを付与しつつaria-labelをつける……といった実装をするパターンなどもあります。 

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

コンポネートの表示の仕方「reactメモ」

・コンポネートとは、reactの画面に表示される「部品」のことである。
・JSXのアタイの中でタグとして記述。
・<コンポネート名 /> の形。
⚠︎コンポネート名は大文字スタート

react_app
<body>
    <h1>React</h1>
    <div id="root">wait.......</div>

    <script type="text/babel">
    let dom = document.querySelector('#root');

    const msg = {
     fontSize: "20px",
     fontWeight:"bold",
     padding: "10px",
     color:"white",
     backgroundColor:"darkblue",
     };

    //  ここから関数コンポーネート
    function Welcome(props){
      return <p style={msg}>Hello React!!</p>;
        }

    // 表示するコンポーネート
      let el = (
      <div>
        <Welcome/>
        </div>  
      );

      ReactDOM.render(el, dom);



    </script>
  </body>

・計算するコンポネート

let dom = document.querySelector('#root');

    const msg = {
     fontSize: "20px",
     padding: "10px",
     border:"double 5px magenta"
     };

     const msg2 ={
       fontSize: "16px",
       fontWeight: "bold",
       padding: "10px",
       backgroundColor:"cyan"
     };

    //  ここから関数コンポーネート
    function Calc(props){
      let total = 0;
      for(let i =1;i <= props.number;i++){
        total += i;
      }


    return <p style={msg}>1から, {props.number}までの
      合計は、「{total}」です。</p>;
  };
    // 表示するコンポーネート
      let el = (
      <div>
        <Calc number="100" />
        <Calc number="200" />
        <Calc number="300" />

        </div>  
      );

      ReactDOM.render(el, dom);
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

ページ離脱時や、遷移した時に出る画面の上下中央に出るバナーのCSS

どうも7noteです。最近よく見かける離脱防止用のバナーの作り方

たとえばこんなやつですね。

image.png

これと同じようなものを作ってみます。

どんっ!!

image.png

画面いっぱいを暗くして、バナーを表示する方法

index.html
<!-- body直下に設置 -->
<div id="overview">
  <div class="bnr"><img src="sample.png" alt=""><span class="close">×</span></div>
</div>
style.css
#overview {
  width: 100%;       /* 幅いっぱい */
  height: 100vh;     /* 高さいっぱい */
  background: rgba(0, 0, 0, 0.5); /* 背景を薄暗くする */
  display: none;     /* デフォルトは非表示 */
  position: fixed;   /* 表示位置を絶対指定して固定 */
  top: 0;            /* 表示位置を上から0pxに指定 */
  left: 0;           /* 表示位置を左から0pxに指定 */
}

#overview .bnr {
  position: absolute; /* 相対位置とする、かつcloseの基準値になる。 */
  top: 50%;           /* 表示位置を上から50%に指定 */
  left: 50%;          /* 表示位置を左から50%に指定 */
  transform: translate(-50%, -50%); /* 上下中央にするため要素の半分分だけ左上に戻す */
}
#overview .bnr .close {
  font-weight: bold;  /* 太字にする */
  padding: 0 6px;     /* 左右の余白を適当に調整 */
  background: #fff;   /* 背景色を白に指定 */
  position: absolute; /* 相対位置とする */
  top: -28px;         /* いい感じの位置に指定 */
  right: 0px;         /* 同様 */
  cursor: pointer;    /* hover時にカーソルを指の形にする */
}
script.js
/* ページ読み込み完了時にバナーのブロックを表示 */
window.onload = function(){
  $("#overview").show();
}

/* ×ボタンが押されたとき、バナーブロックを非表示 */
$("#overview .close").on("click", function(){
  $("#overview").hide();
});

解説

CSSの解説ですが、ポイントがいくつか。overflowの幅は100vwにしてしまうとpcの縦スクロールバー分の計算をしないといけなくなってしまうので、body直下に設置し、width: 100%;を指定しています。

一番後ろのoverflowに半透明の背景を入れるため16進数での背景指定ではなくbackground: rgba(0, 0, 0, 0.5);と書き、色の透明度で調整。opacityで透明度を指定してしまうと、バナー画像も半透明になってしまうので注意。
詳しくは過去の記事「【初心者でもわかる】cssで使われる透明3種類の使い方」をご覧ください。

あとはバナー画像を上下中央に設置したり、×ボタンをいい感じのところに配置したら完成!
×ボタンは押せることがわかるようにcursor: pointer;を入れておくのがベスト!

まとめ

見た目の体裁についての解説になります。記述しているjsはおまけ程度にお考えください、実運用できるようなレベルのjavascriptではありません。
このままだと、1回バナーを見たユーザーに何度も表示することになりますし、ページリロードする度にバナーが出てくる等、使いにくさが出てくきます。

離脱時(戻るボタンを押したとき)にバナーを出すなどは意外と手間がかかるのでjs初心者の方はあまりお勧めしないかも。。。そういうツールもあるので、ちゃんと運用したいのであればそのようなツールを導入することを検討するといかも

おそまつ!

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ

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

【HTML】mailto:の使い方

プログラミング勉強日記

2021年3月5日

mailto:とは

 mailtoはaタグに含ませることができて、指定したアドレスに向けたメールを作成する画面が開く。その画面は、自分のパソコンにインストールされているメーラーあ開いて、そこに本文を書くことでメールを送信することができる。mailtoではWebサイト上ではサーバーとのやり取りをせずに済むので、簡単なお問い合わせのページとしても使える。

mailto:の使い方

 自分のパソコンにインストールされているメーラーを起動する。

<a href="mailto:example.com">メールを開く</a>

 subject(題名)とbody(本文)を加えると、以下のようにメーラーが開く。メールアドレスの後に続く情報は、?で区切って、以降の情報は&で区切る。

<a href="mailto:example.com?subject=Hello&body=Hello World">メールを開く</a>

image.png

mailtoは推奨されてない

 mailtoはあまり推奨されていない。これは、HTML上に書かれたメールアドレスを勝手に収集されてスパムの標的にされる恐れがある。そのため、現在ではSSLの技術を使ったフォーム(SSLフォーム)で個人情報を扱うことが標準になってきている。

 他にも、mailtoは文字化けが発生しやすかったり、メーラーがインストールされていないPCは使えなかったりする。

参考文献

HTMLのmailtoでメールを送る方法と使い所について解説!
HTMLでメール?を送る「mailto:」の使い方と注意点まとめ?

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

Scss~変数~

それでは次に変数についてです!!
ここで『変数』とはなんぞやって方!! 一緒に振り返っていきましょう?

①変数とは??

変数は名前を代入して使います。
例えば、fruits = りんご みたいな感じです。
イメージとしては、左側のフルーツが箱でその中に品物を入れていく感じですね?
ただ、変数はその名の通り値が変わリます!!
ですから、優柔不断にあーでもないこうでもないってやってても怒られません笑
反対に代入したものを変えてはいけなものを定数と言います!これはもう絶対に変えられないので、fruitsの中にりんごを入れたらそのままお会計に行きます?

では!!変数を理解できたとこで(できましたよね?)

Scssで使っていきましょう!!

main.scss
section {
  background-color: royalblue;
  .case1 {
    font-size: 40px;
    .case2 {
      font-size: 15px;
    }
  }
}

これが前回までの記述内容になっていますが、これを少し変えていきます!!
今、フォントサイズを指定してますが、これをベースは20pxで使ってね、でももし嫌だったら変えてねって意味で
変数を指定します!!
更に今回はわかりやすいように背景カラーも代入していきたいと思います!!

main.scss
$basefontsize:20px;
$background-color:orange;
section {
  background-color: royalblue;
  .case1 {
    font-size: $basefontsize;
    background-color: $background-color;
    .case2 {
      font-size: $basefontsize;
    }
  }
}

代入のときには"$"これを使います? 代入はじめますよー!の合図です?
あとは、コピーしてペタペタしていく感じですね?
ブラウザで表示するとこうなります!
スクリーンショット 2021-03-05 15.50.36.png

ちなみにエラーが起きるとこうなります?

スクリーンショット 2021-03-05 15.42.26.png

でも優しいから、9行目のscss間違えてませんか?って教えてくれます?

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

scss~入れ子構造~

scssを使うメリットはいくつかありますが代表的なものに入れ子がありますね。
それではみていきましょう!!

index.html
<link rel="stylesheet" href="sample.css">
<section>
  <div class="case1">あいうえお</div>
  <div class="case2">かきくけこ</div>
</section>

cssの読み込みを忘れないように!!

さて!それでは、scssを書いていきましょう!!

main.scss
section {
  background-color: pink;
  .case1 {
    background-color: rebeccapurple;
    .case2 {
      background-color: royalblue;
    }
  }
}

いつもだとこれでブラウザ表示するのですが、これではまだ反映されません?

ここでターミナルを開きます?

% sass scss/main.scss:css/main.css
% less css/main.css

この流れでしたね!!それぞれはどのような意味があるのかは
https://qiita.com/akari_0618/items/14f53a8b3586785f15b3
こちらの記事を参照してください?

スクリーンショット 2021-03-05 15.11.40.png

ブラウザで開いてこうなれば大丈夫です!!
完璧ですね?

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

必要最小限の3カラムレスポンシブ

必要最小限の3カラムレスポンシブ

<div class="wrapper">
  <div class="third-clm"></div>
  <div class="third-clm"></div>
  <div class="third-clm"></div>
</div>
.wrapper {
  text-align: center;
  width: 1080px;
}
.third-clm {
  width:33%;
  padding: 1%;
  display:inline-block;
}

@media only screen and (max-width: 640px) {
  .third-clm {
    width:100%;
    padding: 1rem;
    display: block;
  }
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

アプリケーション内に外部サイトを表示する方法(iframe)

はじめに

フロントエンド開発で、あるページに外部サイトを表示したいとの要望があった為その対応を行った。

実現方法

htmlのiframeタグを利用する事で、要望を実現する事ができる。

iframeとは、src属性で指定したURL(リンク先ページの内容)をインラインフレーム表示できるHTMLタグの一つです。

html4の頃は非推奨だったようですが、HTML5では非推奨が解除されているようです。

YouTube埋め込みやAmazonの商品リンクなど多く利用されているのも原因ですかね?。。

実装内容

該当のhtmlファイルを以下のように編集します。

// Angularを利用してヘッダー部分を表示する為に利用しています。
<app-service-header
  [serviceName]="serviceName"
  [serviceCategory]="serviceCategory"
  (onClickedClear)="backToTop()"
>
</app-service-header>

// ※外部サイト表示箇所
<div class="iframe-container">
  <iframe
    src="https://angular.jp/"
    frameborder="0"
  ></iframe>
</div>
// ヘッダーの高さを定義しているファイル
@import "../../assets/styles/const.scss";

.iframe-container {
  height: calc(100% - #{$service-header-height});
  iframe {
    width: 100%;
    height: 100%;
  }
}

スクリーンショット 2021-03-04 13.46.51.png

上記のようにする事で、localhost:4200でアクセスしたページ内にAngularドキュメントページを表示させる事に成功しました。

おまけ

iframeのborderやスクロールバーを削除するには、scrolling="no"、frameborder="no"を利用します。scrilling="no"をすると画面が固定になります。

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

フォームの値が変更されたときのみ、誤操作等ページ離脱時にダイアログを出す話

ユーザーが100もあるテキストフォームを入力中に誤操作でページ離脱してしまい、
入力内容全消しになったら萎えて諦めてしまう。
これを解決していく話です。

早速HTMLから書いていく。

※テキストフォーム100は多いので今回は1つのみ、諸々省略

<form name="foo" action="hoge.cgi" method="post">
 <input type="hidden" name="mode" value="foo_edit">

 <div class="question"><span>Q.1</span>好きな食べ物は?</div>
 <div class="answer"><input name="qa1" type="text" onchange="inputChange()"></div>

<input type="submit" value="公開する" id="baseButton" />
<button type="submit" name ="draft" value="qa_draft" id="draftButton">下書き保存する</button>
</form>

続いてJavaScriptを書いていく。

inputタグのフォーム100個addEventListnerで登録しようとしたが、
forEachしたら負けな気がしてHTMLにonchange()を直書きで結局負けました。

formの値の変化をonchangeで検知した状態で、
ページを離脱しようとするとダイアログで警告がされる仕組みです。
※ただし、公開ボタンと、下書き保存をsubmitする場合は除く。

function inputChange(){
    // beforeunloadイベント発火時の処理
    const unloaded = function (event) {
        const confirmMessage = '行った変更が保存されない可能性があります。';
        event.returnValue = confirmMessage;
        return confirmMessage;
    };

    window.addEventListener('beforeunload', unloaded, false);

    // submit時はアラート表示させない
    document.getElementById('baseButton').addEventListener('click', ()=>{
        window.removeEventListener('beforeunload', unloaded, false);
    });
    document.getElementById('draftButton').addEventListener('click', ()=>{
        window.removeEventListener('beforeunload', unloaded, false);
    });
}

これで一旦優勝

かと思いきや、PCでは動いてるけど
自分のスマホ(iPhone SE2)でダイアログが出ない問題に直面。

なんと
beforeunload イベント event.preventDefault() がios Safariが非対応のようです。(JS書くときは最初に確認入れるべきだったと反省。)

代わりにpagehideイベントを使うといいみたいです。でも情報量少なめでなんか難しそう。

UXはQiitaの下書きのように、
自動で保存してくれた方が僕がユーザーだったら安心できると思うけどなあ。

・pagehideイベント実装
・AjaxでPOST送信
色々やってみます。

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