What's New Qiita

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

  • 投稿日：2019-07-09T23:34:43+09:00

[PHP]ヘッダーの上に隙間が空く問題

はじめに

PHPファイルでヘッダーをつくっていて、上に隙間が空いたので解消方法を探った。

わかったこと

❶ キャッシュが溜まっている可能性
❷ phpのinclude(['hoge']);関数が影響を及ぼしてる可能性
❸ 単純にcssでtop: 0;をあててみる

メモ

環境

  • PHPファイルにHTMLとCSSを使用している。

解消方法の検証

❶ キャッシュが溜まっている可能性

　　キャッシュを一週間分消したが効果なし

❷ phpのinclude(['hoge']);関数が影響を及ぼしてる可能性

　　文字種類をUTF-8からUTF-8Nに変更することで解消できるとのことだったが効果なし

❸ 単純にcssでtop: 0;をあててみる

　　隙間が解消されて解決に至った。

気づき

  • 単純にcssで消すことができた。
    • include(['hoge'])が影響を及ぼしていたのは間違いないようだった。

参考サイト

https://okwave.jp/qa/q8630179.html
http://kagan.hatenablog.com/entry/2014/08/09/190812

  • このエントリーをはてなブックマークに追加
  • 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-09T19:38:00+09:00

Autoprefixer導入時に「-webkit-box-orient」が消える問題への対応

まえがき

「複数行の枠に対して、長過ぎる文字列の末尾を省略して三点リーダー（…）を表示したい」と思って調べると、おそらく以下の記事で紹介されているような -webkit-box を使った方法が出てくるかと思います。

ところが、gulpやwebpackでSCSSをコンパイルしている環境においては少し罠があります。
フロントエンドに詳しくない私は小一時間ほどハマってしまったので、同じような状況で困っている方がいたらと思いメモを残します。

「-webkit-box-orient」消える問題

早速私も下記のSCSSをコピペしてきてビルドしてみたのですがどうもうまくいきません。

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;

Developer Toolで確認してみたところ、 -webkit-box-orient: vertical; が消えているようです。
なぜかというと、プロジェクトに導入していたAutoprefixerによって削除されてしまっていたのです。

Autoprexierとは、対応したいブラウザとバージョンを指定すると、それぞれの仕様に合わせたベンダープレフィックス(-webkit-、-ms-、-moz-など)を自動的に追加してくれる便利なツールです。
詳細はこちらの記事を読んでいただくと良いかと思います。（というか私もこれを読んで初めて知りました...笑）

そこで、次の3つの対応方法を紹介いたします。

対応方法

① 一時的にAutoprefixerを無効にする方法

これが一番簡単で手っ取り早い方法です。
SCSS中で直接Autoprefixerを有効・無効を指定します。

  display: -webkit-box;
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  -webkit-line-clamp: 3;

ただし、バージョンが8.4以降であれば次のように書く方が良いでしょう。

  display: -webkit-box;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;

また、SCSSコンパイル時のoutputStyleを compressed にしていると、このコメント自体が削除されてしまうので、 /*! コメント */ としてあげましょう。

② gulpやwebpack側の設定を変える方法

複数の箇所でこの対応をする必要があった場合には、この方法もありかもしれません。
ただ残念ながら私はどちらにも詳しくないため、解説は他の方にお譲りしたいと思います。

③ Autoprefixerのバージョンを上げる方法

なんと、私がこの問題について調べていたちょうど3日前に、Autoprefixer側がこの問題に対応しました！
コミットログはこちらです。
なので、プロジェクトとしてバージョンを上げることができそうであれば、 9.6.1 以降にアップデートするのが一番良いでしょうか。

あとがき

フロントエンド難しい。。。
（皆さんブラウザ対応とかレスポンシブとかライフサイクルとかSEOとかトレンドだとか本当に全部気にしてるの...？PRにスクショ貼っただけで満足してるのは私だけ...？）

  • このエントリーをはてなブックマークに追加
  • 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-09T17:36:48+09:00

CSSで2つの要素を重ねる

2つの要素を重ねる

position: absolute;で要素同士を重ねて表示できる。
topやleftを指定して、表示位置を調整できる。
その場合、サイト全体の左上部分が基準位置となる。

基準としたい親要素にposition: absolute;を指定すると、
基準位置を、親要素の左上に変更できる。

index.html
<div class="parent">
  <img class="child">
</div>
stylesheet.css
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 20px;
  left: 15px;
}
  • このエントリーをはてなブックマークに追加
  • 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:54:48+09:00

【CSS】背景を斜めにする（備忘録）

※あくまでも自分の備忘録用であり、お役に立たない場合やブラウザによって綺麗に斜め背景にならない場合があります。あらかじめご了承ください。

完成イメージ

BCBF5C6C-CF72-4268-97E9-FA40AA8CC9B7.png

使用の意図

-躍動感を出す、デザインセンス向上のため。
-若者向けやビジネス系に多い印象。

作り方

擬似要素（::beforeもしくは::after）で図形を作って、背景に覆うように配置する。

コード

HTML

qiita.rb
<div class="contents">
    <h2>Contents</h2>
    <div class="card-contents"></div>
</div>

CSS

qiita.rb
    .contents {
      max-width: 960px;
      margin: 0 auto;
      padding: 60px 20px 20px;
      overflow: hidden;
      position: relative;
      background: rgba(26,161,230,.25);
    }

    .contents h2 {
      margin: 200px auto 0;
      text-align: center;
    }

    .contents-inner {
      max-width: 340px;
      margin: 0 auto 20px;
      position: relative;
    }

    .contents-inner {
      position: absolute;
      top: -416px;
      left: -300px;
      -webkit-transform: rotate(-10deg);
      transform: rotate(-10deg);
      width: 400%;
      height: 200px;
      background: #fff;
      content: "";
    }

最後に

これを作った後に回転で図形を作って覆う方法はよくないと書いてありました。（おそらく臨機応変さにかけるという意味）
参照
一つの方法としてこういう作り方もあるよということで、残しておきます。

  • このエントリーをはてなブックマークに追加
  • 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: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-09T13:22:34+09:00

CSSの基本～コメントアウト、余白追加など

CSSの基本

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

基本構造

sample.css
h1 {
  color: red;
}

コメント、色指定、サイズ指定など

sample.css
/*コメント*/

/*色、サイズ等の指定*/
h1 {
  /*色*/
  color: #ff0000;
  /*フォントサイズ*/
  font-size: 10px;
  /*フォント種類*/
  font-family: serif;
  font-family: "Avenir Next";
  /*背景色*/
  background-color: #dddcdd;
  /*縦、横サイズ*/
  width: 200px;
  height: 100px;
}

class、idなどの指定

sample.css
/*classにCSSを設定*/
.sample {
}
/*idにCSSを設定*/
#sample {
}
/*class内のリストにCSSを設定*/
.sample li{
}
/*複数のセレクタに同じCSSを設定*/
h1, p{
}

リストを横並びにする

sample.css
li {
  /*リストの黒点をなくす*/
  list-style: none;
  /*リストを横並びにする*/
  float: left;
}

余白をつける

sample.css
.logo{
  /*paddingは内側の余白*/
  /*上10px、右20px、下30px、左40px*/
  padding: 10px 20px 30px 40px;
  /*上下20px、左右40px*/
  padding: 20px 40px;

  /*marginは内側の余白*/
  /*上下20px、左右40px*/
  margin: 20px 40px;
  /*上20px*/
  margin-top: 20px;
}

ボーダー線

sample.css
.border {
  border-bottom: 2px solid #dee7ec;
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-07-09T12:07:25+09:00

RSCSSを使用した感想と課題

概要

RSCSSは合理的なCSS設計のためのアイデア集です。
スッキリしていて良さそうな印象だったので、サイト制作に取り入れてみました。
その時の感想と課題を書きます。

RSCSSについて

簡単に以下のような特徴があります。

  • Components で組み立てる。Components は - で区切った２ワード。（例： .like-button）
  • Components の内部要素は Elements。Elements は１ワード。（例： .field）
  • Components も Elements も variants を持てる。variantsは - ではじめる。（例： .-large）
  • Components はネストできる。
  • Layout に関するスタイルは親 Components で指定する。

詳細は公式サイトで確認してください。
https://rscss.io/index.html
https://qiita.com/kk6/items/760efba180ec526903db

感想

良いところ

  • 組み立てるのがかんたん。Elementsに簡単なワードを使えるのが良い。
  • Componentsごとにscssファイルを分けるの良い。ただし、globは必須。
  • Componentsの命名規則は２ワード、Elementsは１ワードって分け方がよい。
  • Variantsの命名が気に入った。（.-large）

残念なところ

  • キーセレクタが汎用的なワードになるのでパフォーマンス的にすこし心配。
  • 過剰なネストを避ける場合、複雑なデザインでは細かくComponentsを分ける必要がある。現実的には、ネストは１階層までとか無理。
  • レイアウトに関するスタイルを親のComponentsからの指定に徹底するのが大変。
  • ネストしたComponentsの複雑さをsassのextendで解決するのは反対。後から情報を追うのが面倒になる。
  • Componentsの命名規則とファイルのフォルダ構成に課題あり。（プロジェクト内でルール化が必要）

設計のアイデア

RSCSSの改善案ではなく、RSCSSを取り入れ、これからどんなCSS設計を採用するかについてのアイデアです。

ネスト問題

デザインの複雑性に対応するためにはネストが深くなる問題は解決する必要があります。
ElementsをComponentsの子クラスではなく、BEM的に書いた方がよいと思いました。
個々のComponentsごとに１つのscssファイルにまとめるのは賛成です。

.component-name > .inner {...}
.component-name > .inner > .text {...}
 ↓↓↓
.component-name_inner {...}
.component-name_text {...}

状態変化

RSCSSのVariantsはそのままつかうが、Helpersは使用しません。便利かもしれないけど、複雑化するためです。

// Variants
.component-name {
  &.-large {...}
}
// Helpers
._center { text-align: center !important; }　//NG

レイアウト

レイアウト関連のスタイルは親からの指定を「推奨」にします。画面上部に固定するコンポーネントなどを考慮するためです。
記述の場合は、親ではなく子の中で指定するようにします。依存関係がまとまり、コンポーネントを削除しやすくなります。これは、ECSSから得たアイデアです。

.child-component {
  .parent-component > & {
    position: absolute;
    left: 1em;
    top: 1em;
  }
}

まとめ

課題が残るが、良いアイデアを得ることができました。
結局のところ、どこまで変化を許容して設計するかだと思います。
いろんな場所で便利に使えるclassは変化に弱く、個々のUIパーツごとに完結させると、変化に強いがコードが多くなります。

中規模以上だったり、運用期間がある場合は、個々のUIパーツごとに完結させる方が良いというのが、今現在の結論です。その上で、開発しやすい設計を考えていこうと思います。

  • このエントリーをはてなブックマークに追加
  • 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で続きを読む

日付別

タグ一覧