- 投稿日：2020-12-06T21:25:58+09:00
私の爆速コーディング（ツール編）
はじめに
コーディング業をメインでフリーランスエンジニアをしています。なかざわです。
CSSと同い年。CSS大好き！新卒からWeb制作会社に勤めてから「コーディング向いてないや。」が口癖で挫折しかけていた私でしたが
3年目には上司に「え、コーディング・・・はやいね！？」と驚かれるまでになっていました。私もびっくり！
涙目でコーディングPDCAをひたすら回しまくっていた、私のベストなコーディング（至、爆速コーディング）をご紹介したいと思います。本記事は前編としてコーディングを助けるツールをメインにご紹介したいと思います。
16日公開の後編は設計思想・書き方ルールから、ベストなコーディングへアプローチすることをメインにお届けします。現場で求められるコーディング
そもそも「爆速コーディング」の前に必要なことがあります。
まずクオリティです。何も補足がいらないくらい至極当たり前のことですね・・・。
というのを前提にして「コーダー」に求められること
- 文書的整合性
- ピクセルパーフェクト
- 作業の効率性 & メンテナンス性
の3点が求められていると思っています。
ざっくりと「成果物のクオリティ」と「開発のスムーズさ・安全さ」です。
それぞれ補足説明しながら対策についても共有できればと思います。1. 文書的整合性
まず一番最初に得なければならないスキルです。
「HTML文書として破綻していないか」が、まず必要。
- HTMLファイル内のタグの閉じタグが意図したところにない、などの文書の崩れ
- HTMLのルールを守った文書構造になっていない（w3cのHTML仕様を守れていない）これらのような状態にならないようにしましょう。
不完全なHTMLになってしまうと、スタイルが意図通りに効かなかったり、ブラウザ側でエラーとして検出されてしまいます。
当たり前ではありますが、成果物としてクオリティを担保しなければならないので、HTMLの文書的整合性が常に求められます。対策は簡単！
HTMLバリデーションチェックを欠かさずに行います。（「HTML バリデートチェック」と検索すると複数サイトが出てきます）
そんな簡単なミスしないよ・・・！って自信満々な私も
すべてのコーディングが終わったあとはバリデートチェックの時間を作って全てのページを確認するようにしています。
で、ミスは普通にあります。未だに。。やっておいて良かったねえ・・・って毎回思います。2. ピクセルパーフェクト
HTML文書が破綻しないのと同じくらい大事なこと。
「デザインを完全再現できているか」
デザインは1px単位で意味を持っています。（持っているはずです。）
これをコーダーが無視して大雑把にコードに反映してしまうことは許されません。
「デザインされたものを1px単位でコードに反映しよう！」というのがピクセルパーフェクトです。
現場によってピクセルパーフェクトの優先度がまちまちなこともありますが、コーダーとしてピクセルパーフェクトを意識しながら実装していきましょう！おすすめツール
こちらはGoogle chromeの拡張機能です。任意の画像を半透過させてブラウザに重ねることができるので、デザイン画像をコーディングしたページを重ねて、デザインとぴったり重なるかを確認することができます。
Zeplinアプリにもデザインの半透過機能があるので、同様にページと重ねて確認することができます。ピクセルパーフェクトを目指すと、デザインと成果物を横に並べて比べるのだけでは確実性がなくなりますので、ぜひデザインと成果物を重ねて確認するようにしてみてください。
ちなみに、私はざっとコーディングした後にピクセルパーフェクトを極める時間を作るのですが、このピクセルパーフェクトタイムが好きです。
なんか彫刻芸術家が0.1ミリのズレを許さない作業をしているみたいな・・・THE・匠って感じがして・・・笑3. 作業の効率性 & メンテナンス性
HTMLの文書的整合性を担保できて、且つデザインも再現できるようになったら。
やっとここまで来ました！次はコーディングの効率化を目指しましょう！
現場ではHTMLのコーディングで何日も時間を使えないことが多いです。
そのため、効率良くコーディングができる人材は重宝されます。コーディングの機会の度に「前回のコーディングよりも効率的にやろう！」と、ぜひ時間を測りながら作業してみてください。
そしてPDCAを回してくださいね。まず、何に時間がかかっているのかを考えてみました。
コーディングで時間がかかること
- クラスの命名に悩む 【なんて名前にしよう・・・あ、このクラス名はすでに使ってたわ・・・】
- HTMLの設計に悩む 【え、divめっちゃ多くなったな・・・タグ多くない？混沌としてない？】
- その他スタイルの付け方に悩む 【どこにpadding付けるの？それともmarginのほうが良いのかな？】
上記が多いのかなと思います。
ここでどれだけ悩まないでコーディングできるか、合理的にコーディングできるかが効率化を左右するのと、もう一つの「求められること」とした「メンテナンス性」に繋がります。
クラスの命名・HTMLの設計が整理できるようになれば、コーディングも迷わずスムーズかつ、安全に運用・納品ができるメンテナンス性をかなえることができます。
解決策となる設計思想・マインドは16日公開の後編記事にて具体的にご共有します！まずはツールから
今回はツールに集中してご紹介♪
物理的にコーディングをサポートするものをご紹介します。
どれもメジャーなものばかりですが、参考になれば幸いです。VSCode & VSCodeのプラグイン
現在はVSCodeをメインのテキストエディタとして使用しています。
プラグインも充実しているし、挙動も軽い。
コーディングしている分には十分なエディタだと思っています。VSCodeおすすめのプラグインをご紹介します！
Lint系のプラグイン
- HTMLHint
- stylelint
HTML / スタイルそれぞれの記述に誤りがあるかをタイムリーに教えてくれます。
なにかあると「問題」ウィンドウに表示してくれますので、スタイルが思ったように効かないと思ったらまずこのウィンドウを確認すれば原因が分かる事が多くなり、デバッグの時間短縮になります。インデントの整理を楽にするプラグイン
HTMLのインデントって、慣れないと整理するだけで頭が混乱しませんか？
私はHTML初心者の時に、いつもインデントがおかしいって怒られていました。しかも何が変なのかすらイマイチ自覚がないという・・・笑
インデントの感覚は遅かれ早かれ慣れるものでしたが、補助があればインデントの気にすることが減って、その分コーディングスピードもアップします。indent-rainbowはインデントごとにカラーが変わるので、インデントのカウント・一覧性が良くなります。
Beautifyは、インデントを自動で整理してくれるプラグインです。自動インデントしてくれるのはBeautifyだけではなく、VSCodeの基本機能にも入っているようですので、ご自身の開発に適したツールを使ってみてください！
Prettierもインデントを適切にしてくるフォーマッターの一つです。
BeautifyなどのAuto indent toolはインデントがグチャグチャなHTMLファイルを一斉に自動インデントしてくれるのに対して、Prettierはコードを書いて保存したときに、決まったフォーマットに合わせて調整してくれます。
Prettierはもとのコードのインデントがグチャグチャだと正確に動かないことがあるので、日頃インデントを意識できている方への補助向けかもしれないです。また、フォーマッターなのでコードの規則性が定められるというメリットがあります。上記のプラグインは全て入れても干渉し合わないので、ぜひ全て入れてしまいましょう！
ちなみに、インデントは「スペースによるインデントの個数2」がコードが読みやすいため一番オススメです。
慣れてきたら気にしてみてください♪
（既存のコードのインデント設定は勝手に変えないようにしてくださいね。）以上、おすすめプラグイン（厳選）でした！
そもそもVSCodeはプラグインを入れなくても補助機能が使えて便利だなあと思います。
ぜひ、VSCodeのおすすめ機能などを調べながら使ってみてください♪Sass の scss記法
SassはCSSの記述を簡略化・管理しやすくするメタ言語です。
Sassの中にはsass,scssの記法がありますが、現在scss記法がメジャーなのでscss記法のみご紹介します。
scssは、CSSよりも記述量を減らしたセレクタの指定ができます。
またスクリプト言語にもなるのでCSSなのに変数を持ったり、値の計算が出来るようになります！
コーディングの効率化に大きく役立つため、多くの現場がCSSの素書ではなくscssを採用しています。ただ、ブラウザはscssが読めないため、scssはCSSにコンパイルしなけばなりません。
そのためコンパイルを前提とした開発環境が必要です。たとえば、以下のcssは
style.css.header { color: pink; } .header h1 { color: red; font-size: 40px; }=> scssだとこんな記述になります。
style.scss.header { color: pink; h1 { color: red; font-size: 40px; } }scss記法の詳細については他に記事が十分あるため省略します！
Emmet
- Emmet
HTMLを簡略化した書き方ができるようになります。 エディタによってはEmmet対応するためのプラグインが必要ですが、VSCodeではデフォルトで対応しています！例えば
index.html!と入力してTabキーを叩くと
index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>と、HTML5の最低限必要なタグが表示されます。
テンプレートとして使うのに便利ですね。
※ デフォルトがlang="en"なので、日本語サイトの場合にはjaに変える必要があります。また、
CSSセレクタの書き方で書いてTabキーを叩くとHTMLに変換されます。index.htmlh2.heading02=>
index.html<h2 class="heading02"></h2>属性の記述が面倒くさいタグだって！Tabキーで叩くだけで。
index.html//それぞれTabキーを叩く必要があります a img=>
index.html<a href=""></a> <img src="" alt="">便利ですね！
もっといろんな応用活用がありますのでぜひ調べてみてください！
ですが、これくらいの使い方が個人的には一番実用的な気がします。
（ショートカットでもなんでも、複雑になって「なんて打つか頭で一瞬考えなきゃいけない」のはもう効率的ではないと思うので。）紹介しておいてアレですが、私はEmmetを使いません。
Pugを使うからです！Pug
パグはHTMLのテンプレートエンジンの一つで、HTML機能の拡張と入力の簡略化ができます。
テンプレートエンジンなので、Pug => HTMLへのコンパイルが必要です。
scssとCSSの関係と同じですね。機能の拡張はHTMLなのに「インクルード・変数を持てること」が便利です。
入力の簡略化については、記法がEmmetとほぼ同じになるというところが便利です！
開始タグ・閉じタグという概念がなくなり、そのかわりインデントがマークアップに意味を与えます。
そのためインデントの正確さが求められ、慣れないと思い通りにいかない時があるかもしれません。
少しだけ慣れが必要だと思います。
scssと同様でコンパイルできる開発環境が必要なのもあり、導入コストの低さはEmmetには劣ります。でもすごく便利ですよ。
まずは以下を御覧ください。Pug
index.pugdoctype html html(lang="ja") head meta(charset="UTF-8") meta(name="viewport" content="width=device-width, initial-scale=1.0") title Document link(rel="stylesheet" href="/assets/css/style.css") body include ./_includes/header.pug main .main-visual#main-visual .main-visual__inner h1.main-visual__title xxxxxxxxxxxx br | xxxxxxxxxxx br | xxxxxxxxxxxxxxxxxxxxxx br | xxxxxxxx .news-label .news-label__inner .news-label__box--left .news-label__label NEWS ul.news-label-list li a(href="dammy") p.news-label-list__date 2020.06.01 p.news-label-list__title xxxxxxxxxxxxxx .news-label__box--right a.news-label__more(href="dammy") Read More →=>
HTMLにコンパイルされたあと
index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="/assets/css/style.css"> <link href="./assets/css/style.css" rel="stylesheet"></head> <body> <header class="header" id="header"> <div class="header__inner"> <div class="header__primary"> <div class="language"> <ul class="language__list"> <li class="--active"><a href="dammy">JP</a></li> <li><a href="dammy">EN</a></li> <li><a href="dammy">ZH</a></li> </ul> </div> <div class="anchor-icon"> <ul class="anchor-icon__list"> <li class="--partner"><a href="dammy"> <div class="anchor-icon__image"></div></a></li> <li class="--contact"><a href="dammy"> <div class="anchor-icon__image"></div></a></li> </ul> </div> </div> <div class="header__secondary"> <div class="header__logo"><img src="/assets/images/common/header-logo.png" alt=""></div> </div> </div> <div class="pc-nav"> <div class="pc-nav__inner"> <ul class="pc-nav__list"> <li><a href="#about">xxxxxxxxxxxxx</a></li> <li><a href="#development">xxx</a></li> <li><a href="#message">xxxxxxxxxx</a></li> <li><a href="#company">xxxxxxxx</a></li> <li><a href="#partner">xxxxxxx</a></li> <li><a href="#news">xxxxxxxx</a></li> </ul> </div> </div> </header> <main> <div class="main-visual" id="main-visual"> <div class="main-visual__inner"> <h1 class="main-visual__title"> xxxxxxxxxxxx <br> xxxxxxxxxxx <br> xxxxxxxxxxxxxxxxxxxxxx <br> xxxxxxxx </h1> </div> </div> <div class="news-label"> <div class="news-label__inner"> <div class="news-label__box--left"> <div class="news-label__label">NEWS</div> <ul class="news-label-list"> <li><a href="dammy"> <p class="news-label-list__date">2020.06.01</p> <p class="news-label-list__title">xxxxxxxxxxxxxx</p></a></li> </ul> </div> <div class="news-label__box--right"> <a class="news-label__more" href="dammy">Read More →</a> </div> </div> </div> </main>こんな感じ！
PugとHTMLじゃ記述量が全然違いますよね・・・。
Pug側には<header>がなかったのに、HTML側に出現したのは、include ./_includes/header.pugと書いてheader.pugという別ファイルの記述をインクルードできたからです。
これができると、ヘッダーやフッターなどの共通部分を1つにまとめて管理できるので、メンテナンス性が高くなります。CSSセレクタの書き方で良いので、HTMLからCSSにコピペするときに、セレクタの書き方に直さなくて良いのが便利です。
Pugはインデントが重要というのは、階層でHTMLの親子関係を表すからです。
閉じタグの概念はありませんが、子要素がインデントが中に入っていくのはHTMLのインデントと同じですので、少しずつチャレンジしてみてください♪このセレクタの書き方でタグを書く書き方については、EmmetのTabキー展開前とほとんど一緒なことに気づきましたでしょうか？
私は基本Pugで書くので、Emmetは使わないです。でも、HTMLで書かなければならない場面であってもPugとEmmetの記法が同じなのでPugを書いている感覚でHTMLも素書できて楽です。爆速コーディングは一日にしてならず
以上、ツールのご紹介をメインにしたベストなコーディング（至、爆速コーディング）のコツでした♪
ツールは厳選しましたが長々とした記事になってしまいました。。技術をパクるのは簡単じゃないことも多いですが、
ツールをパクるのは直ぐにできます！そして効果を得やすいので、ツールから攻めるのはとても大切だと思います。
周りにいる先人エンジニアには便利ツールをどんどん聞いちゃって真似しましょう！そしてぜひ興味を持ったツールは使ってみてください！
次回は16日公開のコーディングの設計思想・ルール編です。
頭の中でさっと組み立てて、あとは指にアウトプットを任せるだけ！みたいなコーディングを目指した記事をお届け出来るようにしますので、ぜひお読みくださいませ！
- 投稿日：2020-12-06T20:04:20+09:00
ユーザーに優しいローディング画面「スケルトンスクリーン」
はじめまして。アドベントカレンダー初参戦のフロントエンド1年生です。（1月で2年生?）
以前ふと耳にした言葉「スケルトンスクリーン」がずっと気になっていたので、これを機に皆さまにも共有できたらと思います。スケルトンスクリーンとは
スケルトンスクリーンはご存知ですか？
名前を聞いたことがない方も、きっとどこかで見たことがあると思います。
↓この人です。
ページやコンテンツの読み込み中、真っ白なページが長く続くとユーザーは不安になります。
その不安を解消するため、プログレスバーやぐるぐる回るスピナーを表示して「今、読み込んでますよ」とユーザーに伝える手法が定番でした。
そしてここ数年で新たに見かけるようになったのがスケルトンスクリーンです。スケルトンスクリーンは、画像やCSS、JavaScriptを読み込んでいる間にワイヤーフレームのようなボックスを表示し、UXを向上させるために使われる。ユーザにとってはプログレスバーやスピナーと違いどんなページが表示されるか予想できるため、ロード時間が長くても心理的に短く感じられる。
（引用：https://kuroeveryday.blogspot.com/2017/05/load-with-skeleton-screens-and-shimmer-effect.html）確かに、どこにどんな形で表示されるのかわかるので、
ただ真ん中でスピナーが1つグルグル表示されているよりは、ストレスも軽減されますね！！
YouTubeやSlackやQiitaなど、さまざまなサイトで見かけるようになりましたが、
なんだか実装難しそう・・・
ということで、調べながらですが挑戦してみました。実装
手順は3つ！
1. コンテンツを用意
2. loadingクラスでスケルトンスクリーン作成
3. 画像の読み込みが終わったタイミングで、loadingクラスを非表示にする今回の題材は、お正月も近いので干支にしました。
コンテンツが用意できたらHTMLとCSSでこの子のスケルトンスクリーンを作成します。
index.html<ul class="list"> <li class="item"> <div class="item__img"> <!-- 画像部分のスケルトンスクリーン --> <div class="loading" data-js="loading"> <span class="loading__img"></span> </div> <img class="img" src="/images/nezumi.png" /> </div> <div class="item__text"> <!-- テキスト部分のスケルトンスクリーン --> <div class="loading" data-js="loading"> <span class="loading__line"></span> <span class="loading__line"></span> <span class="loading__line"></span> </div> <div class="text"> <dl class="text__title">ねずみ（子）</dl> <dd class="text__description">すぐに子ねずみが増え成長することから、子孫繁栄の意味があります。</dd> </div> </div> </li> </ul>style.css.loading { position: absolute; display: block; width: 100%; height: 100%; background: #fff; overflow: hidden; z-index: 50; } /* キラキラエフェクトのアニメーション */ @keyframes skeleton-animation { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .loading::before { position: absolute; top: 0; left: 0; z-index: 100; content: ""; display: block; height: 100%; width: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.2), transparent ); animation: skeleton-animation 1.2s linear infinite; } /* 画像部分のスケルトンスクリーン */ .loading__img { display: block; width: 100%; height: 100%; background-color: #e2e2e2; border-radius: 50%; } /* テキスト部分のスケルトンスクリーン */ .loading__line { display: block; margin-top: 10px; height: 20px; background-color: #e2e2e2; } /* スケルトンスクリーンを非表示にするクラス */ .loading--hidden { display: none; }
こんな感じに、コンテンツの画像・テキストをシルバーのスクリーンで覆うイメージです。そして最後にJSです。
画像の読み込みが終わったらdata-js='loading'の要素のクラスにloading--hiddenを追加して非表示にしてあげるだけです。main.js// ローディングの要素取得 const loadingItem = document.querySelectorAll("[data-js=loading]"); // loading非表示クラスを追加 const hideLoading = (list, className) => { list.forEach((element) => { element.classList.add(className); }); }; window.onload = () => { hideLoading(loadingItem, "loading--hidden"); };
このように、ローディング中の数秒間だけスケルトンスクリーンが表示されるようになりました！完成
ねずみだけだと寂しいので、仲間を増やして完成です。
とてもとてもいい感じな気がします。
※コードはこちら：GitHub
おわりに
スケルトンスクリーンの実装は思ったよりも難しくはなく、案外シンプルに実装できました。
しかし、
- 読み込みが早い場合はコンテンツ表示時に一瞬ちらつくな…
- コンテンツの文字数が増えたらはみ出しそうだな…
- スクロールに合わせて画像を読み込み開始にしたらさらに良いかも…
など、いろいろ改善の余地はありそうです。
また、従来のスピナーやプログレスバーとの効果的な使い分けについても、もう少し探っていけたらと思います。ストレスフリーなローディング画面を目指して！！！！
参考
)
- 投稿日：2020-12-06T18:27:18+09:00
画像の読み込み中にローディングマークを表示させる
はじめに APIから画像を取得する時、読み込みが遅いと画像がある部分が空欄になる。 そこに画像が表示されることを分かりやすくするため、ローディングマークを表示させる。 loading.gifを背景に設定 こちらのサイトから透過済みのフリー画像を保存。 背景画像にloading.gifを設定し、メイン画像が表示されるとloading.gifが隠れるようにする。 コード imageにAPIから取得した画像URLが入る。 <div style="background-image: url('images/loading.gif'); background-repeat: no-repeat; background-position: center center; min-height: 50px;"> <img :src="image"> </div> 参考サイト
- 投稿日：2020-12-06T17:17:54+09:00
アイキャッチ画像のサイズを固定化するのをやめたい
はじめに
WordPressのテーマ作成にあたってダミーの投稿表示しようとしたところ、アイキャッチ画像が思っていたように表示されなかった。
原因はthe_post_thumbnail()
第一引数にメディア設定のサイズをmediumやlargeなどの文字列で渡すことによって、設定の値をimgの属性に設定してくれる。
the_post_thumbnail('medium')とすることで、メディア設定の中サイズが適用され、
<img src="~/~/hoge.jpg" width="300" height="300" />というhtmlを出力してくれる。出力されるhtmlにclassをつければいいんじゃね？
出力されるimgタグにclassを付与するには
the_post_thumbnail()の第二引数に連想配列を渡すことで実現可能になる。
the_post_thumbnail('medium', array('class' => 'hoge')
はい、これでhogeクラスがついたimgタグが出力されます。
<img src="~/~/hoge.jpg" width="300" height="300" class="hoge" />
ブラウザで確認すると見事にサイズが変わっていませんでしたCSSの優先度
ここから紹介するのは、どこで定義されたCSSが最終的に読み込まれるかです。詳細度ではないので注意です！
何もCSSを適用していない場合はブラウザのCSSが適用されます。
ユーザーエージェントstylesheetと呼ばれるやつですね。次に読み込まれるのは、HTMLで読み込んでいるCSSです。
linkタグで読み込んでいるアレです。最後に読み込まれるのはHTMLのstyleタグまたは属性の値が読み込まれます。
整理するとこんな感じです。
ユーザーエージェントstylesheet < linkタグで読み込んだCSS < styleタグor属性の値ここまでくるとclassをつけてもCSSが属性の値を優先的に読み込んでいた理由がわかります。
アイキャッチ画像の取得方法を変えよう！
src属性さえ取得できたら画像表示できるやんという発想の転換からthe_post_thumbnailを利用をやめました。
get_post_thumbnail_id()をループの中で使用し、アイキャッチ画像のidを取得し、wp_get_attachment_image_src()の第一引数にさっき取得したidを渡して、配列の0番目の値をimgのsrc属性に渡せばオッケー。archive.php// ループ始まり $id = get_post_thumbnail_id(); // 画像のidを取得 $img_info = wp_get_attachment_image_src($id, 'none'); // 画像の情報を取得 詳しくはCodex見てね！ <img src="<?php $img_info[0] ?>" class="hoge" /> // ループおわり
wp_get_attachment_image_srcの第二引数に注目して下さい。
本来であればここにmediumやlargeを渡すんですが、サイズを指定したくない場合はnoneを渡せばいいみたいです。
noneはthe_post_thumnailでは使えませんでした。
ドキュメントにnone渡せるって書いてないじゃん。。。
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_get_attachment_image_srcこれでwidthとheight属性が付与されなくなったので、晴れてclassに割り当てられたCSSが装飾されるようになりました！
おわりに
一つのテンプレートタグに囚われ過ぎないように気をつけます
- 投稿日：2020-12-06T17:17:54+09:00
アイキャッチ画像のサイズ固定化をやめたい
はじめに
WordPressのテーマ作成にあたってダミーの投稿表示しようとしたところ、アイキャッチ画像が思っていたように表示されなかった。
原因はthe_post_thumbnail()
第一引数にメディア設定のサイズをmediumやlargeなどの文字列で渡すことによって、設定の値をimgの属性に設定してくれる。
the_post_thumbnail('medium')とすることで、メディア設定の中サイズが適用され、
<img src="~/~/hoge.jpg" width="300" height="300" />というhtmlを出力してくれる。出力されるhtmlにclassをつければいいんじゃね？
出力されるimgタグにclassを付与するには
the_post_thumbnail()の第二引数に連想配列を渡すことで実現可能になる。
the_post_thumbnail('medium', array('class' => 'hoge')
はい、これでhogeクラスがついたimgタグが出力されます。
<img src="~/~/hoge.jpg" width="300" height="300" class="hoge" />
ブラウザで確認すると見事にサイズが変わっていませんでしたCSSの優先度
ここから紹介するのは、どこで定義されたCSSが最終的に読み込まれるかです。詳細度ではないので注意です！
何もCSSを適用していない場合はブラウザのCSSが適用されます。
ユーザーエージェントstylesheetと呼ばれるやつですね。次に読み込まれるのは、HTMLで読み込んでいるCSSです。
linkタグで読み込んでいるアレです。最後に読み込まれるのはHTMLのstyleタグまたは属性の値が読み込まれます。
整理するとこんな感じです。
ユーザーエージェントstylesheet < linkタグで読み込んだCSS < styleタグor属性の値ここまでくるとclassをつけてもCSSが属性の値を優先的に読み込んでいた理由がわかります。
アイキャッチ画像の取得方法を変えよう！
src属性さえ取得できたら画像表示できるやんという発想の転換からthe_post_thumbnailを利用をやめました。
get_post_thumbnail_id()をループの中で使用し、アイキャッチ画像のidを取得し、wp_get_attachment_image_src()の第一引数にさっき取得したidを渡して、配列の0番目の値をimgのsrc属性に渡せばオッケー。archive.php// ループ始まり $id = get_post_thumbnail_id(); // 画像のidを取得 $img_info = wp_get_attachment_image_src($id, 'none'); // 画像の情報を取得 詳しくはCodex見てね！ <img src="<?php echo $img_info[0] ?>" class="hoge" /> // ループおわり
wp_get_attachment_image_srcの第二引数に注目して下さい。
本来であればここにmediumやlargeを渡すんですが、サイズを指定したくない場合はnoneを渡せばいいみたいです。
noneはthe_post_thumnailでは使えませんでした。
ドキュメントにnone渡せるって書いてないじゃん。。。
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_get_attachment_image_srcこれでwidthとheight属性が付与されなくなったので、晴れてclassに割り当てられたCSSが装飾されるようになりました！
おわりに
一つのテンプレートタグに囚われ過ぎないように気をつけます
- 投稿日：2020-12-06T16:18:42+09:00
CSSの基本的なところ
最初に
カレンダー企画2020の6日目
プログラミングの勉強を始めて3ヶ月程経ったので学んだことのメモをアウトプットとして記事に残します。
これからプログラミングの世界に入る人の手助けになれたら嬉しい限りです。
間違っていたり、言葉が違っていたり、表現が誤解されるような言葉があったら教えて下さい^^
言葉を長々と読みづらかったら申し訳ありません。少しずつなれてがんばります。CSSの基本的なところ
CSSとは？
Cascading Style Sheets(カスケーディングスタイルシート)の略みたい。
WEBページを装飾するのに必要な言語です。
簡単にいうとWEBページのデザインです！普段見ているWEBページで
文字の色が黒以外のものだったり、背景に画像があったりしませんか？
このページもヘッダーが緑ですよね？これはCSSのおかげです。HTMLは文字を表示してそれを見やすくするデザインするのがCSSみたいな感じです！(厳密には違いますがここでは簡単に表現…)
CSSの書き方
文法セレクタ{ プロパティ: 値; }
- セレクタ：CSSを適応させたい場所を指定 (例：セレクタの部分の)
- プロパティ：指定した場所の何を変えるのか？を指定 (例：文字色を)
- 値：どのように変えるのか？を指定 (例：赤にする)
みたいな感じ！
具体的に書いてみるqiita_post.cssh1{ color: red; }
- セレクタ = h1
- プロパティ = color
- 値 = red これの意味は「h1(見出し)の文字を赤にして」となります。
↓
こんな感じに変わる
↓
CSSを使うとこんな風にすることが出来ます。
CSSのフアイルを読み込ませないと上記のことが出来ない
CSSをせっかく書いてもファイルを読み込まないと反映されないです！
ここで紹介してある
HTMLにCSSファイルを記載する。どのHTMLファイルにどのCSSファイルを読み込ませるのか？を指定する必要があるからです。
紹介してある記述の仕方は同じフォルダ内にある場合です。
他にも下のフォルダにある場合は
<link rel="stylesheet" href="フォルダ名/qiita_post.css" />上のフォルダにある場合は
<link rel="stylesheet" href="../qiita_post.css" />(1つ上の場合)
<link rel="stylesheet" href="../../qiita_post.css" />(2つ上の場合)これをHTMLファイルに行えれば読み込み成功して
CSSで作成したものがHTMLファイルに適応されて先程のように文字を赤くすることが出来ます。セレクタについてもう少し詳しく
セレクタはどこをどうしたいのか？を決める最初の場所決めでしたね。
同じ文字色で考えて行きますね。さっきのCSSの書き方だと一つ問題が起きます。
qiita_post.cssh1{ color: red; }qiita_post.html<h1>qiita_post_demo</h1><!--文字色：赤--> <h1>qiita_post_demo2</h1><!--文字色：青-->このように文字色を変えたい場合です。
でも今のCSSの書き方では全てが赤になってしまう。。。
じゃあこうしてみよう
qiita_post.cssh1{ color: red; color: blue; }
でも次はこうなってしまう。。。
上から順び読み込まれるので下にあるものが適応されるのでこうなります！
じょあどうしようとなる時に方法は2つ！
1. id属性で指定する
2. class属性で指定するid属性で指定する
qiita_post.html<h1>qiita_post_demo</h1><!--文字色：赤--> <h1 id="word-blue">qiita_post_demo2</h1><!--文字色：青-->2行目にh1にid属性をつけました。
CSSファイルも変更qiita_post.cssh1{ color: red; } #word-blue{ color: blue; }id属性で指定した部分のCSSのセレクタは(#)をつけます
class属性で指定する
qiita_post.html<h1>qiita_post_demo</h1><!--文字色：赤--> <h1 class="word-blue">qiita_post_demo2</h1><!--文字色：青-->qiita_post.cssh1{ color: red; } .word-blue{ color: blue; }id属性だった部分をclassに変えてあります。
それに伴ってCSSの方は# → .(ピリオド)に変更どちらもこうなります！
ここで疑問が出ますよね？
どっちも同じになるのであればどっちかだけでいいじゃん！って(私は思いました^^)id属性とclass属性の違い
- id属性は同じページ内で1回しか使うことが出来ない。
- class属性は同じページ内に何度も使うことが出来る。
違いはこれだけです！
id属性は同じ装飾を同じページ内で複数行いたい場合には不向きです。装飾用で使うよりは何かを明示する時に使うことが多い印象があります。例えばタブ自体に名前をつけて指定する時とかにidを使うことはありました。慣れていって使う場面が少しずつ分かるのかな？って思っています。class属性は同じ装飾を同じページ内で複数回使えますのでデザインとしてはこちらの方が汎用性はあると思います。
qiita_post.html(これはOK)<h1 class="word-blue">qiita_post_demo</h1> <h1 class="word-blue">qiita_post_demo2</h1>qiita_post.html(これはNG)<h1 id="word-blue">qiita_post_demo</h1> <h1 id="word-blue">qiita_post_demo2</h1>少しは違いが分かりましたでしょうか？
最後に
以上でCSSについての基本的なところは終わります。
CSSを使いこなせるととても見やすいページになるので深くするのは良いことだと思います！
私もまだまだなので頑張ります。
- 投稿日：2020-12-06T11:09:20+09:00
position: fixed;で中央揃え、モーダル内の画像を縦最大に表示する
はじめに
タイトルについて記事にしました。
この記事で得る内容は以下の通りです。・ CSSの基礎知識が増える
・position: fixed;で中央揃え、モーダル内の画像を縦最大に表示する例
モーダルウィンドウを例に挙げますが、必要箇所のみ記述しています
index.haml.modal = image_tag src="isara_full.png",class:"modal-width"index.scss.modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } .modal-width { height: -webkit-fill-available; }
画像の高さと横幅に合わせて自動で中央揃えしてくれます。
- 投稿日：2020-12-06T11:09:20+09:00
position: fixed;で中央に揃える方法と、モーダル内の画像を縦最大に表示する
はじめに
タイトルについて記事にしました。
この記事で得る内容は以下の通りです。・ CSSの基礎知識が増える
・position: fixed;で中央に揃える方法
・ モーダル内の画像を縦最大に表示する例
モーダルウィンドウを例に挙げますが、必要箇所のみ記述しています
index.haml.modal = image_tag src="isara_full.png",class:"modal-height"index.scss.modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } .modal-height { height: -webkit-fill-available; }
画像の高さと横幅に合わせて自動で中央に揃えてくれます。
- 投稿日：2020-12-06T01:21:04+09:00