https://termina.io/posts/position-sticky-and-overflow-property
縦書きを取り入れたデザインの優れたサイト10選 | Web Design DAY
以前、「デザインの参考にしたい「和風」テイストの良質サイト5選」と言う記事を書きました。その中で紹介したサイトにも縦書きのテクニックは取り入れられておりましたが、「和風デザインじゃない」サイトでも縦書きを取り入れているデザインの優れたサイトはたくさんあります。 今回は「縦書きを取り入れたデザインの優れたサイト」を集めてみました。 和風デザインで縦書き まずは王道の和風デザインで縦書きを取り入れたサイトです。 あきた舞妓 -akitamaiko- ファーストビューが和紙のような背景にロゴマークのみ。ファーストビューは色々盛り込みたくなりますがこのいさぎよいシンプルさがグッド。こちらのサイトは縦書きは画像で表示しています。 【公式】灯屋 迎帆楼 ロゴも縦書きのデザインなのでサイト内の縦書きも全体の雰囲気とマッチしています。こちらはHTML・CSSで縦書きを表示しています。 書画・掛け軸・古美術
WebフォントのNoto Serifを使ってみる
Noto Serif JPがGoogle Fontsに追加されていたので、試してみました。 サンプルコード Noto Serif JPのページにアクセスして、右上の「SELECT THIS FONT」をクリックします。 下部に表示される「Family Selected」をクリックします。 記載されているコードを追加すればOKです。 head <link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP" rel="stylesheet"> CSS font-family: 'Noto Serif JP', sans-serif; Noto Serif JPのデモページ デフォルトではregularの太さのみなので、ウェイトを追加してみます。 CUSTOMIZEタブをクリックして、追加したいウェイトを選択します。 今回は全
縦書きWeb普及委員会
縦書きの中央寄せ 縦書きの見出しや本文を中央寄せにする場合、ブロック要素のままだとEdge（エッジ）などの一部のブラウザで中央寄せにはならないので「display: inline-block;」を活用すると良いです。また縦書きの文章には、高さを指定することも重要です。 また、文字のカラム数は「column-count」でそのカラムとの空きは「column-gap」を指定して調整すると綺麗にそろえることができます。「column-width」は縦書きの場合、高さを指定しているため出番はありません。このプロパティはレスポンシブなどでカラム幅を指定する際に使用します。 以下は縦書きレイアウトの中央寄せを想定したCSSの記述とそれに対するマークアップ方法です。 .box { text-align: center; } .exp { -webkit-writing-mode: vertical-rl
【IE11にも対応】position:sticky;の使い方 ヘッダー、サイドバー、表の見出し
「スクロールしたあとに､ヘッダー､サイドバー､表の見出しを固定表示させたい」 「position:sticky;の使い方を知りたい」 「どうせposition:sticky;も､IEだと使えないんじゃないの？」 こんな悩みにお答えします｡ 私は､2015年頃からWeb制作の仕事をはじめて､160件ほどのWebサイトを制作してきました｡ position:sticky;はIEでは使えないと思い込んでいて､これまで実案件では使ってきませんでしたが､ポリフィルを使うことでIEにも対応させられることがわかりました｡ そこで､この記事では､position:sticky;の使い方､IEの対応方法を解説しています｡ stickyのデモ この記事を読めば､難しいJavaScriptやjQueryを知らなくても､ヘッダーやサイドバーなどを固定させる方法がわかります｡
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
縦書きWeb普及委員会
