What's New Qiita

20190627のHTMLに関する記事は4件です。

  • 投稿日：2019-06-27T23:30:47+09:00

HTML＆CSS：リンクの設定と画像の表示

リンクや画像の基本的なマークアップの知識についてまとめました～！

別のサイトへリンクする（別タブで開く）

別のサイトへのリンクを指定するには、

<a href="http://www.sbcr.jp">SBクリエイティブ社のWebサイトへ</a>

これだけ。
<a>タグに「target="_blank"」を追加すれば、リンクをブラウザの別タブ、または別ウィンドウで開かせることができる。

<a href="http://www.sbcr.jp" target="_blank">SBクリエイティブ社のWebサイトへ</a>

ページ内の特定の場所へリンクする

ページ内リンクを設定する方法
ページ内リンクを設定するには、移動先のタグにid属性を追加しておく必要がある。

<h2 id="headline1037">アベンジャーズ</h2>

次に、リンクの<a>タグのhref属性には「＃」に続けて移動先要素のid名を書く

<a href="#headline1037">アベンジャーズ</a></li>

また、href属性が「＃」だけのリンクは、クリックすると常にページの最上部に移動する

<a href="#">ページトップに戻る</a>

テキストリンクにCSSを適用する

リンクテキストにマウスが重なったとき（ホバー状態）や、クリックしたとき（アクティブ状態）にテキスト色を変えたり、下線の表示・非表示を切り替えたり、CSSでスタイルを操作することが可能

リンクの状態に合わせて表示を変える
リンクやマウスポインタの状態によって適用されるスタイルを指定するセレクタは全部で4つある。
「：」で始まるクラスは「疑似クラス」と呼ばれる

セレクタ 説明
a 疑似クラスなしの「a」はすべての<a>タグにスタイルが適用される。
:link <a>タグで、かつhref属性がついている要素にスタイルが適用される。
:visited <a>タグで、かつリンク先が訪問済みのときにスタイルが適用される。
:hover その要素にマウスボタンが重なっているときにスタイルが適用される。
:active その要素の上でマウスボタンがクリックされているときにスタイルが適用される。

※実際には:linkと:visitedは省略されることが多い

a{
 color:#0073bc;
}
a:hover{
 color:#b7dbf2;
}
a:active{
 color:#4ca4e8
}

image.png
青いところの色が変わる

画像を表示させる

HTMLに画像を表示する<img>タグは。次のようにして使用する。

<body>
<img src="../../images/image1646.jpg" width="904" height="572" alt="陽が沈む">
</body>

この書式は
<img src="表示させたい画像ファイルのパス" width="画像の表示サイズ（幅）" height="画像の表示サイズ（高さ）" alt="画像が表示されないときのテキスト">
となっています～～

オリジナルとは異なるサイズで表示する

レスポンシブWebデザインでページのレイアウトを組んでいるときには、ウィンドウ幅に合わせてレイアウトを変化させるだけでなく、CSSを使えば<img>タグを無視して画像を伸縮させることができる。

<style>
.img-responsive{
 display:block;
 max-width:100%
 height:auto;
}
</style>
</head>
<body>
<img src="../../images/image1646.jpg" width="904" height="572" alt="陽が沈む" class="img-responsive">
</body>

これの応用として、この画像をそのままサムネにすることもできる。
①<img>にクラス名「img-responsive」を付ける。
②<img>を<div>タグで囲み、その<div>の幅をCSSで200pxに固定する

画像にリンクを付ける

画像にリンクを付けるには、<img>を<a>タグで囲むだけ。
画像の下にリンクを付けて、画像もテキストもクリックできるようにするには次のようにする。

<a href="http://studio947.net">
 <div>
  <img src="../../images/image0320.jpg" width="396" height="292" alt="積み木">
 </div>
 <p>カラフルな積み木のセット</p>
</a>

最後に

ふい～～～そろそろ難しくなってきたぞ、、、だれずに頑張ろう

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-06-27T23:24:25+09:00

[Laravel・HTML]textareaに入っている改行をメールに反映させたい

僕を救ってくれた素晴らしい記事
Laravel開発：bladeで改行したいだけ（nl2br）

(1)$request->all()で確認する

  "title" => "件名だよ"
  "text" => """
    １行目だよ\r\n
    2行目だよ\r\n
    3行目だよ
    """

(2)nl2br()使う

New line to br

email.blade.php
<html>
<body>
    {{  nl2br($data["text"]) }}
</body>
</html>

https://mailtrap.io
image.png

※emailはfactoryで作ったサンプルです

なんか違う

(3)エスケープしないといけないらしい

email.blade.php
<html>
<body>
    {!!  nl2br($data["text"]) !!}
</body>
</html>

image.png

ヘルパを使ってもっと簡単にできるみたい

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-06-27T15:54:06+09:00

6日目: <SEO対策>ogpタグとcanonicalタグ

今日の学び

・ogpタグ、canonicalタグ　←メイン
・background-size指定色々
・transitionで一部のプロパティだけ指定する方法
・transform:scale(x,y)は一つの値でも指定できる！

ogpタグ、canonicalタグ

ogpタグ・・・サイトの情報とSNSとを連携させる！
これによってSNSでの拡散力や印象がアップ！

<meta property="og:title" content="ページタイトル" />
<meta property="og:type" content="website　か　blog　か　article" />
<meta property="og:description" content="ページの簡単な説明" />
<meta property="og:url" content="ページのURL" />
<meta property="og:site_name" content="サイトの名前" />
<meta property="og:image" content="サムネイル画像のURL" />

ogt:typeは、
website・・・トップページ
article・・・下層ページ、その他　　で値を使い分ける。
他にもたくさんあるらしい。
参考サイト

facebookやtwitter専用のogpタグもある。

<meta property="fb:app_id" content="App-ID（15文字の半角数字）" /> <!--facebook用-->
<meta name="twitter:card" content=" Twitterカードの種類" />      <!--twitter用-->

App-idはfacebookにOJPタグを適応させる為に必須。
facebookを利用するのであれば取得しなければならない。
ツイッタカードの種類には以下のようなものがある。

summary・・・文章多め、画像小さめ
summary large image・・・画像大きめ、文章そこそこ
photo・・・画像大きめ、文章ほんのちょっと
gallery・・・画像複数（４枚まで）
app・・・アプリ表示用

canonicalタグについて

複数ページのSEO評価をまとめる！
→SEOランクの分散を防ぐ！

<link rel=”canonical” href=”SEOランクを集中させるサイト”/>

例えばこんなときに使おう！
①wwwありとなし、httpsとhttpなどを同じページ内容で併用して運用している場合
②スマホサイトとPCでページを分けているが内容が同じ場合　...etc

background-size指定色々

contain・・・画像を切り取らずに最大で表示
cover・・・画像の縦横比を崩さず、最大で表示、はみ出す場合は切り取る
auto・・・縦横比が維持されるように適当に拡大縮小される
パーセント指定・・・１個指定と2個指定ができる。

div{
   background-size: 30px;    /*横幅が30px,高さはauto*/
   background-size: 30px 30px; /*横幅が30px,高さ30px*/
}

一つ指定する場合は縦＝横でないので注意！

transitionで一部のプロパティだけ指定する方法

一部だけ動かせるなんて知りませんでした！

.haniwa {
   transform: translateY(30px);    /*ここをtransitionで動かなくできる！*/
   transition: opacity 1s linear;
}
.haniwa:hover {
   opacity: 0.8;
}

transitionプロパティに入っているtransition-property
で指定できます。
複数指定する場合はカンマ区切りで指定できる！

.haniwa {
   transform: translateY(30px);
   transition: opacity 1s linear,transform 2s linear;
}

transform:scale(x,y)は一つの値でも指定できる！

一つの値で設定できる！

.haniwa {
   transorm: scale (1.5)   /*scale(1.5,1.5)と同意*/
}

いっぺんに設定できたり、違う意味合いになったり、プロパティ毎でまちまちなので
難しい....

今日は以上！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-06-27T03:03:30+09:00

イチからフロントエンジニアを目指してみる話

何故急にフロントエンジニアを目指すことになったのか

自分は昔、居酒屋で働いていた。
うちの店舗は結構大型の店舗なので、毎回のシフト提出がまぁめんどくさい。
出すこっち側もラインで逐一日付と時間を打たないといけないし、それを店長はエクセルでまとめてシフトを組まないといけない。
バイトリーダー的な立ち位置にいたときは自分がシフトを組んだこともあるが、本当にめんどくさいし時間がかかって仕方なかった。

その後居酒屋でのバイトをやめ、最近IT系のベンチャーでインターンを始めた。
そこでプログラミングを学び始めた。

...これでシフトのやりとり自動化できるだろ。

思い立ったが吉日。運よくudemyでセールがやってた。

今回購入したコースがこちら

「【世界で30万人が受講】フルスタック・Webエンジニア講座（2017最新版）」
スクリーンショット 2019-06-27 1.46.33.png

バージョンが少し古いのが気になったが、フルスタックという文字に惹かれてこの講座に決めた。

　

そういう訳で、シフトの提出からまとめまでを自動化するアプリを自分で作ることをとりあえずのゴールとして、この講座を学んでいこうと思う。

1日目

今日はあまり時間がなかったので、MAMPをインストールして環境設定するところまでをやった。
１日１セクションくらいを目標にやっていこうと思う。

１/１５セクション終了

MAMPって？

初心者が初心者に教えるように書く訳だから、出来るだけ丁寧にわかりやすい記事を心がけていきたいと思う。

そもそも、MAMPというのは「Macintosh」「Apache」「MySQL」「PHP」の頭文字を取ったもので、これらの開発環境を無料で使うことができるサービスである。

何故このサービスを使うかというと、PHPとMySQLを使ったサービスをローンチする前に、自分のローカル環境でテストを行うためだ。

MAMPのダウンロード・インストール

まず、MAMPのダウンロードページにいく。

スクリーンショット 2019-06-27 2.18.42.png

自分の環境に合ったものをダウンロードし、インストール

スクリーンショット 2019-06-27 2.21.43.png

この辺でつまづくことはないと思うので、細かくは書かない。

サーバーの起動

インストールが終了したら、アプリケーションの中にMAMPがあるのでクリック

スクリーンショット 2019-06-27 2.25.35.png

下のような画面が出たら右のStart Serversをクリック

スクリーンショット 2019-06-27 2.37.11.png

開いたブラウザのURLの部分に「localhost」もしくは「127.0.0.1」と入力すると次のような画面が出る。ちなみに「127.0.0.1」はローカルのIPアドレスのこと。

スクリーンショット 2019-06-26 16.48.43.png

これが出てきていればローカルサーバーに接続成功。

MAMP・PHP初期設定

ここからはとてもよくまとまっていて参考にさせていただいた記事があるので、そちらを参考に進めていって欲しい。

参考にした記事はこちら
・【MAC】MAMP（フリー版）のインストールから初期設定＋バーチャルホスト設定までをまとめてみた

１日目の感想

今日は環境設定だけで終わってしまったが、次回のセッションはHTML5ということでコーディングの部分に入っていくと思う。
知らない世界を学ぶのはいつも楽しい。

こういう自分のログを残すのも初めてなので、三日坊主にだけはならないように頑張っていこうと思う。

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

日付別

タグ一覧