20200908のHTMLに関する記事は8件です。

フォロー機能の実装

環境

Rails 6.0.3.2
ruby 2.6.5p114 (2019-10-01 revision 67812)
vscode

参考記事

https://qiita.com/Kaisyou/items/86869db6345c9cc1413f
https://qiita.com/search?sort=&q=%E3%83%95%E3%82%A9%E3%83%AD%E3%83%BC%E6%A9%9F%E8%83%BD

エラー

スクリーンショット 2020-09-08 23.31.00.png
フォローボタンを押すと、
スクリーンショット 2020-09-07 17.28.40.png
やはりエラーと遭遇。

解決の糸口・・・

followingsをfollowingと変更したり、細かな記述を変更しても、エラーから抜けられない。
どこを直せばいいのか分からなかったので、沼にはまってしまう。(実際、このエラーを解決するのに2日費やすことになる。)

解決方法

app/models/relationship.rb
class Relationship < ApplicationRecord
  belongs_to :user 
  belongs_to :follower, class_name: 'User'
  belongs_to :following, class_name: "User"


  validates :follower_id, presence: true
  validates :following_id, presence: true
end 

この中に今回の沼の元凶があるのだが分かるだろうか?
それはbelongs_to :userである。
belongs_to を記述することで、userを要求することになってしまった。
今回のfollow機能の場合、followerとfollowerとで事足りるため、belongs_toでuserを要求する必要はないのである。1つのRelationshipにつき、一人のuserを割り当てる必要はないため、今回の場合は2行目は不要となる。

belongs_toの詳細についてはhttps://railsguides.jp/association_basics.html#belongs-to%E9%96%A2%E9%80%A3%E4%BB%98%E3%81%91

結論

基本は重要であることを学びました。
対応してくれたメンターの方、ありがとうございました。

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

【初心者向け】矢印(>)の位置でボタンの作り方を変えた方がいい話。

どうも7noteです。ボタンをCSSで作るとき、ボタンに付いている矢印(>)の配置で作り方を分ける方がいい話。

WEBサイトを作っていると、ボタンを作成する機会がたくさんあります。
画像で作る時はあまりきにしなくても大丈夫ですが、疑似要素で矢印を配置する際、できるだけレスポンシブサイトでも崩れないボタンを作るための工夫が必要になってきます。

私は矢印の位置によって、作り方を大きく2種類に分けて作っているのでそれぞれの作り方を紹介していきます。

矢印の位置によるボタンの種類の見分け方。

ボタンA
buttona.png

ボタンB

buttonbのコピー.png

違いは矢印の位置が文字に近いところにあるか、離れたところにあるかの違いですが、考え方としてはこのように考えます。

「矢印の位置はどこに依存しているか」

ボタンAでは、文字の近くに矢印があります。つまり文章の長さが変わっても文字のすぐ右側に矢印がある事が、このボタンの矢印の意図になります。文字によって矢印の位置がかわるので、文字に依存していると言えます。

ボタンBは、文字から離れたところにありますが、違う捉え方をすると右端から一定距離に位置していると言えます。つまりボタンがどんなに長くなろうと右端の位置をキープすることになります。ボタン(の右端)に依存している状態です。

このことから、それぞれボタンAとボタンBでは違う作り方をします。実際にソースを見てみます。

2種類のボタンの作り方

共通html

index.html
<div class="btn">ボタン</div>

ボタンA(文字依存)の作り方

styleA.css
.btn {
  color: #fff;
  width: 100px;
  text-align: center;
  background: #399;
  border-radius: 5px;
  padding: 10px 30px;
}

.btn::after {
  content: ">";
  margin-left: 1em;
}

ボタンB(右端依存)の作り方

styleB.css
.btn {
  color: #fff;
  width: 100px;
  text-align: center;
  background: #399;
  border-radius: 5px;
  padding: 10px 30px;
  position: relative; /* 追記 */
}


/* Aとは違う */
.btn::after {
  content: ">";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

解説

もし、ボタンの長さや文字の量が変わると・・・

ichiran2.png

ボタンAでは長さが変わっても常に文字の横に矢印があり、
ボタンBでは長さが変わっても常に右端に矢印があると思います。

このようにレスポンシブ化や修正などで文字や横幅が変更になることがあっても、常に意図した位置に矢印を置くことができます。

まとめ

常にデザインの見た目ではなくて意味を理解して作ることが大切です。
私はデザインの構造を見極め、この矢印はスマホ表示になったり、文字が変わったらどこに位置されるべきだろうかと考えてcssを作るようにしています。
ついついボタンAの方がcss書く量少なくて楽だらかといった理由で、デザインの意図とは違う書き方をしないように気を付けたいですね。

おそまつ!

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

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

ブラウザに表示させるための事前処理(コンパイラ)

複数の静的ファイルがブラウザに適用されるまでの仕組みをまとめました。
大まかに言うと、
ブラウザでは認識できる言語が決まっており、どんな言語も認識できる言語に翻訳する必要があります。
この翻訳作業をコンパイルといい、コンパイルできないものは事前に処理をする必要があります。この事前処理はプリコンパイルと呼ばれ、細かい機能1つ1つをモジュールという処理のまとまりにし、コンパイルしてブラウザに返すといった流れです。

前提
プログラミング初学者(2ヶ月)が学んだ内容をまとめたものです。
実際の現場では通用しないことや間違った情報がある可能性があります。
お気づきの方はコメントにてご指摘いただければ幸いです。

ブラウザは認識できる言語が決まっている

ブラウザはHTML,CSS,JavaScript,WebAssemblyという言語のみを認識することができます。
サーバーサイドでどんな記述をしていたとしても、最終的にはこの4つでブラウザに返されています。
これ以外の言語ではブラウザはページを描画することができません。

開発を便利にする言語

ブラウザでは、上記4つだけを認識してくれますが、開発ではより書きやすく読みやすいように設計されたプログラミング言語があります。
このプログラミング言語を高級言語といいます。

高級言語

機械よりも人間が理解しやすいように設計されたプログラミング言語
機械が認識しやすい言語は低級言語と呼ばれます。
高級言語の例
CSS:SCSS、SASS
JavaScript:TypeScript、CoffeeScript

ブラウザが認識できる言語に変換する仕組み

開発に便利な言語をブラウザが認識できるように翻訳する作業をコンパイルといいます。

コンパイル
プログラミング言語を動作する機械が理解できるように翻訳する作業
コンパイルはコンパイラというプログラムによって行われる。
コンパイラで認識できない言語がある場合は予めプリコンパイルしておく必要があります。

プリコンパイル
コンパイラが翻訳できない言語を翻訳できるようにする事前コンパイルのこと
メインとなる処理に対して行う前処理のこと
このプリコンパイルを行うための手法として、アセットパイプラインという仕組みがある。

アセットパイプライン
JavaScriptやCSSなどのアセットと呼ばれる静的ファイルを小さくまとめてくれる機能
アセットパイプラインの処理は、プリコンパイル→連結→圧縮→配置の流れで行われます。
複数の静的ファイルをプリコンパイルして連結したのち、圧縮して軽量化したものをpublicディレクトリに配置して、ブラウザへ渡せるようにします。
プリコンパイルはモジュールバンドラを使って行われます。

モジュールバンドラ
モジュールバンドラはJavaScriptのモジュールの依存関係を考慮しながら管理するツール
モジュールは機能を1つずつ分けて他のファイルから読み込めるようにした処理のまとまりのこと
機能のまとまりをモジュール、この1つ1つの機能が依存関係にある場合にモジュールバンドラはこれらを考慮しながら管理してくれます。
モジュールで管理せず、機能をファイルごとに分割してしまうと、最終的に1つのファイルにまとめるときに不具合が生じるためモジュールパンドラが使われています。

webpack
モジュールバンドラの中で主流なツール
webpackが行うことは大きく4つ
・Entry
依存関係を解決するためにどのファイルを基準(エントリーポイント)とするかを決める。
・Output
エントリーポイントにされ、webpackによってまとめられたファイルをどこへどのような名前で出力(アウトプット)するのか指定する。
・Loaders
JavaScript以外のCSSやHTMLなどのファイルをモジュールに変換する方法を読み込み(ロード)、指定した処理を行う。
・Plugins
圧縮などのファイルをまとめる以外でローダーが実行できないタスクを導入し、拡張(プラグイン)する。

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

Yハロトレ17日目

Picupstreamの重要な部分

CSSの優先順位

「.content p」のタイプセレスター+クラスセレクターと「.deco」のタイプセレクターでは、タイプセレクター+クラスセレクターの方が優先順位が高いので、下記画像のように「.content p」の「margin-bottom: 20px;」が適用されてしまいます。
そこで「.content .deco」のように、クラスセレクター+クラスセレクターにすると、「.content .deco」の「「margin-bottom: 40px;」が適用されます。

参考:CSSの優先順位

priority2.png

<div class="content">
<p>こうした植物は「海浜植物」と呼ばれ、</p>
<p class="deco">ところどころに顔を出す緑色の小さな葉っぱは、おもしろいですよ。 。</p>
.content p{
line-height: 1.5;
margin-bottom: 20px;
}

.content .deco{/*.decoだとmargin-bottomが効かない*/
margin-bottom: 40px;
}

ショートハンドの注意点

.category a:hover{background: #def;}と書いてしまうと、{background: url(../img/xxx.png);}も反映されてしまうので、注意しましょう。
shorthand2.png

.containerとbackground-color

.containerは中に入れる2.png

初めてのプログラミングの重要な部分

名前を変えて保存でprofile.htmlを保存

ヘッダーとフッター、ナビゲーションが共通の「profile.html」を作るために、「index.html」から名前を変えて保存して、「index.html」のクローン「profile.html」を作ります。
名前を変えて保存2.png

スマートフォンサイトの重要な部分

max-width

ブロック要素を可変にします。(%)
max-width.png
max-widthを指定すると、画像を無理に引き伸ばすことがなくなります。
max-width.jpg

font-awesome

font-awesomeとは、ウェブサイトでアイコンを表示できるようにしてくれるサービスです。
barbtn2.png
以下の記述を追加すると、barボタンのアイコンが使えるようになります。

<!--headに記述-->
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"><!--VerUPされると「v5.6.3」が変わる-->
</head>

<!--button-->
<div class="btn"><i class="fas fa-bars fa-lg"></i></div>

display

「display」はプロパティの1つで、要素の表示形式を決めるものです。値に「none」を入れてあげると、そのセレクタが何も表示されなくなります。
display2.png

position/cover

coverとは、要素を埋めるという意味で、縦に合わせて伸張し、領域を埋め尽くすように表示されています。
なので、「left top」とかの後に「/cover」を入れると、背景画像が伸びたり縮んだりします。
keyvis2.png

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

HTMLの基本まとめ

HTMLの基本まとめ

1冊ですべて身につくHTML & CSSとWebデザイン入門講座の本を読んで、備忘録的にまとめていきます。
詳しくは本を読まれることをお勧めします。

HTMLのファイル名

  • フォルダも含めて、半角かつ英数字かつ小文字と記号(ハイフンとアンダースコア)のみOK。
  • 拡張子は.html
  • ホームページ(URLにアクセスして一番初めに表示されるページ)はindex.htmlにする。

HTMLの必須なタグ

<!-- このページがどのバージョンのHTMLなのか示す。バージョン指定がなければ主流のHTML5のことを指す -->
<!DOCTYPE html>

<!-- 文字コードの指定 -->
<html lang="ja">

  <!-- ページの情報を記述する。ブラウザには表示されない。 -->
  <head>
    <!-- 文字コードの指定 -->
   <meta charset="utf-8">

    <!-- ページタイトルを指定する。ブラウザーのタブやブックマーク字のタイトルになる。 -->
    <title>HTMLの基本まとめ</title>

    <!-- ページについての説明文を記述する。検索エンジンでタイトルと一緒に表示される。 -->
    <meta name="description" content="HTMLの基本をまとめてみた">
  </head>

  <!-- ブラウザに表示するコンテンツ -->
  <body>
  </body>
</html>

タグのルール

  • <head></head>のように、開始タグと終了タグがセットになっているものと、<meta>のように1つだけで使うものもある。
  • <a href="index.html"></a>のように、開始タグには属性を加えられる。

基本的なタグ

見出し、リンク、リスト、表、フォームのタグ使い方まとめです。

見出し

<h1>見出し</h1>

リンク(テキスト)

<a href="リンク先のURL">リンクテキスト</a>

リンク(画像)

<a href="リンク先のURL">
<img src="画像の相対パス" alt="画像の説明">
</a>

リンク(メアド)

<a href="mailto:送り先のメアド">リンクテキスト</a>

リスト(番号なし)

<ul>
  <li>箇条書きテキスト</li>
  <li>箇条書きテキスト</li>
  <li>箇条書きテキスト</li>
</ul>

リスト(番号あり)

<ol>
  <li>箇条書きテキスト</li>
  <li>箇条書きテキスト</li>
  <li>箇条書きテキスト</li>
</ol>

下記の表はこんな感じで表示されます。
tableタグのborder属性の数字は枠の太さを表します。
image.png

<table border="1">
  <!-- 1行目 -->
  <tr>
    <th>1列目の見出し</th>
    <th>2列目の見出し</th>
  </tr>
  <!-- 2行目 -->
  <tr>
    <td>1列目のセル</td>
    <td>2列目のセル</td>
  </tr>
  <!-- 3行目 -->
  <tr>
    <td>1列目のセル</td>
    <td>2列目のセル</td>
  </tr>
</table>

フォーム

<form action="送信先のURL" method="データ送信方法(POSTかGET)" name="フォームの名前">
  <!-- 1行テキスト入力(テキスト) -->
  <!-- 属性値をサポートしているブラウザではフォーマットチェックしてくれる -->
 名前: <input type="text" placeholder="テキストエリアにデフォルト表示させるテキスト">

  <!-- 1行テキスト入力(メアド) -->
 メール: <input type="email" placeholder="テキストエリアにデフォルト表示させるテキスト">

  <!-- 1行テキスト入力(電話番号) -->
 電話: <input type="tel" placeholder="テキストエリアにデフォルト表示させるテキスト">

  <!-- ラジオボタン -->
 性別:
  <!-- checked属性をつけた選択肢がデフォルトで選択される -->
  <input type="radio" name="ラジオボタングループ名" value="送信する選択肢の値その1" checked>
  <input type="radio" name="ラジオボタングループ名" value="送信する選択肢の値その2">
  <input type="radio" name="ラジオボタングループ名" value="送信する選択肢の値その3">

  <!-- チェックボックス -->
 種類:
  <!-- checked属性をつけた選択肢がデフォルトで選択される -->
  <input type="checkbox" name="チェックボックスグループ名" value="送信する選択肢の値その1" checked>
  <input type="checkbox" name="チェックボックスグループ名" value="送信する選択肢の値その2">
  <input type="checkbox" name="チェックボックスグループ名" value="送信する選択肢の値その3">

 <!-- チェックボックス(選択肢をラベルで表示) -->
 種類:
  <!-- checked属性をつけた選択肢がデフォルトで選択される -->
  <input type="checkbox" name="チェックボックスグループ名" value="送信する選択肢の値その1" id ="選択肢1のID" checked>
  <label for="選択肢1のID">表示する選択肢その1</label>
  <input type="checkbox" name="チェックボックスグループ名" value="送信する選択肢の値その2" id ="選択肢2のID">
  <label for="選択肢2のID">表示する選択肢その2</label>
  <input type="checkbox" name="チェックボックスグループ名" value="送信する選択肢の値その3" id ="選択肢3のID">
  <label for="選択肢3のID">表示する選択肢その3</label>

  <!-- 送信ボタン(テキスト) -->
 <input type="submit" value="ボタンに表示するテキスト">

  <!-- 送信ボタン(画像) -->
 <input type="image" src="画像の相対パス" alt="画像の説明">

  <!-- プルダウン -->
 <select name="プルダウン名">
    <!-- selected属性をつけた選択肢がデフォルトで選択される -->
   <option value="送信する選択肢の値その1" selected>表示する選択肢テキスト</option>
     <option value="送信する選択肢の値その2">表示する選択肢テキスト</option>
     <option value="送信する選択肢の値その3">表示する選択肢テキスト</option>
     <option value="送信する選択肢の値その4">表示する選択肢テキスト</option>

  <!-- 複数行テキスト入力 -->
  <textarea name="テキストエリア名" placeholder="テキストエリアにデフォルト表示させるテキスト"></textarea>

</form>

ブロック要素

CSSでデザインを設定しやすいようにブロック要素のタグを使ってグループ分けをします。

ヘッダー(header)

<header>
  <h1>タイトルテキスト</h1>
 <p>テキスト文など</p>
</header>

ナビゲーション(nav)

header要素の中に入ることが多い

<header>
  <h1>タイトルテキスト</h1>
  <nav>
    <ul>
      <li><a href="リンク先のURL">メニュー1</a></li>
      <li><a href="リンク先のURL">メニュー2</a></li>
      <li><a href="リンク先のURL">メニュー3</a></li>
    </ul>
  </nav>
</header>

記事(article)

<article>
  <h2>タイトルテキスト</h2>
  <p>テキスト</p>
</article>

任意のテーマを持つグループ(section)

<section>
  <h2>タイトルテキスト</h2>
  <p>テキスト</p>
</section>

メインコンテンツをまとめる(main)

<main>
  <article>
    <h2>タイトルテキスト</h2>
    <p>テキスト</p>
  </article>
  <section>
    <h2>タイトルテキスト</h2>
    <p>テキスト</p>
  </section>
</main>

メインコンテンツ以外をまとめる(aside)

<aside>
  <article>
    <h2>タイトルテキスト</h2>
    <p>テキスト</p>
  </article>
</aside>

フッター(footer)

<footer>
    <ul>
      <li><a href="リンク先のURL">メニュー1</a></li>
      <li><a href="リンク先のURL">メニュー2</a></li>
      <li><a href="リンク先のURL">メニュー3</a></li>
    </ul>
</footer>

その他のグループ分け(div)

<div>
    <h2>タイトルテキスト</h2>
    <p>テキスト</p>
    <h2>タイトルテキスト</h2>
    <p>テキスト</p>
</div>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

ヘッダーぽいものを作る

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>SiteName</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <div class="header">
      <div class="header-logo">SiteName</div>
      <ul>
        <li>何を勉強すべきか</li>
        <li>HTML何もわからん人へ</li>
        <li>CSSも何もわからん人へ</li>
      </ul>
    </div>
  </body>
</html>
@charset "UTF-8";

.header {
  width: 100%;
  height: 90px;
  background-color: #00FF00;
  color: #fff;
}

.header-logo {
 font-size: 36px;
 float: left;
 padding: 20px 40px;
}

.header li{
 float: left;
 padding: 33px 20px;
 list-style: none;
}

できたもの

スクリーンショット 2020-09-08 16.32.13.png

https://github.com/aki0207/header

こちらを参考にさせていただきました。
Progate

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

viewportでレスポンシブしている時にPC版表示をする

環境
初書:2020/09/08

タイトルの付け方が適当な気がしてならないが、いいのが思いつかなかった

前提

<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0">

viewportdevice-widthを使用していて、cssで@media screen and (max-width: 600px)のような感じでレスポンシブウェブデザインに対応させている場合

javascriptで動的変更する

…ことが出来る。しかも一行で

document.getElementsByName("viewport")[0].setAttribute('content','width=1080, initial-scale=1.0,minimum-scale=1.0');

document.getElementsByName("viewport")で、metaタグを取得する事が可能なのでsetAttributecontent箇所を書き換える。
[0]なのは、viewportという名前はおそらくこれしかないだろうという観点から。もし他の要素にviewportという名前を付ける場合は、単純に[0]にするとバグが生じるかもしれない)

注意点

viewportを書き換える形の場合、スマホの横幅に合わせてサイズが細かくなるわけではなく、
画面外に伸びてサイズが変更されるので(下の図の感じ)、cssでvwを使ってサイズを指定している箇所はレイアウトが崩れる。

 |---------------------------------------------| //width=1080に設定した時
 |------------------| // スマホ画面(400くらい?左右にスクロールが出来るようになる)

参考

もう逃げない。HTMLのviewportをちゃんと理解する

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

link_toの文字列部分にHTMLタグを挿入する方法

文字列部分にfontawesomeを使用したいときなどにすぐ思い出せるように自分用に残しておきます。

index.html.erb
 <%= link_to new_user_session_path, class: "new-post__btn" do%>
   <i class="fas fa-edit"></i>  ///fontawesomeでコピーしたHTMLタグ
 <%end%>

:warning:無料で使う場合はproとついているフォントは使えない。

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