CSS Shapesでテキストを回り込ませるレイアウトを表現 | Webクリエイターボックス
2019年5月16日 CSS Webでのデザインはどうしても四角形のボックス型になりがち。印刷物だとテキストの配置ももっと自由にできますよね。今回はテキストを画像などの形にあわせて回りこませたり流しこんだりできちゃう CSS Shapes について紹介します！ ↑私が10年以上利用している会計ソフト！ CSS Shapesとは CSS Shapesを使えば、円形や多角形、画像に合わせて、そのまわりに float で横並びにしているテキストを回り込ませて配置できます。雑誌や印刷物の広告などでみかけるレイアウトのひとつですね！これがWebでも表現できるようになれば、デザインの幅がグンと広がるのではないでしょうか？ 通常、テキストと円形の要素を横に並べると、この図のように四角形をベースとした配置になり、円の右上・左上・左下・右下には空白ができます。そのスペースを shape-outside プロ
【第2弾】少しのコードで実装可能な20のCSS小技集
2019年5月17日 CSS はるか6年前に書いた記事「少しのコードで実装可能な20のCSS小技集」の第二弾です！（スパンながっ）簡単なコードで素敵な効果が得られる小技をダダっと紹介してみます。前回に引き続き、初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ 目次 画像を丸く表示 1本線のテーブル 1本線の水平線 線色を指定しなくても文字色と同一色になる 複数の背景画像 背景画像のサイズ Webフォントを使う 画像をモノクロやセピアにする リストマーカーの色を変更 グラデーション グラデーションボーダー フラットだけど立体的ボタン 画像をぼかす レスポンシブに対応した動画 要素を真ん中に配置 カンマで分けたリスト 文字を縦書き フォーカスすると伸びるテキストボックス iOSでボタンのスタイルをリセット 線のオフセット設定 HTML・CSSの全
Free “Japanese-ish” Fonts 10 + 1
2013年3月25日 インスピレーション, フォント 先日同僚と日本語の文字についておしゃべりしていると、「日本語はまるで絵や記号みたいだ！」と言われました。確かに私達日本人から見るとアラビック文字やハングル文字が記号を並べているように見えるのと同じで、英語圏の人からすると不思議な記号に見えるんでしょうね！ということで探してみるといくつか見つかった素敵フォント。パッと見日本語に見えたり、日本をイメージした英字フォントをいくつか紹介します。なんだかジワジワきますw ↑私が10年以上利用している会計ソフト！ 「日本語風」の英字フォント 1. TokyoSoft ダウンロード（商用利用可） カタカナ風の英字フォント。日本人が見たら間違ったカタカナの羅列ですが、よーく見るとアルファベットになっています。このフォントで「MANA」と書くと、「ポタカタ」になるようです…！ 2. Kaneiwa ダウン
少しのコードで実装可能な20のWordPress小技集
2016年10月27日 Wordpress CSSの小技やjQueryの小技、スマートフォン対応など、これまで様々な小技集を紹介してきました。そこで今回はWordPressの小技を紹介しようと思います！基本から応用まで、簡単なコードで設置可能なので、WordPress初心者さんでも大丈夫！みなさんのサイトに合わせてカスタマイズしてくださいね！ ↑私が10年以上利用している会計ソフト！ 目次 カスタムメニューの設置 アイキャッチ画像（サムネイル画像）を利用する 検索ワードをハイライト Twitterのユーザー名を自動的にリンクさせる デバイスによってコンテンツ変える 画像を挿入する際、P タグで囲まないようにする 「続きを読む」リンクをカスタマイズ ショートコードを作成 ショートコードをテンプレートファイル内で実行する 古い記事にメッセージを表示する RSSフィードに画像を追加 記事に含まれ
2014年にリリースされた便利な無料WordPressプラグイン
2014年9月23日 Wordpress いつもWordPressでWebサイトを制作する際、お決まりのプラグインばかり利用していてる私です。長年愛され続けているプラグインもいいのですが、最近開発された中でも素敵なものがあるはず！という事で、今年開発されたプラグインで便利で使いやすいプラグインをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ WP Canvas – Shortcodes WordPressのショートコードって本当に便利ですよね。小難しい機能も簡単に挿入・表示できます。WP Canvas – Shortcodesはそんなショートコードを使ってアコーディオンやタブ、Googleマップ、ボタン等様々な要素を表示できます。 期限を指定してカウントダウンを表示したり…。 [wc_countdown date="Sep 28, 2014, 12:00:00 AM" fo
Who Needs Web Accessibility? How to Make Accessible Websites?
2013年3月25日 アクセシビリティ 昨年少しの間ですが入院しました。その間は大人しくしていればいいものを、脊髄麻酔や鎮痛剤が効いて苦痛のない時は退屈なもんで、Webサイト閲覧・メールチェックなどはしていました（私の行きつけの病院はインターネット利用可）。しかし体が思うように動かないので、今までどおりWebサイトを閲覧するのは困難。その時初めてアクセシビリティの大切さを身を持って感じ、それから少しずつお勉強している次第です。今回はWebサイト閲覧におけるアクセシビリティについて考えてみようと思います。 ↑私が10年以上利用している会計ソフト！ Webアクセシビリティとは 「アクセシビリティ」とは、アクセスのしやすさを意味する言葉で、転じて利用環境や身体の制約に関係なく誰でも使えるという意味で使われます。どのような状況でもWeb上のコンテンツや機能を十分に利用できるWebサイトを「アクセシ
How to Create Website Wireframes
2014年8月17日 Webサイト制作, 便利ツール WebクリエイターボックスではWeb制作の応用技術をよく紹介していますが、基本の流れはちゃんと説明していないな…ということで、「連載！実践で学ぶWebサイト制作ガイド」として、実際に1つのサイトを作りながらWeb制作の流れと方法をまとめて書いてみることにしました。この連載企画はブログ開始当初に考えていましたが、2年半ほど忘れてました…。今回は「ワイヤーフレームの作り方」です。これも過去に「Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する」という記事を書いていたのですが、私の使用するツールも変わったので、改めて記事にすることに。 ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その3 目標：わかりやすいワイヤーフレームを作成することができる 必要なもの：紙とペン 対象レベル：超初心者OK
WordPressのテーマを変更してスマートフォンサイトを作成。Media Queriesとどっちがいいの？
WordPressのテーマを変更してスマートフォンサイトを作成。Media Queriesとどっちがいいの？ 2013年3月23日 Webサイト制作, Wordpress, スマートフォン 以前「WebサイトをiPhoneで見やすくする5つの方法」という記事でWebサイトをスマートフォンに対応させる方法を紹介しました。当時はそこで紹介しているMobifyというサービスでスマートフォンに対応させていたのですが、JavaScriptが使えないので、リデザインを期に別の方法でスマートフォンに対応させる事にしました。タイトルにあるとおり、WordPressのテーマを変更する方法とCSS Media Queriesを使った方法の２通りを試したので、その比較についても書いてみようと思います。 ↑私が10年以上利用している会計ソフト！ 最初に試した方法はCSSのMedia Queries（メディア クエ
コメント欄で使える10のWordPressプラグイン
2013年3月23日 Wordpress 私はブログを読んで、感動した！ためになった！わからない、助けて！という事があれば、ほぼ確実に名前＋写真入りコメントを残しています。ブロガーの皆様、いつもありがとうです。そんなわけで、コメントしやすい入力フォームには「おっ！」と感動してしまう事も。今日はそんなちょっと便利なコメント欄に使えるプラグインを紹介します。 ↑私が10年以上利用している会計ソフト！ 1. Akismet 特徴 WordPressに標準インストールされているスパム対策プラグイン。導入するとスパムコメントが劇的に減ります！設定も簡単なので必ず使用してほしいプラグインのひとつ。 導入方法 AkismetのWebサイトの「Get Started」から登録。無料プランでOK。 外観＞Akismet設定 からメールで送られてきたAPIキーを入力 2. Disqus Comment Sys
Webサービスの名前をつける時のアイデアいろいろ
2017年6月30日 Web関連記事 新しくWebサービスやアプリを作るとき、悩むポイントのひとつとなる「サービスの名前」。悩めば悩むほどよくわからない名前になってしまったり…。私ははっきり言って結構苦手です…が、しなきゃいけない時があるので、研究＋ない頭振り絞って考えました。名づけのプロの方の助言なんぞあれば嬉しいですｗ ↑私が10年以上利用している会計ソフト！ まず、Webサービスの名前を考えるにあたって、有名なWebサービスをあげてみました。Facebook、Twitter、Flickr…。どれも短く、英語でいう「2音節」です。音節とは母音を中心としたまとまりで、音節が増えるほど長い単語になります（音節について詳しくはこちら）。2音節というのはサービス名としては短く、リズムカルに発音することができます。 それをふまえ、私の考えたWebサービスの名前を考える時のポイントを挙げてみます。
日本語版 WordPress チートシート | Webクリエイターボックス
2014年8月22日 Wordpress, ダウンロード WordPressの覚え書きというか、カンニングペーパーです。コードなんぞをまとめました。他にもWordPressのチートシートはいたるところで記事にされていますが、CSSハックやCSS小技集に続き、これもまた自分用まとめだったり…。例文も私がよく使うものをコピペしやすいように置いてます。A4サイズの印刷用も作ってみたので、「これ使えるかも！」と思った方は印刷してデスクに置いておくと便利です :) ↑私が10年以上利用している会計ソフト！ WordPressチートシート 目次 印刷用WordPressチートシート WordPressテンプレートファイル インクルードタグ テンプレートタグ テンプレートタグ/bloginfo 条件分岐タグ ループ ナビゲーションメニュー 1. 印刷用WordPressチートシート A4サイズの印刷用P
初心者さんのためのWebサイト制作に役立つリンク集
2017年6月29日 Webサイト制作 「Webサイト勉強するのにおすすめのサイトを教えてください！」との声が多いのですが、日本のWeb関連チュートリアルサイトをあまり見たことがなかったので、今までおすすめできませんでした…。ということでちょっとググって初心者さんによさそうなサイトをいくつか紹介します。小難しい単語が並んであるようなサイトは避けているつもりですが、わかりにくかったらすみません。他にもおすすめサイトがあればぜひコメント欄にて教えてください！ ↑私が10年以上利用している会計ソフト！ Webサイトを作る流れ まずはWebサイトを作る目的を考える 誰のため？何のため？Webサイトを作り始める前に。 サイトマップと呼ばれる構成図を作成 Webサイトの構成図を簡単に作れる便利ツール ワイヤーフレーム（Webサイトのレイアウト）を作成 Webサイトの骨組み: ワイヤーフレームを素早く・
うっとりしてしまうデザインのシングルページWebサイト30
2017年6月29日 Webデザイン シングルページのWebサイトはあまりコンテンツがない場合・ひとつの物を強調したい場合に効果的です。Javascriptを使っておもしろい動きをつけたシングルページもたくさんあり、1ページの中にたくさんのアイデアがつまっています！ここでは世界中のWebサイトの中から美しく個性的なデザインのサイトを紹介します。次のWebサイトデザインの参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ シングルページのWebサイトギャラリー pikaboo http://www.pikaboo.be/ フルFlashのサイトかと思ったらJavascriptで滑らかな動きを表現していました！必見！ Think Green Meeting http://www.thinkgreenmeeting.com/ 車と飛行機のイラストがマウスオーバーで消えていきます！
クライアントからのムチャぶり迷言集
2013年3月23日 ネタ みなさんはクライアントのとの打ち合わせ中に「そんなむちゃな！」と思ったことはありませんか？私はあります。何度もあります。そんなクライアントからの迷言を集めたサイト: Clients From Hell（地獄からきたクライアント）と、こちらの記事を載せてみようと思います。 ↑私が10年以上利用している会計ソフト！ 時間とお金に関するムチャぶり 残念ながら多くの人がWebサイトは簡単に作れると思っているのが現状です。。 「今日中に100ページくらいのWebサイトを作って貰えますか？」 「会社のコンセプトを変えようと思うんだ。Webサイトを作り直すのに２日あれば充分かな？」 「ブログとショッピングカートのついた８ページくらいのサイトを作ってください！３万円で！」 「支払うお金はないんだけど、このシルクのシャツは6000円くらいするから、ほら、持っていってください。」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
使用中のおすすめWordPressプラグイン15個