20190915のHTMLに関する記事は6件です。

投稿日：2019-09-15T17:30:44+09:00

promptはrenderで消える

編集画面を作る際にpromptが消失した

MVCの流れで呼び出される時

renderで呼び出す時

実際のコード
.main__product__delivery__h2-choice
  = f.collection_select :delivery_method_id, @deliveryMethods, :id, :name, prompt: "---"
  = fa_icon "chevron-down", class: "main__product__delivery__sell-box__icon"
どうやら仕様らしい…？

Select prompt option disappears when validation fails in Rails
https://stackoverflow.com/questions/4060737/select-prompt-option-disappears-when-validation-fails-in-rails
You can achieve the results you want by setting :include_blank to the string you were using for prompt.

とのことなのでpromptからinclude_blankに書き換え
.main__product__delivery__h2-choice
  = f.collection_select :delivery_method_id, @deliveryMethods, :id, :name, include_blank: "---", 
  = fa_icon "chevron-down", class: "main__product__delivery__sell-box__icon"
"---"自体は存在していることが確認できたのであとは"---"が初期値として選択されていればOK！
最終的なコード

RubyonRails:collection_selectにデフォルト値を設定する
https://madogiwa0124.hatenablog.com/entry/2018/05/12/210801

こちらのサイトを参考にして
.main__product__delivery__h2-choice
  = f.collection_select :delivery_method_id, @deliveryMethods, :id, :name, { include_blank: "---", selected:"" }
  = fa_icon "chevron-down", class: "main__product__delivery__sell-box__icon"
結論

prompt: "---"を{ include_blank: "---", selected:"" }に書き換える！

　 Tweet
Qiitaで続きを読む

投稿日：2019-09-15T17:23:31+09:00

33分でポートフォリオサイトを作成しデプロイする裏技とは！？

33分でポートフォリオサイト作成

「未経験者が転職少しでもアピールするためには、ポートフォリオサイトを作った方がいい」

私は未経験からWebエンジニアを目指してプログラミンングスクールに通っているのですが、この言葉を同期から聞いて、正直焦りました。

もう就職活動に動き始めている段階で、Githubのリポジトリーだけを見せるつもりだったからです。

実際に同期の人のポートフォリオサイトを見せてもらうと、自分で作ったものやカリキュラムで作ったものを簡単に紹介できたり、自分の自己紹介ができたりするので結構目を引きました。

ということで、自分も作るべきなのではないか？と思いました。

ただし時間が、、、。

ということで今回手軽にできる方法をいろいろ調べた結果、Bootstrapのテンプレートを使う方法がめちゃくちゃ手軽だったので、それを紹介したいと思います。

なぜ33分かというと、30分でポートフォリオサイトを作り、Githubを使って3分でデプロイするという内訳です。

すでに書くことを決めていたらコピペするだけなので可能です。

完成後は下記のようになります。

自分の好きなテンプレートを見つけよう

下記のサイトから自分の好きなテンプレートを見つけ、ダウンロードします。

https://templatemag.com/bootstrap-templates/

ちなみに自分はこれを選びました。

https://templatemag.com/demo/Kelvin/

ダウンロードしたテンプレートをVSCodeで編集

ダウンロードしたBootstrapのテンプレートをVSCodeで開きます。

そして経歴やポートフォリオの説明などの文章を、元の文から書き変えましょう。

書き変えた後は、画像を入れ替えます。

まず、自分が入れ替えたい画像を、imgフォルダ下に配置します。

配置した後、
src="img/〜"
というコードがimgタグにあるので、~の部分に、画像の拡張子までつけた自分の入れたい画像の名前に書き換えます。

背景画像を変えたい場合には、CSSフォルダのstylesheetにある、
background: url(../img/〜) no-repeat center top;
という〜の部分を、自分の表示させたい画像の名前に書き変えましょう。

以上でポートフォリオサイト作りは終わりです。

微調整も必要だと思うので、そこは適宜HTMLタグを増やしたり、CSSの指定を変えたりしてください。

Githubを使って3分でデプロイ

ポートフォリオサイトのようにデータベースとの連携がない場合には、Githun場で簡単にデプロイできます。

手順は、このポートフォリオサイトを自分のGithubのリポジトリとして追加した後、そのリポジトリ内でSettingsをクリック。

GitHub Pagesという見出しのSourceという欄がNoneになっているので、これをmaster branceに変更。

変更したらURLが生成されます。

そのURLが、あなたのポートフォリオサイトがデプロイされた状態です。

これだけで終わりです。

いやめちゃくちゃ簡単ですね。

メリット・デメリット

Bootstrapのテンプレートを使用する場合、やはりメリットは手軽にできることです。

おそらく、ここまでこの文章を読んでくれた人はご理解いただけたと思います。

ただしデメリットもあります。

それは、HTML/CSS/JavaScriptの勉強にはならないということ。

当たり前っちゃ当たり前なのですが、テンプレートですでにほとんどのデザインが完成されているので、あまり手を加える必要がありません。

そのため、HTML/CSS/JavaScriptの勉強をしながら、ポートフォリオサイトを作りたいといった人にはおすすめできないです。

これを理解した上で、手軽にポートフォリオサイトを作りたいといった人にはおすすめです。

注意点

Bootstrapのテンプレートを使用する場合、

という文章があるので、下記のコードのクレジットは消してはいけません。

Bootstrapのテンプレートで手軽にポートフォリオサイトを作れる

Bootstrapのテンプレートを使用すれば、手軽にポートフォリオサイトを作れます。

ただしデメリットや注意点もあるので、それを承知した上で今回紹介した手順で作りたいと思った人は、ぜひ参考にしてみてください。

　 Tweet
Qiitaで続きを読む

投稿日：2019-09-15T17:23:31+09:00

33分でポートフォリオサイトを作成・デプロイまでする裏技とは！？

33分でポートフォリオサイト作成

「未経験者が転職のために少しでもアピールするには、ポートフォリオサイトを作った方がいい」

私は未経験からWebエンジニアを目指してプログラミンングスクールに通っているのですが、この言葉を同期から聞いて、正直焦りました。

もう就職活動に動き始めている段階で、GitHubのリポジトリーだけを見せるつもりだったからです。

実際に同期の人のポートフォリオサイトを見せてもらうと、自分で作ったものやカリキュラムで作ったものを簡単に紹介できたり、自分の自己紹介ができたりするので結構目を引きました。

ということで、自分も作るべきなのではないか？と思いました。

ただし時間が、、、。

ということで今回手軽にできる方法をいろいろ調べた結果、Bootstrapのテンプレートを使う方法がめちゃくちゃ手軽だったので、それを紹介したいと思います。

なぜ33分かというと、30分でポートフォリオサイトを作り、3分でGitHubを使ってデプロイするという内訳です。

すでに書くことを決めていたらコピペするだけなので可能です。

完成品は下記のようになります。

ポートフォリオサイトの作り方

それではどうやって、33分でポートフォリオサイトを作るのか説明していきます。

① 自分の好きなテンプレートを見つけよう

下記のサイトから自分の好きなテンプレートを見つけ、ダウンロードします。

https://templatemag.com/bootstrap-templates/

ちなみに私はこれを選びました。

https://templatemag.com/demo/Kelvin/

② ダウンロードしたテンプレートをVSCodeで編集

ダウンロードしたBootstrapのテンプレートをVSCodeで開きます。

そして経歴やポートフォリオの説明などの文章を、元の文から書き変えましょう。

書き変えた後は、画像を入れ替えます。

まず、自分が入れ替えたい画像を、imgフォルダ下に配置します。

配置した後、
src="img/〜"
というコードがimgタグにあるので、~の部分に、画像の拡張子までつけた自分の入れたい画像の名前に書き換えます。

背景画像を変えたい場合には、CSSフォルダのstylesheetにある、
background: url(../img/〜) no-repeat center top;
という〜の部分を、自分の表示させたい画像の名前に書き変えましょう。

以上でポートフォリオサイト作りは終わりです。

微調整も必要だと思うので、そこは適宜HTMLタグを増やしたり、CSSの指定を変えたりしてください。

③ GitHubを使って3分でデプロイ

ポートフォリオサイトのようにデータベースとの連携がない場合には、GitHubで簡単にデプロイできます。

手順は、このポートフォリオサイトを自分のGitHubのリポジトリとして追加した後、そのリポジトリ内でSettingsをクリック。

GitHub Pagesという見出しのSourceという欄がNoneになっているので、これをmaster branchに変更。

変更したらURLが生成されます。

そのURLが、あなたのポートフォリオサイトがデプロイされた状態です。

これだけで終わりです。

いやめちゃくちゃ簡単ですね。

メリット・デメリット

Bootstrapのテンプレートを使用する場合、やはりメリットは手軽にできることです。

おそらく、ここまでこの文章を読んでくれた人はご理解いただけたと思います。

そしてレスポンシブデザインにも対応しているので、スマホで見てもビューが崩れません。

素晴らしすぎますね。

ただしデメリットもあります。

それは、HTML/CSS/JavaScriptの勉強にはならないということ。

当たり前っちゃ当たり前なのですが、テンプレートですでにほとんどのデザインが完成されているので、あまり手を加える必要がありません。

そのため、HTML/CSS/JavaScriptの勉強をしながら、ポートフォリオサイトを作りたいといった人にはおすすめできないです。

これを理解した上で、手軽にポートフォリオサイトを作りたいといった人にはおすすめです。

注意点

Bootstrapのテンプレートを使用する場合、

という文章があるので、無料で使う場合、下記のコードのクレジットは消してはいけません。

Bootstrapのテンプレートで手軽にポートフォリオサイトを作れる

Bootstrapのテンプレートを使用すれば、手軽にポートフォリオサイトを作れます。

ただしデメリットや注意点もあるので、それを承知した上で今回紹介した手順で作りたいと思った人は、ぜひ参考にしてみてください。

　 Tweet
Qiitaで続きを読む

投稿日：2019-09-15T17:23:31+09:00

【転職希望者必見】33分でポートフォリオサイトを作成・デプロイまでする裏技とは！？

33分でポートフォリオサイト作成

「未経験者が転職のため少しでもアピールするには、ポートフォリオサイトを作った方がいい」

私は未経験からWebエンジニアを目指してプログラミンングスクールに通っているのですが、この言葉を同期から聞いて、正直焦りました。

もう就職活動に動き始めている段階で、Githubのリポジトリーだけを見せるつもりだったからです。

実際に同期の人のポートフォリオサイトを見せてもらうと、自分で作ったものやカリキュラムで作ったものを簡単に紹介できたり、自分の自己紹介ができたりするので結構目を引きました。

ということで、自分も作るべきなのではないか？と思いました。

ただし時間が、、、。

ということで今回手軽にできる方法をいろいろ調べた結果、Bootstrapのテンプレートを使う方法がめちゃくちゃ手軽だったので、それを紹介したいと思います。

なぜ33分かというと、30分でポートフォリオサイトを作り、3分でGithubを使ってデプロイするという内訳です。

すでに書くことを決めていたらコピペするだけなので可能です。

完成後は下記のようになります。

自分の好きなテンプレートを見つけよう

下記のサイトから自分の好きなテンプレートを見つけ、ダウンロードします。

https://templatemag.com/bootstrap-templates/

ちなみに自分はこれを選びました。

https://templatemag.com/demo/Kelvin/

ダウンロードしたテンプレートをVSCodeで編集

ダウンロードしたBootstrapのテンプレートをVSCodeで開きます。

そして経歴やポートフォリオの説明などの文章を、元の文から書き変えましょう。

書き変えた後は、画像を入れ替えます。

まず、自分が入れ替えたい画像を、imgフォルダ下に配置します。

配置した後、
src="img/〜"
というコードがimgタグにあるので、~の部分に、画像の拡張子までつけた自分の入れたい画像の名前に書き換えます。

背景画像を変えたい場合には、CSSフォルダのstylesheetにある、
background: url(../img/〜) no-repeat center top;
という〜の部分を、自分の表示させたい画像の名前に書き変えましょう。

以上でポートフォリオサイト作りは終わりです。

微調整も必要だと思うので、そこは適宜HTMLタグを増やしたり、CSSの指定を変えたりしてください。

Githubを使って3分でデプロイ

ポートフォリオサイトのようにデータベースとの連携がない場合には、Githubで簡単にデプロイできます。

手順は、このポートフォリオサイトを自分のGithubのリポジトリとして追加した後、そのリポジトリ内でSettingsをクリック。

GitHub Pagesという見出しのSourceという欄がNoneになっているので、これをmaster branchに変更。

変更したらURLが生成されます。

そのURLが、あなたのポートフォリオサイトがデプロイされた状態です。

これだけで終わりです。

いやめちゃくちゃ簡単ですね。

メリット・デメリット

Bootstrapのテンプレートを使用する場合、やはりメリットは手軽にできることです。

おそらく、ここまでこの文章を読んでくれた人はご理解いただけたと思います。

そしてレスポンシブルデザインにも対応しているので、スマホで見てもビューが崩れません。

素晴らしすぎますね。

ただしデメリットもあります。

それは、HTML/CSS/JavaScriptの勉強にはならないということ。

当たり前っちゃ当たり前なのですが、テンプレートですでにほとんどのデザインが完成されているので、あまり手を加える必要がありません。

そのため、HTML/CSS/JavaScriptの勉強をしながら、ポートフォリオサイトを作りたいといった人にはおすすめできないです。

これを理解した上で、手軽にポートフォリオサイトを作りたいといった人にはおすすめです。

注意点

Bootstrapのテンプレートを使用する場合、

という文章があるので、下記のコードのクレジットは消してはいけません。

Bootstrapのテンプレートで手軽にポートフォリオサイトを作れる

Bootstrapのテンプレートを使用すれば、手軽にポートフォリオサイトを作れます。

ただしデメリットや注意点もあるので、それを承知した上で今回紹介した手順で作りたいと思った人は、ぜひ参考にしてみてください。

　 Tweet
Qiitaで続きを読む

投稿日：2019-09-15T17:07:21+09:00

[css]pxや%などのサイズ指定について

始めに

cssのサイズ指定をする際、pxや%など色々な単位がありますが、どれが一番適切なのかよく理解出来ていなかったので自分なりにまとめていきたいと思います。

pxについて

pxは絶対値なので値を指定する事でどの様な画面でもそのサイズに固定して表示させる事が出来ます。使用はしやすいですが、レスポンシブ対応する際は、融通が効かないので不具合が出る可能性が高くなります。
.test {
    font-size: 16px;
  }
%について

%は相対値なので親要素の値によって値が変化します。デフォルトは16pxなのでその値を基準に何%かを表示させる事が出来ます。
レスポンシブサイトを作成する際は後ほど説明しますremを親要素の値として使用し子要素に%を使用する事で画面の拡大、縮小する際に自動的に文字のサイズを変更する事が可能になります。
.html {
    font-size: 16px;
  }
.test {
    font-size: 200%;
  }
この場合のfont-sizeの値は32pxになります。

emについて

emも同じ相対値かつ使用方法は%とあまり変わりません。%で表現しますと1em＝100%となります。
.html {
    font-size: 16px;
  }
.test {
    font-size: 2em;
  }
この場合のfont-sizeの値は32pxになります。

remについて

remも相対値でレスポンシブ画面にも対応できる単位となります。[root em]の略でremです。%やemは親要素の値を参照して表示されますが、remの場合だとルート、つまりhtmlのサイズを基準に表示する事が出来ます。
なので%やemの入れ子構造の問題に悩まされる事がない為、修正もしやすくなります。
.html {
    font-size: 16px;
  }
.test {
    font-size: 2rem;
  }
この場合のfont-sizeの値は32pxになります。

vw/vhについて

vmはviewport widthの略でビューポートの幅の事で、vhはviewport heightの略でビューポートの高さの事です。ビューポートとはユーザーが見ている画面に対しての表示の事です。
vwは、画面の横幅を100として、その割合でフォントサイズを指定します。つまり、1vwの大きさとは、画面サイズの1/100という意味になります。これは高さを意味するvhも同じです。
この他にもvmaxとvminがあります。
画像をフルスクリーンで表示させる場合の使用方法は
.fullscreen {
  width: 100%;
  height: 100vh;
  padding: 40vh;
}
となります。

まとめ

cssって本当奥が深いですね。レスポンシブ対応させる場合はこの辺りを理解する必要がありそうです。正直言葉足らずな所もありますので、以下の記事も参考して頂けたらと思います。
https://creive.me/archives/16915/#px
https://qiita.com/39_isao/items/e8242901ba1aadb75676

　 Tweet
Qiitaで続きを読む

投稿日：2019-09-15T01:47:16+09:00

イケてるマウスカーソルをPure JavaScriptで実装する

結果

See the Pen Cool UI - Mouse Chaser 01 by Loki (@loki__codepen) on CodePen.

追従するマウスカーソルについて

ここ最近、マウスカーソルに装飾をするサイトが増えてきている気がします。
自作するのは面倒なので、多くの制作者は以下のサイトのコードをコピーすることも多いでしょう。

イケてるマウスカーソルを簡単に実装する | 株式会社エヴォワークス -EVOWORX-
https://www.evoworx.co.jp/blog/mouse-stoker-gsap/

jQueryを利用して書かれています。
Webサイトの制作であればjQueryを利用しない機会はあまりないと思いますが、記述をPure JavaScriptに調整したものを作成しましたので、共有いたします。

ソースコード
const 
  cursor = document.getElementById('js-cursor'),
  chaser = document.getElementById('js-chaser'),
  target = document.querySelector('a');
let
    delay = 10,
    cursorPosX = 0,
    cursorPosY = 0,
    chaserPosX = 0,
    chaserPosY = 0;

// カーソルの遅延アニメーション
TweenMax.to({}, .001, {
    repeat: -1,
    onRepeat: function() {
        chaserPosX += (cursorPosX - chaserPosX) / delay;
        chaserPosY += (cursorPosY - chaserPosY) / delay;

        TweenMax.set(cursor, {
            css: {
                left: cursorPosX - (cursor.clientWidth / 2),
                top: cursorPosY - (cursor.clientWidth / 2)
            }
        });

        TweenMax.set(chaser, {
            css: {
                left: chaserPosX - (chaser.clientWidth / 2),
                top: chaserPosY - (chaser.clientWidth / 2)
            }
        });
    }
});

// マウス座標を取得
document.onmousemove = function(event) {
    cursorPosX = event.pageX;
    cursorPosY = event.pageY;
};

// マウスオーバー時の処理
target.onmouseover = function() {
    cursor.classList.add('is-active');
    chaser.classList.add('is-active');
};

// マウスアウト時の処理
target.onmouseout = function() {
    cursor.classList.remove('is-active');
    chaser.classList.remove('is-active');
};
その他に調整した点

以下の点を修正しております。
- セレクタ名を.cursorから#js-cursorに変更
- セレクタ名を.followerから#js-chaserに変更
- cWidthやfWidthなど、JavaScript側でもサイズを入力する必要があった値を、CSSのみで認識するように変更

さいごに

マウスカーソルの視認性が良くなるので、個人的には好きな実装です！
十数年前の流行りが回帰していますが、アニメーション系のライブラリと合わさって現代バージョンとして流行っていることがなんだか面白いですね。
やりすぎには注意（笑）

Twitterのフォロワーを募集しております！
すでにWeb業界にいらっしゃる方や、業界未経験の方、どんな方でも募集しておりますので、どうぞよろしくお願いいたします(*^^*)

Twitter - https://twitter.com/loki__tweet

　 Tweet
Qiitaで続きを読む

20190915のHTMLに関する記事は6件です。

promptはrenderで消える

編集画面を作る際にpromptが消失した

MVCの流れで呼び出される時

renderで呼び出す時

実際のコード

どうやら仕様らしい…？

最終的なコード

結論

33分でポートフォリオサイトを作成しデプロイする裏技とは！？

33分でポートフォリオサイト作成

自分の好きなテンプレートを見つけよう

ダウンロードしたテンプレートをVSCodeで編集

Githubを使って3分でデプロイ

メリット・デメリット

注意点

Bootstrapのテンプレートで手軽にポートフォリオサイトを作れる

33分でポートフォリオサイトを作成・デプロイまでする裏技とは！？

33分でポートフォリオサイト作成

ポートフォリオサイトの作り方

① 自分の好きなテンプレートを見つけよう

② ダウンロードしたテンプレートをVSCodeで編集

③ GitHubを使って3分でデプロイ

メリット・デメリット

注意点

Bootstrapのテンプレートで手軽にポートフォリオサイトを作れる

【転職希望者必見】33分でポートフォリオサイトを作成・デプロイまでする裏技とは！？

33分でポートフォリオサイト作成

自分の好きなテンプレートを見つけよう

ダウンロードしたテンプレートをVSCodeで編集

Githubを使って3分でデプロイ

メリット・デメリット

注意点

Bootstrapのテンプレートで手軽にポートフォリオサイトを作れる

[css]pxや%などのサイズ指定について

始めに

pxについて

%について

emについて

remについて

vw/vhについて

まとめ

イケてるマウスカーソルをPure JavaScriptで実装する

結果

追従するマウスカーソルについて

ソースコード

その他に調整した点

さいごに

日付別

タグ一覧