CSSのposition: stickyでテーブルのヘッダー行・列を固定する - Qiita
CSSの position: sticky を使ってテーブルのヘッダー行・列を固定する方法を解説します。動作確認したブラウザーは次のとおりです。 Google Chrome 71 Firefox 64 Safari 12 Microsoft Edge 43 (EdgeHTML 17) ちなみに、IE 11などの対応していないブラウザーで見た場合、ヘッダー行・列が固定されないだけで、表示が崩れたりはしません。 theadを固定するかthを固定するか 縦スクロール時にヘッダー行を固定するにあたり、thead に対して position: sticky を指定したくなりますが、これはあまり筋が良くなさそうです。まずChromeやEdgeは thead や tr の固定に対応していません1。 display: block などで回避できますが、列の幅が決まっていないといけないという制約が生まれたり
WordPressで投稿のアーカイブ（投稿一覧）を設定する - Qiita
WordPressは トップページと投稿のアーカイブのテンプレートが基本的に同じ。 管理画面の表示設定でフロントページの表示を 固定ページにすればすんなり分けられるけど 固定ページつくるのは気持ち悪い。 ので探していたら v4.4から追加されたregister_post_type_argsに引っ掛ければで設定を変えられるらしいことがわかる。 投稿アーカイブを有効にする (WordPress 4.4以降) っていうことでやったらできたにはできたけど シングルのスラッグとアーカイブのスラッグが同じだと問題が。 投稿のパーマリンクを /news/%post_id% としている場合で $args['has_archive'] = 'news'; とすると /news/ でアーカイブは表示できるが /news/1 とかでシングルが404になる。 ので却下で海外を探してみるとあった。 Creating
WordPressの投稿を/blog/など1階層下に指定する - Qiita
コーダーが現場で解決した方法をまとめた、解決コードシリーズ。 内容 WordPress投稿をデフォルトで /blog/以下にしたい /blog/をカテゴリとして使用したい コーポレートサイトなどでブログなど投稿をディレクトリ以下にしたい場合は多くある。 方法をメモしました。 パターン1 /blog/をカテゴリとして使用する 手順1 固定ページスラッグに/blog/を指定 固定ページ＞ページを作成 スラッグに/blog/を指定する。 こちらはURLを指定するためのダミーページです。 手順2 投稿ページの表示設定 設定＞表示設定＜ホームページの表示 スラッグ/blog/を指定した投稿ページを選択する。 手順3 パーマリンクの設定 設定＞パーマリンク設定＞カスタム構造 URLに/blog/を指定する。 手順4 カテゴリを指定 /blog/以下のカテゴリは同階層で指定する。 パターン2 固定ページ
jQueryしか書けなかった自分がVueを使えるようになるまでの話と同じような環境の人たちへ - Qiita
この記事はVue #2 Advent Calendar 2019の10日目です。 昨日は @i-ryo さんの 【Vue.js】Vuexの「状態管理」はいったい何の状態を管理しているのか調べた でした。 JavaScriptといえば、jQueryだった Vueを触る前はHTML+CSS+jQuery+WordPressが主な使用言語でした。以前は小〜中規模なWebサイト制作がメインだったので、JavaScriptを操作する場面というのは多くありませんでした。 使ってもハンバーガーボタンの操作やjQuery プラグインのスライダー、ちょっとしたエフェクト程度です。少なくとも状態管理をするような案件はほとんどなく、DOM操作がメインなのでjQueryで十分でした。 1つだけ状態管理をする案件があり、案件としてはVueに最適でしたが、jQueryでごり押しました。過去の自分に教えてあげたい。 V
1段上のCSS設計・コーディングの概念図（HCDCモデル図） - Qiita
はじめに HTML＋CSSコーディングにおいて、「どのように要素を特定してスタイリングするのか」というCSS設計上の課題に対し、「ひとつ上の視点で思考できる概念図」を紹介します。 この図を用いることで、3種類の異なるスタイリングアプローチ（OOCSS方式 / 包括要素基点方式 / BEM方式）の本質を一度に俯瞰できるため、全てを同じ枠の中で捉えられます。そして、最終的には種別や規模の異なるサイトやプロジェクトに対し、同じメソッドを使ってそれぞれ最適な設計がおこなえるようになります。 ※この記事は標準化ノウハウ公開の一環として書いています。 仕組みの概要や前提事項などについては「UltimateCoding 概要・前提事項」のエントリをご確認ください。 経緯 / 制作者中心のデータ分類 そもそもですが、HTMLとCSSは目的も仕様も異なる言語です。 HTML+CSSコーディングを一般的な視点
フロントエンドに必要なとりあえずのjsプラグイン2020 - Qiita
2020年3月時点でまだ現役なプラグイン。 非常にお世話になっております。 雑いのでもう少しちゃんと書きたい。 jQuery もそこそこ多めです。 ▼ ユーティリティー系 bowser.js http://lancedikson.github.io/bowser/docs/bowser.js.html ブラウザ判定 [日本語解説] https://co.bsnws.net/article/231 Moment.js https://momentjs.com/ jsは Date がハマるし辛い。ので時間系を扱う時はかなり必須。 [日本語解説] http://blog.asial.co.jp/1158 date-fns https://github.com/date-fns/date-fns dateライブラリ Momtent.js よりモダン。使いたい機能だけをモジュール単位でインポートでき
コーダーとして信頼されるための、納品前チェック１５項目 - Qiita
納期が迫っている中で高品質なコードを書いて納品するのはすごい能力だなと感じています。 ただ、プロとして仕事をしている以上、特定のチェックを通してから納品するのがプロの仕事。 PSD通りにコーディングできたからといって、コードの中身に問題があればそれは本当に良い仕事をしたのだろうか？ 誤字脱字や、デザイン通りにコーディングされていないのは論外。 クライアントに送る前にしっかりチェックしよう！ とはいえ、弊社には定められたチェック項目というのものがないので、 「高品質な成果物を納品するためのチェック項目」というものを自分なりに作ってみた。 コメント 今納品するコードは、ブーメランのように自分に返って来ます。半年後、もしかしたら1年後かもしれない。そんな時、書いてあるコードの意味から理解し始めたら効率が悪い。 具体的にチェックするポイントは下記 書き方に統一性があるか 擬似要素など（第三者が見て
Vueのカレンダー | Advent Calendar 2019 - Qiita
The Qiita Advent Calendar 2019 is supported by the following companies, organizations, and services.
JavaScriptのカレンダー | Advent Calendar 2019 - Qiita
The Qiita Advent Calendar 2019 is supported by the following companies, organizations, and services.
CSSのカレンダー | Advent Calendar 2019 - Qiita
The Qiita Advent Calendar 2019 is supported by the following companies, organizations, and services.
Vueを扱えるようになりたいけどJavaScript書いたことがなかったので、JavaScriptとVueを同時に勉強する。 - Qiita
Vueを扱えるようになりたいけどJavaScript書いたことがなかったので、JavaScriptとVueを同時に勉強する。 自己紹介 エンジニア歴二ヶ月の新人で、Vueを使ったプロジェクトに入れてもらったのだが足を引っ張りまくっているのでフロント側を勉強したい。 筆者のスキルとしてはPythonは少し書けるが、 フロントはHTML/CSSをドットインストールでやった程度。 JavaScript書いたことないとタイトルに記載しているが、実際は業務でちょっと触っている。ドットインストールでもちょっとやった。でもほとんどコード読めてないので許して。 はじめに Vueを学ぶならまずJavaScriptを勉強する必要があるとみなが言っています。 確かにその通りだと思いますが、そこで疑問が湧きました。 「JavaScriptの勉強って、どこまでやればいいの？」 プログラミング言語の勉強は青天井だと思
CSSを非同期ロードする最も簡単な方法 - Qiita
CSS読み込みの<link rel="stylesheet">は同期なので、レンダリングブロックします。 どういうことかというと、CSSファイルの読み込み・パースが終わるまで画面描写が止まってしまいます。 これに対策する方法としてpreloadというものが策定されましたが、対応状況が微妙です。 2019年7月時点でもブラウザシェアが8割しかなく、Firefoxは当面対応するつもりがないようです。 とはいえ残り2割のためにloadCSSを突っ込んだりとか始めると本末転倒感に溢れます。 全ブラウザ対応のためには、なんにしろ結局JavaScriptをこりこり書くしかない状況でした。 が、なんかすっごい簡単な対処法があったので紹介してみます。 以下はScott Jehlによる記事、The Simplest Way to Load CSS Asynchronouslyの日本語訳です。 ちなみにSco
すべての新米フロントエンドエンジニアに読んでほしい50の資料 - Qiita
はじめに さいきんのWebはSPA技術を中心としたフロントエンドが賑わっていますね💪 従来サーバーサイドを扱っていた人もフロントを触る機会が増えていたり、これからプログラミングを学んでいく人も、フロントエンド領域に興味を持っているのではと思います。 そこで、フロントエンドの経験が浅い方や初学者向けに、おすすめのドキュメントや勉強すべき領域をまとめました。 とりあえず動けば良い段階から一歩進んで、フロントエンドエンジニアとして、良いアプリケーションを作るために必要な知識を浅く広く紹介します。 ※補足 新米と表記しましたが、実際には新卒や未経験でなく、新卒2~3年目の若手フロントエンドエンジニアやフロント分野に苦手意識のあるバックエンドエンジニアの方を対象としています。 数日で目を通せるような内容ではないため、マイルストーンやスキルセットの一つの参考にして頂けると幸いです。 フロントエンド入
スマホビューでfont-sizeをvw（相対）指定してみよう - Qiita
un-T factory! XA Advent Calendar 15日目の記事です。 レスポンシブWebデザインでいざコーディング！と意気込んだのもつかの間、 以下のようにスマホビューで表示崩れが起こってしまうことがあります。 今までは指定のフォントサイズを少し下げて対応していました。 が、フォントサイズを端末幅に対して相対指定（vw）できることを知ったので試してみると… 収まりました！ 設定方法 vw（viewport width）とは、ビューポート幅に対しての割合のことです。 ということは、ビューポート幅に対するフォントサイズの割合を計算する必要があります。 ↓計算のしかた 例：viewport：640px font-size：12px の場合 12px / 640px * 100 = 1.875vw あとは値をCSSで指定するだけです。簡単！
詳解 Nunjucks − Mozilla 謹製テンプレートエンジン - Qiita
はじめに Nunjucks（ナンジャックス）とは、ブロック継承、オートエスケープ、マクロ、非同期制御 などを備えた Mozilla 謹製 のテンプレートエンジン である。Python のテンプレートエンジンである Jinja（ジンジャ）に影響を受けている。有名かつ人気のあるテンプレートエンジンは、以下の通りである。 Pug（インデント構文） EJS（HTML ベースの構文） Nunjucks は EJS と同じ HTML ベースの構文 であり EJS より 強力な言語（筆者の主観）である。なお、サンプルコードは GitHub に公開している。 基本情報 拡張子は .njk である。エディタの言語サポート用プラグインは公式ドキュメントでいくつか紹介されている。変数の参照は、マスタッシュ記法 {{}} でおこなう。 開発環境の解説 gulp-nunjucks-render で HTML にコン
JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除。 - Qiita
はじめに ここではJavaScriptの配列である、Arrayの基本的な使い方をまとめました。主な内容としては、要素の追加、結合、取得、削除となります。 JavaScriptの最新情報などの技術系のみをつぶやくTwitterをはじめました。 Twitter: @takeharumikami RSSはこちら RSS: http://qiita.com/takeharu/feed Feedly: フォロー
既に最強なIntelliJ IDEAを更にパワーアップさせられる10個のプラグイン - Qiita
紹介するプラグインについて この投稿で紹介するプラグインは何かのツール、言語、フレームワーク、サービスなどとintegrateする類のものは含まず、それ単体で便利に感じられるであろうプラグインに絞って紹介している。 （アルファベット順） A prevent pinned tabs from closing plugin - by momomo.com 固定したタブを閉じられなくするプラグイン。いらないタブを複数閉じようとすると間違って開いておきたいタブまで閉じてしまうことがある。それを防ぐことができるようになる。 AceJump 見えている範囲でカーソルを移動させたい場所にサッと移動させられるようにするプラグイン。慣れるとめちゃくちゃ速い。設定したショートカットで機能を起動すると1文字入力を求められ、入力するとその文字がある場所に飛ぶためのショートカットが画面に表れる（画像参照、これはst
Vue.js/Nuxt.jsで使える！便利なUIパッケージ紹介 - Qiita
Vue.js/Nuxt.jsで開発しているときに便利でアイディアの広がるUIコンポーネントを紹介したいと思います。 良さそうなのを見つけたら随時更新していこうと思います！ vue-carousel 簡単にカルーセルを実装できるUIコンポーネント。レスポンシブ対応もされています！ vue-swipe スワイプ動作の実装を簡単にできるUIコンポーネント vue-snotify 幅広くカスタマイズできる通知のUIコンポーネント vue-twitter-counter Twitter風のカウンターを実装できるUIコンポーネント vue-poll Twitter風の投票UIを作れるコンポーネント vue-stepper シンプルなフォームのステッパーを作成できるUIコンポーネント vue-circle-menu ボタンをタップするとボタンが出るUIコンポーネント vue-star スターアニメーショ
2019年版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips - Qiita
2019年版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTipsアーキテクチャVue.jsElmReactAngular2 はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 もちろん、Vue.jsのコンポーネントシステムをフル活用し、Vuexを入れていないプロジェクトの経験もあります。 現在は構築したシステムを保守・運用しています。 また、勉強の為にReact、 Angular、 最近はElm等にも少し触れています。 その際に得られたノウハウ、Vue.jsが他のライバルフレームワークと比べた際に現時点で本当に勝っている利点やノウハウを言語化し、共有
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[SCSS]便利な&（アンパサンド）の使い方メモ - Qiita![[SCSS]便利な&（アンパサンド）の使い方メモ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/983d132efe56d758feb2423599d30f6ee59b695d/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCU0NTUyU1RCVFNCVCRSVCRiVFNSU4OCVBOSVFMyU4MSVBQSUyNiVFRiVCQyU4OCVFMyU4MiVBMiVFMyU4MyVCMyVFMyU4MyU5MSVFMyU4MiVCNSVFMyU4MyVCMyVFMyU4MyU4OSVFRiVCQyU4OSVFMyU4MSVBRSVFNCVCRCVCRiVFMyU4MSU4NCVFNiU5NiVCOSVFMyU4MyVBMSVFMyU4MyVBMiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9MmQzNGI4ZDA4ZmIxMDQxNTIyZjVlYzc3ZDBkY2IyZTk%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBub3F1YSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YWJmYjZlY2RlZGY0ODA3YWQwOGIyZGYwODhhOGZiNDE%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Daec43c90517fe4b6062305f217c3d6e8)
