レスポンシブデザインにおけるテキストのコントロール | 前編 テキストの折り返しを制御する大手ソフトウェアダウンロード販売会社、Web制作会社などで、マークアップエンジニア、プログラマ、サービス企画、ディレクターを経験。2013年、株式会社ピクセルグリッドに入社。HTML、CSS、JavaScriptなどをオールラウンドに担当。とりわけ、プログラマブルなCSSの設計、実装を得意とする。 趣味で作成したゲーム「CSS PANIC」は、JavaScriptを一切使わず、HTMLとCSSのみで実装。海外サイトで紹介されるなど話題となった。
CSSの中央揃えで、最も万能で信頼できる実装テクニック
CSSは進化が早く、中央揃えのテクニックも一昔前のものよりも確実に使いやすくなっています。天地左右の中央に要素を配置する際に、要素の幅や高さが可変だったり、要素の数が増えても対応する最新の実装テクニックを紹介します。 現在主流の5つのテクニックからそれぞれの特徴と最も万能で信頼できるテクニックを評価します。 Centering in CSS by Adam Argyle 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. Content Center 2. Gentle Flex 3. Autobot 4. Fluffy Center 5. Pop & Plop 中央揃えに最適なテクニック はじめに CSSの中央揃えは、ジョークの対象にもなる悪名高い課題でした。しかし今日ではCSSはすべて進化し、素直にこれらのジョー
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
メールの１行が78文字の理由【日記 2019/10/23】
前: 台風被害その後次: 自宅電話回線 メールの１行が78文字の理由 2019-10-23 17:37:26 コンピュータ 先日、Twitter で僕のページを引用してくださった人がいた。 ＃たびたび書くけど、エゴサーチしてますよ。 引用されていたのは、「OS の登場」のページ。 …書いたのずいぶん前で、内容が拙くて恥ずかしい。 しかしまぁ、大きく間違ったことも書いてないのでそのまま残してある。 で、引用してくださった方は、「１行が８０文字」の理由を探していたようだ。 該当ページには、IBM パンチカードが１枚に 80 文字を収めることができたため、コンピューターにディスプレイが付けられた際にも、１行に 80 文字を表示できる必要があった、ということを書いてある。 この話、のちに別のところで詳細解説している。 ハーマン・ホレリス 命日の記事。 ホレリスは、IBM の前身の１つとなる「タ
URLの長さの上限について
ムッシューのＩＴ備忘録 東京在住のSIerです。趣味でもITに関することをいろいろとやっていますので、ノウハウなどの備忘録を掲載していきたいと思います。少しでも役立てれば幸いです(^^; 画面遷移時にGETフォームやURLにGETパラメータを付けて連携する場合、URLの長さがブラウザなどの上限に達しないかを考慮する必要があります。 調べるとIEは2083文字や2048文字が上限と言った情報が出て来ますが実際どうかを検証してみました。 URLの長さ上限はブラウザとサーバのそれぞれを考慮する URLの長さの上限はHTTPリクエストを送るブラウザ側の上限と、それを受けるサーバ側の上限があります。 1. ブラウザの上限（IE） よくエンジニアを悩ませるのにIEの独自仕様がありますが、URLの長さについてIE11で検証しました。結果をまとめると以下のようになります。 URLバーに入力できる文字数は2
とほほのSSI入門 - とほほのWWW入門
SSI は Server Side Includes の略です。HTML文書中に以下のようなコメントを挿入することにより、サーバー側がコメントの場所に実行コマンドの結果などを置き換えてくれたりする機能です。 <!--#exec cmd="/bin/ls" --> SSI を使用することにより、例えば次のようなことが可能になります。 すべてのファイルに同じヘッダやフッタを表示することが簡単になる。 ファイルの最終更新時刻やサイズを自動的に表示できるようになる。 外部コマンドの実行結果をページ中に表示できるようになる。 カウンターもつくれる。 SSI を使用するには、WWW サーバーが SSI をサポートしており、SSI を許可する設定が行われている必要があります。一般のプロバイダでは、セキュリティのために使用を禁止しているところも多いようです。 サポートしていても、拡張子を .shtml に
リストアップされた名前のフォルダーをいっきに作る方法 - 週刊アスキー
上図のような名前のリストがあって、これらの名前のフォルダーを作らなくちゃいけなくなったとしましょう。1個1個、新規作成して名前を変更して、ということをリストの個数分だけやってたら大変なわけです。5個10個ならまだしも100個とかあったら泣く以外になにができようか。いやできはしない。 普通の人の人生の中で、そんなシチュエーションがあるのか、はなはだ疑問ではありますが、私はつい先日、仕事でそんなことをする必要があったので、簡単にできる方法はないのか考えてみました。 で、思いついたのが次の方法。 1.フォルダー名一覧をテキストファイルで用意。ここでは仮に“list.txt”とする。 2.メモ帳などテキストエディターで、以下のように書き、“makefolders.bat”という名前で保存。“makefolders”の部分はなんでもいいが、拡張子を“.bat”にすること。拡張子を表示しない設定（ウィ
個人的UIデザインの情報源まとめ
どうも。 最近エンジニアからデザイナーになったものです。 最近UIデザイナーになってUIデザインの情報源って意外とまとまってないなと思ったので、個人的によく参考にする情報源をまとめました。 ここに載ってないやつでおすすめの情報源あればコメントとかで教えてください。 OSガイドライン OSのデザインガイドラインはUIデザイナーだったら必ず読んでますよね。 Material Design デザインシステム的な話から装飾、カラーツールなどデザインに必要な話がとてもたくさん詰め込まれているためデザイン学習の教材として非常に優秀です。コンポーネントもユースケースやスペックまできちんと網羅されていて参考になるし、金と手間隙かかってるなあと思います。 Blogもあり、更新頻度は高くないですが面白い記事が多いのでたまに読んでいます。 Human Interface Guidelines こちらはApple
フォームのCSS - Qiita
フォームは特にブラウザごとの表示の差異が大きいので、普段あまりCSSを使わない人向けにベース用のCSSを書いてみました。 フォームのJavaScript、フォームのHTMLも併せてご参照ください。 CSS適用前後の比較 before CSS適用前画像 after CSS適用後画像(HTMLもデザイン変更に必要な部分は一部変更しています) 共通リセット input, button, textarea, select { /* デフォルトスタイルをリセット */ -webkit-appearance: none; -moz-appearance: none; appearance: none; /* font-familyを継承しないので、継承させる */ font-family: inherit; /* iOSの角丸をリセット */ border-radius: 0; /* box-size
常時HTTPS化＋ドメイン名変更、SEOの悪影響ゼロで進めた手順をすべて公開！ | 初代編集長ブログ―安田英久
今日は、常時HTTPS化とドメイン名変更に関する話題を。Web担では10月にこの両方を一気に進めましたが、検索エンジンからのトラフィック減など一切なしに完了しました。そこでやった手順をお届けします。 ドメイン名を変えるなら常時HTTPS化もWeb担では、オープン当時の社名に基づくドメイン名「impressrd.jp」を長らく使っていましたが、すでに会社が「株式会社インプレス」になっているため、全社的な統一性の観点からドメイン名を変えることにしました。 そして、ユーザーログイン機能があるサイトであるため、Wi-Fi環境でのセキュリティ担保なども目的として、常時HTTPS化を行いました。 旧URL： http://web-tan.forum.impressrd.jp/ 新URL（ドメイン名変更＋HTTPS化）： https://webtan.impress.co.jp/ 実は、この移行作業には
particles.js - A lightweight JavaScript library for creating particles
particles.js is a lightweight JavaScript library for creating particles.
コピペでOK！CSSで作る背景パターンのサンプルコードまとめ | Web Design Trends
Webサイト上の要素に背景を表示したい場合、シンプルに画像で表示する形が一般的ですが、CSSを使って背景パターンを表示するという方法もあります。 ドット柄やチェック模様、ストライプなど色々な種類の背景パターンをCSSだけで作ることができ、使い方を覚えておくとWebデザインに色々と活用することができます。 今回は、CSSだけで背景パターンや模様を表示するメリットや、様々なサンプルコードが掲載されているおすすめのサイトをご紹介したいと想います。 CSSで背景パターンを作るメリット Webページ上の要素に背景を適用する場合、一般的には画像ファイルを用意してbackground-imageプロパティに指定することが多いですが、CSSだけでも様々な背景パターンや模様を作ることができます。 画像ではなくCSSで背景パターンを作った場合のメリットとして、例えば次のようなものが挙げられます。 背景画像を書
More Control Over CSS Borders With background-image | CSS-Tricks
You can make a typical CSS border dashed or dotted. For example: .box { border: 1px dashed black; border: 3px dotted red; } You don’t have all that much control over how big or long the dashes or gaps are. And you certainly can’t give the dashes slants, fading, or animation! You can do those things with some trickery though. Amit Sheen build this really neat Dashed Border Generator: The trick is u
あなただけの「はてなブックマーク タイムカプセル」
15年分のブックマークで再発見 おかげさまで、はてなブックマークはサービス開始から15年を迎えました。その歴史を掘り起こし、特に注目を集めたページをまとめて、タイムカプセルに見立てました。サービス開始当初の2005年までさかのぼり、"インターネットの歴史"を感じていただくことができます。「今見ても古びないブログ」や「昔見つけたあのサイト」を再発見してみてください。 はてなブックマーク全体の歴史 あなただけのブックマーク 他の人は知らなくても、あなただからこそ思い出せる。あなたが過去にブックマークした中から、そんなエントリーをピックアップしました。「あなただけの関心」は、日々誰かの新発見になります。これからもブックマークを通して、他のユーザーにとっても価値のある情報をつなげていきませんか。 あなたの歴史
「みんながこの状況を過度に恐れすぎている」――沢木耕太郎が「旅なき日々」に思うこと【#コロナとどう暮らす】（Yahoo!ニュース 特集）
初めての一人旅は高校1年生の春休み、国鉄の切符を手に周遊した東北地方だったという作家・沢木耕太郎。それから半世紀以上、さまざまな国々を旅して回ってきた彼は、新型コロナウイルスで世界への門扉が閉ざされる今、何を思うのか。沢木が語る「コロナ禍」「東京五輪2020」、そして「旅と人生」。（取材・文：山野井春絵／撮影：殿村誠士／Yahoo!ニュース 特集編集部） 80年代・90年代のバックパッカーブームを後押しし、日本中の若者を旅へと駆り立てた沢木耕太郎の『深夜特急』（新潮文庫・全6巻）。主人公「私」の一人語りで綴られる、アジア、中東、ヨーロッパの旅は、いつ読み返しても新鮮なときめきを与えてくれる。 沢木は現在72歳。一貫してメディア出演を控えているというが、すらりとした体躯に背筋の姿勢の伸びた姿勢、精悍なまなざしは、旅に生きる作家のイメージそのまま。はじめに、この春のステイホーム期間はどのように
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブデザインの余白に規則性を持たせるためのパターン
iPad、Android端末でhosts（ホスツ）の書き換えが必要になったら – コールセンター.biz
https://b-risk.jphttps//b-risk.jp/blog/2018/07/table-css/
アドビとGoogleが連携、ブラウザでPDF変換・圧縮できる「.new」
新しいMac (MacBook Pro) を買ったんですが、今度こそちゃんとしたいので、Macのセットアップの極意を教えてくださいませんでしょうか？
