読者です 読者をやめる 読者になる 読者になる

Corredor

ウェブ、プログラミングの勉強メモ。

はてなブログでページの1つ目の記事末尾にだけ AdSense 広告を挿入する JavaScript を作った

はてなブログは各記事の下部に任意の HTML コードを仕込めるが、これはトップページやカテゴリページなどにも有効なエリアなので、ココに Google AdSense 広告のコードを埋め込んでしまうと、記事ごとに AdSense 広告が掲載されるようになってしまう。 2016…

transform:rotate() を使うと CSS だけでテキストにアンチエイリアスがかけられる

MS P ゴシックなどの ClearType でないフォントが使われてしまう場合に、CSS だけでテキストのジャギーを抑えてアンチエイリアスをかける方法があった。 CSS で、transform:rotate(0.001deg); を指定することでハードウェア・アクセラレーションを有効にし、…

input[type="file"] のデザインを簡単に変える方法

ファイルを選択する input[type="file"] は、大抵テキストボックスとボタンで構成されているが、それらを個別にデザイン変更したりすることができない。 そこで、このファイル要素を label 要素で囲み、その中で別にボタンを作ってやることで、簡単にデザイ…

img 要素に pointer-events:none; を指定すると、その画像を囲むリンクが効かなくなる件の回避方法

経緯 画像をむやみに右クリックで保存されないようにするため、img 要素に pointer-events:none; を指定した。 この CSS プロパティは、クリックや右クリックによるイベントを発火させなくするプロパティで、CSS の指定なのに JavaScript のイベント伝播にま…

IE10 以降で表示されるようになったテキストボックスの×ボタンとパスワードの目ボタンを非表示にする CSS

IE10 以降、テキストボックスに×ボタンが表示されるようになった。これを押すと入力済の文章を全消しできる。どうもテキストボックスの幅が 90px 程度ないときは表示されないようだ。 同様に、パスワード入力欄にも目のマークが表示されるようになり、これを…

Npm-Run-All で複数の npm-scripts を実行・OS 環境に関わらず rm -rf する

前回の記事で、npm-scripts を使った CSS の圧縮処理を紹介した。 neos21.hatenablog.com 今回は、この npm-scripts をさらに便利なものにするパッケージを2つ紹介する。 複数のタスクを一括実行したい そもそもぼくが今回 npm-scripts で CSS を圧縮したい…

CSS を Minify (圧縮) する npm パッケージの Clean-CSS をコマンドラインで利用する「Clean-CSS-CLI」

CSS を圧縮する npm パッケージには色々あり、Gulp プラグインも色々ある。 いくつか比較して、今回は clean-css というパッケージを使おうと思ったが、どうやら最近コマンドラインツール部分と API 部分が分離されたらしく、まともな日本語文献がなかったの…

はてなブログで独自のシェアリンク・フォローボタンを作る HTML・CSS

前回の記事で、はてなブログ公式プラグインではなく、独自のシェアリンク・フォローボタンを作って差し替えたら、ページの表示速度が高速化したという話をした。 neos21.hatenablog.com この独自リンクの作り方を紹介する。 シェアリンク このブログに置いて…

Windows と Mac に標準でインストールされている日本語の等幅フォントってない…?

游ゴシックが Windows と Mac に標準搭載されるようになり、標準フォントのみで Windows と Mac とで同じ見た目を実現できるようになった。 これの等幅フォント版ってないのだろうか?で、できれば日本語も等幅表示されるヤツ。 というのは、はてなブログで…

ブログのテーマを大幅にカスタマイズしてみた

このブログのテーマを大幅にカスタマイズしてみた。 といっても、基本的なカラーリングやレイアウトはそのままなので、「若干フォント指定が変わったかな?」くらいにしか思われないと思う。 はてブロは色々と動作が重たいので、高速化を目的に CSS を軽量化…

CSS3 の gradient とか flex とかを使って凝ったデザインを作ってみた

アーケードゲーム用エミュレータとして知られる「MAME」のサイトのヘッダ部分の画像がカッコよかったので、CSS だけでどこまで再現できるか試してみた。 MAME Multiple Arcade Machine Emulator 結果は以下。 CodePen で公開しているので、CodePen 上で広げ…

CSS だけでフキダシを作る

スラスラわかるCSSデザインのきほん作者: 狩野祐東出版社/メーカー: SBクリエイティブ発売日: 2014/09/26メディア: 単行本この商品を含むブログを見る 昔は可変長な角丸ボックスを作るだけでも、どうやって四隅に画像を置こうか、とか、画像を分けちゃうとリ…

複数の CSS や JS ファイルを HTML に読み込ませる時、head 要素内をスッキリさせる方法

複数の CSS ファイルや JS ファイルを読み込む必要がある時に、head 要素内がどうしても肥大化してしまう。 <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/global.css"> <link rel="stylesheet" href="css/form.css"> <link rel="stylesheet" href="css/print.css"> <script src="js/const.js"></link></link></link></link>

iPhone 上で HTML とか CSS とか JS とかをコーディングして動作確認できるアプリ

App Store でプログラミング言語名で検索すると、大抵の言語は実行環境付きのエディタアプリが存在する。 たとえば Java … JVM Programming Language - Learn & Programs Compiler ※このアプリの作者 Yauheni Shauchenka さんはいろんな言語のエディタを出し…

textarea 要素内の placeholder 属性で改行するには

前回の記事で placeholder 属性というものを紹介した。 neos21.hatenablog.com placeholder 属性は1行テキストボックスだけでなく、テキストエリアにも使える。そして、テキストエリアでも使えるということは、プレースホルダの文言も改行できるのではないか…

placeholder 属性でテキストボックスにヒントを書く

HTML5 で、placeholder 属性というものが追加されている。これはフォーム部品の初期値を指定するようなイメージだが、value 属性と違って、任意のテキストが入力されると非表示になる、いわばフォーム部品のヒント文言を書くための属性だ。 <input type="text" placeholder="電話番号を入力してください"> Placeholder と…

懐かしの marquee 要素を CSS3 で再現する

あの頃よく使っていた懐かしの HTML タグを思い出す企画。 第1弾は marquee 要素。 marquee 要素って? テキストを電光掲示板のようにスクロール表示させる要素。元々は IE が独自に導入したで、IE4 あたりから使えていたので、90年代のインターネットを彩る…

テキストエリアのリサイズ機能を CSS で制御する

Firefox はテキストエリアの右下をドラッグすると、テキストエリアの幅や高さをリサイズできる。 ブラウザのデフォルト機能で、ユーザやウェブサイト作成者が制御できるものではないと思っていたが、CSS で resize というプロパティを使うと制御できる様子。…

CSS3 のグラデーション背景をホバー時にアニメーションさせる簡単な方法

CSS の linear-gradient は transition で変化させることができないようで、困った挙句こんなやり方を発見。 グラデーションのかかった背景をCSSでふわっと変える方法 | web codery 以下、ロゴタイトル風に実装してみた。これは Neo's GitHub Pages のタイト…

IE で input[type="text"] と input[type="password"] に同じ size 属性を指定すると幅が異なる件

まずは以下の CodePen でサンプルを。「IE Default (simulate)」が、IE での見え方を CSS で再現したもの。 See the Pen IE で input[type="text"] と input[type="password"] に同じ size 属性を指定すると幅が異なる件 by Neos21 (@Neos21) on CodePen. 原…

幅・高さが不明な要素を上下左右中央配置する

昨日の記事の発展版。 neos21.hatenablog.com といっても特殊なことは全然なくて、やはり引き続き transform:translate を使う。 See the Pen 幅・高さが不明な要素を上下左右中央配置する by Neos21 (@Neos21) on CodePen. top:50% の他に left:50% も入れ…

高さが不明な要素を上下中央配置する

CSS で高さが分からない要素を上下中央揃えする方法。 今回は .wrapper というボックスが height:100% で1ページ分の画面の高さいっぱいに広がっていて、その中に .box というボックスがあるレイアウトで考える。よくポートフォリオ系のシングルページのサイ…

iPhone6Plus Safari の縦表示の時だけ position:absolute; で画面の左右中央揃えにならない

iPhone6Plus Safari の縦表示の時だけ、position:absolute; で画面の左右中央揃えにしたい要素が中央揃えになってくれない。 イメージはこんな感じ。.box は position:absolute; 指定のおかげで Float していて、後続の要素の上に重なって表示されるようなレ…

Windows で游ゴシックが細く見えないようにする CSS

最近の Windows と Mac の両方に標準搭載されている「游ゴシック」フォントだが、Windows にのみ細字の「Light」が搭載されているため、CSS でフォント指定をしても、Windows で閲覧したときだけ細いフォントで見えてしまう。 細いフォントも悪くはないが、…

リンクホバーやメディアクエリでの簡単アニメーション

リンクホバー時に文字色をゆったり変化させたり、メディアクエリで画面幅に応じてレイアウトを変更させたりする時に、簡単にアニメーションする方法。 CSS で transition プロパティを使って変化するスピードを指定し、あとは :hover や Media Queries を指…

IE11 でページ読み込み時に Media Queries と transition を併用した要素がアニメーションしてしまう

メディアクエリを使って、幅○○px以下はメニューの形を変える、みたいなスタイルを書いておいて、その要素に transition を振っておくと、ウィンドウをリサイズした時にアニメーションしながら要素のスタイルを変更させることができる。 分かりやすくするとこ…

リンクホバー時に下線を引かせる CSS アニメーション

リンク文字列にマウスをホバーさせると、下線が左から右にニョキ~っとアニメーションで出てくる CSS アニメーションのサンプル。使っているのは CSS のみ。 See the Pen adRXEV by Neos21 (@Neos21) on CodePen. ソースは上記 CodePen よりご覧ください。 t…