HTML・CSSで実装するかわいいフキダシのアイデア - ICS MEDIA
見出しなどのテキストを目立たせたいときに便利なフキダシ（吹き出し）。 この記事では、HTMLとCSSだけで簡単に実装できる、シンプルなデザインのフキダシをご紹介します。 雑誌やポスターなどで見かける可愛いあしらいをウェブサイトにも取り入れたいと思ったことが、今回のテーマを選んだきっかけです。 とくにフキダシは、少ないコードで表現でき、見出しなどのテキストに華やかな印象を与えられます。 ウェブサイトを制作する際に、ぜひ取り入れてみてください。 また、この記事のほとんどの作例で、CSSの疑似要素『::before』と『::after』を利用しています。 疑似要素を使うと、不要なHTMLタグを増やさずにCSSで装飾できます。 ::before ＝ 選択した要素の最初の子要素として疑似要素を生成 ::after ＝ 選択した要素の最後の子要素として疑似要素を生成 これらは、要素に装飾的な内容を追加
それでも私が<wbr>でなくinline-blockで改行調整をする、たった1つの理由
inline-block を使う理由、それは 入れ子構造を作れることにより、改行位置の優先順位をつけられるから！ 詳しくは以降で説明します。 （前提）そもそも改行調整ってなんの話？ このタイトルを見て記事を開いた方であれば知っていると思いますが、一応説明です。 スペースで単語が区切られる欧文とは違い、日本語は単語の区切りがないので、改行すべき位置を機械的に判断できず、不自然な位置で改行されてしまうことがあります。そこで、見た目を整えるため、改行すべき位置を指定するための手法が必要になります。 他に詳しい記事がいくつもありますので、詳細はそちらを参照してください。 代表的な改行調整の手法 <wbr> 要素 <wbr>要素は、改行してよい位置を表す要素です。 親要素に対して word-break: keep-all; を指定して基本的には改行されないようにすることで、<wbr>要素がある位置で
もうjsなんていらない！世界で流行っているHTMXについてまとめてみた - Qiita
HTMXとは HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。 軽量 で 高速 で、既存のサーバーサイドのフレームワークとシームレスなやり取りができる。また、AJAX通信の発火、フォームの送信処理、DOMの更新などを既存のHTML要素を拡張するだけで可能とする。WebSocketやSSEにも対応しているので、チャットアプリなどにも適している。 2023 JavaScript Rising Starsでは、 フロントエンド・フレームワーク部門で見事2位に輝いた！(一位はReact、全部門だとshadcn/ui) 似たような機能として、Ruby on RailsのHotWireがあるらしい。 2024年はHTMXがくると言われているぐらい世界で騒がれているのだが、あまり日本では流行っていない。以下はGoogleトレンドで調べた結果である。 アメリ
商用利用でも完全に無料！ デザインやイラストでかなり使える高解像度テクスチャ素材 -ResourceBoy
個人でも商用でも完全に無料で利用できる、さまざまな種類が揃った高解像度8K, 4Kのテクスチャ素材を紹介します。 ホワイトペーパー、ブラックペーパー、クラフトペーパー、チョークボード、段ボール、デニム地、水彩、グラデーションなどがそれぞれカテゴリごとにまとめてダウンロードできるので、非常に便利です。 難点があるとすれば、ファイルサイズが大きいので、全部ダウンロードすると時間がかかるくらいでしょうか。 ResourceBoy ResourceBoyはテクスチャ素材をはじめ、ブラシ素材、グラデーション素材、モックアップ素材など、商用利用無料の数多くのリソースをダウンロードできます。1年くらい前にも紹介しましたが、その時からさらにテクスチャ素材の種類が増え、パワーアップしています。 ResourceBoy ライセンスは独自で、個人でも商用でも無料、ロイヤリティフリーとなっています。詳しくはダウン
2023年最新版: HTMLのheadの書き方、head内に記述する要素の総まとめ
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「HEAD」を紹介します。 HEAD: A simple guide to HTML <head> elements 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 以前の版からいろいろと変更されています。 2016年版: head内に記述する要素の総まとめ 2018年版: head内に記述する要素の総まとめ head内に記述する最小限の構成 head内の要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 メモ head内に記述する最小限の構成 下記はシンプルなWebサイトで必須となるhead内に記
それ、Canvaで作れます。Web開発者が知っておくべき10のスゴ技！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、人気のグラフィックデザインツール「Canva」に搭載されている多彩な機能のうち、Web開発者に役立つ機能を厳選してご紹介します。 「Canva」は、アイキャッチ画像やバナー広告・ポスターを作成するなど、さまざまな画像編集やデザインを作成できるのですが、実はそれ以外にも驚きの使い方ができる多くの機能が搭載されています。 新しい「Canva」の使い方を知りたい方も含めて、ぜひWeb制作に役立ててください！ 【 Canva 】 ■Webサイトのプロトタイプを作って公開！ 「Canva」を使うと画像やテキストなどを組み合わせて、手軽にWebサイトのデザインを構築できるのをご存知でしょうか。そのうえ、ホスティングも同時にしてくれるので、簡単なプロトタイプを作ってネット上に公開できる仕組みがあります。 方法は簡単で、「Canva」の検索ボックスに「
Web制作者は1冊持っておくとかなり便利！UIに適したさまざまなアニメーションの実装方法が分かる解説書 -動くWebデザイン アイディア帳 実践編
Webページに動きやアニメーションを加えたい、毎回検索で探している、実装の手順を解説してほしい、そんな時にすぐに役立つコピペで利用でき実装方法もカスタマイズもていねいで分かりやすい解説書を紹介します。 動きやアニメーションのコードはサポートサイトから最新版がダウンロードでき、要素表示、背景の動き、エリアの動き、画像の動き、テキストの動きなど9種類にバリエーションが100個以上あり、「この1冊が丸ごとカバー」の文字通り大全集です。 既視感を覚えた人は、大正解！ 「動くWebデザインアイディア帳（紹介記事）」の第2弾で、第1弾は基本的な動きでしたが、第2弾の本書は実践編として「印象に関わる動き」となっています。 Web制作者は、1冊持っておくとかなり便利だと思います。こういった気持ちいいアニメーションはクライアントからの要望も多く、喜ばれます。
昔と違う2021年のHTML制作。アンケート結果から分析するイマドキのウェブ制作 - ICS MEDIA
ウェブ業界の当たり前だと思っていることでも、他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・、この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載7回目となる本記事では「ウェブ業界で、2010年代から変化したもの」をテーマとしてアンケート結果を紹介します。 floatプロパティーは現役？ floatプロパティーは、CSSレイアウトのために2000年代中頃からテーブルレイアウトに代わって使われてきました。FlexboxやCSS Gridなど、他にレイアウト手法が存在する現在において、floatプロパティーはどれほど使われているのでしょうか。 1829票の回答があり「とてもよく使う」が5.7%、「たまに使う」が19.8%、「ほとんど使わない」が69%、「floatを知らない」が5.5%でした。 現在はfloatプロパティーを使う
これなら実装がすごく簡単！スクロール時にDOM要素をアニメーションで表示する超軽量のJavaScript -Animon
Webページがロードされた時やスクロールされた時など、ブラウザのビューポートに表示された時に指定したDOM要素にさまざまなアニメーションを個別に設定できる超軽量のJavaScriptライブラリを紹介します。 HTMLにclassとdata属性を加えるだけで、ランディングページでよく見かけるスクロールすると見出しやテキストや画像が右・左からアニメーションでふわりと表示されたり、フェードインやスケールアップ・ダウンなどが簡単に実装できます。 Animon Animon -GitHub Animonの特徴 Animonのデモ Animonの使い方 Animonの特徴 Animonは、Webページ上のDOM要素がビューポートに表示された時に、指定したDOM要素をアニメーション化させるJavaScriptの超軽量（0.9kB）ライブラリです。単独で動作し、他のスクリプトへの依存はありません。 実装は
CSS変数（カスタムプロパティ）の優れた使い方、コンポーネントのバリエーションを実装するのに役立つ
CSS変数（カスタムプロパティ）は、文字通りCSSで変数が使用できるので非常に便利です。CSS変数の使い方でよく聞くのはカラーですが、それ以外にもさまざまな優れた使い方があります。 WebサイトやスマホアプリのUIで、特にコンポーネントのバリエーションを実装するのに役立つCSS変数の使い方を紹介します。 Practical Use Cases For CSS Variables by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS変数を活用できてない例 CSS変数の優れた使い方 1: ロングハンドのプロパティ CSS変数の優れた使い方 2: 背景 CSS変数の優れた使い方 3: グラデーション CSS変数の優れた使い方 4: クリップパス CSS変数の優れた使い方 5: チェックボッ
2019年注目のJavaScriptアニメーションライブラリ11選 - Qiita
こちらの記事は、Jonathan Saring 氏により2018年 6月に公開された『 11 JavaScript Animation Libraries For 2019 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 何かいいJavaScriptのアニメーションライブラリがないかとWebを眺めていても、「おすすめ」されているはずの多くライブラリが、実は長い間メンテナンスされていませんでした。 そこで私は調査を重ね、あなたのアプリにも使える11の優れたライブラリ、そして今はほとんどメンテナンスされていないものの、非常に便利ないくつかのライブラリをまとめてみました。 アドバイス: JSコンポーネントを個別にパッケージ、公開するのにはBitを使いましょう。異なるプロジェクトやアプリケーション間で共有したりすることができ、チーム内でより迅速にアプリケーションを構築するこ
ホームページにダイナミックな動きを！JavaScriptフレームワーク「mo.js」の特徴と使い方
JavaScriptはブラウザに組み込むだけで、複雑かつダイナミックな動きや機能を実装することができる非常に便利で汎用性のある言語です。 ただデメリットとしては、JavaScript単体でそのような表現をするには、複雑なコーディングを行う必要となることです。 その現実を目の前に諦めてしまう方も少なくないはずです。 しかし、そうした方にぜひお伝えしたい情報があります。 実は、JavaScriptの便利な機能をシンプルなコードで呼び出すことのできるライブラリを使うことで、先に述べたようなデメリットは一掃できます。非常に簡潔にダイナミックな動きを実装することが可能になります。 そこで今回は、JavaScriptライブラリの中でも、まるでFlashを使っているかのようになめらかな動きを実装することができる*「mo.js」*をご紹介します。 「mo.js」とは？ mo.jsは「Motion for
ページ遷移のアニメーションの作り方と参考事例9選【2024年5月最新版】 | Web幹事
「ページ遷移のアニメーションの種類ってどんな種類があるの？」 「ページ遷移のアニメーションのデザインってどうすればいいの？」 最近、アニメーションなどでなにかしらの動きをつけているWebサイトをよく見かけるようになってきました。 しかし、与えたい印象やアニメーションそのものの目的で最適なアニメーションは変わってきます。 ページ遷移のアニメーションの設計は、ユーザーを惹きつけるホームページをつくるためにとても重要。 ページの切替やスクロール時にアニメーションを設定すれば、動きで視線を誘導して見せたいものに注目させることができます。 そこで本記事では、下記を中心に解説していきます。 アニメーションのメリット・デメリット アニメーションの参考デザイン アニメーションの作り方 ホームページにアニメーションを実装するか検討中の方は、ぜひ参考にしてみてください。 【無料】ページ遷移のアニメーションの作
Web制作者は要チェック！現在のWeb制作に合わせて制作された新しいCSSリセット -Reseter.css
現在のWeb制作だと、既存のReset.cssやNormalize.cssには不足を感じると思います。それらの代替手段として制作された新しいCSSリセットを紹介します。 Reseter.cssは各ブラウザの最後から5つ前までのバージョンをサポートし、アクセシビリティにも配慮されており、CSSのテクニックや学びも満載です。 Reseter.css Reseter.css -GitHub Reseter.cssの特徴 Reseter.cssの使い方 Reseter.cssの中身 Reseter.cssの特徴 Reseter.cssは現在のWeb制作に合わせて制作された新しいCSSリセットで、ブラウザによって事前に作成されたすべてのスタイルをリセットします。クロスブラウザのエクスペリエンスを向上させるために、ブラウザのスタイルシートを正規化します。 Reseter.css バグやブラウザの不整合
scrollboosterでドラッグで横スクロールする機能を実装。IE11にも対応。 - 青いやつの進捗日記。
一番ありそうな場面は、 テーブルで、左列がstickyで固定されていて、2列目以降がスクロール出来るやつ。縦に長いテーブルだと横スクロール出来る入力デバイスを持っていないとスクロールバーをクリックしないとスクロール出来ないので操作がかなりめんどくさい。 なので、加えてドラッグで横スクロール出来る機能も実装する。 jQueryでどうにかする、みたいなのも出てくるけど、普通に良い感じのライブラリがあった。 bl6.jp www.npmjs.com ilyashubin.github.io github.com そして、TypeScriptなら型定義ファイルも www.npmjs.com overflow: scrollを設定してある箇所がviewport、スクロールさせたい中身をcontentに設定し、scrollModeやdirectionを設定するとドラッグで横スクロール出来ます。 このラ
スマートフォンアプリの代わりになる！？グーグルが進めるPWA（Progressive Web Apps）とは
ここからはPWAでどんなことができるのか、PWA導入のメリット・デメリットを見ていきたいと思います。 しかしその前に、スマートフォンアプリの現在の市場を再確認していきたいと思います。 そうすることで、PWAを採用することを検討すべき理由がお分かり頂けるでしょう。 『モバイル市場年鑑2019』を読み解く アプリケーションの調査会社の世界最大手のApp Annie社が、『モバイル市場年鑑2019』を発表しています。 今回は、この中から一部のデータをご紹介していきます。 アプリダウンロード数は35%増 スマートフォンアプリのダウンロード数は、全世界で1940億にもなり、2016年から35%の増加になっています。 これだけ見ると、スマートフォンアプリの市場は非常に大きいものと思われます。 特に、新興国では市場が拡大しています。 日本のアプリストアでの消費支出は横ばい さらに、世界全体のアプリストア
Vue.jsを効果的に使ってWebサイトをリッチに作る！Nuxt.jsとは
HOME制作Vue.jsを効果的に使ってWebサイトをリッチに作る！Nuxt.jsとは Vue.jsを効果的に使ってWebサイトをリッチに作る！Nuxt.jsとは Webサイトを制作するときに、そのサイトの規模が大きくなればなるほど、効率的にコードを書き、それを運用できる方がいいですよね？ そんなときにおすすめなのが、Nuxt.js（ナクストジェイエス）です。 Nuxt.jsによって、学習が比較的簡単で、SPAやPWAなど最新のWebサイトがすぐに設計できます。 この記事では、Nuxt.jsとはなにか、Nuxt.jsを使うメリット、Nuxt.jsに向いているサイトについて解説していきます。 Nuxt.jsってなに？ Nuxt.jsは、2017年以降急速に普及しているVue.js（ビュージェイエス）のフレームワークです。 フレームワークとは、コードが使いやすく「型」になったもののことです。
Vue.jsで構成するシングルページアプリケーション(SPA)の作り方やサンプル例【前編】 | ソフトウェア開発のギークフィード
こんにちは。 ギークフィードに入社してはや半年が経ちました。 エンジニアのNkawaKです。初めてのブログ投稿になります。 この記事では僕がVue.jsで作ったサンプルを参考にしながら、 シングルページアプリケーション(SPA)とVue.jsについて解説をしていきます。 かなり解説することが多くなってしまったので、前編と後編に分けています。 こちらの前編では、シングルページアプリケーションの構成と画面遷移に焦点を当てて、 解説を行います。 シングルページアプリケーションとは シングルページアプリケーション(以下SPA)とはその名前の通り、 単一のページでコンテンツの切り替えを行うWebアプリケーションの名称です。 単一のページで構成されているため、ページ遷移の度にロードが発生することなく、 高速で画面が切り替わることがSPAの特徴です。 実際に画面を見ながらSPAの動きを確認してみましょう
【Vue入門】VueCLIから始めるVue.js 概要から理解してVueを使いこなそう | WEBコンサルティング・WEB制作のフリーランス uiuifree
Vue.jsを始めようとすると様々なサイトでVueCLIから始める記事を紹介されてます。 本記事ではインストールして開発環境を作るだけでなく、Vueがどう構築されているか？全体像や関連ツールを含めて説明していきます。 この記事の目次 Vue.js(ビュージェーエス)とは Vue.jsを立ち上げてみよう Vue.jsのフォルダ構成 まとめ Vue.js(ビュージェーエス)とは JavaScriptフレームワークでコンポーネントシステムが取り入れられており、Evan Youによって開発されています。近年、小規模から大規模までのサービスがVue.jsに置き換えられていっていますね。 メリット・デメリット Vue.jsの特徴の1つとしてSPA(SinglePageApplication)を作れることになります。 SPAはHTML/CSS/JavaScriptのみでサイトを構成し、サーバーとの通信を
Vue.jsとVueCLIは違う！CDN版から書き換えて理解してみる｜ほげほげ
勘違いしてたVue.jsとVueCLIって同じじゃないのねぇ！当たり前だろと言われそう。 ■ Vue.js ・Webアプリケーション開発に便利なJavaScriptフレームワーク ・CDNでサクッと使える ■ VueCLI ・VueCliはVue.jsで開発するための便利ツール群 ・npm使ってインストールする必要がある ・単一ファイルコンポーネント（.vue）を使って開発できる CDN版から.vueに書き換えてみる使うもの ・ターミナル ・Visual Studio Code以下に、簡単なTODOリストのWebAppのソースコードを2つ配置しました。 TODOリストのコンポネントを作成し、グローバル登録してあります。これはCDN版なので、index.htmlとindex.jsを同じフォルダ内にぶち込んで、index.htmlをブラウザで表示すれば、素直にVue.jsが動いてくれます。 <
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
