はじめに

就活で使用しているポートフォリオにレスポンシブなデザインを取り入れたので書きます。
（私は現在就活中の大学生です）

レスポンシブとは

PC、タブレット、スマホなど異なる画面サイズの幅に合わせて柔軟にデザインを調整し、見やすい最適な表示にすることです。
私の大学のホームページにもつい最近導入されました。（うちの大学は遅れてるのかな？

レスポンシブの導入

レスポンシブなデザインを始める前に、まずHTMLのヘッダーに以下を追記します。

<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

これによりWebページを閲覧している端末の画面サイズに合わせて表示域を調整してくれます。
これをしないとレスポンシブなデザインを作っても、うまく動作しません。（経験済み）

ブレイクポイントを決める

ブレイクポイントとは、CSSを切り替える画面サイズのことです。
以下が端末の一般的なサイズ表です。

端末	サイズ
PC	1024px以上
タブレット	768px以上
スマホ	480px未満

CSSに指定する

上の表を使ってブレークポイントを決めると
以下のようになります。

@media screen and (min-width: 1024px) {
    1024px以上(PC)のCSS
}
@media screen and (min-width: 768px) {
    768px以上(タブレット)のCSS
}
@media screen and (max-width: 480px) {
    480px未満(スマホ)のCSS
}

まとめ

今回の記事では、簡単にですがレスポンシブなデザインを作る方法を書きました。

レスポンシブなデザインはUIの向上やSEO対策などのメリットがある反面、表示が重くなったり単純に作るのが大変だったりします。
しかし、私がユーザー側に立った時には、やはりレスポンシブなデザインのWebページの方が使いやすいと感じます。大学のホームページでとても感じました。
なので、これから私が作るWebページはレスポンシブを考えたものにしたいと思います。

初投稿です。初心者なので理解不足点、お見苦しい文面お許し下さい。

コントローラーからモデル経由で取り出したDBのデータを表示させたいのですがうまくいきません。
やりたい事はhaml記法でビューに取り出したデータを一覧表示させたいです。
試したことはデバックを行いデータ@pruducts@imagesは中身があることはわかりました。
hamlの記法においてendがないのでdo抜けやインデントミスが原因だとは思うのですが見つけることができませんでした。回答いただけましたら幸いです。よろしくお願いします。

products_controller.rb

class ProductsController < ApplicationController

  def index
    @products = Product.includes(:images)
    @images = Image.includes(:product)
  end

  def show
  end

  def new
  end

end

content.html.haml

.header-kari
  仮です！！！！！！
.slider
  .slider__content
    = image_tag 'GuitarWolf2019_a.jpg',width:"300px"
  .slider__content
    = image_tag 'gahag-0097732117.jpg',width:"300px"
  .slider__content
    = image_tag 'J19y54-P_400x400.jpg',width:"300px"

.categoryname-sapce
  .categoryname-sapce__title
    人気のカテゴリ
  .categoryname-sapce__center-space
    .categoryname-sapce__center-space__name1
      レディース
    .categoryname-sapce__center-space__name2
      メンズ
    .categoryname-sapce__center-space__name3
      おもちゃ・ホビー・グッズ
    .categoryname-sapce__center-space__name4
      家電・スマホ・カメラ
.center
  .center__space-a
    .center__space-a__new-item1
      .center__space-a__new-item1__title1
        レディース新着アイテム
      .center__space-a__new-item1__link1
        = link_to "もっとみる"
      .center__space-a__new-item1__image-space
        %ul.space
          %li.space__box
            - @product.each do |product|
              - product.images.each do |image|
            -# = image_tag @products.url, class:'space__box__size'
          -# %li.space__box
          -#   = image_tag @products.url, class:'space__box__size'
          -# %li.space__box
          -#   = image_tag @image.url, class:'space__box__size'
          -# %li.space__box
          -#   = image_tag @image.url, class:'space__box__size'
          -# %li.space__box
          -#   5
          -# %li.space__box
          -#   6
          -# %li.space__box
          -#   7
          -# %li.space__box
          -#   8
          -# %li.space__box
          -#   9
          -# %li.space__box
          -#   10

  .center__space-b
    .center__space-b__new-item2
      .center__space-b__new-item2__title2
        メンズ新着アイテム
      .center__space-b__new-item2__link2
        = link_to "もっとみる" , class:'links'
      .center__space-b__new-item2__image-space
        .center__space-b__new-item2__image-space__image
          ここは写真です
        .center__space-b__new-item2__image-space__imagetest
          testimage

  .center__space-c
    .center__space-c__new-item3
      .center__space-c__new-item3__title3
        メンズ新着アイテム
      .center__space-c__new-item3__link3
        = link_to "もっとみる" , class:'links'
      .center__space-c__new-item3__image-space
        .center__space-c__new-item3__image-space__image
          ここは写真です
        .center__space-c__new-item3__image-space__imagetest
          testimage
  .center__space-d
    .center__space-d__new-item4
      .center__space-d__new-item4__title4
        家電・スマホ・カメラ新着アイテム
      .center__space-d__new-item4__link4
        = link_to "もっとみる" , class:'links'
      .center__space-d__new-item4__image-space
        .center__space-d__new-item4__image-space__image
          ここは写真です
        .center__space-d__new-item4__image-space__imagetest
          testimage

  .center__space-e
    .center__space-e__new-item5
      .center__space-e__new-item5__title5
        おもちゃ・ホビー・グッズ新着アイテム
      .center__space-e__new-item5__link5
        = link_to "もっとみる" , class:'links'
      .center__space-e__new-item5__image-space
        .center__space-e__new-item5__image-space__image
          ここは写真です
        .center__space-e__new-item5__image-space__imagetest
          testimage

.categoryname-sapce
  .categoryname-sapce__title
    人気のブランド
  .categoryname-sapce__center-space
    .categoryname-sapce__center-space__name5
      シャネル
    .categoryname-sapce__center-space__name6
      ルイビトン
    .categoryname-sapce__center-space__name7
      シュプリーム
    .categoryname-sapce__center-space__name8
      ナイキ
.center
  .center__space-a
    .center__space-a__new-item1
      .center__space-a__new-item1__title1
        シャネル新着アイテム
      .center__space-a__new-item1__link1
        = link_to "もっとみる"
      .center__space-a__new-item1__image-space
        .center__space-a__new-item1__image-space__image
          ここは写真です
        .center__space-a__new-item1__image-space__imagetest
          testimage
  .center__space-b
    .center__space-b__new-item2
      .center__space-b__new-item2__title2
        ルイビトン新着アイテム
      .center__space-b__new-item2__link2
        = link_to "もっとみる" , class:'links'
      .center__space-b__new-item2__image-space
        .center__space-b__new-item2__image-space__image
          ここは写真です
        .center__space-b__new-item2__image-space__imagetest
          testimage

  .center__space-c
    .center__space-c__new-item3
      .center__space-c__new-item3__title3
        シュプリーム新着アイテム
      .center__space-c__new-item3__link3
        = link_to "もっとみる" , class:'links'
      .center__space-c__new-item3__image-space
        .center__space-c__new-item3__image-space__image
          ここは写真です
        .center__space-c__new-item3__image-space__imagetest
          testimage
  .center__space-d
    .center__space-d__new-item4
      .center__space-d__new-item4__title4
        ナイキ新着アイテム
      .center__space-d__new-item4__link4
        = link_to "もっとみる" , class:'links'
      .center__space-d__new-item4__image-space
        .center__space-d__new-item4__image-space__image
          ここは写真です
        .center__space-d__new-item4__image-space__imagetest
          testimage

  .center__space-e
    .center__space-e__new-item5
      .center__space-e__new-item5__title5
        おもちゃ・ホビー・グッズ新着アイテム
      .center__space-e__new-item5__link5
        = link_to "もっとみる" , class:'links'
      .center__space-e__new-item5__image-space
        .center__space-e__new-item5__image-space__image
          ここは写真です
        .center__space-e__new-item5__image-space__imagetest
          testimage

完成イメージ

Googleアカウントがあれば、無料のサーバーレス運用ができます。

実際に作ったサイト
https://sites.google.com/view/olympic-paralympic/

さっそく作成

Googleサイトを利用します。
https://sites.google.com/new

右下の＋をクリック

※Googleドライブからも作成できます。

サイトが作成されます。

左上にあるサイトの名前を変更します。（任意）

テキストボックスを見出しに変更して、文字のバランスを整えます。

見出しのタイプをカバーに変更し、続いて画像を変更します。

表題を編集します。
オリンピック・パラリンピックの文字の後ろで改行して、TOKYO２０２０を入力後スタイルを題名に変更、もう一つ改行して2020年7月24日 午後8時 開幕式まであとを入力後スタイルを小見出しに変更します。

※写真は次のサイトの素材を利用させていただきました。
フリー写真素材ぱくたそ

カウントダウン作成

カウントダウンをJavaScriptを使って作成します。
画面右側の挿入から埋め込みをクリックします。

埋め込みコードを選択します。

ここに、htmlでコードを記入します。
一般的にはテキストエディタで作成して貼り付けるみたいです。

<!DOCTYPE html>
<html lang="ja">
  <head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width",initial-scale=1>
    <title>Countdown</title>

<style type="text/css">
  /*書式初期化*/
  html,body,h1,h2,h3,h4,ul,ol,dl,li,dt,dd,p,div,span,img,a,table,tr,th,td {
  border: 0;
  font-size: 100%;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

body {
/*フォント設定*/
  color:#FFFFFF;
  font-size: 300%;
  text-align: center;
  font-family: 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

</style>

  </head>

  <body>
    <div id="countOutput"></div>
    <script LANGUAGE="JavaScript">
     function dateCounter() {

    var timer = setInterval(function() {
    //現在の日時取得
    var nowDate = new Date();
    //カウントダウンしたい日を設定
    var anyDate = new Date("2020/7/24 20:00:00");
    //日数を計算
    var daysBetween = Math.ceil((anyDate - nowDate)/(1000*60*60*24)-1);
    var ms = (anyDate - nowDate);
    if (ms >= 0) {
        //時間を取得
        var h = Math.floor(ms / 3600000);
        var _h = h % 24;
        //分を取得
        var m = Math.floor((ms - h * 3600000) / 60000);
        //秒を取得
        var s = Math.round((ms - h * 3600000 - m * 60000) / 1000);

        //HTML上に出力
        document.getElementById("countOutput").innerHTML = daysBetween + "日と" +_h + "時間" + m + "分" +s + "秒";

        if ((h == 0) && (m == 0) && (s == 0)) {
        clearInterval(timer);
        document.getElementById("countOutput").innerHTML = "経過しました";
        }
    }else{
        document.getElementById("countOutput").innerHTML = "経過しました";
    }
    }, 1000);
}
dateCounter();
    </script>  

  </body>

</html>

次へをクリックします。

フォントが白のため、真っ白に見えます。
信じて挿入をクリックします。

下に挿入されるので、先程作成した表題の下にドラッグアンドドロップします。

カウントダウンのフィールドを選択し、縮めるなどして調整します。
出来たら、右上の公開ボタンをクリックします。

最後にウェブへの公開設定をします。
希望のウェブアドレスを入力し、サイトを閲覧できるユーザー等設定後、公開ボタンをクリックします。

公開すると、右上の公開の横にある下三角ボタンをクリックするとサイトを確認することができます。

おわりに

以上、Googleサイトを利用して、簡単にカウントダウンサイトを作る方法でした。
Googleアカウントがあれば、だれでもそのまま利用できるので、とても便利です。
JavaScriptで動かすので、ディスプレイに映し出してサイネージとしても利用できるかと思います。一時的にとか、ちょこっと的なときに、少しでも役立っていただけたら嬉しく思います。

完成イメージ

Googleアカウントがあれば、無料のサーバーレス運用ができます。

実際に作ったサイト
https://sites.google.com/view/olympic-paralympic/

さっそく作成

Googleサイトを利用します。
https://sites.google.com/new

右下の＋をクリック

※Googleドライブからも作成できます。

サイトが作成されます。

左上にあるサイトの名前を変更します。（任意）

テキストボックスを見出しに変更して、文字のバランスを整えます。

見出しのタイプをカバーに変更し、続いて画像を変更します。

表題を編集します。
オリンピック・パラリンピックの文字の後ろで改行して、TOKYO２０２０を入力後スタイルを題名に変更、もう一つ改行して2020年7月24日 午後8時 開幕式まであとを入力後スタイルを小見出しに変更します。

※写真は次のサイトの素材を利用させていただきました。
フリー写真素材ぱくたそ

カウントダウン作成

カウントダウンをJavaScriptを使って作成します。
画面右側の挿入から埋め込みをクリックします。

埋め込みコードを選択します。

ここに、htmlでコードを記入します。
一般的にはテキストエディタで作成して貼り付けるみたいです。

<!DOCTYPE html>
<html lang="ja">
  <head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width",initial-scale=1>
    <title>Countdown</title>

<style type="text/css">
  /*書式初期化*/
  html,body,h1,h2,h3,h4,ul,ol,dl,li,dt,dd,p,div,span,img,a,table,tr,th,td {
  border: 0;
  font-size: 100%;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

body {
/*フォント設定*/
  color:#FFFFFF;
  font-size: 300%;
  text-align: center;
  font-family: 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

</style>

  </head>

  <body>
    <div id="countOutput"></div>
    <script LANGUAGE="JavaScript">
     function dateCounter() {

    var timer = setInterval(function() {
    //現在の日時取得
    var nowDate = new Date();
    //カウントダウンしたい日を設定
    var anyDate = new Date("2020/7/24 20:00:00");
    //日数を計算
    var daysBetween = Math.ceil((anyDate - nowDate)/(1000*60*60*24)-1);
    var ms = (anyDate - nowDate);
    if (ms >= 0) {
        //時間を取得
        var h = Math.floor(ms / 3600000);
        var _h = h % 24;
        //分を取得
        var m = Math.floor((ms - h * 3600000) / 60000);
        //秒を取得
        var s = Math.round((ms - h * 3600000 - m * 60000) / 1000);

        //HTML上に出力
        document.getElementById("countOutput").innerHTML = daysBetween + "日と" +_h + "時間" + m + "分" +s + "秒";

        if ((h == 0) && (m == 0) && (s == 0)) {
        clearInterval(timer);
        document.getElementById("countOutput").innerHTML = "経過しました";
        }
    }else{
        document.getElementById("countOutput").innerHTML = "経過しました";
    }
    }, 1000);
}
dateCounter();
    </script>  

  </body>

</html>

次へをクリックします。

フォントが白のため、真っ白に見えます。
信じて挿入をクリックします。

下に挿入されるので、先程作成した表題の下にドラッグアンドドロップします。

カウントダウンのフィールドを選択し、縮めるなどして調整します。
出来たら、右上の公開ボタンをクリックします。

最後にウェブへの公開設定をします。
希望のウェブアドレスを入力し、サイトを閲覧できるユーザー等設定後、公開ボタンをクリックします。

公開すると、右上の公開の横にある下三角ボタンをクリックするとサイトを確認することができます。

おわりに

以上、Googleサイトを利用して、簡単にカウントダウンサイトを作る方法でした。
Googleアカウントがあれば、だれでもそのまま利用できるので、とても便利です。
JavaScriptで動かすので、ディスプレイに映し出してサイネージとしても利用できるかと思います。一時的にとか、ちょこっと的なときに、少しでも役立っていただけたら嬉しく思います。

フォームのJavaScript、フォームのCSSも併せてご覧ください。

要素

form

html

<form name="myForm" action="example.php" method="POST" enctype="multipart/form-data" autocomplete="off"></form>

form要素の属性	内容
name	フォームの名前
action	送信先
enctype	application/x-www-form-urlencoded(初期値)、multipart/form-data(type="file"使用時)、text/plain
method	フォーム送信時にブラウザーが使用するHTTPメソッド
autocomplete	入力補完(on/off/default)

autocomplete属性は、offにしてもブラウザーで無視されてしまう事があるので、自動入力を使用しているユーザーのために適切に設定しておくと良いです。

input

inputのtype	内容
text	(デフォルト)1行テキストボックス 2行以上にわたる長い文章を入力させたい場合は、textarea要素を使う
password	パスワード 入力したテキストがアスタリスク(*)などに置き換えて表示(データ自体は暗号化されない)
checkbox	複数選択が可能(checked属性であらかじめチェックの付いた状態にできる)
radio	ラジオボタン 複数の中から一つしか選択できない　name属性で同じ名前を付けて同じグループ (checked属性であらかじめチェック)
file	ファイル送信
hidden	隠しデータ
search	検索テキスト
tel	電話番号
url	URL
email	メールアドレス
number	数値
range	レンジ
color	色

inputのtype(時間系)	内容
datetime	UTC(協定世界時)による日時の入力欄を作成
date	日付の入力欄を作成
month	月の入力欄を作成
week	月の入力欄を作成
time	時間の入力欄を作成
datetime-local	UTC(協定世界時)によらないローカル日時の入力欄を作成

inputのtype(ボタン系)	内容
submit	送信ボタン
reset	リセットボタン それまでに入力した情報をキャンセルして初期状態に戻す
button	汎用ボタン
image	画像のボタン src属性で使用する画像ファイル指定 alt属性必須

selectbox

html

<select name="bloodtype">
  <option value="A">A型</option>
  <option value="B">B型</option>
  <option value="O">O型</option>
  <option value="AB">AB型</option>
</select>

datalist

selectboxとの違い：選択後に文字修正が可能です。

html

<input type="text" name="city" list="citylist">
  <datalist id="citylist">
  <option value="東京">
  <option value="大阪">
  <option value="福岡">
</datalist>

textarea

html

<textarea name="名前" cols="40" rows="8"></textarea>

textareaの属性	内容
cols	一行の文字数
rows	行数

button

html

<button type="button">ボタン</button>

buttonの属性	内容
type	reset/submit/button

label

input、textarea、select要素にはラベルを付けられます。
labelと入力欄を関連付けすると、labelクリック時に入力欄にフォーカスを与えたりアクティブにできます。
ヒット領域を拡大できるで操作しやすくなります。

html

<label for="label-item">ラベルの文言</label>
<input type="text" name="item" id="label-item">

fieldset

各要素はfieldsetタグで囲むとグループ化できます。
グループ自体にキャプションを付ける時はlegend要素を使用します。

html

<fieldset>

  <legend>趣味</legend>

  <input type="checkbox" name="hobby" value="listenmusic" id="label-listenmusic">
  <label for="label-listenmusic">音楽鑑賞</label>

  <input type="checkbox" name="hobby" value="readbook" id="readbook">
  <label for="label-readbook">読書</label>

  <input type="checkbox" name="hobby" value="watchmovie" id="label-watchmovie">
  <label for="label-watchmovie">映画鑑賞</label>

  <input type="checkbox" name="hobby" value="playgame" id="label-playgame">
  <label for="label-playgame">ゲーム</label>

</fieldset>

属性

name属性

フォーム部品に名前をつけられます。

id属性

labelのforと要素のidを揃えるとlabelと要素の紐づけができます。

name属性とid属性の違い

id/name	違い
id	JavaScriptでそのタグを指定するため
name	入力された値をPHPなどで送信するため

value属性

送信される値を指定します。

size属性

inputでは幅を指定します。
selectでは表示する項目数を指定します。

maxlength属性

最長の長さを指定します。
フォーム自体に入力制限がかかります。
(自由に入力できる系のみ)

html

<input type="password" maxlength="8">

minlength属性

最短の長さを指定します。
満たしていない場合、送信ボタンを押した時にエラーが表示されます。
(自由に入力できる系のみ)

html

<input type="password" minlength="4">

autocomplete属性

html

<input type="text" name="username" autocomplete="name">

名前	内容
name	姓名
honorific-prefix	接頭辞や敬称 ("Mr."、"Ms."など)
given-name	名(ファーストネーム)
additional-name	ミドルネーム
family-name	姓(ファミリーネーム、ラストネーム)
honorific-suffix	接尾辞や敬称("Jr."、"II"など)
nickname	ペンネームやハンドルネーム
username	ユーザー名またはアカウント名

住所	内容
street-address	住所　複数行のテキストが使用できる　市町村名、郵便番号、国名は含めない
address-line1	番地・マンション名(1行目)　street-address" が存在する場合のみ使用可能
address-line2	番地・マンション名(2行目)　street-address" が存在する場合のみ使用可能
address-line3	番地・マンション名(3行目)　street-address" が存在する場合のみ使用可能
address-level4	第4管理水準
address-level3	第3管理水準
address-level2	第2管理水準　市町村名
address-level1	第1管理水準　都道府県名(アメリカでは州名)
country	国コード
country-name	国名
postal-code	郵便番号(アメリカではZIPコード)

組織	内容
organization-title	職名や組織内の肩書
organization	企業名や団体名

言語	内容
language	優先言語

生年月日	内容
bday	生年月日の全体
bday-day	生年月日の日
bday-month	生年月日の月
bday-year	生年月日の年

性別	内容
sex	性別

電話番号	内容
tel	国番号を含む、完全な電話番号
tel-country-code	国コード
tel-national	国番号以外の電話番号全体(市外局番の接頭辞を含む)
tel-area-code	市外局番(必要な場合市外局番の接頭辞を含む)
tel-local	国番号や市外局番を含まない電話番号(市内局番+加入者番号)
tel-local-prefix	市内局番
tel-local-suffix	加入者番号
tel-extension	内線番号

web、メッセージング	内容
email	メールアドレス
impp	インスタントメッセージのアドレス
url	URL
photo	画像のURL

パスワード	内容
new-password	新しいパスワード
current-password	現在のパスワード
one-time-code	ワンタイムコード

支払い手段	内容
cc-name	氏名の全体
cc-given-name	名(ファーストネーム)
cc-additional-name	ミドルネーム
cc-family-name	姓(ファミリーネーム、ラストネーム)
cc-number	クレジットカード番号、口座番号など
cc-exp	有効期限( "MM/YY" や、"MM/YYYY" の形)
cc-exp-month	有効期限の月
cc-exp-year	有効期限の年
cc-csc	セキュリティコード
cc-type	種類("Visa"や、"Master Card")

通貨	内容
transaction-currency	決済に使う通貨
transaction-amount	決済する金額

pattern属性

正規表現で入力値のパターンを指定します。
ルールに沿わない状態で、送信ボタンを押すとエラーメッセージが出ます。
(自由に入力できる系のみ)

html

<form action="sample.php">
  <p>半角英数で入力してください</p>
  <input type="text" name="userid" pattern="^[0-9A-Za-z]+$">
  <input type="submit" value="送信">
</form>

placeholder属性

入力欄に初期表示する内容を指定します。

html

<input type="search" name="searchword" placeholder="キーワードを入力">

readonly属性

ユーザーによるテキスト編集を不可にして読み取り専用にします。

html

<input readonly type="text" value="読取専用">

required属性

入力必須にします。
未入力のまま「送信」を押すとエラーメッセージが出ます。

html

<form action="sample.php">
  <p>入力必須です。</p>
  <input type="text" name="yourname" required>
  <input type="submit" value="送信">
</form>

disabled属性

html

<input disabled type="text" value="変更不可">

accept属性

type=fileでアップロードできるファイルの種類を指定します。

html

<input type="file" accept="image/png, image/jpeg">

ファイルタイプ	記述
text/html	HTML
text/xml	XML
text/css	CSS
text/plain	テキスト
text/csv	CSV
image/png	PNG
image/jpeg	JPEG
image/gif	GIF
audio/mpeg	MP3
video/mpeg	MPEG
video/mp4	MP4
application/pdf	PDF

multiple属性

emailとfileで複数の項目を選択します。
fileの場合はアップロードする時に複数のファイルを一括選択してアップロードできます。

html

<input multiple="multiple" type="file">

step属性

numberやrangeで数値を刻みます。
(数値や日付系のみ)

html

<input type="range" step="20" min="0" max="100">

max属性

最大値を指定します。
(数値や日付系のみ)

min属性

最小値を指定します。
(数値や日付系のみ)

autofocus属性

フォームの先頭の項目などにつけておくと、最初の入力欄をクリック(タップ)する手間が省けます。
1つ目の項目は入力しやすい項目にしておきます。

html

<label>入力1：</label>
<input type="text">

<label>入力2：</label>
<input type="text" autofocus>

Hugoでブログを書いているのだが，markdown中にhtmlのコードを直書きしたところ反映されなかったので，解決方法を備忘録的に書き留めておく．

結論

configに以下を追加する．

config.toml

[markup.goldmark.renderer]
unsafe= true

どうやらHugo 0.60.0以降では，markdown中に生のhtmlを書くと，出力されるhtmlでは
<!-- raw HTML omitted -->
と省かれてしまうようだ．

http://www.htmq.com/css3/background-size.shtml

個人的には日本で初めての試みだと思っている。
ある程度習熟したフロントエンジニアが
本気で写経したらどうなるかを4時間ノーカットで撮影した。

なぜそんなことをしたか

JavaScriptに詳しくて優秀なひとが
マークアップで苦戦する姿を何度か見たことがある。

手際の良さや、どういう思考回路で実装しているかは
非常に言語しずらいため教材になりにくい。

そういった方々に向けて、
ある程度マークアップのできる自分が仕込み無しのライブコーディングを公開することで
成長のヒントになれば良いと思った。

業界あるある　〜CSSナメられがち〜

HTMLやCSSは仕事の単価が低い。
いつか自動化されるとも思っている。

しかし、いまの時代はまだ
フロントエンドのエンジニアがマークアップをすることは珍しくない。

もしあなたが現役のフロントエンジニアで
いくらJavaScriptに詳しくても、マークアップが遅かったり品質が悪かったりすると
第三者からみたときにトータルで仕事が遅いと思われたり、品質がよくないなと思われてしまう。
これは本当にもったいない。

Mizchiさんみたいに
自分の個性を自覚してポジショニングできるひとだったらまだしも

ほとんどのエンジニアは
この現実から逃れられることはできないと思うので
私はフロントエンドエンジニアでも
マークアップの練習をしてほしいなという考えを持っている。

お題

Youtubeのチャンネルページ

ルール

• 画像のレイアウトを写経してください
• アイコンとかはなんでもいいです。(アイコンの再現は必要ないです)
• JSは必要ないです(react, vueも使わない)
• PCのみでおっけーです

結果

動画

最後ちょっとスタミナ切れてますね..。

https://youtu.be/bVjp_1l_l6Y

ブラウザにcookieを保存する場合、下記のコードで可能です。

print (
    'Set-Cookie:{0}={1}; '
    'path=/; '
    'expires=Fri, '
    '5-May-2027 00:00:00 GMT;'.format(key, value))

実行し、他のscript実行すると、保存できません。予想ではhttpの環境が変更されるためだと思われます。

redirectすると保存できますので、cookieを保存しすぐにredirectしましょう。

webサーバとPythonでwebを構築しています。構築していくうちに、新たなページを作成し、古いページを統合する時があります。
閲覧者がブックマークで登録したページがある場合は、閲覧者にアドレスが変わったことを通知しなくてはなりません。

そこで古いページから新しいページにリダイレクトさせる方法があります。

#!/usr/bin/env python
# -*- coding:utf-8 -*-
import cgi

form = cgi.FieldStorage()

all_query = '?'
for key in form:
    all_query = all_query \
                + key \
                + '=' \
                + form[key].value + '&'
all_query = all_query[0:len(all_query) - 1]

print ('content-type: text/html; charset=UTF-8\n')
html_body = """\
<html><body>
<script>    
    window.location = '/any.py{0}';
</script>
</body></html>
""".format(all_query)
print (html_body)

これで、ブックマークの変更依頼をせずに済みます。

webサーバとPythonでwebを構築しています。構築していくうちに、新たなページを作成し、古いページを統合する時があります。
閲覧者がブックマークで登録したページがある場合は、閲覧者にアドレスが変わったことを通知しなくてはなりません。

そこで古いページから新しいページにリダイレクトさせる方法があります。

#!/usr/bin/env python
# -*- coding:utf-8 -*-
import cgi

form = cgi.FieldStorage()

all_query = '?'
for key in form:
    all_query = all_query \
                + key \
                + '=' \
                + form[key].value + '&'
all_query = all_query[0:len(all_query) - 1]

print ('content-type: text/html; charset=UTF-8\n')
html_body = """\
<html><body>
<script>    
    window.location = '/any.py{0}';
</script>
</body></html>
""".format(all_query)
print (html_body)

これで、ブックマークの変更依頼をせずに済みます。

色々と試しましたが、この方法が最適です。web serverとしても、localで起動する場合も文字化けしません。

import io
import os
import sys


if type(sys.stdout) == io.TextIOWrapper:
    sys.stdout = io.TextIOWrapper(
        sys.stdout.buffer, 
        encoding='utf-8')

色々と試しましたが、この方法が最適です。web serverとしても、localで起動する場合も文字化けしません。

import io
import os
import sys

html_body = 'HTMLの形式です'

if type(sys.stdout) == io.TextIOWrapper:
    sys.stdout = io.TextIOWrapper(
        sys.stdout.buffer, 
        encoding='utf-8'
print ('Content-type: text/html; charset=UTF-8\r\n')
print (html_body)

明日からプログラミングスクールに通います。

年齢的にもかなりアウェイ感は否めないと思うけどそんな事気にせず
自分のやりたいことで稼ぐ力を身につけたい。

ほんの触りだけhtml学んだくらいの超初心者だけど新しいこと学べるのは楽しみ。