CSS

スポンサーリンク
CSS

CSSとJavaScriptでスワイプ操作にも対応した簡単なスライドを自作する

どんな記事に需要があるのかなぁ、とアクセス解析を眺めていたらJavaScriptを使ったスライドショーの自作記事へのアクセスが案外多くてちょっと驚いています。 でもあれは自動再生にしか対応していないので、手動操作できるスライダーが欲し...
CSS

簡単なJavaScriptとCSSで横並びプルダウンを自作する

Web上の入力フォームにおいて、よく使われるプルダウンのお話です。 つい先日も、「PHPで日付の表記ゆれを修正する例」で選択肢が多い場合のプルダウン※の使いづらさについて少し触れました。 ※VB等のプログラミング上はドロップダウンリ...
CSS

CSSでドロップダウンメニューを作るたぶん一番簡単な方法

サイトのコンテンツ量が増えてくるといくらメニューを整理しても、いや、むしろメニューを事細かに整理するほど、メニューツリーは深く複雑になっていきますよね。 ぼくが運営しているサイトでもそんなサイトが増えてきたので、グローバルナビ(HP上...
CSS

HTMLフォーム要素のカラーピッカーでカラーパレットを出す方法

最近ひさしぶりにHTMLのフォーム要素でカラーピッカーを実装したのですが、その際にUIが変わっていて一瞬パニックになりました。 結果的に従来のカラーパレットを出すことが出来てホッと一息ついたのですが、ぼくと同じようにパニックになる方が...
CSS

CSSのanimationで画像の上に複数のテロップを流す方法

以前、「CSSだけで数珠つなぎに無限ループするニュースティッカーを作ってみる」と題して、右から左にテキストが流れるニュースティッカーを作りましたが、ちょっとこれをテロップのように画像の上に重ねてみたいなと思って、少し改造してみました。 ...
CSS

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

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

CSSで円形の上下左右矢印アイコンを描く例

以前、「CSSで左右/上下の両矢印を描画し、幅も自動調整する」という記事ではCSSを使い、幅やサイズの解説などに便利な両端に矢印が付いた線の描画をしましたが、今回はそういう矢印ではなく、クリックしたくなるような円形の矢印アイコンのお話です。...
CSS

CSSだけで数珠つなぎに無限ループするニュースティッカーを作ってみる

お知らせ等の短い文章をテロップのように横スクロールして表示するCSSサンプルです。 普通(?)のニュースティッカーサンプル 表示例 ニュースティッカーのテスト1 ニュースティッカーのテスト2 ニュ...
CSS

CSSで左右/上下の両矢印を描画し、幅も自動調整する

先日、「CSSだけで両矢印と上に重ねるテキストを描いてみる」と題して左右の両矢印「↔」をCSSだけで描いてみました。 しかし、やっつけで作ったこともあり、幅の指定をしないといけない点が気になっていました。 どうせなら親要素の大き...
CSS

CSSだけで両矢印と上に重ねるテキストを描いてみる

幅とか期間の指定に両矢印「↔」ってよく使うじゃないですか。 画像で用意しても良いんですけど、CSSでやってみようかなーと思って作ってみました。 まずは簡単に両矢印のみ 表示例 幅は200pxで、左向きの矢印と右向...
スポンサーリンク
タイトルとURLをコピーしました