JavaScript

スポンサーリンク
CSS

CSSとJavaScriptで横スクロールするお知らせ画面を作成する

前回の「CSSで円形の上下左右矢印アイコンを描く例」の続きみたいなものですが、せっかく左右の矢印アイコンを作ったので、それを活用して、矢印をクリックしたら横スクロールするお知らせ画面を作ってみたいと思います。 横スクロールするお知らせ...
JavaScript

JavaScriptでプルダウンメニューを複数連動させるなるべく簡単な方法

1つのプルダウンを変更したら、その内容に連動して別のプルダウンを変更するという使い古された手法のお話。 ちょっと検索すればJavaScriptのサンプルが山ほど出てくるかと思いますが、ハードコーディングが多すぎていまいち汎用的ではなか...
JavaScript

JavaScriptでドラッグ&ドロップによるリストの並び替えを実装する例

1年近く前に「JavaScriptでドラッグ&ドロップによる画像の入れ替えを実装する」という記事を投稿してその存在自体忘れていたのですが、先日「JavaScript ドラッグ&ドロップで並べ替え」と検索した際、かなり上位(検索エンジンによっ...
CSS

JavaScriptとCSSでヘルプボタンと凡例(ツールチップ)表示をする例

前回は「JavaScriptで入力フォームにふきだしのようなツールチップを表示する例」と題して、入力フォームでそれぞれの項目の横にポップアップするツールチップを表示してみましたが、今度は入力パーツがない場合にも使えるヘルプボタンを実装してみ...
JavaScript

JavaScriptで入力フォームにふきだしのようなツールチップを表示する例

入力フォームには既にplaceholderという属性があって、簡単な入力ヒントを表示することが出来ますが、今回はそれに加えて入力欄にフォーカスが移動した際に右側にふきだしのようなツールチップを表示する仕組みを作ってみたいと思います。 ...
JavaScript

JavaScriptでinnerHTMLとappendChildの速度比較

最近の検索エンジンはJavaScriptで表示されたWebページもほとんど正確に読み取ることが出来るそうで、動的にページを書き換えるサイトも増えてきました。 特にページ切り替えの動作はURLの後ろに p=1, p=2, p=3 等とペ...
JavaScript

JavaScriptを使いWeb上でファイルのドラッグ&ドロップを実現する例

HTML5になってからWeb要素へのドラッグ&ドロップがサポートされ、今となってはありふれた機能でサンプルコードもそこら中に公開されていますが、少し気になったことがあったので備忘録として記事に残しておこうと思いました。 ドラッグ&ドロ...
CSS

CSS用になるべくサイズを小さくしたSVGをBase64化するツールを作ってみた

Web界隈の流行は移り変わりが激しくて目が回りそうですが、最近はPageSpeed Insightsのスコア上昇のためにも、SVGを直接埋め込むのが流行っているみたいですね。 HTML中にimgタグを大量に貼っているとその都度リクエス...
JavaScript

JavaScriptとlistでコンボボックスを使ったタグ追加/削除機能を実装

WordPressの投稿画面とか、あるいは動画投稿サイトなどでもそうですが、最近は何かというとタグ付けが多いですよね。 カテゴリでガチガチに縛るよりも、柔軟に対応できるので良いと思うのですが、あんな機能を自分で作ったWebサイトにも付...
CSS

CSSのflexで画像をタイル状に中央寄せで並べつつ最後の行だけ左寄せにしたい

フラットなデザインが好まれる昨今、写真やコンテンツを四角いタイル状に並べることって多いと思うんです。 CSSも便利になり、floatであれこれやらずとも display:flex; だけでレスポンシブな配置をしてくれるし、justif...
スポンサーリンク
タイトルとURLをコピーしました