スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ
これは便利！アイコン型WebフォントのCDN「Font Awesome」
まず、以下のコードでWebフォントの呼び出します。 後は、表示したいところにコードを挿入するだけです。サイト内のアイコンをクリックするとコードが表示されます。 この基本形にクラスを追加すると色々とカスタマイズすることができます。 ちなみに「fa」は表示の基本となるスタイルで「fa-sitemap」はアイコンの種類を表します。スタイルの中身はこんな感じです。 .fa { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fa-sitemap:before { content: "\f
Add Icon Fonts to Text Links
2013年3月25日 CSS CSS3を使ったアイコンフォントで、テキストリンクをもう少し華やかに！画像を使うと案外手間がかかるテキスト横のアイコンを、Webフォントを使って簡単に表示させましょう。今回はリンク先や拡張子で異なるアイコンを表示する方法を紹介します。 ↑私が10年以上利用している会計ソフト！ アイコンフォントとは？ アルファベット1文字に1つのアイコンが設定されているフォントの総称です。サーバー上にあるフォントファイルを読み込んでフォントを表示する「Webフォント」の応用として使われ始めました。今までのような画像を使ったアイコンとは違い、フォントはベクターファイルなので、サイズを大きくしてもギザギザに見えることはありません。つまりiPhoneやiPadといった高解像度のディスプレイでも、劣化することなくきれいに表示されます。 ただし！何らかの原因でフォントファイルがダウンロー
二次元画像を綺麗に拡大できる「waifu2x-caffe」の使い方とブログなどでの利用例
waifu2xとは waifu2xとは、簡単に説明すと人工知能技術を利用した画像拡大ソフトです。 人工知能に、与えられた画像を圧縮画像と解釈させ「この圧縮画像の圧縮前の画像を求めよ」という問いの答えが出力される拡大ソフトです。 で、waifu2x-caffeは、Windows64bit環境に対応した、ソフトになっています。こちらはローカルで動作するので、サーバに負荷をかけずに利用することができます。 その他にも、派生ソフトはいろいろあります。 waifu2xを利用した拡大 例えば、以下のような小さなイラストを4倍に拡大するとします。 Credit：ピアプロ・キャラクター・ライセンス 通常の、画像ソフトで拡大すると以下のようになります。 同じような処理を、waifu2x-caffeに行わせると、以下のように綺麗に拡大できます。 二次元イラストに関しては、このように、ノイズやジャギーのない綺麗
CSSでいろんなカタチを表現してみる – mororeco
CSS3の新たなプロパティ「transform」と「border-radius」を使って、CSSのみでいろんなカタチを表現できるようになりました。すべてを暗記するのも大変なのでコピペで再利用できるようにメモしておきたいと思います。 DEMO 正方形 -Square- 長方形 -Rectangle- 円形 -circle- 楕円形 -oval- 三角形（上） -Triangle Up- 三角形（下） -Triangle Down- 三角形（右） -Triangle Right- 三角形（左） -Triangle Left- 三角形（左上） -Triangle TopLeft- 三角形（右上） -Triangle Topright- 三角形（左下） -Triangle BottomLeft- 三角形（右下） -Triangle Bottomright- 湾曲した矢印 -Curved Tail
CMS選定で考慮すべき19のソフトウェア特性指標 | 初代編集長ブログ―安田英久
今日は、CMS選びのポイントの情報を。情報処理学会の「CMSを合理的に選択するためのソフトウェア特性指標の策定」という論文があるので、それをベースに考えてみましょう。 CMSを合理的に選択するためのソフトウェア特性指標の策定この論文は、ISO/IEC25010「システム及びソフトウェア品質モデル」をもとに、効果的なWeb CMSを合理的に選ぶためのソフトウェア特性指標を提案するもの。 論文で示されているの「CMS選択のためのソフトウェア特性指標」は、次の19個です。 この指標は、なかなかよくできていると思います。 CMS選定というと、（Web担でも昔は出していましたが）CMSのもつさまざまな「機能」をもとに、「この機能を備えているもの」という星取り表ベースの選び方が多いかと思います。 でも実際のところ、そうした星取り表は、情報としては微妙なんですよね。ベンダーさん側はできるだけ「○」が多く
【2016年】ディレクター必見！スマホ用グローバルナビゲーションのトレンド7選
近年、急速にスマートフォンの普及が進む中、PC版とは異なるUI・UXで、スマートフォン用に制作されたWebサイトが増えています。 これまでは「PC」が主体で制作されていたWebサイトですが、若い世代では"PCを所有していない人"も多く、スマートフォンだけで携帯電話とPC、双方を兼ねて使っているという人も少なくありません。 そのため、スマートフォンサイト（以下、スマホサイト）のUI・UXに関しても、より使いやすさというのが求められる時代になってきていて、必要とされるポイントとしては、画面が小さいため、視認性や可読性の高さ、タップのしやすさなどになります。 そこでユーザをストレスなく、目的とするページに遷移させるためにも重要となってくるのがグローバルナビゲーション（グローバルメニュー）の役割です。 今回は、実例をもとに、様々なスマホサイトのグローバルメニューをご紹介します。 各グローバルメニュ
モダン日本語フォント指定
CSSのfont-familyで游ゴシックを指定すると、Windowsで細くなってしまう問題の原因と解決方法を中心として、最近の日本語フォント事情をまとめました。 CSS Nite LP47 Coder's High 2016にてお話した内容です。 昔からマークアップエンジニアを悩ませてきたfont-familyによる日本語フォント指定。OSのバージョンアップとともに、新しいバンドルフォントが増え、@font-face規則も主要なブラウザでサポートされました。それに合わせてフォント指定の方法もバージョンアップしてみましょう。 Web上できれいに見える日本語フォントを使う方法としてWebフォントがありますが、実際に使うにはさまざまな障壁があります。かといってバンドルフォントはOSによってまちまち……という状況だったところに、WindowsとMac OSの両方に「游ゴシック」という日本語フォン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
自作のWEBアイコンフォントの作り方（無料ツールのみでfeedlyフォントを作る）
【メモ】個人的に見落としていたCSSの使い方 - Qiita
SSSSLIDE