CSS

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

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

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

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

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

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

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

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

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

幅とか期間の指定に両矢印「↔」ってよく使うじゃないですか。 画像で用意しても良いんですけど、CSSでやってみようかなーと思って作ってみました。 まずは簡単に両矢印のみ 表示例

通常は折り返されるような長い文字列を途中でカットして三点リーダーを付けてくれるtext-overflow:ellipsisって便利ですよね。 今回、そのellipsisをTABLEタグの中で使お

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

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

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

雑記ブログなので、それほどコメントやメールは頂かないのですが、最近「CSSで画像の好きな位置を円形にトリミングする方法」と「JavaScriptで1文字ずつ表示するサンプルをドラクエ風に作ってみる」と

前回の記事「CSSで画像の好きな位置を円形にトリミングする方法」では画像の任意の位置で円形に切り抜いてTwitterやLineのアイコンみたいなモノを作ってみました。 こんなの。

Twitterアイコンのように写真を丸く切り抜く必要に迫られたのですが、まぁそのくらいCSSで簡単に出来るやろ（鼻ほじ）と余裕かましていたら、ちょっぴりハマったので、備忘録としてφ(..)メモメモ。

お仕事関係で、Webページに載せる写真に複数の注釈コメントを入れる作業が発生したのですが、この写真がそこそこの数ありまして、すべての写真を編集するのは面倒くさいなぁ…　ということでCSSで実現してみま

画像加工って面倒ですよね。 1つ2つならHTMLやCSSをアレコレいじるよりもGIMPやPaint.Netなどでササっと文字入れしたり、ちょっとした図形ならInkScapeで描いてしまうのも良い

「FontAwesomeを4から5にしてハマった話」で書いたとおり、最近FontAwesomeを使い始めたばかりの新参者ですが、色を変えるたびにアイコンを作り変える必要もなく、統一感もあるためさっそく