縦書きでレスポンシブなブログを作った - yuhei blog
趣味で会社の人のサイトを作った。縦書きでレスポンシブなブログ。prismic.ioとNext.jsで作った。 ウェブデザインに縦書きを活かすことは難しい。部分的に取り入れることはできても、縦書きの文章を主要な要素として扱うのはかなり難がある。というのも、ウェブサイトは縦にスクロールするのが当たり前だけど、普通に縦書きで実装すると横スクロールになるからだ。 横書きでは文章は上から下に流れ、ページは縦スクロールになる。対して縦書きの場合、文章は右から左に流れるため、横スクロールになる。スクロール操作が不自然だと目に見えてユーザービリティが低下するので、どうしても当たり前のスクロールができるようにしたい。 幸い、縦書きにしながら縦スクロールにする方法はひとつある。新聞や雑誌のように段組にすることだ。 それはcolumnsを利用すれば、一見簡単にできそうな感じはする。けど、僕が望む仕様を実現しよう
HTMLメール CSSガイド
14 November 2017 Outlook.com and the Outlook iOS app added support for CSS background images and some related properties, as well as certain Flexbox and Grid properties. Also added iOS 11 Mail to the guide, with no noticeable differences from iOS 10. 22 September 2017 Microsoft updated the Outlook apps for iOS and Android with more consistent CSS support, including media queries. 13 September 2017
二行目の最後を「...」をクロスブラウザで実現 - Qiita
文字が溢れたら「...」を出すのは text-overflow: ellipsis がありますが、一行の場合にしか利用できません。二行目に「...」を出すのは、 -webkit-line-clamp というのがありますが、クロスブラウザでは利用できません。 CSSだけで実現するのは不可能だと思ってたんですけど、出来ちゃいました。 実物はこちらでご確認ください。 .lineclamp { /* config */ line-height: 1.5; height: 3em; background-color: #fff; /* config end */ position: relative; padding-right: 1em; overflow: hidden; } .lineclamp:before { content: "..."; position: absolute; righ
CSSのみで画像のマスキング - Qiita
.svg { -webkit-clip-path: url(#svgPath); clip-path: url(#svgPath); } <svg height="300" width="300" class="svg"> <image xlink:href="cat.jpg" x="0" y="0" width="300" height="300"/> <defs> <clipPath id="svgPath"> <circle cx="200" cy="220" r="55"></circle> </clipPath> </defs> </svg> ▼実行結果 メリット： SVGなのでじゃぎらない 画像の描画図形の位置やサイズ等に影響されない デメリット 複数のSVGをつかったマスキング切り抜くのが上手くいかない（実装方法の問題？） 参考記事 Clipping in CSS and S
【小ネタ】CSS だけで Table 要素をレスポンシブ対応させる方法 | PSYENCE:MEDIA
display－スタイルシートリファレンス display - CSS | MDN このように table は関連する各要素に対して固有の display 属性がデフォルトで設定されています。決して table という HTML タグ自体がテーブルレイアウトを実現しているのではありません。ならばこの dispaly 属性を CSS 側でどうにか制御すれば、モバイル端末といった表示領域が狭い環境にも適したレイアウトが組めるということになります。 DEMO See the Pen Blocked table - Demo of Responsive table by wakamsha (@wakamsha) on CodePen. こちらのデモをベースにしていきます。 とりあえず全部ブロック要素にしとけ 何も考えずに全てのtable 関連要素をブロック要素にしてみました。当然ですが、全てのセル
JavaScriptでCSSの擬似クラスを設定する方法
JavaScriptでCSSの擬似クラス（:link/:visited/:hover/:activeなど）を設定する方法を紹介します。 １．問題点 JavaScriptでCSSを設定する場合、例えばテキストリンクの色を設定するには、styleプロパティを利用して次のように記述します。 <a href="http://.../">foo</a> <script> var foo = document.getElementsByTagName('a'); foo[0].style.color = '#f00'; </script> ですが、styleプロパティには擬似クラスがなく（というか、そもそもプロパティではない）、 a:link a:visited a:hover a:active などの設定方法が不明です。 注：jQueryは使わない前提とします。 ２．擬似クラスを設定する 調べるとい
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
counter-incrementプロパティを使って自動連番を実現する – mororeco
counter-incrementプロパティは、Q&Aやサイトマップ、よくある質問などを記載する時に、テキストの先頭に数字を連番で割り振りたい場合などに利用できます。単なる連番であれば、ulタグやolタグで実現可能ですが、「第1章」や「Q1.」などのように数字と文字を合わせて挿入することは出来ません。そういった際にcontentプロパティを使用します。 カウンタの制御は、counter()、またはcounters()の形式で、()内に「カウンタ名やスタイル（list-style-type）、区切り文字をcontentプロパティに指定します。通常のカウンタはcounter()を用いて、同じカウンタ名のリストがネストされた入れ子構造のリスト等の場合には、counters()で一括指定が可能です。
プロっぽくなった！こっそり使いたい「動きのある」CSSテクニック
作成：2014/06/2 更新：2014/11/01 Web制作 > WebデザインギャラリーやWPテーマなどで「見栄えのする」サイトが使っている効果など。今回はCSSのみで実現できる、動きあるエフェクトをメモしておきます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マスク １．マスク・キャプション ２．円形キャプション ３．全画面+オーバーレイ ４．ストライプの背景 フルスクリーン系 ５．スライド＋フルスクリーン ６．全画面背景動画 ７．パララックス ８．フルスクリーンにフィット ９．背景画像をブラウザごとに最適化 １０．メガメニュー 画像可変 １１．画像で枠線を表現する １２．半透明＋フィルタ １３．文字以外を透明にしてレイヤーさせる 図形 １４．ループ＋ローディング １５．3Dボックス １６．矢印ナビ 画像切り抜き １７．六角形 １８．卵型＋星形
CSSアニメーションの応用事例 - ワザノバ | wazanova
http://css-tricks.com/css-animation-tricks/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約3時間前 Zach SaucierがCSSアニメーションを駆使したテクニックを披露しています。 #1) Jump to another state mid-animation CSS animationで、微妙に数値の違う二つのkeyframe（例えば、.001%）を利用して、propertyを新しい値に即ジャンプする方法。 CSSコード @keyframes toggleOpacity { 50% { opacity: 1; } /* Turn off / 50.001% { opacity: 0.4; } / Keep off state for a short perio
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
cow2design.com
https://qiita.com/debiru/items/28d54b5c1e295d880cd3
https://github.com/kiwanami/CSS-Guidelines/blob/master/README.ja.md