What's New Qiita

20190709のHTMLに関する記事は19件です。

  • 投稿日：2019-07-09T23:32:48+09:00

【pugのコメント】HTML方式のコメントとスラッシュの使い分け

こんにちは、プログラミングスクールのレビューサイト「スクールレポート」を運営しているアカネヤ(@ToshioAkaneya)です。

pugのコメントにはHTML方式のコメントではなくスラッシュを使おう

pugのコメントにはHTMLのコメントの
<!-- コメント -->
のような形と、
// コメント
というスラッシュを使ったコメントがあります。

使い分けについてです。
// コメントを使うと、その行の階層以下のpugもコメントとなります。
つまり、// コメントはその行の階層以下もコメントにしたいときに使うと良いです。一時的にコメントアウトしたい場合がよく当てはまると思います。

<!-- コメント -->はより柔軟に使えます。

この記事が参考になれば幸いです。

終わりに

Ruby on RailsとVueで作成したプログラミングスクールのレビューサイトを運営しています。良ければご覧ください。https://school-report.com/

終わりに

Ruby on RailsとVueで作成したプログラミングスクールのレビューサイトを運営しています。良ければご覧ください。https://school-report.com/

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

【pugのコメント】HTML方式のコメントとスラッシュの使い分け方

こんにちは、プログラミングスクールのレビューサイト「スクールレポート」を運営しているアカネヤ(@ToshioAkaneya)です。

pugのコメントにはHTML方式のコメントではなくスラッシュを使おう

pugのコメントにはHTMLのコメントの
<!-- コメント -->
のような形と、
// コメント
というスラッシュを使ったコメントがあります。

使い分けについてです。
// コメントを使うと、その行の階層以下のpugもコメントとなります。
つまり、// コメントはその行の階層以下もコメントにしたいときに使うと良いです。一時的にコメントアウトしたい場合がよく当てはまると思います。

<!-- コメント -->はより柔軟に使えます。

この記事が参考になれば幸いです。

終わりに

Ruby on RailsとVueで作成したプログラミングスクールのレビューサイトを運営しています。良ければご覧ください。https://school-report.com/

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

HTML&CSS：Ｗｅｂページ作成で詰まったところと解決策

未来電子テクノロジーでインターンをしている宮﨑です。

プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。

はじめに

一から自己紹介ページを作るという課題のもと、さっそく作成をしていたのですが中々うまくいかず試行錯誤を繰り返し…
ということで、今回その試行錯誤で得た問題と私が行った解決法についてまとめてみます。
（解決策はあくまでも一例に過ぎず、他にも方法はあります）

親要素のheightがヘン！

問題：要素が認識されずに高さが縮まってしまった
原因：floatしている要素は中身だと認識されない
解決策：floatした要素の親要素の最後に空のdiv要素を作り、そこにclearプロパティを使う

floatは文字通り要素を「浮かせる」プロパティです。
そのため親要素には中身として認識されず、背景とうまくかみ合わずにレイアウトが崩れることがあります。
clearを使うことでfloatが解除されます。

＜a＞タグで上下のwidthやheightが調節できない

原因：インライン要素のままになっている
解決策：インラインブロック要素に変える

インライン要素では、widthやheight、paddingの上下などを指定できません。

を書くことでそれらが指定できるようになります。

自分が撮った写真の貼り付け方がわからない!

解決策：①写真をhtmlやcssと同じ階層のファイルに移動させる
　　　　②htmlのimgタグでsrcの" "の間に画像の情報(~.jpegや~pngなど)を入れる

まとめ

自分で一から作ると、わかっていた気になっていただけのことがたくさん出てきました。
焦らずに基本的なことからしっかり理解していきたいです。

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

HTML の 文字 の サイズ を 設定する

目的

  • HTMLファイルの文字のサイズを設定する方法をまとめる

押さえるポイント

  • 文字のサイズを変更したい要素をCSSで指定してサイズを設定する。
  • font-sizeプロパティを使用する。
  • ピクセル数を用いて指定する。

書き方の例(CSS)

要素の名前かクラス名{
    font-size: ピクセル数;
}

より具体的な例

〜サンプルコード〜
- 下記にHTMLファイルの内容を記載する。

<h1>おはようございます。</h1>
  • CSSで上記のHTMLファイルのh1要素の文字の大きさを30pxにする設定を行う。
  • 下記にCSSファイルの内容を記載する。
h1 {
    font-size: 30px;
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-09T22:11:02+09:00

HTML の ひな型 の 記載方法

目的

  • HTMLファイルのひな型の記載方法をまとめる。

この記事のターゲット

  • HTMLファイルの最初の記載方法がわからない方
  • HTMLを書きたいが最初に何をすれば良いかわからない方
  • HTMLファイルのひな型を知りたい方
  • HTMLひな型を一から学んでいて嫌になってしまった方
  • ひな型のテンプレートをコピーしたい方

押さえておきたいポイント

  1. HTMLファイルを書くにはひな型が必要になる
  2. HTMLファイルのひな型とは、HTMLファイルが正常に表示されるようにする設定のこと
  3. ひな型はテンプレートのようなものなのでHTMLファイルを作成したら最初に記載する

ひな型の書き方

ひな型本体の説明は後述する。

  • 「ページタイトル」には任意のタイトル(ブラウザのタブ表示される文字)を記入する。
  • 「CSSファイルまでのパスとファイル名」はひな型を書くHTMLファイルからCSSファイルまでのファイルパスを相対パスで記載する。
    ※HTMLファイルとCSSファイル同じフォルダ階層に設置している場合はCSSファイル名のみの指定でOK ※ひな型が必要な方は下記をそのままコピーして上記の必要箇所を記入すれば使用できます。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ページタイトル</title>
    <link rel="stylesheet" href="CSSファイルまでのパスとファイル名">
  </head>
  <body>
    <header>
    </header>
    <div class="main">
    </div>
    <footer>
    </footer>
  </body>
</html>

ひな型の内容の説明

下記のひな型の番号にリンクした説明を下記に記す。
- ①
文章の解釈に使用するDTD(Document Type Definition)と呼ばれる文書の型を宣言している。
宣言したHTMLのバージョンで使用する要素(タグ)や属性の名前などの情報が定義される。
- ②
htmlタグで囲まれた文書がHTML文書で記載することを指定している。
※ちなみにHTMLは「Hyper Text Markup Language」の頭文字を取ったもの
- ③
headタグの中に本HTMLファイルの設定を記載する。
設定する最低限の内容は下記の3つ

  1. 文字コード
  2. ブラウザタブに表示されるページタイトル
  3. リンクするCSSファイルのファイルパスかファイル名

※設定の記載内容は下記で詳しく説明する。
- ④
metaタグのcharset属性で文字コードを指定する。
文字コードは特に意図がない場合utf-8を指定する。
- ⑤
titleタグでページのタイトルを指定する。
titleタグ囲んだ文字がページのタイトルとなり、ブラウザのタブに表示される。
- ⑥
linkタグのrel属性でstylesheetを与えることによりCSSファイルを読み込む設定をする。
linkタグのhref属性でCSSのファイルパスかファイル名を与えることによりCSSファイルを読み込む。
※CSSファイルの場所による記載方法の違いは本記事に後述する。
- ⑦
bodyタグを作成しHTMLで実際に表示させたい内容を記載していく。
bodyタグ内に作成する要素の基本は下記の3つ

※この部分は好みなので鵜呑みにしなくてOK！

  1. headerタグ
  2. divタグ(クラス名はmain)
  3. footerタグ
  • ⑧
    headerタグを作成する。
    表示させる内容のheaderに当たる部分を記載する。
  • ⑨
    クラス名を mainとしたdivタグを作成する。
    表示させる内容のmainに当たる部分を記載する。
  • ⑩
    footerタグを作成する。
    表示させる内容のfooterに当たる部分を記載する。
<!-- ① -->
<!DOCTYPE html>

<!-- ② -->
<html>

  <!-- ③ -->
  <head>

    <!-- ④ -->
    <meta charset="utf-8">

    <!-- ⑤ -->
    <title>ページタイトル</title>

    <!-- ⑥ -->
    <link rel="stylesheet" href="CSSファイルまでのパスとファイル名">

  </head>

  <!-- ⑦ -->
  <body>

    <!-- ⑧ -->
    <header>
    </header>

    <!-- ⑨ -->
    <div class="main">
    </div>

    <!-- ⑩ -->
    <footer>
    </footer>
  </body>
</html>

CSSの設置場所の違いによる指定方法時の違い

具体的な例を用いてhead内でのCSSファイルの読み込み指定方法の違いをまとめる。
また、HTMLファイル名は「tropical_fish.html」とし、CSSファイル名は「preference_file.css」とする。

CSSファイルがHTMLファイルと同じフォルダ階層に存在するとき

フォルダ階層を下記に記載する。

# HTMLファイルが設置してあるフォルダ内の構成

tropical_fish.html
preference_file.css

上記のファイル構成の場合はtropical_fish.htmlのheadのlinkにて下記のようにCSSファイルを指定する。

<link rel="stylesheet" href="preference_file.css">

CSSファイルがHTMLファイルの一つ下のフォルダ「LOVE_CSS」の中に存在するとき

※本来CSSファイルを格納するフォルダはわかりやすい名前にするべきです。
フォルダ階層を下記に記載する。

tropical_fish.html
LOVE_CSSフォルダ
    ┗preference_file.css

上記のファイル構成の場合はtropical_fish.htmlのheadのlinkにて下記のようにCSSファイルを指定する。

<link rel="stylesheet" href="./LOVE_CSS/preference_file.css">

まとめ

  • HTMLファイルのひな型の記載をまとめた。
  • CSSファイルの設定にはHTMLファイルとの位置関係を意識する。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-09T18:27:58+09:00

CSSキャッシュを自動で読み直す

スーパーリロード無しで、CSSを自動更新したい！

クエリをdate()関数でコントロールする

hoge.css の後ろに

?<?php echo date('Ymd-Hi'); ?>

を下記のように記述する。

<link type="text/css" rel="stylesheet" href="style.css?<?php echo date('Ymd-Hi'); ?>">

参考

https://www.merges.co.jp/archives/745

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

私が実際に使っている、HTMLやCSSのコード品質を上げたい時に便利なツール集

無料ですぐ使えるコードチェッカー

コード品質は上げたいけれど、チェックにかかる手間はなるべく省きたい。
ツール自体は色々あるため自分に合ったものを選ぶべきですが、ここでは網羅的にではなく、私が実際に使っている物を中心にまとめました。
見出しをクリックすると、該当の外部サイトに飛びます。

※ツールやプラグインは随時追加予定です。

CSScomb

bcb3e7d6-043f-459f-a5db-fd8ba1fac43c.png
CSScombはSassおよびCSSのコーディングスタイルフォーマッタです。
改行やセミコロン、スペースといったコード整形に加えて、スタイルシートの各プロパティと値のセットを指定のルールに従って並びかえてくれます。

CSSは気付くと膨大な行のファイルになることが多いため、少しでも管理しやすい形にするために導入しています。一定の並びに合わせることで、同セレクタに対するプロパティの重複を防げるなど、手軽に使える割にメリットが多いと感じています。

ユーザの設定ファイルをカスタマイズすることで、独自の設定のコード整形や並べ替えルールを指定できます。

ちなみに私は Windows7、Sublime Text で同プラグインを使用しています。
調べたところ VS CODE でも使えるようです。扱いに関しては以下の記事が参考になります。

参考：
・CSScomb JS を Sublime Text 3 で使ってみる
・VS CODEでCSSのフォーマットをするまで

上記以外にも、CSScombの使い方に関する情報はたくさんあるため、必要に応じて検索してみてください。

CSScombが正常に動作せずエラーが出る場合は、SassまたはCSSの記述にミスがあるためかもしれません。
どのファイルのどこにエラーがあるのかまでは教えてくれないため、使用しているSass・CSSファイルのどこが間違っているのか確認してみてください。私が経験したパターンは以下です。

エラーでよくあるパターン

  • プロパティの後ろに ;(セミコロン) がない
  • セレクタのみ指定され、プロパティや値が空

HTML 5 Outliner

HTML5文書のアウトラインを確認できます。
image.png

Chrome用プラグインもあります。
チェックのたびに上記ページを開く必要がないため、使い勝手の良さは優れています。

Chromeプラグイン:HTML5 Outliner

image.png

CSS Validation Service

image.png
検証方法は「URL」「アップロード」「直接入力」の3つです。
作成途中でファイルがまだローカルにある場合は、コードをそのままコピペしてチェックできる「直接入力」を使うとよいでしょう。

PageSpeed Insights

0ba9cc20-4be6-4207-bc20-ee14762cf320.png
Webページの読み込み時間を測定します。
また、診断結果としてページの読み込み時間を短くするための方法を提案します。

モバイルフレンドリーテスト

04cb930f-7a7a-4795-9261-8edff19f2be6.png
モバイルデバイスでのページの使いやすさをテストします。
ページの URL を入力するだけで、使いやすさのスコアが表示されます(原文ママ)。

Nibbler

dd871ce2-e04d-42d5-a807-78d61112972f.png
NibblerはWebサイトをテストするための無料ツールです。
任意のWebサイトのアドレスを入力すると、アクセシビリティ、SEO、ソーシャルメディア、テクノロジなどの主要分野について、Webサイトのスコアを10点満点で評価します。

注意点としては、解析に数分程度時間がかかることと、サブディレクトリ以下のサイトを指定して解析できない点が挙げられます。

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

HTMLでデスクトップアプリっぽい画面構造を構築するベスト(?)プラクティス

Webでデスクトップアプリっぽい画面構造を構築するベスト(?)プラクティス

最近、仕事でWeb屋さんのまねごとをした(あるツールを作ったが、そのUIをWebアプリにする必要があった)。
デスクトップアプリのような画面を多数作る必要があったので、効率を求めていろいろな方法を試した中で、一番良かったと思う方法をまとめる。

デスクトップアプリっぽい画面構造とは？

以下のようなスタイルを持った画面構造。

  • ブラウザの画面全体を使い切る。
  • 画面が縦横のペイン分割で構成されている。
  • 固定サイズで表示されるペインと、画面サイズに応じて拡縮されるペインがある。
  • 画面にコンテンツが収まりきらない場合、画面全体がスクロールするのではなく、ペインごとにスクロールする。

Qiitaの投稿画面もそういう構造ですね。

image.png

ねらい

  • 少数のCSSクラスを定義するだけで、大半の画面レイアウトに対応できること。

    開発効率も保守性も下がるので、できるだけ画面ごとにCSSを書きわけたくない。

  • HTML(DOM)構造が複雑にならないこと。

    DOMが複雑になると、やっぱり開発効率も保守性も下がる。

  • ブラウザ個別対策が最小限で済むこと

    トリッキーなことをしない。ある程度枯れた技術を使う。

手法

FlexBoxを使う。

最近のブラウザであればほぼ対応。ベンダープレフィックスもつけなくていいくらい。

IEも11は対応。IE 10も(怪しいながら一応)FlexBox対応。

実装

最終的に、こんな感じにした。

See the Pen DesktopAppLike by hogegex (@hogegex) on CodePen.

解説

  • 画面全体を覆うため、最上位要素にmatchParentクラスを指定する。

  • 画面を縦に分割したい場合はstackVerticalクラス、横に分割したい場合はstackHorizontalクラスを指定し、ペインとなる子要素を追加する。

  • 通常のペインは、内容によってサイズが決まる。サイズを固定もしくは制約したい場合は、対象要素に(max- / min-) width / heightを指定する。

  • stretchableクラスを指定すると、そのペインは、余白いっぱいに広がる。複数に指定した場合は、余白を等分に分け合う。

  • ペインの内容をスクロールさせたい場合は、verticalScrollableクラスを指定する。

  • ペインを再分割したい場合は、ペインの要素にstackVertical / stackHorizontalを指定する。

注意事項

ブラウザによっては、ペイン内の一部の要素(textarea, selectなど)が妙に伸び縮みすることがあった。
これは、一部の要素にデフォルトでflex-shrinkが設定されているためだった。

以下のように明示的にキャンセルするか、リセットCSSを適用するとよさそう。

textarea, select {
    flex-shrink: 0;
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-09T16:59:09+09:00

Laravel　キーワード検索　複数

Laravelアプリにて、複数条件の検索機能を実装しました！
文字とカテゴリーの２つで検索出来る仕様です！

始めコントローラー/モデルで下記のように、条件毎でメソッドを分け記述していました。(メソッド名は気にせず)

QuestionsController.php
class QuestionsController extends Controller
{
    private $question;
    private $category;

    public function __construct(Question $question, Category $category)
    {
        $this->question = $question;
        $this->category = $category;
    }

   public function index(Request $request)
    {
        //カテゴリー一覧を表示するため、カテゴリーモデルでデータを連想配列で取得するメソッド
        $categoryNames = $this->category->カテゴリー名取得メソッド();

        $keyword    = $request->input('キーワード');
        $categoryId = $request->input('カテゴリー');

        if (isset($keyword) && isset($categoryId)) {
            $questions = $this->question->なんちゃらメソッド１($keyword, $categoryId);
        } elseif (isset($keyword)) {
            $questions = $this->question->なんちゃらメソッド２($keyword);
        } elseif (isset($categoryId)) {
            $questions = $this->question->なんちゃらメソッド３($categoryId);
        } else {
            $questions = $this->question->all();
        }

        return view('question.index', compact(['questions', 'categoryNames']));
    }
}

モデル

questiion.php
class Question extends Model
{
    public function なんちゃらメソッド1($keyword, $categoryId)
    {
        return $this->with(['紐づくデータ'])->where('title', 'LIKE', '%' . $keyword . '%')
                                         ->where('category_id', '=', $categoryId)
                                         ->get();
    }

    public function なんちゃらメソッド2($keyword)
    {
        return $this->with(['紐づくデータ'])->where('title', 'LIKE', '%' . $keyword . '%')->get();
    }

    public function なんちゃらメソッド3($categoryId)
    {
        return $this->with(['紐づくデータ'])->where('category_id', '=', $categoryId)->get();
    }
}

今回は条件が２つなので上記の記述量で収まっていますが、検索条件が増えた場合、メソッドと条件分岐をその都度書き足す必要が出てきます。
めんどくさいですし、コントローラがファットになってしまいます。

複数条件での検索を探す中で、クロージャやorWhereなど色々出てきましたが、わからず。。
最終的に下記の記述に書き直しました！

QuestionsController.php
class QuestionsController extends Controller
{

   <--- 略 --->

   public function index(Request $request)
    {
        $categoryNames = $this->category->カテゴリー名取得メソッド();

        $questions     = $this->question->なんちゃらメソッド($request);

        return view('question.index', compact(['questions', 'categoryNames']));
    }
}

モデル

Question.php
class Question extends Model
{
    public function なんちゃらメソッド($request)
    {
        $keyword    = $request->input('キーワード');
        $categoryId = $request->input('カテゴリー');
        $query      = $this->with(['紐づくデータ', '紐づくデータ']);

        if (isset($keyword)) {
            $query->where('title', 'LIKE', '%' . $keyword . '%');
        }

        if (isset($categoryId)) {
            $query->where('category_id', '=', $categoryId);
        }

        return $query->get();
    }
}

inputでの値の抽出もモデルに記述し、なるべくコントローラーのコードを減らしました！
eagerロードで紐づく値を取得したものを$query変数に代入し、条件が入力されていればその条件にあったSQLの処理が走ります！

このように書けば、メソッド毎に処理を追うこともなくなり、可読性が上がったと思います！

改善点あればご教示お願い致します！

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

Smartyでエスケープしてかつ”nl”を改行する

探したけど、これがなかった。 

{$project_name|escape|nl2br}

PS:今更感あるかも？

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

Facebook、Twitterボタンのサンプル

ボタンの作成手順

1. ボタンの作成

htmlでボタンを作成する
<a href="#" class="btn facebook"></a>

2. CSSの指定

facebookボタンに#3b5998、twitterボタンに#55aceeを指定する。

Font Awesomeの導入手順

1. Font Awesomeの導入

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
をHTMLに読み込む。

2. クラスの指定

<span>タグにfaクラスとfa-アイコン名　クラスを指定する
※クラス名のはFont Awesomeのサイトを参照

サンプル

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Title</title>
    <link rel="stylesheet" href="stylesheet.css">
    <!-- ここでFont Awesomeを読みこむ -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  </head>
  <body>
    <header>
    </header>
    <div class="top-wrapper">
      <div class="container">
        <div class="btn-wrapper">
          <a href="#" class="btn facebook">
            <!-- ここに<span>タグを追加 -->
            <span class="fa fa-facebook"></span>
            Facebookで登録
          </a>
          <a href="#" class="btn twitter">
            <!-- ここに<span>タグを追加 -->
            <span class="fa fa-twitter"></span>
            Twitterで登録
          </a>
        </div>
      </div>
    </div>
  </body>
</html>
stylesheet.css
.btn {
  padding: 8px 24px;
  color: white;
  display: inline-block;
  opacity: 0.8;
  border-radius: 4px;
}

.btn:hover {
  opacity: 1;
}

.facebook {
  background-color: #3b5998;
  margin-right: 10px;
}

.twitter {
  background-color: #55acee;
}

.fa {
  margin-right: 5px;
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-09T16:09:13+09:00

HTMLでスペースをいれる

HTMLでスペースをいれる

しょっちゅう検索して探してるものだから…メモ。

『 &ensp; 』　半角スペースより少し広い空白
『 &emsp; 』　全角スペースとほぼ同じ大きさの空白
『 &thinsp; 』　&nbsp;の空白より小さい空白



もしくは

<span style="margin-left: 20px">なんとかについて</span>

image.png

<span>で囲った「なんとかについて」の前（赤枠）が、margin-left:20pxによって20pxあく。


<h2 style="margin-left: 20px">なんとかについて</h2>

<h1~5>タグも使える。


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

【Progate】画像の上にテキストをかぶせる

画像の上にテキストをかぶせたい時のサンプル。
background-image: url(URLを記入);で背景画像を指定。
background-size: cover;で表示範囲を埋めるように画像を拡大・縮小。

HTML

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Title</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <header>
    </header>
    <div class="top-wrapper">
      <div class="container">
        <h1>タイトル</h1>
        <p>説明文です。</p>
      </div>
    </div>
    <div class="lesson-wrapper">
    </div>
    <div class="message-wrapper">
    </div>
    <footer>
    </footer>
  </body>
</html>

CSS

stylesheet.css
body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN";
}

a {
  text-decoration: none;
}

.container {
  width: 1170px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

.top-wrapper {
  padding-top: 180px;
  padding-bottom: 100px;
  background-image: url(URLを記載);
  color: white;
  background-size: cover;
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-09T16:01:41+09:00

画像の上にテキストをかぶせる

画像の上にテキストをかぶせたい時のサンプル。
background-image: url(URLを記入);で背景画像を指定。
background-size: cover;で表示範囲を埋めるように画像を拡大・縮小。

HTML

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Title</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <header>
    </header>
    <div class="top-wrapper">
      <div class="container">
        <h1>タイトル</h1>
        <p>説明文です。</p>
      </div>
    </div>
    <div class="lesson-wrapper">
    </div>
    <div class="message-wrapper">
    </div>
    <footer>
    </footer>
  </body>
</html>

CSS

stylesheet.css
body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN";
}

a {
  text-decoration: none;
}

.container {
  width: 1170px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

.top-wrapper {
  padding-top: 180px;
  padding-bottom: 100px;
  background-image: url(URLを記載);
  color: white;
  background-size: cover;
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-09T16:01:41+09:00

背景画像の上にテキストをかぶせる

背景画像の上にテキストをかぶせたい時のサンプル。
background-image: url(URLを記入);で背景画像を指定。
background-size: cover;で表示範囲を埋めるように画像を拡大・縮小。

HTML

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Title</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <header>
    </header>
    <div class="top-wrapper">
      <div class="container">
        <h1>タイトル</h1>
        <p>説明文です。</p>
      </div>
    </div>
    <div class="lesson-wrapper">
    </div>
    <div class="message-wrapper">
    </div>
    <footer>
    </footer>
  </body>
</html>

CSS

stylesheet.css
body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN";
}

a {
  text-decoration: none;
}

.container {
  width: 1170px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

.top-wrapper {
  padding-top: 180px;
  padding-bottom: 100px;
  background-image: url(URLを記載);
  color: white;
  background-size: cover;
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-09T11:57:57+09:00

HTMLの基本（コピペ用）

HTMLの基本

基本構造

sample.html
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1></h1>
    <p></p>
  </body>
</html>

コメント、リンク、画像、リスト

sample.html
<!--コメント-->

<!--リンク-->
<a href="URL"></a>

<!--画像-->
<img src="URL">

<!--リスト-->
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-09T11:57:57+09:00

HTMLの基本～コメントアウト、リンクなど

HTMLの基本

コピペして使ってください。
HTMLの基本構造、コメント、リンク、画像、リストを記載。

基本構造

sample.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Title</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <header></header>
      <div class="top-wrapper"></div>
      <div class="middle-wrapper"></div>
      <div class="bottom-wrapper"></div>
    <footer></footer>
  </body>
  </body>
</html>

コメント、リンク、画像、リスト

sample.html
<!--コメント-->

<!--リンク-->
<a href="URL"></a>

<!--画像-->
<img src="URL">

<!--リスト-->
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-09T07:50:44+09:00

font-familyが-apple-systemに指定されている状態でtext-align: justify;をかけるとiOS端末にて豆腐（文字化け文字）が出現する

元タイトル：【情報ください】WebページにてiOS端末にのみ豆腐（文字化け文字）が発生する現象に遭遇しました

タイトルの通りです。
その現象が起きたのはこちらのページ（自分のブログ）です。
文字コードはutf-8、HTMLや疑似要素に変な文字が入っているなんてことはありません。

これについて、↑のブログにも書いていますが、発生した条件と自分の予測についてそのまま貼っておきます。

発生条件の整理

この豆腐はiOS端末でしか再現されません。
しかし、strongやcodeなどのインライン要素に当たるタグを使っており、その中身の両端が半角文字かつ隣接する文字が半角文字でない場合にこのバグは発生します。

中身の両端が全角文字であれば隣接する文字が半角文字でない場合でも豆腐は発生しません。
中身の両端が半角文字でも隣接する文字が半角文字であれば豆腐は発生しません

また、list内ではこれらの条件に関わらず豆腐は発生しません。

原因の推測

まず、MacOS,Android,iOSの3環境で検証してこの事例を確認できたのがiOS端末のみであったため、これはiOSのOS単位のバグと考えています。
ただし、他のサイトではあまり発生していないように見えますね。
これはおそらく、文字の揃え方に関する CSS の記述が影響していると考えられます。

当ブログでは、本文に対して text-align: justify; 、つまりCSSによる両端揃えを適用しています。
他のそのようなサイトを確認したわけじゃないのでなんともですが、ひとまずそこが原因だと睨んでいます。

190709追記

@beffell さんのコメントを受けて確認した結果、 font-familyが-apple-systemに指定されている状態でtext-align: justify;をかけるとこの問題が発生することが確認できました。
情報ありがとうざいます。

情報ありがとうございました

自分が発見していたより明確な条件を絞り込むことが出来ました。
ありがとうございました。
引き続き、情報があると教えていただけると幸いです。

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

【情報ください】WebページにてiOS端末にのみ豆腐（文字化け文字）が発生する現象に遭遇しました

タイトルの通りです。
その現象が起きたのはこちらのページ（自分のブログ）です。
文字コードはutf-8、HTMLや疑似要素に変な文字が入っているなんてことはありません。

これについて、↑のブログにも書いていますが、発生した条件と自分の予測についてそのまま貼っておきます。

発生条件の整理

この豆腐はiOS端末でしか再現されません。
しかし、strongやcodeなどのインライン要素に当たるタグを使っており、その中身の両端が半角文字かつ隣接する文字が半角文字でない場合にこのバグは発生します。

中身の両端が全角文字であれば隣接する文字が半角文字でない場合でも豆腐は発生しません。
中身の両端が半角文字でも隣接する文字が半角文字であれば豆腐は発生しません

また、list内ではこれらの条件に関わらず豆腐は発生しません。

原因の推測

まず、MacOS,Android,iOSの3環境で検証してこの事例を確認できたのがiOS端末のみであったため、これはiOSのOS単位のバグと考えています。
ただし、他のサイトではあまり発生していないように見えますね。
これはおそらく、文字の揃え方に関する CSS の記述が影響していると考えられます。

当ブログでは、本文に対して text-align: justify; 、つまりCSSによる両端揃えを適用しています。
他のそのようなサイトを確認したわけじゃないのでなんともですが、ひとまずそこが原因だと睨んでいます。

190709追記

@beffell さんのコメントを受けて確認した結果、 font-familyが-apple-systemに指定されている状態でtext-align: justify;をかけるとこの問題が発生することが確認できました。
情報ありがとうざいます。

情報をいただけるとありがたいです

今回遭遇したこの現象について、なにかわかる方、知っている方がありましたら情報をいただけると幸いです。
こういうのはどこに通報したら良いのか…
よろしくおねがいします。

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

日付別

タグ一覧