それでも私が<wbr>でなくinline-blockで改行調整をする、たった1つの理由
inline-block を使う理由、それは 入れ子構造を作れることにより、改行位置の優先順位をつけられるから！ 詳しくは以降で説明します。 （前提）そもそも改行調整ってなんの話？ このタイトルを見て記事を開いた方であれば知っていると思いますが、一応説明です。 スペースで単語が区切られる欧文とは違い、日本語は単語の区切りがないので、改行すべき位置を機械的に判断できず、不自然な位置で改行されてしまうことがあります。そこで、見た目を整えるため、改行すべき位置を指定するための手法が必要になります。 他に詳しい記事がいくつもありますので、詳細はそちらを参照してください。 代表的な改行調整の手法 <wbr> 要素 <wbr>要素は、改行してよい位置を表す要素です。 親要素に対して word-break: keep-all; を指定して基本的には改行されないようにすることで、<wbr>要素がある位置で
CSSで句読点括弧のカーニングができるようになるぞ！ 日本語が読みやすくなる最近サポートされた・近日サポートされるCSSの機能のまとめ
CSSのこの機能を待っていた人も多いと思います！ CSSで、句読点括弧のカーニングが自動でできたり、フレーズの途中で改行されないようにしたり、日本語と英語が混在したテキストでスペーシングが自動調整されたり、10px以下でも指定サイズ通りに表示されたりなど、日本語が読みやすくなる最近サポートされた・近日サポートされるCSSの機能を紹介します。 Introducing four new international features in CSS by Jack J 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに word-break: auto-phrase;によるフレーズで自動改行 text-autospaceによる文字間のスペーシング text-spacing-trimによる句読
実はこんなこともできる！MW WP Formの便利なカスタマイズを紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。バックエンドエンジニアのまうみです。 今回はWordpressでお問い合わせフォームを実装する際の定番プラグイン、MW WP Formの知っておくと便利なカスタマイズを紹介します。 MW WP Formはシンプルなショートコードを生成し、簡単に確認画面付きのフォームを作成できることが特徴です。しかもカスマイズの幅もとてつもなく広く、応用次第で様々な案件に対応できるポテンシャルを持ったプラグインです。 今回は機能別に、「えっ、そんなこともできるの？」というようなMW WP Formのカスタマイズ技をご紹介します！ 出力されるタグのhtml構造を変更したい 例えばデフォルトのタグのDOMの構造を変更して、独自のclassを追加したい……そんなときのためのカスタマイズです。 プラグイン内で管理されているテンプレートパーツを、WordPressのthemeディレクトリにコピーすることで
擬似要素の content 内で改行する方法 - by Takumi Hirashima
擬似要素の content 内で改行する方法を紹介します。 まずは content に改行コード「\A」を追加。 続いて white-space に pre を指定して改行コードを有効にします。 .example::before { content: “今日は\A月が\A綺麗ですね"; white-space: pre; } 表示が正しければ次のように表示されます。 content 内を改行コードだけにすると br タグを使わずに改行を挿入することもできます。 .example::before { content: “\A"; white-space: pre; } 擬似要素の content 内で改行する方法を紹介しました。
CSSでここまでできるのか！知っておくと便利なCSSのプロパティや疑似要素のまとめ
CSSの進化は早いですね。 一昔前までは、JavaScriptを使用しなければできなったこと、かなり複雑なコードを書かなければできなかったことが、CSSだけで簡単にできるようになっています。 知っておくと便利なCSSのプロパティや疑似要素をまとめて紹介します。 CSS can do that? by Ananya Neogi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. box-decoration-break 改行する際の表示形式を定義 2. attr() -簡単ツールチップ 3. backface-visibility -フリップするカードも簡単 4. conic-gradient -円グラフを簡単に実装できる 5. filter -画像に多彩なフィルタを適用 6. mix-blend-mode -画像やテキストにも
PHP Archive
JavaScript(ECMAScript) にはバージョンによって大きく機能に差があり、最新の書き方をすると古いブラウザでは動作しない場合があります。例えば ES6(ECMAScript Edition 6) ではクラスやモジュールの読み込みなど多くの機能が追加されましたが、それらは ES5 以前では備わっていないため、Internet Explorer などのレガシーブラウザでは機能しません。 そういった問題を解決するためには、TypeScript などの Javascript ではない言語(AltJS)で書いたものを ES5 対応のスクリプトにトランスパイルしたり、ES6 の書き方で書いたスクリプトを Babel で ES5 以前の書き方に変換するのが一般的です。 今回は Babel と webpack を組み合わせて、スクリプトの保存時に自動的に ES5 対応スクリプトに変換される
Prettier - JavaScriptのコードを見やすく整形
JavaScriptは人によって書き方が変わる言語でもあります。企業によっては基準を設けたりしますが、それでもLint系で注意するのが精一杯でしょう。見づらいコードはそれだけバグをはらみやすく、システムの品質を低下させます。 そこで使ってみたいのがPrettierです。JavaScript用のコード整形ツールです。 Prettierの使い方 左側が元コード、右側が変換後のコードです。 引数の与え方などが大きく変わっています。 配列なども綺麗に並んでいます。 Prettierを使うとルールに合わせてコードを変換してくれます。改行やインデントでの整形になるので、動作が変わることはありません。インデントはタブか空白か選択できたり、ダブルクォートかシングルクォートかといった指定もできます。パーサーも指定できるので、自社好みのカスタマイズもできるでしょう。 Prettierはnode/JavaScr
mikan.js - 機械学習を用いず日本語の改行問題を解決 MOONGIFT
先日、Googleがディープラーニングを使って文字文節を自然に区切るというbudouを開発しました。日本語は分かち書きによって分割できますが、それをさらに自然に改行させるというのは面倒なものです。 しかし機械学習を行わずに、クライアントサイドだけでも実現できてしまうのがmikan.jsです。 mikan.jsの使い方 幅が広い場合。 一番狭めた場合。 ちゃんと良い感じに文節に区切れます。 mikan.jsを見ると分かりますが、正規表現であったり、漢字と平仮名の関係を使って解決しています。汎用性という意味においては機械学習でしょうが、日本語の改行問題というごく限られた領域においてはmikan.jsを磨き上げる方が簡単かも知れません。 mikan.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 trkbt10/mikan.js: 機械学習を用いていな
【PHP】Filter関数を使ってみる
こんにちわ、こんばんわ。最近はKANA-BOONをたまに聴きます。今日はフルドライブ聴いてます。こういうシンプルで若いなって感じのたまに聴くといいのぉって思います。 さて、以下のオーダーを頂きました。 ひらがな、カタカナ（「－」を除く）、漢字、英数字のみを使い記号、スペースは除く。 こういうの、今まで何回も作ってきた気もするんですが、いつも忘れてしまうんですよね。思いつくのは ・preg_replaceを使ってUTF8文字コード\x000とかなんとかで変換かける ・mb_convert_kanaを使って全角を半角にしたうえでなんとかする とりあえずmb_convert_kana使ってみますか
autoresize-textarea - A jQuery (optional) plugin can automatically resize the textarea's height
autoresize-textarea A jQuery (optional) plugin can automatically resize the textarea's height. Demo Try to input or delete some characters. Input interactions: Type, Paste (Ctrl+X or Context Menu), Drag and Drop, Undo (Ctrl+Z or Context Menu). Delete interactions: Backspace key, Delete key, Cut (Ctrl+X or Context Menu), Drag and Drop, Undo (Ctrl+Z or Context menu).
WordPressのエディタで改行を無効化するプラグイン│でろぐ
WordPressのエディタで改行を無効化するプラグイン 2012年1月11日 (水) 今日は久々にWordpressのプラグインネタ。 今日仕事の時にWordpressでちょこちょこっとやってたら、こんな事につまずきました。 それはエディタを切り替えたら改行とかがおかしくなったという事。 Wordpressの改行がエディタであんまり具合がよくないというのは分かってたんですが、ブログを書く程度ならまあルールで吸収できるんですが今回の場合はちょっとどうしようもなかったのでプラグインにお願いしました。 今回助けてもらったプラグインがPS Disable Auto Formattingというプラグイン。 WordpressのHTMLエディタで自動整形する機能を無効化してくれるプラグインです。 これを有効化するとHTMLエディタで改行してもpやbrが出力されずにエディタ内でのbrが反映されるように
PHPで改行を削除する方法
PHPで改行を削除する方法を紹介します。 PHPビギナーの方向けの内容です。 １．問題点 次のような改行つきのテキスト（ヒアドキュメント）を想定します。 <?php $text = <<<EOT aaa bbb ccc ddd eee EOT; ?> この文字列から改行を削除して、$textの内容を aaabbbcccdddeee としたいのですが、改行を削除する方法が分かりません。 ２．str_replaceで改行を削除する str_replaceは検索文字列に一致したすべての文字列を置換する関数です。ネットで調べたところ、３項のpreg_replaceよりこちらが多数派でした。 str_replaceで改行（CR+LF）を削除するには、第1パラメータにCR+LFを示す「\r\n」を記述し、第2パラメータに空の文字列を設定します。これで返却される文字列の改行コードがすべて削除されます。
[CSS]WindowsでLESS更新時に自動でコンパイルする設定方法|情報備忘録
HOME>情報備忘録>[CSS]WindowsでLESS更新時に自動でコンパイルする設定方法 [CSS]WindowsでLESS更新時に自動でコンパイルする設定方法 Windowsで.lessファイル更新と同時にコンパイルしてCSSを書き出す方法を2つほど。 簡単に開発環境を構築するためUbuntu入れたのに、Windowsの方が簡単だったりするから困るw lessc.exe GUIもいいけど、コマンドラインツールがあると他のツールからも使えたりするので、何かと便利ですよね。 設定もすごく簡単なので下記ページからlessc.zipをダウンロードして解凍後、lessc.exeを適当な場所に設置します。
HTML5 × CSS3 × jQueryを真面目に勉強 – #5 LESSのコンパイル（Win / Mac） | DevelopersIO
そんな訳で、CSSの拡張メタ言語であるLESSをCSSにコンパイルする手順を学んでおくとします。 前回、LESSとはなんぞやという記事を書きました。今回はそれの補足に当たる内容なので、LESSをまだご存じないという方は、こちらに目を通されておくのがよろしいかと思いますが、「そんなのめんどくせー、息をするのもめんどくせー」という横着なアナタのために簡単に説明しておきます。 LESSとはCSSに対する拡張メタ言語のことです。拡張メタ言語とは、元の言語と同じ意味（機能）をより少ないコードで表現できるようにしたもので、「あー、CSSダラダラ書くの超めんどくせー、息をするのもめんどくせー」という横着なアナタにピッタリの言語というわけです。詳しくはこちらをご覧ください。 LESSからCSSファイルを書き出す (Win) lessc.exe まずはコマンドラインツールによる手法からやっていきます。以下の
CSSファイルやJavaScriptファイルを閲覧した際に自動整形して表示するChromeエクステンション・PrettyPrint
ブラウザでCSSやJavaScriptのファイルを見たときにソースを自動整形して表示するChromeエクステンション・PrettyPrintのご紹介。地味に便利・・かも。 ブラウザでCSSやJSファイルを見たときにソースをインデントするエクステンションです。便利っちゃ便利かも。
CSS Beautify
CSS Beautify automatically formats your style to be consistent and easy to read Only one blank line between two rulesets Closed curly brace is at its own line There is no empty line between declarations inside a ruleset No space between the property name and colon One space between colon and the property value Comments are preserved
HTML、CSS、JavaScriptのコード整形ツール・「Dirty Markup」
Dirty Markupは、HTMl、css、JavaScriptのコードをインデントして整形してくれるツールです。高機能ではありませんが、シンプルで使いやすく、動作も軽量です。 Dirty Markup
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの擬似要素:beforeや:afterのcontent内の任意の位置で改行する | ITハット
CSSの「word-break: break-all;」と「word-wrap: break-word;」で改行したときの違い - キーワードノート
JavaScriptの文字列に改行コードを入れる方法 | PbTimes 情報誌