日本語のwebフォントを使いたい時のメモ｜くろひつじのメモ帳
無料で使える日本語webフォント 無料で使える日本語webフォントも増えてきたので、一覧にしてみました。 Googleフォント M PLUS 1p / M PLUS Rounded 1c / さわらび明朝（Sawarabi Mincho） / さわらびゴシック（Sawarabi Gothic） / Noto Sans JP / Noto Sans TC / Noto Sans SC / Noto Serif JP / Noto Serif SC / Noto Serif TC / 小杉フォント（Kosugi） / 小杉丸フォント（Kosugi Maru） / はんなり明朝（Hannari） / こころ明朝（Kokoro） / ニコモジ（Nico Moji） / ニクキュウ（Nikukyu） Google Fonts + 日本語（公式サイト） ※小杉フォントと小杉丸フォントはGoogle F
【CSS】animation・keyframesを徹底解説
【CSS】animation・keyframesを徹底解説 公開日:2019/01/20 /最終更新日:2019/07/05 CSS Technique 今回は「animation」、「keyframes」について、細かく徹底的に解説していきます。 「animation」、「keyframes」については知ってはいましたが、アニメーションさせるなら「transition」でいいんじゃない？と思って使っていませんでした。 しかし、当サイトのGALLERYに掲載するサイトを日々収集していると、面白いアニメーションをさせているサイトにたくさん出会います。気になるとコードまで調べて見てみるのですが、たくさんのサイトで「animation」、「keyframes」が使われておりました。 そこで、私もWeb制作者の端くれとして、これを機にしっかりと身につけようと、今回の記事をアップするに至りました。
(K)CSSの擬似要素で背景画像のリピートを使った伸縮可能なコンテンツ枠の作成（PCとスマホ） | web(K)campus|WEBデザイナーのための技術系メモサイト
現在はフラットデザインなどのシンプル系のWEBサイトが主流になっていて、画像が主体のサイト案件も減っていますが、業種のジャンルによっては、CSS3メインのデコレーションより、ビットマップ画像をガシガシ使った案件もまだまだあります。 そんな訳で今回はCSSの擬似要素を使って、高さと幅の伸縮可能な画像を使ったコンテンツ枠を備忘録としてまとめておきます。 今回使用する紙が破れた感じのコンテンツ枠は前回の記事で紹介したものを使用します。 どう分解するかというと、画像を見てもらうのが一番早いと思うので、要はこんな感じ。 Photoshopで作成した画像を「上画像」「真ん中画像」「下画像」と違和感ない程度にリピートできるように分割します。 透明部分を保持する必要があるので、形式はPNG形式で。（GIFでも違和感ないならオケです） 「PC向け」横幅と高さが決め打ちの場合 横幅と高さが決め打ちのPCサイト
background のショートハンドで background-size が設定できない - Qiita
今回もコリスさんの記事を見て，真似してみた． 記事を見る前の設定では，background-size: cover; をつけてなかったので，ブラウザの幅を変えても背景画像の一部しか表示されなかった．これをなんとかしたいなーと思っていたときのコリスさん！！本当にお世話になっております．m(_ _)m background-size を設定する 無難なやり方 記事内にあるとおり，個別に指定する方法でやったら何事もなくうまくいった． body { background-image: url(path2image); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-color: #47D
gulpで編集中のscssファイルをwatchしてCSScombした話 - marc tech
こんにちは！フロントエンドエンジニアのセイです！ ネタな記事が増えていたので堅実な記事を書きたいと思い、開発環境を整備した際に書いたコードを紹介します。 目的：watchタスクで監視しているSCSSをCSScombで成形したい。 当初、上記の目的に沿ったコードをWEB上で検索したのですが、gulp で SCSS をコンパイルした CSS に CSScomb をかけるものがほとんどでした。また編集している SCSS 自体を CSScomb にかける記事もあったのですが、別途ディレクトリを用意して解決していたので、別の方法があるのではないかと考え作成しました。 今回の開発環境は以下のようになっております。 最低限のタスクのみ書いているので実際に案件で使用する際は追記して使用してください。 version "gulp": "3.9.1" "gulp-csscomb": "3.0.8" "gulp
【CSS3】親要素の大きさに依存して画像の表示方法を変える［object-fit］プロパティの使い方。
【CSS3】親要素の大きさに依存して画像の表示方法を変える［object-fit］プロパティの使い方。 CSS3から新たに使えるようになった「object-fit」プロパティについて解説します。 聞き馴れない名前のプロパティかと思いますが、主に画像のアスペクト比に作用して、表示領域に対しての画像の大きさを変更する場合に使います。 ……文章の説明だけでは理解しにくいと思うので、実際に「object-fit」を使ったサンプルをご覧ください。 object-fit：サンプル・デモ ※サンプルは、Safari、Google Chrome、Firefox等のモダンブラウザでご確認ください。 親要素のボックスの表示領域に依存して、画像の大きさが変更されているのをご確認できると思います。 このプロパティ［object-fit］で指定できる値は５つ。 object-fit: fill;object-fit
リンクをボタン化する
ボタンのようなものを作る場合、ボタンの画像を用意してその画像にリンクを張るというのがよく行われていることだと思いますが、ここではリンクそのものをボタンらしくする方法を見ていきます。 (2022 年 02 月 20 日公開 / 2022 年 02 月 20 日更新) <a>タグはデフォルトではインライン要素ですので、これをブロック要素に変換します。要素のタイプを変更するにはスタイルシートのdisplayプロパティを使います("display"については表示形式の変更(display)を参照して下さい)。 a{ display:block; } ブロック要素に変換したら、ボタンの幅や高さを設定します。幅を設定には"width"プロパティで、高さについては"padding-top"と"padding-bottom"で設定します。またボタンに表示させるテキストは中央に表示したいので"text-al
CSSで絵を描く！？今日から作れる達人のコツをご紹介
はじめまして! HTMLファイ部(内定者)の、のびーです。 4月の入社に向けて、せっせと勉強をしているアルバイターです。 jsdo.itでは、なんと本日、「HTML5実力テスト 応用編」をリリースしました！！ http://jsdo.it/blog/2013/01/html5cat-update.html リリースを記念して、テスト問題にも出題される、「CSSで絵を描く」ことをテーマに記事を書いてみます！ ※ 文中の例について、ChromeとFirefoxとOperaいずれの最新版とIE10が対応しています。 CSSだけで絵を描く!? さて突然ですが、こちらのイラストをご覧下さい。 はい、絵本に出てきそうな、おひさまです。 そしてこのイラスト、実はCSSだけで描かれています。 「CSSって、Webのレイアウトをするためのものじゃないの?」、と思う方もいるかとは思いますが、 断言します。いま
CSS3(transition)で円の中心を基準に拡大する丸いボタンが並んだメニュー
最近丸いデザインが流行っているらしいので、丸いボタンが並んだメニューを作ってみました。CSS3のtransitionでスムーズに拡大します。円の中心を基準に拡大するところが今回のポイントです。 そもそもこいうのはメニューと呼ばないのかな。検索エンジンのことを考えると色々キーワードを入れたいけど、入れすぎると何をいっているのか分からなくなる。ほんとタイトルって難しい。。 ということで、今回もサンプルを用意していますのでこちら見ていただければと思います。 ではHTMLから解説していきます。 HTML まずはHTMLから。リンク先のURLは省略しています。 <div id="box"> <div class="boxin"> <a href="#" id="circle1">CSS</a> </div> <div class="boxin"> <a href="#" id="circle2">C
4辺が違う色のボーダーにborder-radius:50%を加えると…
タイトルのままですが、4辺が違う色のボーダーにborder-radius:50%を加えてサークル状にするとどうなるか知っていますか？私は先日知ったので紹介します。 border-radius:50%を加えてサークル状にするとこんな感じになります。border-radiusはIE8以下非対応ですので、下のは画像にしています。 かなり印象は変わります。当たり前といえば当たり前な気もしますが。で、transitionで回すと面白いです。 ということでサンプルを作ってみました。最近なぜかIEが起動しないのでIEの動作確認はしていません。。 せっかくなのでコードも載せておきます。 <a href="#" id="circle1">CSS<span></span></a> ボーダーだけを回すためspan要素を入れてボーダーを指定しています。ちょっとかっこ悪い気もしますが、他に方法が思いつかなかったので
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
