知ってると便利！HTML, CSS, JavaScriptなど、コーディングの作業を快適にするエディタの操作テクニックのまとめ
フロントエンドの制作者は、コードの入力や操作に多くの時間を費やします。最高のパフォーマンスを得るには、エディタを快適に操作する方法を知っておく必要があります。Web制作において、特に有用なエディタの操作方法を紹介します。 Sublime Text, VS Code, Atom, Brackets, Vim, Emacsなど、ほとんどのエディタで操作可能なテクニックです。 Text editing techniques every Front-End developer should know 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. 2つのコードを入れ替える 2. エディタでコミット 3. タスクランナーの実行 4. サイドバーを開閉 5. コードを移動 6. 行単位の選択 7. ぎざぎざに選択 8. 選択したワード
[CSS]これは便利！検証が面倒なフォールバックのスタイルを簡単に検証できるChrome, Firefoxの機能拡張
CSSでレイアウトをする際、最近の主流はFlexbox、そしてCSS Gridも増えてきました。 そんな中、サポートされていないブラウザ用に必要になるのがフォールバックです。 検証するのが面倒なフォールバックのスタイルを簡単に検証できるChrome, Firefox対応の機能拡張を紹介します。 Feature Queries Manager -GitHub Feature Queries Managerの機能 Feature Queries Managerのダウンロード Feature Queries Managerの使い方 Feature Queries Managerの機能 Feature Queries Managerはその名の通り、@supports機能クエリに記述されたCSSのスタイルを管理して、切り替えることができます。 例えば、レイアウトをFlexboxで実装する場合、Fle
![[CSS]これは便利！検証が面倒なフォールバックのスタイルを簡単に検証できるChrome, Firefoxの機能拡張](https://cdn-ak-scissors.b.st-hatena.com/image/square/971099afcdbec5ce4d85c8447e3cda9402d0849b/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201802%2F2018052507.png)
ウェブ開発を爆速に！人気オススメCSSフレームワーク厳選38個まとめ【2018年最新版】
短時間で手軽にウェブサイトを作成できるCSSフレームワークは、数多く公開されています。CSSフレームワークを使用することで、開発速度をスピードアップさせるだけでなく、クリーンで規則性のあるレイアウトを時間をかけずに作成できます。 今回はたくさんあCSSフレームワークの中から、特に人気の高いものを中心に、高機能で使い勝手の良いものから、無駄を一切省いた超軽量なものまで、最新CSSフレームワークをまとめてご紹介します。目的やデザインの好みなど、自分にあった使いやすいフレームワークを見つけてみてはいかがでしょう。 ウェブサイト開発を爆速に！人気オススメCSSフレームワーク厳選まとめ【2018年保存版】 Bulma Flexbox をベースにしたCSSフレームワーク。軽量で用意されたひとつのCSSファイルを読み込むだけの手軽さも人気の理由。 URL: https://bulma.io/ CDN:
jQueryのサイドバー固定サブメニュー実装パターン
jQueryのサイドバー固定サブメニュー実装パターン 最近はモニターのサイズがワイドなってきていることもありサイドバーを固定する機会が増えてきましたね。 そこでjQueryを使用したサイドバー固定にしたときのサブメニューの動きをいくつかご紹介します。 投稿日2018年04月27日 更新日2019年09月19日 基本構造 navの子要素にulでマークアップします。 サブメニューはliの子要素のさらに子要素にulを入れ込みます。 HTML <aside id="sidebar"> <h1 id="brand-logo">Logo</h1> <nav id="global-nav"> <ul> <li><a href="#">Home</a></li> <li class="sub-menu"> <a href="#">About</a> <ul class="sub-menu-nav"> <l
びっくりするほど簡単！HTMLやCSSの作業なしで、Bootstrap 4のさまざまなページを作成できる無料ツール
さくっと短時間で、慣れれば1分！ デスクトップやスマホに対応したページを作成したい時にぴったりな無料のオンラインツールを紹介します。 HTMLやCSSの作業は一切不要で、Bootstrap 4ベースのさまざまなページをドラッグ&ドロップで積み木のように組み合わせて簡単に作成できます。 Froala Design Blocks Froala Design Blocks -GitHub Froala Design Blocksでは170種類以上のレスポンシブ対応のコンポーネントが用意されており、それらを好きなように組み合わせて、誰でも簡単にWebページを作成することができます。 作成したページは個人でも商用でも無料。詳しくはライセンスページをご覧ください。 短時間で、Bootstrap 4ベースのページを作成してみる 用意されているコンポーネント 短時間で、Bootstrap 4ベースのページ
最新版で学ぶwebpack 5入門 - Bootstrapをバンドルする方法 - ICS MEDIA
モジュールバンドラーwebpack（ウェブパック）はJavaScriptだけでなくCSSもバンドルできるツールです。タスクランナーGulpで対応していたことの多くはwebpackで置き換えが可能。JavaScriptエンジニアだけでなく、CSSコーダーにも利用が拡大しているのではないでしょうか？ 前回の記事「webpackにスタイルシートを取り込む方法」ではCSS・Sassとwebpackの連携方法について解説しました。今回は応用としてCSSフレームワークのBootstrap 5をwebpackで利用する方法を解説します。最小構成と、応用構成の二通りについて説明します。 ▲Bootstrapの公式サイト ※この記事は2023年3月現在最新のBootstrap 5、webpack 5、Node.js 19で解説しています。 Bootstrap とは BootstrapとはもとはTwitter
IEでも大丈夫！CSS Gridを使用する時の注意点と実装方法
CSS Gridはブラウザに2次元のレイアウトを作成できるCSSの素晴らしい機能です。今までの実装方法に比べて、HTMLはより簡単で、CSSはより堅牢に実装することができます。 そんなCSS Gridの唯一の問題点は、ブラウザのサポートでしょう。 2018年4月現在、IE11のサポートが完全とは言えない状況ですが、IEへの対応のポイントをしっかり押さえておけば、CSS Gridでレイアウトを実装することができます。flexboxやfloatをフォールバックとして使用する必要もありません。 CSS Gridを使用する際、IE11にどのように対応させるのか、その注意点と実装方法を紹介します。 CSS Grid Application Layout in Production 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 最初は、C
上下中央揃えのCSSまとめ。Gridだと2行、Flexboxだと3行で実現可能 - ICS MEDIA
CSSでブロック要素を上下中央揃え（天地左右の中央に配置）する方法はいくつかありますが、CSS Gridを使う方法が現在では一番手軽です。CSS Gridレイアウトを使うと、たった2行で上下中央揃えができます。 ▼ CSS .container { display: grid; place-items: center; } デモを別ウインドウで再生する ソースコードを確認する ※CSS GridだとIE 11に対応できません。しかし、IE 11は2022年6月にサポートを終了しているので、ウェブ制作者が気にする必要はないでしょう。 Flexboxだと3行 対して、Flexboxでも上下中央は実現できます。Flexboxの場合、中央揃えしたい要素の親に対してたった3行記述するだけです。モダンブラウザはもちろん、Internet Explorer 11（以下、IE 11）でもベンダープレフィッ
ライブラリを使わずここまでできる！Web Componentsで近未来のフロントエンド開発 | 株式会社ヌーラボ(Nulab inc.)
Cacooチームエンジニアの川端です。普段はCacooのエディター(編集画面)のフロントエンドの開発をしております。最近パパになったので娘の写真を親に共有するアプリを作ってみました。その際に、Web Componentsなる機能を使ってみました。JSフレームワーク群雄割拠の昨今、ライブラリを使わずWeb Componentsだけでどこまでできるのかご紹介したいと思います。 Web Componentsとは？ Web Componentsとは、HTMLの要素をカプセル化して再利用可能なパーツにするためのブラウザのAPI群です。ReactやVueやRiotでいうところのコンポーネントをライブラリを使うことなく素のJSだけで作ることができる技術になります。 Web Components | MDNによると次のように記されています。 Web Components は、オープンなウェブテクノロジーを
お問い合わせ、支払い、サインアップなど、フォームを実装するためのHTMLとCSSのテンプレート -Boilerform
フォームを実装するのが苦手、という人は少なくないと思います。 お問い合わせフォーム、支払いフォーム、サインアップフォームなど、さまざまなプロジェクトで利用されるフォームを実装するのに役立つHTMLとCSSで制作されたテンプレート集を紹介します。 Boilerform Boilerform -GitHub Boilerformのデモ Boilerformの使い方 Boilerformのデモ デモではフォームに利用するさまざまな要素のパターン、それらを組み合わせて実装されたお問い合わせや支払いフォームを確認できます。 まずは、フォームのパターン ライブラリから。 「Input Field」では、サイズ、プレースホルダー、バリデーションのステータスのさまざまなバリエーションを持つ一般的な入力フィールドが揃っています。ユーザーがデータをできるだけ効率的に入力するのに役立つ属性が追加されています。
CSSでアンダーラインが追従するメニューを実装する方法 - NxWorld
以前であればJavaScriptを利用して実装していた、メニュー下にあるアンダーラインをホバーしたメニューへスライドしながら追従する動きをCSSのみを使って実装する方法です。 どのようなものなのか実際の動きを見たほうが早いと思うのではじめにデモを紹介すると、このようにメニュー下にあるアンダーラインがホバーしたメニュー下へスライドしていくという動きになり、JavaScriptは使用せずにCSSのみで実装しています。 HTMLは下記のようなものを使用し、a要素は単純なリンクで.nav-underlineが追従してくるアンダーラインで使用する要素になります。 また、ハイライト表示している付与されているclassはよくあるカレント表示用に見栄えを異なるものにするのに使用するclassになっており、これをそのまま使用した場合は上のデモにあるように3つ目のメニュー下にアンダーラインがあるのが初期表示と
[CSS]さまざまな要素に利用できる美しいシャドウ、カードやボタンをふわりと浮かび上がらせるスタイルシート
カードやボタンをはじめ、さまざまな要素をふわりと浮かび上がらせる繊細なシャドウを与えるスタイルシートを紹介します。 box-shadowを重ねがけした複雑なスタイルシートですが、スニペットに登録しておくと簡単に利用できます。 Multiple Shadows 繊細なシャドウを与えるスタイルシート カードにシャドウを与える ボタンにシャドウを与える デモ 繊細なシャドウを与えるスタイルシート シャドウはbox-shadowを使用し、複数のシャドウを重ねがけします。 カードやボタンなど、さまざまな要素に利用できるので、スニペットに登録しておくと便利です。 .shadow { box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 1
![[CSS]さまざまな要素に利用できる美しいシャドウ、カードやボタンをふわりと浮かび上がらせるスタイルシート](https://cdn-ak-scissors.b.st-hatena.com/image/square/cccac0355724bfe7dc9918bf680d2dec1a8da97b/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017102401.png)
ふんいきがわかるCSSレイアウトの知識 - Money Forward Developers Blog
初 FPS TPSにPUBGを選んでしまった、マネフォのJSer 大須賀です。ドンカツたべられません 先日社内で、デザイナさんに向けてちょっとしたCSSの説明をしました。 本記事では、このスライドを作るに至った動機などを書いていきます。 ※ 2017/10/04 10:56「PUBGはTPSだ」と弊社ゲーム部の部員から指摘を受けました。全くもってその通りなので修正しました。 デザイン・実装のジレンマ デザインの良し悪しが分かるのはデザイナ 実装コストが分かるのはエンジニア という状況で「お互いの作業がトレードオフになることがある」という点に難しさがないでしょうか？ 効率を上げるには、なにかしなきゃいけません。 ということで冒頭のスライドが生まれました。 他の人達のとりくみ 色んな所で同じような課題に立ち向かっている人達もいるようです。 デザイン組織で働くエンジニアは何をやっているの？ Cr
CSSのコードを整理し、効率的に管理する方法のまとめ
CSSのコードを書くことは簡単ですが、コードを整理し、効率的に管理する方法は難しいものです。大規模なプロジェクトだけでなく、小規模なプロジェクトにも、そして未来の自分のためにも必須と言えます。 CSSを効率的に管理する一連のソリューションについて紹介します。 OOCSSはオブジェクト指向のCSSの略です。OOCSSのアプローチには、2つのポイントがあります。 構造とデザインの分離 コンテナとコンテンツの分離 このアプローチにより、制作者は異なる場所でも使用できる総合的なclassを利用することができます。 これには、良いニュースと悪いニュースがあります 良いニュース: 再利用することで、コードの量を減らします。「DRY Principle」と呼ばれるものです。 悪いニュース: 保守が複雑になります。特定の要素のスタイルを変更する時、ほとんどのclassが共通で使用されているため、そのスタイ
CSSの読み込みを高速化するための5つのポイント
読み込み速度を高速化することは、戦略上非常に重要なことです。 ユーザーエクスペリエンス(UX)の面からも、SEO上の観点からも、読み込みの遅いサイトより速いサイトのほうが有利です。 UXの観点では、Google Researchのブログ記事より、サイトの読み込み速度が速ければ速いほど、ユーザーは快適に感じ、サイト内の滞在時間まで長くなることが分かっています。 さらにKissmetricsによれば、読み込みに3秒以上かかってしまうと、40％の人が読み込みを諦めて離脱してしまうことが分かっています。 SEOに関して言えば、Googleが検索結果を決めるのに使っている200以上もの要素の中の一つに明らかにページ読み込み速度を使っていることが明らかになっています。 もちろん、GoogleだけでなくBingもページの読み込み速度を重視しています。 ferretでは、これまでSVGを使った画像の最適化
CSSが苦手な人、CSSを書く時間がない人に最適！見栄えのよいページを簡単に作成できるスタイルシート -sakura
CSSの知識は必要なく、そして時間もない時に、簡単にいい感じのデザインになるCSSのフレームワークを紹介します。 CSSが苦手な人に、バックエンドで作業する用の即席プロトタイプにも最適です。 既存のHTMLに一行、もしくは二行追加するだけで簡単に利用できます。 sakura sakura -GitHub sakuraの特徴 sakuraのデモ sakuraの使い方 sakuraの特徴 かなり古くさいデザインのページでも、モダンなページでも、わずか数秒で見栄えのよいページにすることができます。 使い方は簡単。外部ファイルを加えるだけで、既存のHTMLでさえも見栄えのよいデザインを適用できます。 即席のプロトタイプにも最適。特にバックエンドで作業する時に、簡単にスタイルを適用できます。 友達や叔母さんなど、CSSが難しいという人にも美しいブログが構築できます。 他のすべてのCSSフレームワーク
スマートフォンで写真を大きく表示させる SmartPhoto.js をリリースしました | JavaScript | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル
スマートフォンで写真をタップすると、もともと表示されているサイズより小さく表示されるような体験をしたことはありませんか？ 2017年にリリースした SmartPhoto.js は、スマートフォンで写真を大きく見たいを実現するために用意したライブラリーです。 弊社の Github 公開しているライブラリの中では、一番 ★ の多いライブラリーで、2024年5月6日現在で 894 となっています。よろしければ https://github.com/appleple/SmartPhoto の右上にある ★ のクリックをお願いします。 SmartPhoto.js では、大きく表示させることを一番に考え、写真の短辺側が画面の最大になるところまで拡大表示されるフォトビューアーとして作られました。下のデモコンテンツでは、長辺側ははみ出して表示されることになりますが、ドラッグして動かしたり、ピンチイン・ピン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]こんなやり方があるとは！ボタンのシャドウに2色の美しいグラデーションを与えるテクニック![[CSS]こんなやり方があるとは！ボタンのシャドウに2色の美しいグラデーションを与えるテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/86d2bb41707585bf01592235c9d747aa9374b088/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201801%2F2018032701.jpg)
[CSS]レスポンシブ対応の最新版！サイズが不明な要素を天地左右の中央に配置するスタイルシートのまとめ![[CSS]レスポンシブ対応の最新版！サイズが不明な要素を天地左右の中央に配置するスタイルシートのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/b46fb0222c516388a0be1ca6e64e87199e362865/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017073001.png)
CSSで面倒なコード、HTML5の新要素やスニペット、FacebookのOGPやTwiterカードなどのコードを生成できるオンラインツール
