Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 本記事は、テキスト入力フォームで約物（日本語の文章における、カッコや点などの記号のこと）が重なってしまう現象について、その理由を記載しただけの記事です。 解消することを目的としません。 ただ、理由が分からないとモヤモヤしますよね。 すこし前の私と同じようにモヤモヤしている人は、続きを読んでいただき、「だから重なっていたのかー！」とスッキリしていただければと思います。 事象 - 文章の「美しさ」を損ねる まずは、事象について再現してみます。 特に発生しやすいケースは以下の 3 つでしょうか： ①「」「」とカッコが続く場合 ②箇条書き（・）
Bootstrap3.xの設定例 赤背景が変更箇所 <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#Navber" aria-expanded="false"> <span class="sr-only">ナビゲーションの切替</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navba
Illustratorの線やPhothopのレイヤースタイルの境界線みたいに文字にボーダー(縁取り)をつける方法のメモ。 といっても、イラレの線やPhoshopの境界線みたいにバチッとした縁取りを付けるのは難しそうです。 1. text-stroke を使う方法 text-stroke サポート状況 IE以外はそこそこサポートされてきてるっぽい。 プロパティには-webkit-のブレフィックスが現状では必要。(なぜかFirefoxも。-webkit-text-stroke ってプロパティ名？) 書き方 /* width | color */ -webkit-text-stroke: 2px #000; 又は -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #000; ボーダー(縁取り)は文字の内側に付く ※ color:
1. モックアップツールって何使ってる？？ 2017年の11月くらいから、毎日コツコツと作っていたWebアプリケーションをなんとか完成しました （色々あってリリースはまだしていません...）。Webアプリケーションを作り始めるときに、はじめに「設計」と「モック」を作りました。 世の中に出ているモックツールのまとめ https://navi.dropbox.jp/mockup-tool https://www.mockplus.com/blog/post/webux-10 色々と調べた結果「Bootstrap Studio」が良さそうだったので、有料版を購入してみましたが、とても良く、Qiitaにもあまり情報共有されていなかったので、使ってみた感想などを、まとめようと思います。 2. Bootstrap Studioについて Bootstrap Studio https://bootstra
帳票といえばPDFとして生成するのが一般的でしょうか? でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。 書いてたら結構長くなっちゃったので、さくっとコードだけ見たい方は、Paper CSSリポジトリをどうぞ。 はじめに HTML帳票のメリット 2015年現在、HTML帳票を選択する幾つかのメリットがあります。 ライブリロードで、リアルタイムなスタイル調整 バックエンドではなくフロントエンドで生成できる 前者は、gulpやGruntの普及で、CSSにしろHTMLにしろ、リアルタイムにプレビューできる環
業務内容が書いてあったのを省いたのでわかりにくくなっているとは思いますがアップロードしておきました。Read less
CSS の display プロパティについて紹介します！ display: inline・display: block・display: inline-blockについてのおさらい。HTMLとCSSひよこちゃん向け！ いろいろ便利な CSS の display プロパティ。今回は display: inline display: block display: inline-block についておさらいしてみます。HTMLひよこちゃん向けの記事です！ displayプロパティで、ブロック・インライン・インラインブロックをおさらいしてみた displayプロパティ displayは、要素の「表示形式」を指定するプロパティ。 ブロックレベル要素をインライン形式で表示したり、インライン要素をブロックレベル形式で表示することができます。 構造的にはブロックレベル要素なんだけど、インラインとして表示
CSSで中央寄せ方法(inlineやblockで方法をかえよう！)。text-align:centerやmargin:auto。レスポンシブの場合なんかも紹介します！ CSSで中央寄せにする方法(inlineとblockで方法をかえよう！) おはこんばんちわ、やのっぱです(´・ω・｀) そういえば、周りでcssによる中央寄せがうまくいかないって声をよく聞いてたのでいくつか書いてみたよ。 思いつく限りの中央寄せの方法を書きます。 注意！ 本記事はreset.css、clearfixを導入した状態を基準としてソースコードを載せています。 １．margin: 0 auto;【block要素を中央に】 定番の中央寄せです。 でも、要素がwidth:100%;だと無理です。 margin取れないからです。 例） <style> .marginTest { width:100%; height:40p
平素より「PHPプロ！」をご愛顧いただき、誠にありがとうございます。 2006年より運営してまいりました「PHPプロ！」ですが、サービスの利用状況を鑑みまして、2018年9月25日（火曜日）をもちましてサービスを終了させていただくことになりました。 サービス終了に伴いまして、2018年8月28日（火曜日）を持ちまして、新規会員登録ならびにQ&A掲示板への新たな質問、回答の投稿を停止させていただきます。 なお、ご登録いただいた皆様の個人情報につきましては、サービス終了後、弊社が責任をもって消去いたします。 これまで多くの皆様にご利用をいただきまして、誠にありがとうございました。 サービス終了に伴い、皆様にはご不便をおかけいたしますこと、心よりお詫び申し上げます。 本件に関するお問い合わせはこちらよりお願いいたします。
こんにちは、「livedoor Blog」を担当している吉沢です。 スマホの登場で、すっかりケータイ (フィーチャーフォン/ケータイ/ガラケー) が日陰に追いやられた感がありますが、ケータイも毎年進化していて、モバイルサイトの開発が行いやすいケータイがユーザへ浸透してきています。 livedoor Blog では、スマートフォン分野に注力しながら、月間15億PV あるケータイ版のUI最適化にも引き続き取り組んでいます。今回は、livedoor Blog で採用した事例を元に、この先1〜2年のケータイ開発・運用に役立てられる、3キャリア共通の CSS から最新のコーディング事情を紹介したいと思います。 アクセスシェア〜ライブドアの場合 まずはどの世代のケータイをメインに開発して表示くずれを起こさないようにするか検討するため、アクセスシェアを把握します。 1年前と比べると、iモードブラウザ2.
NSEG Advent Calendar 2015 - Adventarにエントリを書きたいと思っていたら、ネタが降ってきたので急いで書きました。 というわけで12/23のエントリになります。 さて、ワープロなどにある均等割付を、Web でも表現したいという需要があります。 このとき css では text-align に justify を指定すると思います。 この文章のように複数行ある場合には、効いているように見えますが、 table の見出しセルを均等割付をしたい場合には、うまくいきません。 Webでしらべても「text-align justify 効かない」がサジェストに現れるくらいには、効かないもののようです。 なぜこうなるのか、文章に対する均等割付から考えてみましょう。 均等割付の際には、段落の最後で、均等に割り付けてしまうと、むしろおかしくなります。 そのためか、段落の最後で
サンプルコードで学ぶ CSS プログラミングの基本テクニック この記事について NSEG Advent Calendar 2015 の 8 日目の記事です。 2日目の CSS Bird に続いて、CSS プログラミングの基本テクニックを紹介します。 INPUT[type=radio] ~ LABEL 最も基本的なテクニックの一つです。 まず先頭にラジオボタンを並べ、その後ろに各ボタンに対応したLABEL を「position: absolute」で重ねておきます。 そこからタップのアクションに対する変化として、ラジオボタンの checked に応じて LABEL の z-index を変化させることで、同じ場所のタップで次々に隣のラジオボタンの状態を変化させていくことができます。 以下がサンプルコードです。 ラジオボタンの場合は、LABELの1クリックで「対応するラジオボタンへの chec
A clone of Flappy Bird written in CSS CSS Bird Open in a new window この記事について これは NSEG Advent Calendar 2015 の 2 日目の記事です。 NSEG とは NSEG は長野県とコンピューターをテーマにした勉強会で、月1回のペースで開催されています。 勉強会の内容や形式は固定されておらず、フリーテーマの発表会、講師を招いての講演会やハンズオンセミナーなど、様々な形で開催されています。また NSEG 単独での開催だけでなく、他の団体と合同で開催している回も数多くあります。 そんな中、少し前の話になりますが、第17回勉強会ではMozilla勉強会との合同という形で開催され、私はその際に CSS プログラミングについての発表をしたことがあります。この記事ではそれにちなんで、CSS プログラミングとは
The document discusses CSS properties like width, linear, and relative. It mentions CSS Nite events from 1996-2011 and references getting up at midnight. The author's Twitter handle is provided as @swwwitch and an email takano@swwwitch.com. The document contains technical CSS and HTML terms when discussing width properties and formatting text.Read less
Bootstrapは人気のフレームワークですが、日本語のコンテンツを表示するために最適化されているとは言えません。フォント指定・文字サイズをはじめ、日本語をより美しく表示するためのさまざまなアプローチを取り入れたテーマ「Honoka」を紹介します。 単に使用するだけでなく、他のものでも日本語を美しく表示させるのに役立ちます。 Honoka Honoka -GitHub 日本語フォントは、たくさんのフリーフォントがあります。 2017年用、日本語のフリーフォント 259種類のまとめ Honokaの特徴 Honokaのデモ Honokaのアプローチ -Bootstrapでの日本語表示最適化 Honokaの利用方法 Honokaの特徴 Honokaは、Bootstrapでより美しく日本語を表示させることにこだわったオープンソースのテーマファイルで、これをベースにWebサイトを作成したり、既にBo
平成27年12月15日現在の定義です。 プロパティの定義 空白文字及び折返しの取扱。 定義のある水準 第一水準 (CSS 1) 以降。 第三水準以降はテキストモジュールで。 WAP 2.0 での定義 必須プロパティ。 但し、KDDI/沖縄セルラー端末等では nowrap 値のみ実装。 対象メディア 視覚系メディア。 対象要素 全要素。 上位要素からの値の継承 あり。 第二水準でのプロパティ値 以下のいずれか： inherit 上位から継承。 normal 半角空白文字等は一つに纏める 行端で適宜折返しをする nowrap 半角空白文字等は一つに纏める 行端で折返しはしない pre 半角空白文字等はそのまま扱う 行端で折返しはしない pre-wrap 半角空白文字等はそのまま扱う 行端で適宜折返しをする pre-line 半角空白文字は一つに纏める 行端で適宜折返しをする 改行文字では改行す
white-spaceプロパティは、半角スペースやタブなどの空白類文字をどのように扱うか指定します。 対応ブラウザ プロパティの解説 値 normal｜pre｜nowrap｜pre-wrap｜pre-line｜inherit 初期値 normal 適用される要素 全ての要素 継承 します パーセント値 N/A メディア visual 値の解説 normal 連続する空白類文字は1つの半角スペースにまとめて、行ボックスの端まで行くと必要の応じて自動的な改行をします。 任意の位置で改行する場合は、br要素などで行います。 pre 連続する空白類文字の削除を禁止して、自動的な改行はしません。 ソース内の改行位置やbr要素が有る場合はその位置で改行されます。 nowrap normalと同様に連続する空白類文字を1つの半角スペースにまとめますが、自動的な改行はしません。 任意の位置で改行する場合は
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く