HTMLのタグを文字列として表示する - Qiita
//jquery var code = $('code'); code.html(code.html().replace(/</g,'<').replace(/>/,'>')); //JavaScript var code = document.querySelector('code'); code.innerHTML = code.innerHTML.replace(/</g,'<').replace(/>/,'>'); <code> <div>hoge</div> </code> <script> var code = document.querySelector('code'); code.innerHTML = code.innerHTML.replace(/</g,'<').replace(/>/,'>'); </script>
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
【デザイナー厳選】バナーデザインの参考ギャラリーサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
みなさんこんにちは！ Webデザイナーのえびちゃんです。 バナーデザインを作成していると「レイアウトが上手くいかない」「バナーの参考を上手く探せない、ギャラリーサイトも古いのばかり」「最近のトレンドってどんな感じなんだろう？」……などなど、デザインの悩みってたくさん出てきますよね。 そこで今回は、そんなあなたに現役デザイナーがおすすめするバナーデザインの参考サイトをジャンル別に分類して紹介します！ 後半では実際に効果の高かった広告バナーのデザインも紹介しているので、ぜひ参考にしてください。 「ググってわからないこと」が一瞬で解決するかも？ Webの知識を効率的に学びたい、未経験からWeb業界への転職・就職を目指している、誰かに教えてもらいたい……という方へ。LIGが運営のWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」では実践的なカリキュラムで最短6ヶ月でWe
FontAwesomeでアイコンが□（四角）になって表示されない場合の対策まとめ（:after:before利用時） | 株式会社ウェブ企画パートナーズ
400なのか900なのかは表示したいアイコンによって指定が異なりますので注意が必要です。 Twitterアイコンですと、Brands（つまりfont-weight: 400;）のみの提供。 RSSアイコンの場合は、Solid（つまりfont-weight: 900;）と、RegularとLightの３種類があります。 スタイルについては、赤枠部分で確認してください。（提供スタイルが１種類しか無い場合は右側の選択肢は表示されず） 原因その５：バックスラッシュを付けていない ３回目の登場ですが、再びCSSです。 .icon::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f007"; /*←ココ！！！！！！！*/ } contentにUnicodeを記載して呼び出したいアイコンを指定するのです
CSS コンテナクエリ（@container）の便利な使い方を解説
CSSのコンテナクエリとは、親コンテナに基づいてスタイルを定義できるCSSの新機能です。これによりコンポーネントを複数のコンテクストで使用でき、コンポーネント単位の実装も簡単になります。 2023年2月14日にFirefox 110にサポートされ、CSSのコンテナクエリはこれですべてのブラウザで利用できるようになりました。コンテナクエリの基礎知識と便利な使い方を紹介します。 Say Hello To CSS Container Queries by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSコンテナクエリの背景 CSSメディアクエリの問題点 CSSコンテナクエリはどのように役立つのか？ CSSコンテナクエリの基礎知識 CSSコンテナクエリの使用例 CSSコンテナクエリのデバッグ方法 まとめ
BEM方式でわかる おせちのマークアップ方法｜株式会社くふうしずおか
webサイトの構成を大きな重箱と考えると コンテンツというおかずが入ったおせちみたいなものなのではないか、と。 思い立った私は、BEM方式でおせちをマークアップしてみようと思いました。 今回マークアップするおせちはこちら 出典：illust AC 基本としてはBEM方式の内のBlock、Elementという概念と、 ひ孫要素以降の .el_要素の名前 という命名規則、 装飾のみ変更時の .is-装飾名 という命名規則を使います。 目的としては、BEM方式の考え方・概念を身につけるための練習です。 BEM方式についての解説と 弊社独自のオリジナル命名規則については CSSの命名規則にBEM方式はどうだったか こちらもぜひ！ マークアップしてみる このおせちは2段なので、それぞれの段を囲みましょう。 1段目を、stage01というBlock名にします。2段目はstage02です。 おせちはおか
CSSの命名規則BEMについて - Qiita
はじめに タイトルについて記事にしました。 この記事で得る内容は以下の通りです。 ・ CSSの命名規則BEMの概要・命名規則・HTMLとSCSSでの書き方 概要 HTMLにクラス名をつける時の代表的な命名規則には以下の3つがあります。 この記事ではBEMについて深堀りをしたいと思います。 ・ BEM（Block-Element-Modifier）：ベム ・ OOCSS（Object Oriented CSS）：オーオーシーエスエス ・ SMACSS（Scalable and Modular Architecture for CSS）：スマックス CSSの命名規則について 命名規則が統一されていれば、HTMLを書いている時にクラス名を何にするか悩まなくなり、素早くHTMLのマークアップを行えるようになります。 BEM（ベム）は、Block、Element、Modifierの頭文字をとったもの
class名の命名規則BEMのルールとカスタマイズ | ジョブテク
よく使われるclass名の命名規則 HTMLにclass名をつける時の代表的な命名規則には以下の3つがあります。今回はこの中のBEMについて紹介します。 BEM（Block-Element-Modifier：ベム） OOCSS（Object Oriented CSS：オーオーシーエスエス） SMACSS（Scalable and Modular Architecture for CSS：スマックス） BEMとは BEM（ベム）はHTML要素を「Block」「Element」「Modifier」に分けてclass名をつけます。この3つの頭文字を使って「BEM」と呼びます。 BEMのメリット パーツ単位でデザインを管理する為、変更時に他のパーツへの影響を考慮しなくていい セレクタを入れ子にしないので優先度問題が発生しにくい BEMを採用している会社が多い BEMのデメリット class名が長い
ドロワーメニューが作れるjQueryライブラリ「drawer.js」のご紹介！ | HPcode
対応ブラウザ CSS3をサポートしているブラウザが対象です。 IE10 ～SafariChromeFirefox 公式サイトとCDNの設置 公式サイトにアクセスするとCDNが用意されています。GitHubでファイルをダウンロードすることもできますが、CDNの方が楽なので今回はこちらを利用します。 公式サイト → http://git.blivesta.com/drawer/ 記載されているサンプルコードを元に解説していきます。 完成形のソース こちらを「index.html」などの拡張子.htmlで保存するとドロワーの動作が確認できるはずです。 <!DOCTYPE html> <html> <head> <!-- drawer.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer
jQueryを使わずにスライドメニューを実装しよう
2022年4月27日 CSS, JavaScript スマートフォンのアプリやモバイルサイズのWebサイトでよく見かけるスライドメニュー。どうも「jQueryがないと実装できない」と思っている人がちょこちょこいるようなので、簡単なJavaScriptで実装できるんだよーというのを記事にしてみます。 ↑私が10年以上利用している会計ソフト！ このようにボタンをクリックすると横からひゅるっと出てくるメニューを作っていきます。 1. メニューを開いた状態を作成 まずはHTMLとCSSで「Menu」ボタンをクリックしてメニューが開いている状態を作成します。メニュー部分は position: absolute; で位置を指定しています。また、メニュー項目に white-space: nowrap; を加えることで、スライドさせた時に日本語が変に改行されるのを防ぎます。それ以外は色や線、余白の指定など
【コピペOK】Sassで簡単にメディアクエリを使用する方法 | マコブログ
※当サイトは、アフィリエイト広告を利用しています 2022/11/02 【コピペOK】Sassで簡単にメディアクエリを使用する方法 プログラミング Sassは簡単にスタイルを記述できる便利なものって思ってませんか？、、、間違ってはいませんがその認識だけじゃ勿体ない、Sassの真価を体感できるのはメディアクエリを使った時です。 目次【本記事の内容】 [ click ] １.Sassで便利なメディアクエリの書き方【コピペOK】 ①：変数とミックスインで定義 ②：実際に使用してみる ２.まとめ Sassで便利なメディアクエリの書き方【コピペOK】 CSSでメディアクエリを指定するのってめんどくさいですよね、たくさん作ると管理も大変だし、工夫してまとめるにしても少し手間がかかるので正直だるいです。 そこで、これから紹介するSass式メディアクエリを使えば、コード量もグッと減り、width指定も一括
gulpの起動を簡単にする方法 - Qiita
ふと「gulpってどうやって起動するんだっけ？」となったので、メモします。 起動方法 作業ディレクトリに移動し、以下を実行します。
いまさら始めるgulp入門 | オレインデザイン
$ node -v これで何かしら数字が出てきたら、Node.jsのインストール完了です。 プロジェクトのフォルダを作る まずは、プロジェクトのフォルダを作りましょう。デスクトップでもどこでも大丈夫なんで作りましょう。今回はデスクトップにmyprojectというフォルダを作って進めていきます。 そして、ターミナルで、作ったフォルダにアクセスしておきましょう。ここからは、基本こちらで作ったフォルダ内で作業しますので。 cdで移動先を指定するんですが、長いパスを入力するのは面倒なんで、該当フォルダをターミナルにドロップすると、パスを自動で入力してくれるので、こちらの方法の方が（特に初心者の方は）間違いがないです。 ちなみに、cdというコマンドは、Change Directoryという意味です。 npm initする ターミナルでプロジェクトフォルダに移動していることを確認して、 $ npm i
Node.js のバージョン管理ツール nvm の使い方
JavaScript Node.js のバージョン管理ツール nvm の使い方※当サイトにはプロモーションが含まれています。 1. nvm とは？nvm は、Node.js のバージョンを切り替えて使うことを可能にするツールです。 ここでの「Node.js」とは、簡単に書くと以下のコマンドをセットにしたものです。 node（JavaScript 実行エンジン）npm（Node.js のパッケージ管理ツール）npx（Node.js のコマンド実行を補助する）これらのコマンドをまとめてバージョン管理（インストール・切り替え）することができます。 以下のように、バージョンごとにディレクトリが作成され、コマンドがひとまとめにされています。 $ tree ~/.nvm/versions/node/v10.15.3/bin/ ├── node ├── npm └── npx 2. nvm の導入1.
Node.jsを複数バージョンインストール[On Windows 10] - Qiita
2.Node.js をインストール 所望のバージョンの Node.js をインストールしていきます。 私は、v4.3.1と最新LTS版をインストールしました。 まずは、インストール可能なバージョンを確認します。 どうもv4.3.1は無いようです。 最新LTS版は、v10.15.0でした。 $ nvm list available | CURRENT | LTS | OLD STABLE | OLD UNSTABLE | |--------------|--------------|--------------|--------------| | 11.6.0 | 10.15.0 | 0.12.18 | 0.11.16 | | 11.5.0 | 10.14.2 | 0.12.17 | 0.11.15 | | 11.4.0 | 10.14.1 | 0.12.16 | 0.11.14 | | 1
![Node.jsを複数バージョンインストール[On Windows 10] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/91fdf5a2a6671b443b6de89733e28239869aedd8/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9Tm9kZS5qcyVFMyU4MiU5MiVFOCVBNCU4NyVFNiU5NSVCMCVFMyU4MyU5MCVFMyU4MyVCQyVFMyU4MiVCOCVFMyU4MyVBNyVFMyU4MyVCMyVFMyU4MiVBNCVFMyU4MyVCMyVFMyU4MiVCOSVFMyU4MyU4OCVFMyU4MyVCQyVFMyU4MyVBQiU1Qk9uJTIwV2luZG93cyUyMDEwJTVEJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz04ZWUxMTI1MmQxMjJhM2QzOWI1YTMyODcwMGVmMjQ2MA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzcGlkZXJ4X2pwJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0zYzJlYmYwMjVjZmNiNzQyMGYwMzI1ZmFjNDI2ODk5MA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D3ca74ca86204003d458beadc2b7392fa)
npm installでエラーが出た時にとりあえずやってみること - Qiita
はじめに npm installでしょっちゅうエラーにぶち当たるので備忘的に残しておきます。 npmってなんぞ？って方はこちらの記事とか参考になるかと思います。 とりあえず確認しとく項目 1. nodeとnpmのバージョンを見直す 2. node_modules フォルダとpackage-lock.json（場合によっては node-gyp も）を削除 3. npm install 実行するディレクトリを変える 各詳細は後述します。今回はdockerとlaravelを使用して環境構築しています。 発生したエラー docker-compose up -dでコンテナ作成したあと、 npm installコマンド実行しようとしたら出たエラー。 $ docker run -it --rm -v $(pwd):/app -w /app node npm install ... gyp ERR! bu
［Mac］npm install エラーへの対応（初心者向け） - iOSアプリ開発ならTickleCode
こんにちは、こばやしよしのり @yoshiii514 です。 最近、npm を使い初めて、npm install でエラーになり、原因をよくわからない、調べるだけで時間がかかっている・・・。 どの順番でエラーの調査したら良いのか知りたい。 こういった困っていることに答えます。 初心者向けの記事です。 本記事を読むメリットnpm install で、ありがちなエラーに対処できる。手順にまとめることで、短時間でエラーを解決できる。npm を簡単に解説まだ、npm がよくわかっていない方向けに簡単に解説します。 npm とはパッケージ管理システムのことで、Node Package Managerの略。パッケージはJavaScriptなどでできたプログラムのあつまりです。 パッケージは、別のパッケージの機能を利用していることも多いために、パッケージ間での依存関係の管理が必要になります。そのために、
【初心者向け】VSCodeとGithubの連携 for Windows ～連携操作からプッシュまで～ | BREEZE
寒さが厳しくなり朝晩は着る毛布から抜け出すことができないピピよです。 学習した内容のアウトプットも兼ねて、VSCodeとGithubを連携させる方法を解説したいと思います。 HTML/CSS学習をはじめてWEBポートフォリオの公開をするぞ！という時、初心者でも導入しやすいです。手順は長いですがぜひチャレンジしてみてください！ 今回紹介するのはVSCodeとGithubの連携ですが、社内研修で最初に使用したのはSourcetreeとGitHubでした…。 Sourcetreeは導入してしまえばとても使い勝手が良い便利ツールです！しかし、入力するアカウント情報を間違えてGithubにログインできなくなってしまうなどのトラブルに見舞われることもあります…。 VSCodeとGithubの連携はSourcetreeよりも比較的簡単なので、設定に挫折してしまった人でも混乱しないはずです！ VSCode
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mixcloud
Hello! | party.js
