前書き 前回は電卓のフロントエンド的な部分を作成したので、 今回は実際に処理をする部分をJavascriptで書いていきます。 といっても、今回で全部作るわけではなく（まだコードを途中までしか考えてない） 数字ボタンだけです。 なるべく早く他の機能も実装できるように、授業中に頑張って考えてきますｗ コード書く 今回実装するのは数字入力だけなのでめちゃくちゃ簡単です。 var dispnum function num(x) { dispNum=document.getElementById("disp").value; dispNum=dispNum*10+x; document.getElementById("disp").value=dispNum; } htmlにも変更を加えます <input type="text" id="disp"> テキストボックスにdispというidを追加します。 説明 語彙力ない俺に説明できるかわかりませんが動作を解説します。 最初の行の dispNum=document.getElementById("disp").value; でjavascriptのdispNum変数をテキストボックスにある数値と同じにします。 次に dispNum=dispNum*10+x; でもとから入力されていた数値を十倍（繰り上がり）してから、 引数として渡された数値を加算する処理をしています。 最後に document.getElementById("disp").value=dispNum; でテキストボックスに表示されている内容を更新します。 次回に続きます。 まだ数字を入力できるようにしかなっていないので、 次回、計算処理をする部分のスクリプトを書きます。 明後日（金曜日）くらいには書けるかと思います。 今回のコードをcodepenというサイトに書いておいたので、 良かったら見てってください。 https://codepen.io/xtzi9859/pen/PoWROQv

はじめに 最近Javascriptの勉強を始めて、練習で電卓的なものを作ろうと思ったのでついでに記事を書いてみました。 初投稿ですので読みづらいところとか多いと思います。 最初のこの記事ではHTMLを書いていきます。 JS使うのは次の記事あたりだと思います。 コード書いてく まずはHTMLで数値を入力するボタンや計算結果を表示するテキストボックスなどを作成します。 bodyタグの内側だけ書きます。 tableを使って整形していますが、DIVタグとかとCSSを組み合わせたりする方法もあると思います。 id属性などの設定をまだしていないので（こういうところ手際悪い）次回以降細かい所の修正が入ると思います。 数字入力ボタンのonclickだけ指定しておきました。 関数numってやつです。 足し算しかボタンがないですがそこも後で追加します <input type="text"> <table> <tr> <td><input type="button" value="7" onclick="num(7)"></td> <td><input type="button" value="8" onclick="num(8)"></td> <td><input type="button" value="9" onclick="num(9)"></td> </tr> <tr> <td><input type="button" value="4" onclick="num(4)"></td> <td><input type="button" value="5" onclick="num(5)"></td> <td><input type="button" value="6" onclick="num(6)"></td> </tr> <tr> <td><input type="button" value="1" onclick="num(1)"></td> <td><input type="button" value="2" onclick="num(2)"></td> <td><input type="button" value="3" onclick="num(3)"></td> </tr> <tr> <td><input type="button" value="0" onclick="num(0)"></td> <td><input type="button" value="="></td> <td><input type="button" value="+"></td> </tr> </table> 今回はとりあえず終わり こんな感じで書くと下のスクショみたいになります。 まだ見た目だけなので次回以降Javascriptを書いて実際に動くものにしていきます。 （＾ω＾）ノシ 次回:https://qiita.com/xtzi/items/39ead5a6ca83f39d3a86

結論 HTMLタグの後に、 "#{@hoge.username}が#{@hoge.display_created_at}に投稿" と書く。 ポイント ●""で囲う ●さらに入れ後で#{}でRubyのコードを入れる ●DBのカラムではなく、メソッドを作成した方が好ましい

したいこと GitHub Pageの総閲覧数とかを知りたい やったこと GitHub Pagesでサイト作成 Google Analyticsを用いてアクセス解析 方法 GitHub Pagesのサイトはあるという前提。 こちらの記事を参考に作成した。 私のページはこちら Google Analyticsにログイン プロパティを追加 左下の[管理] をクリック [+ プロパティを作成] ボタンをクリック プロパティ名: 適当に github-pages とした タイムゾーン： 日本 通貨: 日本円 作成 [ウェブ] をクリック [ウェブサイトのURL]に解析したい自分の GitHub Page の URL を入力 [ストリーム名] はあらかじめ 「ウェブサイト」 と入力されていたのでそのまま入力 [ストリーム作成] ボタンをクリック [データストリーム] > [ウェブ] > [ウェブサイト] をクリック（さっき作った名前のはず） ページ中段の [タグ設定手順] の [新しいページ上のタグを追加する] > [グローバルサイトタグ...]のプルダウンを開く コピペして使えるコードが出てくるので、それをコピーし GitHub Pagesの index.htmlの タグの中に書き込む <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=[自分のID]"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '[自分のID]'); </script> これで公開したらOK 結果 解析できてる！ 何か間違ってそうならコメントくださいー

※勉強メモです。 <<-PAGE ... PAGE：ヒアドキュメント形式 改行が重なるような文字列の記述に向く この間に記述したものを、ターミナルでrubyとして実行すると、単に文字列のHTMLが表示される(HTMLをRubyで実行して表示) ・ERBを使ってRubyコードをHTMLに埋め込む <%.. Rubyコード..%>や<%=..Rubyコード..%>をHTMLに埋め込む 「result」メソッドで埋め込まれたコードを実行し、最終的にHTMLに出力する機能 require 'erb' #ERBライブラリの読み込み def web_page ... <p><%= Time.now %></p> ... end erb = ERB.new(web_page) #ERBオブジェクトのインスタンス生成 result = erb.result #ERB内のRubyコード実行 puts result #文字列表示 ・Webサーバーと起動してRubyを自動的に実行させる 「Webサーバー-Pumaとは」 Webサーバー：HTTPリクエストを受取り、HTMLなどのWebページをHTTPレスポンスとして返すサーバのこと Puma：RubyやRails標準のWebサーバー ・Gem Rubyのライブラリ（便利機能をパッケージングした拡張機能） ・Webサーバーの起動 Sinatra：軽量なWebアプリケーションフレームワーク Sinatra では、views フォルダの中には erb ファイルのみを配置し、views/ フォルダの中の index.erb が今までの HTML に埋め込んできた ERB となり、このように独立のファイルとして作成 app.rb　には、HTTPリクエストが来たときのWEBアプリの処理を記述 require 'sinatra' #Sinatraの読込み get '/' do #トップページ(/)にHTTPリクエストのGETメソッドが来た時に対処する処理(do ~ end) erb :index #views/index.erb内の埋込Rubyの実行結果として出力されたHTMLをレスポンスとして返す end ・Webサーバーの起動 sinatra-webフォルダに移動$ cd ~/enviromnet/sinatra-ewb Pumaの起動$ ruby app.rb -o $IP -p $PORT 「フォームデータの送受信」 ・GETとPOST ブラウザからHTTPリクエストを送る際の技術的な仕様 ・GET：基本的にほかユーザーにも表示される情報 　リンクをクリックしたとき 　ブラウザのURL欄に直接URLを打込んだとき 　ブラウザで検索ボタンを押したとき ・POST：ほかユーザーに見られたくない情報の送信 　問合せフォームで内容を入力し、送信ボタンをクリックしたとき 　IDとパスワードを入力し、ログインボタンをクリックしたとき ・POSTでフォームから情報を送信する (例)名前を入力し送信 (view/index.erb) #送信先の指定：/(トップ) POSTメソッド指定：method="POST" <form action="/" method="POST"> <label>名前: <input type="text" name="target_name"></label> <input type="submit" value="送信"> </form> ・POSTで送信した情報を受け取って処理する target_nameを処理する (app.rb)に以下追加 post '/' do erb :index end ※app.rb を変更する度、Puma を再起動(Ctrl+c) ・index.erbでPOSTデータ受取り (view/index.erb) <% name = params['target_name'] %> ★HTTPリクエストのPOSTメソッドで送ったデータはRubyのparams(Parameters・パラメータの略)に格納される POSTメソッドで、ユーザーからHTMLのform要素(入力フォーム)を通してデータを受け取れる 受取ったデータはparamsという変数に自動的に格納される(paramsはハッシュ)

※学習時のメモです。 Bootstrapとは HTML、CSS、JavaScriptからなる巨大なライブラリ（コード集） twitterのような見た目のサイトを作る為の部品が多い Bootstrap4の利用には、jQueryとpopper.jsを利用する * Bootstrapの読込み CDNを使う：Bootstrapなどの公開ライブラリを自由に使えるよう、Web上に設置(ホスティング)してくれるサービス Bootstrapの「Quick start」ならびに「Starter template」のサンプルコードをコピーして使う。ただし lang="en" を lang="ja" にする 〔Bootstrap Template〕 <!DOCTYPE html> <html lang="ja"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS, then Font Awesome --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script> </body> </html> * viewportの設定 スマホ対応の為に設定する viewport：スマホ、PC画面の表示領域。head要素内のmetaタグで指定。 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> ↑Bootstrapのテンプレに記載されたコードの意味? ・表示領域の横幅をデバイスと同じ横幅にする （width=device-width) ・表示倍率を1倍にする（initial-scale=1） ・iOSのSafariで表示倍率を自動的に縮小を無効化（shrink-to-fit=no） ●レスポンシブデザイン：多様な画面サイズに適応する様に配慮しながらページを作成する手法 基本はメディアクエリ：特定の表示環境に対してだけCSSを適用 ※CSSの優先順位には影響しない為、上方に広い条件、下方に狭い条件を記述 表示内容が切り替わるサイズ幅?ブレイクポイント ●グリッドシステム：横幅全体が12カラム(列)で構成、横幅に割り当てるカラム数を指定し、要素を配置していく (使い方) ①グリッドを使う範囲を囲うブロック要素にcontainerクラスをつける。 ②containerのブロック中にブロック要素のrowクラスを用意 ③rowの中に要素を配置し、カラム数を設定 ・カラム数の指定：col-[画面サイズ]-[カラム数] <div class="container"> <div class="row"> <div class="col-md-6">col-md-6</div> <div class="col-md-6">col-md-6</div> </div> </div> col-md-6 ?　ｳｲﾝﾄﾞｳ幅がmd(ﾀﾌﾞﾚｯﾄ=768px)以上の時に6ｶﾗﾑ分を使用、それ未満は通常のdivの挙動で横幅100％ col-　：～575px スマホ縦 col-sm- ：576～767px スマホ横 col-md-* ：768～991px タブレット col-lg-* ：992～1199px デスクトップPC ※異なるサイズを同時に指定すると、サイズが大きいものが優先される。col-6 col-lg-4と指定→スマホとタブレットでは6カラム、デスクトップでは4カラム幅になる。 ・隙間を空ける offset-[画面サイズ]-[カラム数] <div class="offset-md-2 col-md-5">offset-md-2 col-md-5</div> ●Bootstrap HTMLの見た目をBootstrapのようにキレイにするには、基本的にclassを指定する ・<table>要素(表)にclass="table"をつけるだけで見栄えが良くなる 他にも… table-striped:行ごとに背景色が交互に変わる table-borderd:各セルに枠がつく table-hover:マウスを乗せると行がハイライトされる table-sm:余白を詰めてコンパクトに ∴class属性を複数指定も可 <table class="table table-striped…"> ・< input>要素にform-controlクラスを付けるだけで、かっこよくなる。 また、各要素をブロックレベル要素で囲み、`form-groupクラス追加で、要素間に余白が入る形でフォーム部品が配置される。 <form> <div class="form-group"> お名前 <input type="text" class="form-control"> </div> </form> ・横に並べる：Bootstrapでは通常、フォームの各要素は横幅100%で表示され、縦に並ぶ。要素の左右にラベル（ 要素）を配置したい場合、グリッドのところで説明したrowやcol-*-*クラスを利用する ラベルにはcol-form-labelクラスを追加 ・アクセサリをつける ①アクセサリをつけたい部品の親要素にinput-groupクラスをつける ②アクセサリをつけたい要素自身にもクラスを付与 input-group-prependで左端(要素の前)、 input-group-appendで右端(要素の後ろ)にアクセサリ追加 アクセサリに表示したい文字列は要素で囲い、input-group-textクラスを追加 <form> 郵便番号 <div class="form-group input-group"> <!-- 左端につけるアクセサリ --> <div class="input-group-prepend"> <span class="input-group-text">〒</span> </div> <input type="text" class="form-control" placeholder="000-0000"> </div> </form> ・ボタン (< a>< button>< input>)を、Bootstrap風の見た目のボタンに変更 btnおよびbtn-[色の種類]クラスを追加 <a href="#" class="btn btn-primary">aボタン</a> <input type="submit" class="btn btn-primary" value="inputボタン"> <button class="btn btn-primary" type="submit">buttonボタン</button> btn-blockクラス追加で、指定カラム数の幅に対して100％幅表示 <div class="row"> <div class="col-8">xxx</div> <div class="col-4"> <button type="button" class="btn btn-primary btn-block">Block level button</button> <button type="button" class="btn btn-secondary btn-block">Block level button</button> </div> </div> ・ドロップダウンメニュー 親要素< div>にdropdown-menu、子要素< a>にdropdown-itemクラスを追加(ul、liは使わない) <div class="dropdown"> <button type="button" class="btn btn-light dropdown-toggle"data-toggle="dropdown"> 操作 </button> <!-- 選択肢 --> <div class="dropdown-menu"> <a class="dropdown-item" href="#">返信</a> <a class="dropdown-item" href="#">転送</a> <div class="dropdown-divider"></div> <!--区切り線？--> <a class="dropdown-item" href="#">削除</a> </div> </div> ・タブを使ったナビゲーション 複数コンテンツを切替え表示したいときに使う。タブのナビゲーションを使う事で、今どのコンテンツが表示されているかが分かりやすい。 < ul>にnavとnav-tabsクラス、< li>にnav-itemクラス、< a>にnav-linkクラスを追加。「現在このコンテンツを表示しています」状態を表示するには、< a>にactiveクラス追加。 <ul class="nav nav-tabs"> <li class="nav-item"><a href="#" class="nav-link active">収入</a></li> <li class="nav-item"><a href="#" class="nav-link">支出</a></li> <li class="nav-item"><a href="#" class="nav-link">合計</a></li> </ul> ・ナビゲーションバー サイト上部につくメニュー。横幅で表示を切り替え。 ①ベースのナビゲーションバーを作る (1)< nav>要素にnavbarとnavbar-expandクラス追加 (2)バーの中に表示する内容の色決め。navbar-lightで背景色明るく、navbar-darkで暗め。 (3)背景色はbg-[色の種類]追加。今回はbtn-light (4)左端に表示されるサイト名は< a>要素で囲みリンク設定。必ずnavbar-brandを追加する。 ②メニュー項目を追加 (1)リスト< ul>を追加し、各メニュー項目はリストアイテム< li>にする。また、リンクとして設定。 (2)< ul>にnavbar-nav、< li>へnav-item、< a>にnav-linkクラス追加。 (3)どのコンテンツを表示しているかを分かりやすくするために、該当のメニュー項目にactiveクラスを追加。 ③ドロップダウン型のメニュー項目追加 ドロップダウンを開くとサブメニューが表示されるよう設定 (1)追加するリストアイテムの< li>にdropdownクラスを追加 (2)追加したリストアイテムの< a>にdropdown-togleクラス追加 (3)サブメニューは追加したリストアイテムの下に、ドロップダウンメニューセクションで紹介したのと同じように< div>< a>追加 (4)ドロップダウン化した< a>にdata-toggle="dropdown"属性を追加 ④スマホ画面幅の場合、メニューを折りたたむ (1)< nav>につけていたnavbar-expandをnavbar-expand-[画面サイズ(lgやsm)]にする。※グリッド参照 画面サイズ未満の時、メニュー表示が変わる。 (2)3本線のボタンを用意。以下のような< button>要素を追加。 これをサイト名のリンク(< a href="#" class="navbar-brand">)直前に書くとボタンは左側、リンク直後に書くと右側に表示される。 <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav-bar"> <span class="navbar-toggler-icon"></span> </button> (3)<ul class="navbar-nav">の要素を加工親要素< div>を記述。 その< div>にcollapseとnavbar-collapseクラスを追加し、id="nav-bar"というid属性を追加。 nav-barというIDは3本線の< button>でdata-target="#nav-bar"と設定したことによる。data-targetの設定内容を変更している場合、その内容と< div>のID属性が同じ名前になるようにする。 <nav class="navbar navbar-expand-sm navbar-light bg-light"> <!-- ホームへ戻るリンク。ブランドロゴなどを置く。 --> <a href="#" class="navbar-brand">P&amp;K</a> <!-- 横幅が狭いときに出るハンバーガーボタン --> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav-bar"> <span class="navbar-toggler-icon"></span> </button> <!-- メニュー項目 --> <div class="collapse navbar-collapse" id="nav-bar"> <ul class="navbar-nav"> <li class="nav-item active"><a href="#" class="nav-link">子犬</a></li> <li class="nav-item"><a href="#" class="nav-link">子猫</a></li> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">会社情報</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">ビジョン</a> <a class="dropdown-item" href="#">会社概要</a> <a class="dropdown-item" href="#">地図</a> <a class="dropdown-item" href="#">沿革</a> </div> </li> <li class="nav-item"><a href="#" class="nav-link">お問い合わせ</a></li> </ul> </div> </nav> ⑤バッジ（ラベル） テキストなどに装飾したい場合、badgeと```badge-[色の種類]クラスを追加。 ・ボタンの中で件数表示するバッジ ボタンの表示内容に数値を追加し、新着通知の件数を表示するには、数値を< span>で囲み、badgeとbadge-pill,badge-[色の種類]の3つのクラスを追加。 <button class="btn btn-primary"> 受信トレイ <span class="badge badge-pill badge-light">7</span> </button> ⑥アラート：何らかのアクションを行ったときに結果を表示 alertとalert-[色の種類]クラスを追加 (ユーザー登録などに成功・失敗した結果など) ⑦カード 情報をグループ化したいときに、ブロック要素にcardクラスを追加するだけ。 cardクラスの要素の中に、タイトル用ブロック(card-headerクラスを付けた要素)と、本文用ブロック(card-bodyクラスを付けた要素)を中に入れる。 <div class="card"> <div class="card-header"> 新着情報 </div> <div class="card-body"> <a href="#">友達リクエストが1件あります</a><br /> <a href="#">メッセージが3件届いています</a><br /> <a href="#">今日開催のイベントがあります</a><br /> </div> </div> (参考) ユーティリティクラス：margin,paddingなどのCSSを書かなくて済む。 ・marginとpadding 用意された命令を使い、[余白の種類][余白の場所]-[余白の大きさ]の記述で使う。 たとえばmt-1 なら「ほんの少しの margin-top の余白」、pb-4 なら「割と広い padding-bottom の余白」となる ・border ブロック要素に罫線を引くborderクラス、border-[罫線の場所]クラスがある。 ・text-align(文字の寄せ) text-[寄せる方向] ・Flexboxモデル 横並びにしたい複数要素を囲った親要素にd-flexとflex-lowクラスをつける。 要素を寄せる方向や各要素間の余白を、justify-contentクラスで決められる。 justify-content-start左寄せ(要素間余白なし) justify-content-end右寄せ(要素間余白なし) justify-content-center中央寄せ(要素間余白なし) justify-content-between最初が左端、最後が右端、残りは均等余白で justify-content-aroundすべて均等な余白で ⑦外部アイコン追加(Font Awesome) ・BootstrapのHTMLテンプレートの< body>の下方、< script>の要素が記述されている場所に、以下を入れる。 <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script> ・Font Awsomeでアイコンを選び、詳細ページで記述方法が表示されるので、タグの文字列にカーソルを合わせコピー。 コピーした記述を使いたい場所にペースト。

はじめに 自分のメモ帳みたいなものです． WebアプリケーションであるNginxにて日本語が文字化けしてしまったのでその解決策の1つを書きます． ソースコードはこちら なおReactを使っています <!DOCTYPE html> <html> <head> <script src="http://fb.me/react-0.13.3.js"></script> <script src="http://fb.me/JSXTransformer-0.13.3.js"></script> </head> <body> <div id="app"></div> <script type="text/jsx"> var HelloWorld = React.createClass({ render: function() { return ( <p>Hello!World!(ハローワールド)</p> ); } }); var m = React.render(<HelloWorld />, document.getElementById('app')); </script> </body> </html> 解決法 <head>の中に下記を挿入するだけ <meta http-equiv="content-type" charset="UTF-8"> ということで最終的なソースコードがこちら <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" charset="UTF-8"> <script src="http://fb.me/react-0.13.3.js"></script> <script src="http://fb.me/JSXTransformer-0.13.3.js"></script> </head> <body> <div id="app"> <script type="text/jsx"> var HelloWorld = React.createClass({ render: function() { return ( <p>Hello!World!(ハローワールド)</p> ); } }); var m = React.render(<HelloWorld />, document.getElementById('app')); </script> </body> </html> 結果としてもしっかりと日本語が表示されるようになりました． 終わりに 本当はconfファイル等を編集するのがいいと思いますが，ひとまず緊急の際は参考にしてください．

どうも7noteです。HTMLのheadタグ内に書く要素をコピペで使えるようにまとめました。 headタグ<head>の中には様々な要素を書きますが、予め書いておくと良い要素をまとめてみました。 googleアナリティクスを設定する位置なども含めてまるっとコピペで使えるようにしています。 最初はコピペや初期セットで対応できますが、少しずつ開発経験が増えてくれば独自で書き込む機会が増えると思います。 開発経験を積んで、サイトごとに合わせたオリジナルのheadタグを作れるように少しずつ覚えていけるといいですね。 headタグまわりは私自身もまだまだ勉強中です。 2021年headタグ完成例（コピペ可） index.html <!DOCTYPE html> <html> <head prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# website: https://ogp.me/ns/（ページの種類）#"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="format-detection" content="email=no,telephone=no,address=no"> <title>（サイトタイトル）</title> <meta name="description" content="（ページの説明）"> <meta name="robots" content="index,follow"> <meta property="og:admins" content="（FBのID）"> <meta property="og:title" content="（サイトタイトル）"> <meta property="og:type" content="（ページの種類）"> <meta property="og:description" content="（ページの説明）"> <meta property="og:url" content="（ページのURL）"> <meta property="og:image" content="（ogp画像のURL）"> <meta property="og:locale" content="ja_JP"> <meta property="og:site_name" content="（サイトタイトル）"> <meta name="twitter:card" content="（カード種類）"> <meta name="twitter:site" content="（@Twitterユーザー名）"> <link rel="canonical" href="（正しいページURL）"> <link rel="stylesheet" href="（cssのURL）" media="screen"> <script type="text/javascript" src="（jsのURL）"></script> <link rel="icon" href="favicon.ico"> <link rel="apple-touch-icon-precomposed" href="（アップルタッチアイコンの画像URL）"> <!-- （googleアナリティクスを入れる箇所①） --> <!-- （他アナリティクス等を入れる箇所） --> </head> <body> <!-- （googleアナリティクスを入れる箇所②） --> <header> </header> <main> </main> <footer> </footer> <script type="text/javascript" src="（ここにjsのURL）"></script> </body> </html> ※HTML5で記述しています。 ※IE10以前は考慮していません。 ※head内にかけるものすべてを書いているわけではありません。 解説 ▼ headタグ <head prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# website: https://ogp.me/ns/（ページの種類）#"> 〜〜〜 </head> 本日の主役。 prefix属性はogp設定の一種。設定は以下の通り。 ■トップページの設定 <head prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# website: https://ogp.me/ns/website#"> ■記事ページの設定 <head prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# article: https://ogp.me/ns/article#"> 引用：Facebook for Developers ▼ 文字コードの指定 <meta charset="utf-8"> 必須です。必ず書きましょう。指定は「utf-8」に設定しておきましょう。「utf-8」以外にすることはほぼないです。 ▼ IE向け最適化 <meta http-equiv="X-UA-Compatible" content="IE=edge"> IEでwebサイトを閲覧する場合、互換モードを適応させずに、最新のIEでの表示に切り替える設定です。 IEをEdgeにリダイレクトさせている場合は設定不要です。（IEをEdgeに強制リダイレクトする方法） ▼ ビューポート設定 <meta name="viewport" content="width=device-width, initial-scale=1.0"> レスポンシブサイトを作る上では必須の設定です。必ず設定しましょう。 ▼ 電話・メールアドレスの自動リンクを無効化 <meta name="format-detection" content="email=no,telephone=no,address=no"> ブラウザによって、リンクにしたくないのに勝手にリンクにする機能を搭載しているもの（iosのSafari等）があります。 リンクになると効くcssも変わってくるのでレイアウトが崩れないよう設定しておくことをオススメします。。 ▼ サイトのタイトル <title>（サイトタイトル）</title> そのまんまです。googleの検索結果ページにも表示されるので、目安は32文字くらいまで。 ▼ ページの概要 <meta name="description" content="（ページの説明）"> こちらも必須。タイトル同様googleの検索結果ページにも表示されるので、目安は50〜120文字くらいまで。 （PC：120文字 スマホ：50文字） ▼ 検索許可・拒否設定、クロール許可・拒否設定 <meta name="robots" content="index,follow"> 以下の通り。公開してOKというページは上の通りindex,followの両方を指定しておく。もしくは指定なし。 誤ってindexとnoindexの両方を設定した場合は基本的にnoindexが優先される。 低品質なページ⇒noindex,nofollow 検索結果ページ⇒noindex,nofollow タグ/日付別ページ⇒noindex,follow トップページやカテゴリーページの2ページ目以降⇒noindex,follow 引用：サルワカ（https://saruwakakun.com/html-css/basic/meta-tag） ▼ OGP <meta property="og:admins" content="（FBのID）"> <meta property="og:title" content="（サイトタイトル）"> <meta property="og:type" content="（ページの種類）"> <!-- TOPページ等は「website」 、それ以外は「article」でOK--> <meta property="og:description" content="（ページの説明）"> <meta property="og:url" content="（ページのURL）"> <meta property="og:image" content="（ogp画像のURL）"> <meta property="og:locale" content="ja_JP"> <meta property="og:site_name" content="（サイトタイトル）"> <meta name="twitter:card" content="（カード種類）"> <meta name="twitter:site" content="（@Twitterユーザー名）"> SNSなどでシェアされたときの表示を設定できる。 以下を参考に設定しましょう。 ・FBのIDの調べ方 ・ogpの設定方法 ▼ カノニカル（正規URL） <link rel="canonical" href="（正しいページURL）"> 引数がついてるページや、URLが違うけど全く似たようなページがある場合、「このページと同じです」とgoogleのクローラーに知らせるためのもの。 設定しておくことで、ページの評価が分散せず1つに集中するのでSEO効果が見込める。あくまで見た目がほぼ全く同じページ同士で使うもの。 ▼ cssやjsを読み込む <link rel="stylesheet" href="（cssのURL）" media="screen"> <script type="text/javascript" src="（jsのURL）"></script> 必要なcssやjsを読み込みます。 ただし、大量に読み込むとページの読み込み速度が遅くなるので、すぐに必要でないjsなどはbodyタグの最後の方に書くことをオススメ。 ▼ ファビコン・アップルタッチアイコン <link rel="icon" href="favicon.ico"> <link rel="apple-touch-icon-precomposed" href="（アップルタッチアイコンの画像URL）"> ファビコンとアップルタッチアイコンを設定します。少なくともファビコンは目に留まるので、指定しておきたいところ。 ひな形には入れなかったけど場合によって必要になるもの ▼ windowsのタイル用の設定 <meta name="msapplication-TileImage" content="（画像のURL）" /> <meta name="msapplication-TileColor" content="（カラーコード）"/> 個人的にはあまりこだわりのない箇所なのでなくてもいいかなと・・・ 企業向けなどでなく、一般人の人が見るスマホサイトなら必須ないかなと判断しました。 ▼ RSSフィード <link rel="alternate" type="application/rss+xml" title="（フィード）" href="（フィードページのURL）" /> RSSリーダーがそのサイトのRSSフィードを見つけることができる指定。 個人的にはRSS配信しているものを拾って欲しい！ということはあまりないので外しました。 ▼ PCスマホが別サイトの場合 <link rel="alternate" media="only screen and (max-width: 640px)" href="（モバイルページのURL）" /> レスポンシブサイトで作成することがほとんどですので、必要ないかなと思います。 PCとスマホが別URLになる場合は設定しておくことで、検索エンジンへスマホページの存在を知らせることができます。 ▼ 別のURLの外国語サイト <link rel="alternate" hreflang="（外国語ページのURL）" /> こちらも必要なときにあればいいかなと。 ▼ プリフェッチ <link rel="dns-prefetch" href="（プリフェッチさせたいドメイン名）" /> サイトから他サイトのドメインへ移行するときのウェブページ読み込み速度を早めることができる模様。 正直まだ使ったことがないので効果がわからないが、外部サイトへのリンクが多いページなどにも有効のようですね。 使われるサイトは限られているのかなと。情報求ム。 あまり意味のないmetaやlinkタグたち <meta name="keywords" content="（（キーワード）を,で区切って指定）"> <!-- SEO的効果はないとされているので不要、むしろスパム扱いの危険性ありなので書かないほうがよい --> <meta name="author" content="Chris Mills"> <!-- 著作者名を記載できるが、あまり意味はないので不要。 --> <link rel="prev" href="（前のページのURL）"> <!-- 2019年くらいにgoogleが非対応を発表 --> <link rel="next" href="（次のページのURL）"> <!-- 2019年くらいにgoogleが非対応を発表 --> <link rel="author" href="（Google+のアカウントページのURL）"> <!-- google+ のサービス終了 --> <link rel="publisher" href="Google+のアカウントページのURL）"> <!-- google+ のサービス終了 --> <meta name="copyright" content="（©著作者）" /> <!-- コピーライトは見える箇所に<small>などを使って表記しましょう --> <meta http-equiv="refresh" content="（秒数）;url=（リンク先のURL）"> <!-- ページリダイレクト。.htaccess等を使うのが一般的なので不要。 --> <meta name="google" content="notranslate" /> <!-- 「翻訳しますか？」のアラートを消すことができる。無効化する必要性はないかと。 --> <!-- 他にも不要なmetaタグたち --> <meta name="topic" content="（概要・説明文）"> <meta name="summary" content="（ページ概要）"> <meta name="subject" content="（ページの主題）"> <meta name="abstract" content="（ページの要約）"> <meta name="page-topic" content="（要約,要約）"> <meta name="medium" content="（ページの種類）"> <meta name="classification" content="（ジャンル名,ジャンル名,ジャンル名）"> <meta name="pagename" content="（ページタイトル）"> <meta name="build" content="（サイトの構築日）" /> <!-- 例）2012-08-05T09:10:10+09:00--> <meta name="creation_date" content="（サイトの作成日）"> <meta name="date" content="（サイトの更新日）"> <meta name="Expires" content="（サイトの削除日）"> <!-- December 31, 2021 --> <meta name="revisit_after" content="（クロール再訪問日を指定）"> <meta name="reply-to" content="（連絡先）"> <meta name="language" content="（言語の指定）"> <meta name="content-language" content="ja"> <meta http-equiv="content-language" content="ja"> <meta name="Targeted Geographic Area" content="Japan"> <meta name="coverage" content="worldwide"> <meta name="rating" content="（対象年齢のカテゴリ）"> <meta name="distribution" content="（meta対象範囲）"> まとめ headタグに書くことのできるmetaタグって正直大量にありすぎて全部を覚えるのは不可能。 だからこそコピペで使えるオリジナル初期セットを持つことが大事だなと思います。 予めいつも使うのを用意しておけば、なにか1行書き忘れることもなくなりますし、多めに書いておいて不要なものがあればそこから削除していくだけでいいのでメンテナンス性も良。 この記事としてはコピペで使えるようにまとめていますが、ぜひ自分がいつもよく使うhead初期セットを作ってみてください。 おまけですが、さらに詳しくmetaタグを知りたい方は以下のサイトがとても情報量が多かったのでオススメです。 ただ情報が2018年と少し古い可能性もあるので検索しながら最新情報と比べつつ利用ください。 〜参考〜 https://saruwakakun.com/html-css/basic/meta-tag https://saruwakakun.com/html-css/basic/link-rel https://saruwakakun.com/html-css/basic/head https://www.itti.jp/web-design/header-meta/ https://www.bugbugnow.net/2020/02/X-UA-CompatibleIE-edge.html https://tcd-theme.com/2016/07/facebook-3.html https://doteki.jp/entries/blog/need-slash-end-of-meta-tag https://itomakihitode.jp/term/?p=dns_prefetch https://www.suzukikenichi.com/blog/google-no-longer-supports-rel-prev-or-rel-next/ https://www.suzukikenichi.com/blog/dns-prefetching/ おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ

Flexboxを使って国旗を作る 目標：Flexboxの基礎を理解するため テキストエディターはVSCode. ～codeを書き始める前の準備～ ・構成を考える！　何をどんな風に、どうやって作るのか？ 　ある程度、最初に決めておくと後が楽になります。 　例　アイルランドの国旗を調べる 　　　<div>は何個必要なのか？ 　　　class属性名はどうしようか？ 　　　 ・紙とペンで実際に枠を書いてみる（添付画像参照） ここまで出来たらcodeを書いていきます♪ ※head部分は省略 　<body> <div class="ireland">　 <div class="ire1">みどり</div>　 <div class="ire2">しろ</div>　　 <div class="ire3">おれんじ</div> </div> </body> .ireland { width: 450px; height: 300px; border: 1px solid black; margin: 0px auto;　　※画面中央用 } .ire1 {　background-color: green;} .ire2 {　background-color: white;} .ire3 {　background-color: orange;} 上記の状態を一旦確認 上記のCSSの『親要素にdisplay: flex』をつける。 .ireland { width: 450px; height: 300px; border: 1px solid black; margin: 0px auto; display: flex; ※ } Flex.boxの大元である、display: flex;を『親要素』に付けた。 見た目が、重なっていた<div>が横並びに変化。 みどり、しろ、おれんじの幅をflex-growを使って伸ばします flex-growは『子要素』に付ける 間違えやすいポイントなので気をつけて .ire1 { background-color: green; flex-grow: 1; ※ } .ire2 { background-color: white; flex-grow: 1;　※ } .ire3 { background-color: orange; flex-grow: 1;　※ } 最後に、<div>みどり　しろ　オレンジ</div>の文字を消して 完成です！！！ まとめ Flexboxを使う際の、display: flexは必ず親要素につけてあげる。 上手に反応しない場合のチェック箇所でもあります。 親要素に付けていると思ったら子要素 孫要素に付けていた場合もありそれに気づかず苦戦しました。 最後に。『アイルランド、イタリア、フランス、ベルギーetc』 にも応用できます。 是非皆様も実践してみてください。 ありがとうございます 今回は以上です。