HTMLとCSSの基本記述 { ・CSSはクラスに記述する { エレメントやタグではなくクラスに指定する。 HTMLエレメントにCSSをかくと打ち消しのためのCSSが増える 制限されたCSSをかくと再利用性が下がる クラス名をわかりやすくする } ・CSSプロパティはアルファベット順 ・ HTMLタグとCSSのインデントは半角スペース2 ・CSSのプロパティをまとめる ・色の16進トリプット表記は可能なら３桁表記に ・CSSのネストは孫まで ・CSSのレンダリング速度 ・セレクタのマッチ数を減らすと高速に動作する ・CSSのセレクタは右から順に評価されるため、CSSの指定セレクタが多い場合は動作速度も遅くなる。 ・ベンタープレフィックス { ・各ブラウザごとの草案段階の先行実装や、独自拡張機能であることを判断するための識別子のこと。 メリット { ・ベンダープレフィックス対応のブラウザで、CSSの最新機能を反映できる } デメリット { ・CSSの仕様が固まれば、不要になり廃止される場合がある。 ・その場合、CSSファイルの中に不要なコードが残りCSSファイルを肥大化させる可能性がある。 } } ・JavascriptからアクセスするIDとクラス { JavascriptからIDもしくはクラスを利用する場合は、ブロック名の前に「js-」をつける。 js-がついたクラスは、CSSファイルには記述せず、デザインのスタイルを当てないようにする。 これはスクリプトとデザインで使用されているクラスを明確に分けるため HTMl要素の中に、CSS用のクラスと、JSクラスを作成しておく。 } ・IDにスタイルを当てない { IDはページ内で一つしあk使用できない IDは詳細度の計算を複雑にする ID経由で多重継承したCSSスタイルの継承は、複雑で難易度が高い クラスよりもIDの方が詳細度が強いという理由でのみ、IDにCSSが書かれている現場がある。 } ・インラインスタイル使用不可 { } }
Webページでウィンドウサイズが変化したときに何か処理をさせるのに便利な window.addEventListener("resize", function() {}); ですが、 このまま素の記述で実装してしまうと、スマホのブラウザで表示したときにURLのバーが伸び縮みする動作もウィンドウサイズが変更されたと判定されてしまうので、単にスクロールしただけでイベントが発火してしまいます。 （例：ウィンドウサイズが変更されたときにページをリロードするように記述していた場合、スクロールしてURLバーのサイズが変わるたびにリロードされてしまう。） これはPCブラウザのレスポンシブモードでは確認できない現象なので注意が必要です。 「ウィンドウサイズの変化」とは少し性質が違いますが、 例えばスマホ画面の縦・横の向きが変化したときに処理を発火したい場合などは、 window.addEventListener("orientationchange", function() {}); を使う方がいいかもしれません。
はじめに Vivaldiユーザーです。 スピードダイヤルにブックマークしたサイトのホームページの様子が表示されます。区別しにくいのでロゴ画像を引っ張ってきて、登録していました。 最近、自分で画像を登録する必要のないサイトがあることに気づいたので、HTMLの記述を調べました。 HTML ブラウザーの開発者ツールで確認した内容です。property="og:image" が設定箇所でした。 サンプル teratail ※Qiitaは設定されていませんでした。 以上
前回の記事（Webrickを使って静的なhtmlを返す）の続き 前回作ったページ 投稿フォーム 対応するhtml(一部) <h2>GETで送る</h2> <ul> <form action="/form_get" method="get"> <li><label for="user_name">ユーザー名</label> <input type="text" name="user_name"></li> <li><label for="age">年齢</label> <input type="text" name="age"></li> <button type="submit">投稿</button> </form> </ul> <h2>POSTで送る</h2> <ul> <form action="/form_post" method="post"> <li><label for="user_name">ユーザー名</label> <input type="text" name="user_name"></li> <li><label for="age">年齢</label> <input type="text" name="age"></li> <button type="submit">投稿</button> </form> </ul> 今回は、ユーザーが入力した情報に合わせた動的なページを作成する webrick.rbに追記 webrick.rb require 'webrick' server = WEBrick::HTTPServer.new({ :DocumentRoot => './', :BindAddress => '127.0.0.1', :Port => 8000 }) # 以下追記 server.mount_proc("/form_get") do |req, res| # レスポンス内容を出力 x = req.query body = "<html><body><head><meta charset='utf-8'></head><p>クエリパラメータは#{x}です</p></br> <p>こんにちは#{x["user_name"]}さん。あなたの年齢は#{x["age"]}ですね</p></body></html>" res.status = 200 res['Content-Type'] = 'text/html' res.body = body end server.mount_proc("/form_post") do |req, res| # レスポンス内容を出力 x = req.query body = "<html><body><head><meta charset='utf-8'></head><p>フォームデータは#{x}です</p></br> <p>こんにちは#{x["user_name"]}さん。あなたの年齢は#{x["age"]}ですね</p></body></html>" res.status = 200 res['Content-Type'] = 'text/html' res.body = body end server.start 解説 ※ 追記部分の上段がGETリクエストを受けた場合の処理で下段がPOSTリクエストの処理 ※ reqに入るのはWEBrick::HTTPRequest オブジェクトであるため、WEBrick::HTTPRequest クラスのインスタンスメソッドであるqueryメソッドがreqに対して使える。 ※ queryメソッドは、リクエストのクエリーまたはクライアントがフォームへ入力した値をハッシュにして返すメソッド。 つまり、フォームのユーザー名の欄に「太郎」、年齢の欄に「25」と入力した場合、req.queryの返り値は{ "user_name" => "太郎", "age" => "25" }となる （参考：instance method WEBrick::HTTPServer#mount_proc） 入力情報をGETで送った場合とPOSTで送った場合の違い GETリクエストの場合 フォームのユーザー名の欄に「太郎」、年齢の欄に「25」と入力し、『投稿』を押すと、/form_get?user_name=太郎&age=25に対してGETリクエストを送れる。 これを受けたサーバーは「太郎」「25」に対応したhtml、すなわち『こんにちは太郎さん。あなたの年齢は25ですね』というページを返してくれる。 ユーザーの入力に応じて無限に変化可能なページを返せるので、まさに動的なページである POSTリクエストの場合 フォームのユーザー名の欄に「太郎」、年齢の欄に「25」と入力し、『投稿』を押すと、/form_postに対してPOSTリクエストを送れる。 これを受けたサーバーは「太郎」「25」に対応したhtml、すなわち『こんにちは太郎さん。あなたの年齢は25ですね』というページを返してくれる。 もちろんこちらもユーザーの入力に応じて無限に変化可能なページを返せるので、動的なページが実現している GETとPOSTの違い ユーザーがフォームに情報を入力した場合、GETの場合は/form_get?user_name=太郎&age=25というクエリパラメーターが発行されるのに対して、POSTの場合は発行されない。その代わりにPOSTでは、ユーザーが入力した情報はリクエストbodyのForm Dateに格納される
WEBrickを使ってHTMLを返すというのを学習したので、アウトプットしようと思います。 http://localhost:8000/fom.htmlにアクセスして以下の画面が表示されるようにする （１）まずWEBrickというライブラリを使ってWebサーバーを構築する webrick.rbファイルを作成し以下のコードを記述 webrick.rb require 'webrick' server = WEBrick::HTTPServer.new({ :DocumentRoot => './', :BindAddress => '127.0.0.1', :Port => 8000 }) 解説 ・ require 'ライブラリ' ：外部ライブラリを読み込むメソッド ・server = WEBrick::HTTPServer.new()：newメソッドでWEBrick::HTTPServerクラスからインスタンスを作り、返り値をserverに代入する。 ・:DocumentRoot => './', ：アクセス先はhttp~~/ ・:BindAddress => '127.0.0.1' ：127.0.0.1は自分のパソコンにアクセスできる特別なipアドレス ・:Port => 8000 ：ポート番号8000番 （２）次にHTMLの作成 WEBrickはデフォルトで同一ディレクトリにあるindex.htmlファイルをレスポンスとして返す。なのでwebrick.rbファイルがあるディレクトリにform.htmlディレクトリを作り、そこにindex.htmlを入れる。 これでhttp://localhost:8000/fom.htmlにアクセスしたときにindex.htmlが返ってくる form.html/index.htmlに以下を記述 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h2>GETで送る</h2> <ul> <form action="/form_get" method="get"> <li><label for="user_name">ユーザー名</label> <input type="text" name="user_name"></li> <li><label for="age">年齢</label> <input type="text" name="age"></li> <button type="submit">投稿</button> </form> </ul> <h2>POSTで送る</h2> <ul> <form action="/form_post" method="post"> <li><label for="user_name">ユーザー名</label> <input type="text" name="user_name"></li> <li><label for="age">年齢</label> <input type="text" name="age"></li> <button type="submit">投稿</button> </form> </ul> </body> </html> 解説 action 属性は、フォームで収集したデータを送信すべき場所 (URL) を定義します method 属性は、データを送信するために使用する HTTP メソッド ( get または post ) を定義します name 属性は、送るデータの名前（サーバーはその名前で受け取る） value属性は、入力された値が入る これは、単なる静的なページを返している（HTMLの限界） 次回Rubyを使って投稿者ごとに異なるページを返すプログラムを作る（動的ページの作成）
