What's New Qiita

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

  • 投稿日：2020-12-15T21:44:34+09:00

[HTML] レスポンシブデザインのためのmetaタグ viewport

metaタグ viewport

HTML 自分用の覚え書きです。

レスポンシブデザイン（タブレット、スマホの場合に表示を変えたい場合）には、metaタグ viewport を指定します。

CSSのメディアクエリにて、ウインドウ幅の指定により表示が変わるように記述します。

index.html
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
stylesheet.css
/* PC向けのCSS */
/* menuクラスに適用されるCSS */
.menu{
  background-color: #00FFFF;
}

/* ウインドウ幅が1000px以下のとき */
@media (max-width : 1000px) {
  /* menuクラスに適用されるCSS */
  .menu{
    background-color: #00FF00;
  }
}

/* ウインドウ幅が500px以下のとき */
@media (max-width : 500px) {
  /* menuクラスに適用されるCSS */
  .menu{
    background-color: #FF0000;
  }
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-12-15T21:43:30+09:00

【初心者でもわかる】1文字だけ〇〇する方法

どうも7noteです。1文字だけにいろいろなCSSを当てる方法について書いていきます。

1.「1文字目を大きくする」

sample1.png

文中の一番最初の文字を大きくします。
例では文字サイズを2倍にして、太字と赤文字にしています。

style.css
p:first-letter{
  /*適用したいCSS*/
}

/* 記述例 */
p:first-letter{
  font-size: 200%;
  font-weight: bold;
  color: #f00;
}

※疑似セレクタ:first-letterはインライン要素には効かないので注意！

2.「1文字だけ回転・反転させる」

sample2.png

たまに回転していたり、反転していたりする文字を見かけます。（例えが思いつかない・・・）
CSSで文字の反転や回転を表現する時はtransformを使うのがよいでしょう。

index.html
<p>あいう<span>え</span>お</p>
style.css
/* 180度回転 */
p span {
  transform: rotate(180deg);
  display: inline-block;
}

/* 左右反転 */
p span {
  transform: scale(-1,1);  
  display: inline-block;
}

※trnasformを複数重ねがけする時は半角スペースで繋ぎます。

p span {
  transform: rotate(180deg) scale(-1,1);
}

3.「1文字だけ消す」

sample3.png

2でやった<span>でくくる方法と同じです。
当てるCSSを変えるだけで様々なCSSに対応させることができます。

style.css
/* 消した空間は残す場合 */
p span {
  visibility: hidden;
}

/* 消した空間も消す場合 */
p span {
  display: none;
}

まとめ

1文字だけや部分だけ変更してアクセントをつけたりする方法でした。
インパクトをつけたり、他とは差別化を図れるちょいテクです。

おそまつ！

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

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-12-15T14:44:19+09:00

Railsのform_withについて掘り下げる

軽く自己紹介

はじめましての方は初めまして。伊東と申します。
大卒後未経験でプログラマーになりまして、気づけば7,8年くらい働いています。
2020年3月からDMM WebCampのメンターをしています。

対象読者

  • Ruby on Railsで初めてMVCフレームワークを触った
  • 検証ツールであまり見ない
  • 初学者の方

前提

$ rails -v
Rails 5.2.4.3
$ ruby -v
ruby 2.6.2p47 (2019-03-13 revision 67232) [x86_64-linux]
$

Rubyのバージョン、Rails5系だよってだけです。バージョン互換などは考慮しておりませんが、書く内容はそんなに影響するような話じゃないのでは？？って思っています。 authenticity_tokenの箇所でデフォルトの挙動が違うぽいです...本題というわけではないので各バージョンで調べてくださいmm

伝えたいこと

検証ツール見ていきましょうって話です。
普段からinput nameとかの属性をちゃんと見てる人は読む必要がない記事になってます。
本当に基本的なことしか書かないので悪しからず

そもそもActionView::Helpersってなに？？

よく使うのはform系ではないかな？と思います。

  • form_with
  • text_field_tag
  • text_area_tag
  • submit_tagなど

詳しくは以下リンクから見てみてください。
https://api.rubyonrails.org/classes/ActionView/Helpers.html

事前準備

細かい説明は割愛して作っていきます。

プロジェクト作成らへん

ちなみに行頭の$マークはrootユーザー#じゃないって意味です。

$ rails new without_action-view-helpers # プロジェクト作成
# 省略
$ cd without_action-view-helpers/
$ rails g controller books index new # コントローラー(アクション含)作成
# 省略
$ rails g model Book title:string price:integer description:text # モデル作成
# 省略
$ rails db:migrate # DB反映
# 省略
$

ルーティングの設定

config/routes.rb
Rails.application.routes.draw do
  resources :books, only: [:index, :new, :create, :show, :edit, :update]
end
ルーティングの確認
$ rails routes | grep book # grepは文字列検索しています
                    books GET   /books(.:format)                                                                         books#index
                          POST  /books(.:format)                                                                         books#create
                 new_book GET   /books/new(.:format)                                                                     books#new
                edit_book GET   /books/:id/edit(.:format)                                                                books#edit
                     book GET   /books/:id(.:format)                                                                     books#show
                          PATCH /books/:id(.:format)                                                                     books#update
                          PUT   /books/:id(.:format)                                                                     books#update
$

controller

めーっちゃシンプルな形。

app/controllers/books_controller.rb
class BooksController < ApplicationController
  def index
    @books = Book.all
  end

  def new
    @book = Book.new
  end

  def create
    book = Book.new(book_params)
    book.save
    redirect_to books_path
  end

  def show
    @book = Book.find(params[:id])
  end

  def edit
    @book = Book.find(params[:id])
  end

  def update
    book = Book.find(params[:id])
    book.update(book_params)
    redirect_to books_path
  end

  private
  def book_params
    params.require(:book).permit(:title, :price, :description)
  end
end

view

app/views/books/new.html.erb
<h1>Books#new</h1>

<div>
  <%= render 'books/form', book: @book %>
</div>

部分テンプレート化しています。

app/views/books/_form.html.erb
<%= form_with model: book, local: true do |f| %>

  <div>
    <%= f.label :title %>
    <%= f.text_field :title %>
  </div>

  <div>
    <%= f.label :price %>
    <%= f.number_field :price %>
  </div>

  <div>
    <%= f.label :description %>
    <%= f.text_area :description %>
  </div>

  <div>
    <%= f.submit :submit %>
  </div>

<% end %>

ブラウザの検証ツールを使用して掘り下げて見ていきます

new

スクショだとこんな感じ
スクリーンショット 2020-12-10 20.26.02.png

まずformタグやinput>hiddenの部分から見ていきます
<form action="/books" accept-charset="UTF-8" method="post">
  <input name="utf8" type="hidden" value="✓">
  <input type="hidden" name="authenticity_token" value="cgX+LsxfzE7A7F5Tm8GAlF2KdaifSdqdrWd6cOgazlcbZx8OQ4c6LazJtdRYIdPjzmfmPUGHkuBoxSQhdSqiIA==">
</form>

action？accept-charset？method？hidden？指定していない項目がいくつもでてきました。

method

methodはsubmitされた時のhttpリクエストメソッドです。

action

actionはformタグ内のsubmitボタンがポチィされた時に実行されるURI(パス)を指定します。
/books で methodがpostになっているので、books_controllerのcreateアクションに飛ぶという仕組みです。

form_withでaction指定してなくない？

urlというパラメーターの指定が無いときはmodelからactionのpathを勝手に作ってくれています。モデル名とコントローラー名が一致している場合は 省略可能です。 model: book と書くだけでいいので簡単ですね。

ちなみにnamespaceを使用している場合は model: [:admin, book] としてあげれば、/admin/books というURIを作ってくれます。便利

hidden

name="utf8" については調べてないです！割愛します
name="authenticity_token" についてはCSRFの対策として自動発行されているものです。他のサイトから不正なリクエストを受けないように発行してるものです。
今回は5.2系で試しているのでデフォルトで有効になっているようですがそれ以外のバージョンであれば必要に応じて設定すれば有効になります。

inputタグ

入力項目はどのようになっているか
<div>
  <label for="book_title">Title</label>
  <input type="text" name="book[title]" id="book_title">
</div>

スクリーンショット 2020-12-13 16.21.27.png

inputタグを見てみると
<input type="text" name="book[title]" id="book_title"> となっています。
type="text"は単純にテキストを入力出来るという意味です。text以外にもあるのでこれ見ればわかると思います。 (詳しくはこれ: http://www.htmq.com/html5/input.shtml )
name="book[title]" これが多分一番大事になってくると思います。Rails的にはコントローラー側で params[:book][:title] で入力された値が取得出来るという意味になります。これを理解していれば、入力された値がDBに保存できない？みたいなことは少なくなると思います。

edit

スクリーンショット 2020-12-13 17.08.31.png

適宜省略してます
<form action="/books/1" accept-charset="UTF-8" method="post">
  <input type="hidden" name="_method" value="patch">
  <div>
    <label for="book_title">Title</label>
    <input type="text" value="たーいとる" name="book[title]" id="book_title">
  </div>

  <div>
    <input type="submit" name="commit" value="submit" data-disable-with="submit">
  </div>

</form>

formタグ, hiddenタグ

action部分は action="/books/1" になっています。model: bookで指定している変数bookが保存済みの場合URIを自動的にbook.idを設定してくれています。

hiddenタグで新規の時には無かったものが存在しています。 <input type="hidden" name="_method" value="patch"> これでhttpメソッドをpatchにしています。
なんでformタグで指定しないの？？ってなると思うんですけど、多分ですがform>methodではpost/getしか指定できないからだと思います(間違ってたら指摘してもらえると :bow: )。 http://www.htmq.com/html5/form.shtml

inputタグ

<input type="text" value="たーいとる" name="book[title]" id="book_title">

value="たーいとる" という項目が増えています。これで入力部分の値を指定しています。それ以外は同じなので割愛します。

まとめ

HTMLも単純に画面に表示されたものを見るのではなく、どのようにHTMLが生成されているかを確認したり意識することで、HTMLであったりRailsの仕組みを少しずつ理解出来るようになっていくと思います。

あまり長い文章書くの得意じゃないんですが、役に立てると嬉しく思います。。。
またお声掛け頂いたメンターの方ありがとうございます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-12-15T13:21:21+09:00

RubyonRails(RoR)でHTMLを埋め込みレンダリングする

経緯

DBからHTMLを取ってきてそのままモーダルでHTMLレンダリングする作業が発生したので備忘録

どうやるのか

コントローラ側で取ってきたHTMLをテンプレにアサインし、テンプレ側でpreserveするだけ。

例）

controller側

#view側で使っているpreserveは改行を&#x000A;に変換してしまったので、
#JSがあった場合、変なところに&#x000A;が入って動かなくなる場合があるため置換
@contents = html_contents.gsub(/\r\n|\r|\n/, "")

view側(hamlの抜粋)

%body
  = preserve(@contents)

今回の場合

たまたま動画埋め込みようのJSの相性なのか、動画を表示するJSがキレイに動かず、２回同じモーダルを表示しないと動画が見れなかった。
使い物にならないため別ページとしてHTMLをレンダリングすることにした。。。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-12-15T09:09:26+09:00

サムネール画像を生成する（コピペOK）

jpegファイルのサムネール画像を生成します。

①以下のコードを書きます
②mkthumbs.phpのサブディレクトリとして pics と thumbs を作成します
③picsにjpeg画像を置きます
④コマンドラインで
　　% php mkthumbs.php
と入力します
⑤index.htmlをブラウザで開きます

mkthumbs.php
<?php
$dir = opendir("pics");
$pics = array();
while($fname = readdir($dir)){
  if(preg_match("/[.]jpg$/", $fname))
    $pics[] = $fname;
}
closedir($dir);

foreach($pics as $fname){
  $im = imagecreatefromjpeg("pics/$fname");
  $ox = imagesx($im);
  $oy = imagesy($im);

  $nx = 100;
  $ny = floor($oy * (100 / $ox));

  $nm = imagecreatetruecolor($nx, $ny);

  imagecopyresized($nm, $im, 0, 0, 0, 0, $nx, $ny, $ox, $oy);

  print $fname." のサムネールを生成します...\n";

  imagejpeg($nm, "thumbs/$fname");
}

print "index.html を生成しています...\n";

ob_start();
?>
<html>
<head><title>サムネール</title></head>
<body>
<table cellspacing="0" cellpadding="2" width="500">
<tr>
<?php
$index = 0;
foreach($pics as $fname){
?>
<td valign="middle" align="center">
<a href="pics/<?php echo($fname); ?>"><img src="thumbs/<?php echo($fname);
  ?>" border="0" /></a>
</td>
<?php
$index += 1;
if($index % 5 == 0) echo("</tr><tr>");
}
?>
</tr>
</table>
</body>
</html>
<?php
$html = ob_get_clean();
$fh = fopen("index.html", "w");
fwrite($fh, $html);
fclose($fh);
?>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-12-15T02:54:38+09:00

【初学者向け】positionの絶対値と相対値の考え方。

cssのpositionって要素を自由な位置に配置できるので非常に便利ですよね。
改めて調べてみると絶対値やら相対値やらと非常に分かりずらい・・・なので自分なりに分かりやすく解説していきたいと思います。

準備

以下の画像を使います。
bee.png
seal.png

ベースのコードは以下になります。

html
<div class="parent">
  <img src="./img/seal.png" class="seal">
  <img src="./img/bee.png" class="bee">
</div>
css
.parent{
  /* レイアウトのコード */
  width: 500px;
  height: 500px;
  background: beige;
  margin: 100px auto 0;
}

positionを使ってみる

早速position使っていきますが、その前にpositionの概念を知っておきましょう。
positionとは、要素を自由な位置に配置できるプロパティです。
プロパティの値には、static,fixed,relative,absoluteがあります。
今回はrelative,absoluteについての解説です。

まず簡単なabsoluteから解説していきます。
absoluteは絶対値と言う意味で、top,bottom,left,rightの位置指定のプロパティを組み合わせることで要素の順番や位置を無視して絶対的に配置させることができます。これはなんとなく想像できるかと思います。

そしてrelativeですが、こちらは相対値と言う意味です。
相対値とは必ず比較対象がないと成立しません。ではCSSの場合、比較対象とは何かというと今要素がいる位置です。なのでabsolute同様、位置指定のプロパティを組み合わせることが出来るのですが、今いる位置からどのくらい動くかを直接指定することが出来ます。

ちなみにこの位置のことを基準値などと言います。

実演

理論がわかったところで、実際に動かしてみます。

image1.png

今の状態はこうですね。ちなみにアザラシと蜂を作ったつもりですｗ
コードを追加します。蜂を動かします。

css
.bee{
  position: relative;
  top: 100px;
  left: 200px;
}

image2.png

どうでしょう？蜂が元いた場所の、上から100px、左から200px動きました。このようにrelativeは位置を指定することで元いた場所を基準に好きな場所へ移動させることができます。

ただしこう言った使い方はあまりしません。実はrelativeの基準点を上手くいかしabsoluteと合わせて使うことが殆どです。

relativeとabsoluteと合わせて使う。

これが一番オーソドックスな使い方です。
概要としては、親クラスにrelativeを指定して基準点を作り、absoluteで基準点からの絶対値を指定します。

コードを変えていきましょう。
※先程の.beeのコードは一旦消して置き換えましょう。

css
.parent{
  /* レイアウトのコード */
  width: 500px;
  height: 500px;
  background: beige;
  margin: 100px auto 0;
  /* position:relative;でこのクラスが基準のポジションになる。 */
  position: relative;
}
.seal{
  position: absolute;
  top: 0;
  left: 0;
}
.bee{
  position: absolute;
  top: 0;
  left: 0;
}

image3.png

まず基準点は色のかかった四角いブロック、つまり親要素です。そして子要素であるアザラシと蜂はabsoluteでtop0,left0がかかっています。これは左上に配置することを指定してます。

ちなみに画像が重なって見えるのは、float同様、要素の回り込みが発生しているからです。
floatと違うのは、後から配置した要素は基本的には上に重なります。

ではそれぞれの画像の位置を少し変えてみましょう。

css
.seal{
  position: absolute;
  top: 50px;
  left: 100px;
}
.bee{
  position: absolute;
  bottom: 0;
  right: 0;
}

image4.png

まずアザラシは、基準点の上から50px、左から100pxの位置に配置しました。
次に蜂は、したから0px、右からも0pxの位置つまり、右下に配置しています。

応用編

基礎的な使い方がわかったところで少し応用的な使い方をします。
それはrelativeを使わず、absolute単体で使います。ではコードを変更します。
※relativeを消します。

css
.parent{
  /* レイアウトのコード */
  width: 500px;
  height: 500px;
  background: beige;
  margin: 100px auto 0;
}

どうでしょうか？親クラスの枠外へ外れてしまいました。
親クラスのrelativeがないと自動的に bodyが基準点になります。なので画面の左上、右下を基準にして画像が配置されてしまいます。

image5.png

要素の重なりを調整する。

先程「後から配置した要素は基本的には上に重なります」と解説しましたが、これを調整する方法をお教えします。

css
.parent{
  /* レイアウトのコード */
  width: 500px;
  height: 500px;
  background: beige;
  margin: 100px auto 0;
  position: relative;
}
.seal{
  position: absolute;
  top: 50%;
  left: 50%;
}
.bee{
  position: absolute;
  top: 50%;
  left: 50%;
}

cssはこちらを使います。

画像のabsoluteにはそれぞれtop50%,left50%を指定しています。
基準点、つまり親要素の上から高さの50%、左から幅の50%

image6.png

画面をみると画像が重なってます。アザラシくんの目に蜂の針が刺さってます。(そりゃ困った顔をしている訳だ・・・)
なので蜂を後ろに追いやります。z-indexと言うプロパティを使います。これは重なり順を調整するCSSで初期値を0として、数字が大きければ大きいほど最前面に配置されます。

css
.seal{
  position: absolute;
  top: 50%;
  left: 50%;
  /* 重なり順を１つ前に出す */
  z-index: 1;
}

image7.png

これで重なり順を調整できました。

最後に

今回はpositionについて簡単にまとめてみました。
アニメーションと組み合わせたものをおまけとして載せたかったのですが時間の都合でここまでにします。手が空き次第追記します、ではお疲れ様でした。

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

日付別

タグ一覧