モダン日本語フォント指定CSSのfont-familyで游ゴシックを指定すると、Windowsで細くなってしまう問題の原因と解決方法を中心として、最近の日本語フォント事情をまとめました。 CSS Nite LP47 Coder's High 2016にてお話した内容です。 昔からマークアップエンジニアを悩ませて…
多くのサイドバーが役に立っていない理由とは？
YonaはCodal社のテクニカルライターです。彼はコンテンツ戦略、文章、ブログ、編集の責任者です。また多岐にわたる記事を提供するため、Codal社のUX、発展、マーケティングそして管理チームと密接に働いています。 Webサイトにおいて、サイドバーは必要でしょうか？ 情報交換をとても重要視している業界ですから、サイドバーが流行してスタンダードな手法となったのはある意味必然といえば必然です。ですが、サイドバーはつまるところただのリンク集でしか無く、補足的な情報を入れておく程度の場所です。 これを言い切ることで私を嫌いにならないで欲しいのですが、UXデザイナーはサイドバーに頼りすぎなのです。 例えばUXデザイナーの方にサイドバーを使わなければいけない理由を聞いてみてください。おそらく合理的な答えを導き出すまで相当な時間がかかるのではないでしょうか。 では、サイドバーに対抗できるものはあるのでし
＜操作説明＞ - 鳥獣戯画制作キット
猿、蛙など漢字をクリックすると画像オブジェクトが表示されます。画像オブジェクトはドラッグ・ドロップで動かせます。
無料で説明図を作るならドローツール「draw.io」に敵うものはないかも
で、図説ドローツールとしては、CacooやGliffyを紹介しました。 けれども、「draw.io」というのを使ってみたら、完全に無料で利用できるうえに、日本語にも対応、さらには機能も豊富という何拍子も揃った素晴らしいドローツールだったので紹介です。 photo by David Goehring draw.ioとは draw.ioは、WEB上で無料で使えるフローチャート作成ツールです。 インストールなどは必要なく、ブラウザからログインも不要で手軽に利用することができます。 通常、こういったドローツールは、「作業シート何枚まで無料であとは有料」などというサービスも多いのですが、draw.ioは完全無料で利用することができます。 やれることが豊富 このツールを利用するだけで、以下のような図を手軽に作成することができます。 チャートなんかも。 こんな回路図なんかも。 もちろんこんなフローも。
制作途中にお世話になる、ダミーテキスト・ダミー画像のジェネレーターいろいろ
2021年10月21日 便利ツール Webサイトや印刷物の制作中には、とりあえずで入れておく「ダミー」を使用する事が多々あるかと思います。日本ではアタリ・アテなどとも呼ばれますね。それらのダミーテキストやダミー画像を便利に生成してくれるジェネレーターをいくつか紹介します。いろんな種類のジェネレーターやサービスがあるので、うまく利用して時間短縮しちゃいましょう！ ↑私が10年以上利用している会計ソフト！ ダミーテキスト（英文） Lorem Ipsum ダミーテキストの大本命、Lorem Ipsum。Photoshopでも採用されている、「Lorem Ipsum…」から始まる有名なダミーテキストを生成できます。 Dummy HTML snippets for webdesigners HTMLタグ付きのダミーテキストのジェネレーター。左の要素を右側にドラッグ＆ドロップでカスタマイズできます。類
画像を使用しないで引用表示するCSSカスタマイズ
引用符で不具合を見つけた、あきら（@akrwnet）です（＾ｖ＾） 以前書いた記事 ブログテクニック２：見やすくなるような引用符カスタマイズ ここで、CSSを変更して引用表示を見やすくしたつもりでしたが、Windows Live Writerを使用していると、投稿記事に自動でPタグが挿入されてしまいます。 すると、引用文が変なことななってしまうんですね。 Pタグ開始時に、全て引用符がついてしまいます。 これじゃイケてないということで、解決方法を探ってみたがわからず・・・ ならば画像を作成して対応させてみたらどうだろうと こんな画像を作ってみたのですが、レスポンシブ対応させるとちょっとおかしなことになりそうだったので、コレも却下！ では画像を使わないほうが楽なのではないかという結論に達し、ググって見ることにしました。 こちらの記事で、このCSSソースを拝借させて頂きます。 blockquot
劇的！（でもない）before after 擬似要素の使い方まとめ
自宅を匠にまかせて改造するほどの資金力なんてとうてい捻出できないゴロドクです、どうも。 普段コーディングするのにbefore/after擬似要素ってほとんど使ったことないんですけど、最近あちこちのCSSのTIPS系ブログ読んで結構使ってる例があったので、勉強がてら自分なりにまとめて備忘録付けておこうと思いまして。 before/after擬似要素 基本的な使い方 まず最初にbefore/after擬似要素とはなんでしょ、という話なんですがこれはHTMLソース上に書かれた要素に対し、【:before】【:after】という擬似要素を付すことで、HTMLソース上には存在しない付加的な要素を、指定した要素の前後に生成する、というものです。 このニュアンスが言葉で説明するのがちょっと上手く行かなくて、自分が理解するのに壁であった部分でもあるんですが。 ものすごくシンプルなソースを見ていただけるとわ
Graphy WordPressテーマ | Themegraphy
Graphyはタイポグラフィーの美しさにこだわって作られたブログ向けWordPressテーマです。モバイルファーストのレスポンシブデザインで作られており、スマートフォンやタブレットからの閲覧でも美しさを損なうことはありません。 Version 2.3.2 Updated Mar 02, 2021 Changelog Graphy / Graphy Pro Requirements WordPress 5.6+ Browser Support Chrome, Safari, Edge, Firefox Help File Documentation Child Theme Graphy / Graphy Pro License GPL
Drag & Drop WordPress Themes • Themify
Premium WordPress Themes & Plugins Since 2010, Themify themes and plugins have been helping 120,686+ customers make beautifully responsive WordPress sites, faster and easier than ever. Master Club Get the 'all-in-one' WordPress toolkit that includes ALL Themify themes and plugins, empowering you to build any WordPress site you can imagine. Get Master Club $89 30-day risk free money back guarantee!
旧・Macの手書き説明書 - FC2 BLOG パスワード認証
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ https://mac-tegaki.comへ移転中 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
Webデザインに黄金比や白銀比を取り入れる方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーの白浜です。 人が見て美しいとデザインとされる黄金比や白銀比。なんとなく知っているものの、作り方や使い方がよくわからないという人もいますよね。 今回は黄金比や白銀比の考え方についてわかりやすく解説するとともに、Webデザインのレイアウトや画像制作に黄金比や白銀比を取り入れる方法・お役立ちツールをご紹介します。 良かったら参考にしてみてください。 （編集部注：2013年12月16日に公開された記事を再編集したものです。） 黄金比・白銀比って？ 黄金比・白銀比は、古くからある人が見て美しいと言われる調和的な比率のこと。デザインに黄金比や白銀比を使用することで、言葉で言い表せない芸術的な美しさを加えることができます。 まずは黄金比・白銀比がどういうものなのか、基本の考え方についてみていきましょう。 黄金比の比率と作り方 コトバンクによると、黄金比(Golden ratio)
WordPressテーマユニットテストデータ日本語版を更新したよ！
WordPressのテーマを開発する際に、テーマの表示を確認するための「テーマユニットテストデータ」というものがあります。 投稿や固定ページやコメント、メニュー等で崩れがないか確認できるダミーデータです。 様々な場合を想定した（投稿タイトルが長い短い、各種タグ、画像の回り込み、特殊文字、カテゴリー、階層の深いコメント、等）データとなっています。 WordPressの公式ディレクトリに掲載する場合はこのデータの英語版を使ってテストします。 今回はそのテーマユニットテストデータを有志が集まってみんなで日本語に翻訳しました。 WordPressテーマユニットテストデータ使い方 日本語版データはこちら→https://github.com/jawordpressorg/theme-test-data-ja (英語版はこちら→https://wpcom-themes.svn.automattic.c
WordPressのテーマ制作者は必携！記事のさまざまなパターンが簡単にテストできる - WP Test
WordPressのテーマで記事がどのように表示されるか、テキスト記事、画像コンテンツ、動画コンテンツなどが正常に表示されるかテストできるWP Testを紹介します。 普通に想定されるパターンだけでなく、タイトルが異常に長い、コメントがたくさんついた、カテゴリが無い、カテゴリが異常にたくさんなど、イジワルなパターンも用意されています。 WP Test ダウンロードできるテストデータはXMLフォーマットで、WordPressに直接インポートできます。画像などはuploadsフォルダでサーバーにアップします。 どんなパターンが用意されているかは、WP Testのデータを読み込ませたデモで見ることができます。たくさんあるデモページから一部をご紹介。
WordPressテーマ紹介サイト｜テーマタンク
ひさしぶりの更新ですが、わたしが更新するの初！ はじめまして、どうも、ちぐさです。 サイドバーの運営者情報でいうと２番目の人で、 １番目の人…
クラスセレクタ (E.warning)｜セレクタ｜CSS HappyLife ZERO
CSS1で定義されたクラスセレクタは、ピリオド（.）とその直後に続くクラス名から成り立ち、クラス名と(X)HTMLのclass属性が一致した場合に適用されます。 クラスセレクタはもっとも使用頻度の高いセレクタの一つです。 クラス名などの識別子に関しては扱える文字に決まりが有ります。 詳しくは「識別子で扱える文字」を参照してください。 対応ブラウザ クラスセレクタのサンプル .mainArea { float: left; width: 600px; margin: 0 0 20px; } p.attention { color: red; font-size: 80%; } <div class="mainArea"> <p>テキスト</p> <p class="attention">注意書き</p> </div> クラスセレクタを使って.mainAreaとp.attentionにスタイル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Font−familyのベストな書き方 2015年版 | それからデザイン スタッフブログ
Best WordPress Themes - Themegraphy
IDEA * IDEA
ウェブの構造を美しいアート作品に
Bitbucket