CSS
フォームの送信ボタンのinputタグにアイコン（擬似要素）を加えたかったのですが、できませんでした。それで、ボタンの外をdivで囲んで擬似要素を加えました。そしたら、なんということでしょう。ボタンの上に重なったアイコン部分は送信などのイベントが発…
Qiitaアドベントカレンダー「CSS」 23日目の記事です。イブイブ！ さて、CSSドット絵マリオシリーズ、前回のあらすじ。グラフィックソフトを使わずCSSオンリー打つべし打つべし！でドット絵を描いた（書いた？）マリオ。ホバーアクションで立ちポーズとジャ…
HTML5で新たに追加されたfigure要素とvideo要素。なんとなく画像はfigure要素、動画はvideo要素というイメージを持っていたが、figure要素はもっと広い用途に当てはまり、video要素も内包する要素でした。そして、HTMLのセマンティック（文書構造）的にもCSS…
ソフトウェア開発プラットフォーム「GitHub」。バージョン管理システム（Git）によって複数人数での開発ができます。「黒い画面」を叩いて開発するイメージがありますが「SourceTree」というGUIツールもありますよ。さらになんと！GitHubはローカル環境と連…
「前編」の続きです。前編ではフォルダ作成（mkdir）、ファイル作成（touch）・複製（cp）・移動（mv）・削除（rm）を行いました。後編ではいよいよテキストエディタを使わず、黒い画面だけでコーディングを行います。ターミナルの中に内蔵されているviエデ…
「初めての黒い画面」以降、ちょいちょい黒い画面（ターミナル）に触れてきましてだんだんと慣れてきています。ここらで新たな試みをしてみます。そう、私は感じたのです。もしかしてだけど、もしかしてだけど、黒い画面だけで、テキストエディタ使わずにWeb…
Webサイト制作で欠かせないChrome「デベロッパーツール」 。でも、なんだか英語メニューがたくさんで、一体どこをどう触ればいいの？ まずはHTML、CSS、JSのリアルタイム修正から入るのがおすすめ。ブラウザ上で直接修正が反映されて、大変直感的ですよ！
あるとイイね！なフロント代替言語「HTMLテンプレートエンジン」「AltCSS」「AltJS」。少ない記述量のコードで済みます。ただし、残念ながらそのままではブラウザに表示されません。HTML、CSS、JSに変換（コンパイル）するための開発環境が必要です。そこで…
以前、CSSだけでドット絵がかけるのか、というシリーズをやってて、中断していたのですが、ツイッターで素敵なドット絵マリオ作品に出会ってまたモチベーションが湧いてきました。今回は立ちポーズを作って、ジャプポーズとhoverアクションで切り替えるとこ…
背景などでいつもお世話になっているCSSグラデーション（linear-gradient）。他にもいろいろな模様を描くことができます。そのなかでも「ストライプ（縞模様）」はよく知られています。これを応用して「斜線」を作れないかなー、と試行錯誤してみました。「C…
以前、「書ける前に読む！HTML、CSS、JSの書式」*1という連載記事を書きました。コードを書くにはまず読める方が先という考えから、コードの読み方をHTML→CSS→JSにステップアップ方式で解説しました。当ブログでは様々なテーマを連載していますが、そのどこ…
前回、タブレットだけで技術ブログが書けるのか検証した結果、もしかしてだけどこれならスマホだけでも技術ブログが書けるんじゃないの？という気になってきたので、実際にやってみる。実録です。
iPhone Xsのページで背景画像が文字の形で切り抜かれた表現があり、調べてみたらbackground-clip: textというスタイルだった。このスタイルで出来ること、出来ないことを検証してみました。
タイトルのようなことをふと思ったのでCSSのvw、vhをいろいろ試してみました。 PCは横長、スマホは縦長とまったく異なる縦横比率なために生じるレスポンシブ対応。それを実現するメディアクエリはとても便利ですが、何種類もCSSスタイルを書き分けるのは少々…
以前、JSで図（チャート）を作るライブラリとしてCanvasベースの「Chart.js」をGettingしてStartedしました。そのときにもう一つSVGベースのライブラリ「D3.js」も候補で考えていたのですがChart.jsと比べて少し敷居が高く感じてました。 その後、D3.jsベー…
「CSSドット絵マリオ」の続きです。前回は１点ずつチマチマと打っていきましたが、たった一人ではいささか寂しいですね。そうだ、ルイージを呼ぼう。「CSS変数」を使えば一瞬でこのマリオがルイージに変わるはず。たぶん変わると思う。変わるんじゃないかな…
昨日の「CSS文字詰め」の続きになります。カーニングで文字詰めをしたテキストに対して、CSSの「両端揃え」設定であるtext-align: justifyを併用すると、果たしてちゃんと両端揃えはかかってくれるのか？いつ調べるか？今で（ry それでは参りましょう。
今日、テキストの約物（句読点やカッコなど）を文字詰めしてくれる素敵なWebフォント「Yaku Han JP」を知りました。CSSのデフォルトにある文字詰め機能、letter-spacingとfont-feature-settingsと見え方などを比較してみました。では、どうぞ。
ブラウザ3Dの大海原を漕ぎ始めた私ですが、世代的にはドット絵ゲーム世代です。*1そんな私が前から試してみたかったのは、お絵描きソフトを使わずに、CSSだけでドット絵が描ける？。 多分描けると思う。描けるんじゃないかな。まちょと覚悟はしておけ。な、…
我々は何年待ったのか？このお手軽外接リサイズobject-fitの登場を！なのにIE11非対応って哀しすぎる。またしてもこの余生ブラウザにもどかしい思いを味わっているのだ。 Edge非対応OS、Windows7のサポート終了まで約1年半（2020年1月終了！）。だが、大丈夫…
スクロールするとフワッと現れたり動いたりするアニメーションを作る方法はいくつかあるが、一番シンプルに感じた方法をご紹介。CSSでアニメーションを設定し、JSでスクロールを感知してCSSのclassを付加する方法。
Web文書は基本的に縦にどんどん連なっていく世界であり、横並びを実現するにはCSSで指定する必要がある。 横に並べるのにフレックスボックス（display: flex）を使う人は多いと思う。 そんな中でも固定幅と可変幅の組み合わせに便利なプロパティflex-basisを…
CSSの小ネタです。最近その存在を知ったのですが、CSSの擬似クラス:not()ってのが素敵すぎでしょう！と感動したのでご紹介。
Pocketの「デジタル積ん読」を消化する日々。状況によってスマホだったりPCだったり。 で、スマホ読書に慣れてくると、だんだんPC表示の一行が長く感じて辛みがある。。 そうだ、CSSのcolumns（段組）でPCとスマホの一行あたりの文字数を統一してみよう！と…
Webサイトを形作っている言語「HTML」「CSS」「JS」。 この3言語を身につけるためには、まずはフワッとでもコード*1を読めるようになることが先決と思う。人のコードを読める（インプット）と、自分でゼロから書く（アウトプット）ときの引き出しになる。 書…
Webサイトを形作っている言語「HTML」「CSS」「JS」。 この3言語を身につけるためには、まずはフワッとでもコード*1を読めるようになることが先決と思う。人のコードを読める（インプット）と、自分でゼロから書く（アウトプット）ときの引き出しになる。 書…
ある日、リストに数字を表示したい時があった。 OKOK、そんな時はリストをul要素ではなくol要素にすればいいのよね。打ち替えてみたが、あれ？表示ない。試行錯誤の結果、6年前のYahoo知恵袋のとある回答によってようやく表示することができた！という話。
リンクや更新一覧などでタイトルの右側に「＞」アイコンをつけることがよくあると思う。 imgファイルを配置してもいいのだけど、修正のたびに画像編集ソフトを立ち上げる必要がある。 テキストの「＞」を配置してもいいけど見た目はイマイチ…。あとシステム…
先日、久々にプールで潜ったけど中耳炎にならなかったのが嬉しい。イイダリョウです。 CodePen Settingの旅。 前回はHTMLの記述量を減らす「テンプレートエンジン」を体験しました。 今回はCSSの記述量を減らす「AltCSS」を体験していきたいと思います。 ア…
