いざという時に使える13のHTML&CSS Tips集 | BUILD Journal
いざという時に使える13のHTML&CSS Tips集Update2023.05.12Release2023.04.13Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する いざという時のために覚えておくと便利なHTML＆CSSのTipsを13個紹介します。何かで困った時に読み返してみてください。何かでお役にたてると思います。 テキストの円形回り込み See the Pen shape-outside by Kobayashi (@Pulp_Kobayashi) on CodePen. 円形の画像の縁に沿ってテキストを回り込ませるCSS Tips。実際には画像の縁を判定して回り込んでいるのではなく、shape-outsideプロパティを使用し、circle(50%)を指定することで、要素の回り込みの形状を円形にしています。 CS
カルーセルのUIは売り上げにつながるのか!? カルーセルデザインを考えるときに知っておきたい7つのこと
HOME Contentsquare カルーセルのUIは売り上げにつながるのか!? カルーセルデザインを考えるときに知っておきたい7つのこと 皆さんこんにちは。ギャプライズ鎌田（@kamatec）です。 大きくきれいな画像を横並びに使い、視覚に訴えるサイトデザインを実現できる「カルーセル」。見るからにカッコいいデザインなので、サイトのクオリティを上げるため「カルーセルパネル」を導入したサイトも数多くあるでしょう。 とは言え、この「カルーセルパネル」を使用するか否かという議論がカルーセルが普及していくにつれて盛り上がってきました。ということで、今回はこの「カルーセル」の是非について、Clicktale社のアナリストが調査した結果を報告したいと思います。 (※2020/8/21更新) カルーセルパネルとは？ そもそもカルーセルパネルって何？ ここ数年多くのサイトに導入されているカルーセルパネル
知っておくと便利！あのサイトでさりげなく使われていたCSS小技集 - コムテブログ
TL;DR 2014/12/01：続編である「最近のサイトで使われていた CSS 小技集」を書きました。 今回は CSS のみで実現できるもの、動きあるエフェクトやこれから使用頻度が高くなりそうなものをメモしておきます。さり気なく使いたい CSS テクニックです。 画像 １．キュレーションサイト風のランキングボタン キュレーションサイトがサイドバーに「よくつけてる」ランキングボタンです。counter-incrementで数値を増加させ、content: counter()でカウンターを表示します。人気の記事を表示させる WP プラグイン等と組み合わせるといいですね。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 html <ul class="sample"> <li><img src="xxx.png" /><span class="post-title">テストテストテ
使わないと損！作業の効率を上げるIllustratorの機能まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの白浜です。5月病にならないためにも、仕事をサクサク終わらせて明るい時間に帰りたいですね！！ そんなわけで、今回は覚えておくと作業効率が劇的に上がるIllustratorの機能を、わたしが新しく知った順にご紹介したいと思います。 後半は今まで書いた記事の紹介になってしまうのですが…本当に使っていないと損なので何度でも言うよ！！ ここ半年ぐらいで知った便利な機能 まずはここ半年ぐらいで知ったIllustratorの便利な機能を2つご紹介します。 ライブコーナー Illustrator CC（17.1）のアップデートでしれっと追加されていたこの機能、すごいです！！ヤバイです。 ダイレクト選択ツールでオブジェクトを選択するとコーナーに白い○が出てくる方、あなたのバージョンはライブコーナー機能が使えます！ 全部のコーナーが選択された状態で1個○をドラッグしてみると… 全部の角
How To Write A Great Lede When Writing For The Web
One of the hardest elements is concocting a great lede; ledes being the one chance you have of persuading readers to commit to an article in full. Here are five tips to start well. Writing for the Web is a skill that's easy to learn but difficult to master. One of the hardest elements is concocting a great lede; ledes being the one chance you have of persuading readers to commit to an article in f
IllustratorでWeb制作をするときに気をつけたい5つの設定 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
CCの魅力を感じつつもCS6製品で様子を見ている、月額支払いがちょっと怖い。そんな九州ライター村上です、みなさんこんにちは。 今人気のフラットデザインはIllustratorが得意とする部分なので、最近Illustratorを使ってWebサイトを作ろうという動きが増えてきました。Illustrator使いとしては非常に嬉しい事です。しかし、DTPを得意とするIllustratorでWebサイトを作る際には、確認しておかなくてはいけないWeb用のポイントがあります。 今回は、初心者向けのちょっとした用語の説明と共に、Web用コンテンツ作成時に気をつけるべきIllustratorの設定をご紹介していきます。 IllustratorでWeb作業をする時に気をつけたい5つの設定 単位は相対単位のピクセルにする カラーモードはRGBにする ピクセルプレビューで作業する 各パーツはアートボードをわけて
Useful CSS Text Effects
2014年8月22日 CSS モバイルファーストの概念が広まり、コンテンツ主体の「読ませる」サイトが増えてきた昨今。テキスト周りをより便利に、より素敵に表示できるようなCSSをいくつか集めました。ユーザビリティの向上も図れるようなものもあるので要チェック！基本的なテクニックが中心なので、初心者さん〜中級者さんの参考になればと思います。 ↑私が10年以上利用している会計ソフト！ テキスト周りで使えるCSSの小技 目次 テキストを選択する時の色を変更 蛍光ペンで線を引いたような効果 長いテキストを「…」で省略する 番号リストの表現を変更 リンクの種類でアイコン変える 言語によってスタイルを変更 テキストリンクのエフェクト プリント時はURLを表示 長いURLを途中で折返す 途中で折り返さず、次の行に 先頭の文字を大きく 先頭を一文字分あける グラデーションテキスト ブラウザーは特記していなけれ
横に水平線のあるテキスト
図1：横に水平線のあるテキストの例 おもに見出しなどで見かける、テキストの左右 (またはそのどちらか) に水平線を配置したスタイル。これを CSS で実現する方法について考えてみました。 Demo: 横に水平線のあるテキスト 重ねて隠すパターン まず最初は、1 本の水平線を幅いっぱいに配置した上で、テキストに重なる部分を隠す、という方法です。 <h2><span>Hello</span></h2> マークアップはこのように二重の要素が必要です。外側の h2 要素の擬似要素で水平線を作り、内側の span 要素に背景色を指定してテキスト部分を隠します。 h2 { position: relative; text-align: center; } h2:before { border-top: 1px solid; content: ""; position: absolute; top: 5
right: 100%か負のマージンか
これまでCSSにはレイアウト方法があまりなかった。これからはFlexible Box LayoutやMulti-column Layout、Grid Layoutを始め、positionプロパティーに使える値の拡充などもあり柔軟に行えるようになるだろうが、それはけっして既存のレイアウト方法が不必要になるということではない。選択肢が増えると受け止めるべきだ。例えばright: 100%や負のマージンを使って親要素の外側左にレイアウトする手法はそのまま使い続けることになるだろう。 ほとんど同じレイアウトを実現するright: 100%と負のマージンの使い分けを通して、レイアウト方法の選択をどう行うべきかという基本的な思想を解説することにより、今後増えてくるレイアウトの選択肢にどう相対すべきかがわかるのではないかと思う。そしてそれはCSSプロパティーの意図された使い方を理解するということでもある
rainyday.js
About The idea behind rainyday.js is to create a JavaScript library that makes use of the HTML5 canvas to render an animation of raindrops falling on a glass surface. Simple enough, right? Have a look at the demos to see it in action. Features rainyday.js features extendable API, collision detection and is easy to extend with your own implementations of different animation components. Cross-browse
(no title)｜鈴木メモ(旧)
Illustratorを覚えようと緩めにがんばるブログです。ただいま新アドレスhttp://suzukimemo.com/への移行中です。
デザイナーの仕事を驚くほどラクにするPhotoshopアクション厳選18種【全て無料】 | Find Job ! Startup
画像加工や写真の修正、すべて手作業でやってませんか？ Photoshopのアクション機能で自動化すればアッという間に終わります。今回はデザイナーの仕事を驚くほどラクにするアクションを18種、厳選してまとめました。 目次 単純作業をラクにするアクション（×4種） モックアップ作成をラクにするアクション（×6種） 写真加工をラクにするアクション（×6種） 写真の枠をラクに付けるアクション（×2種） 単純作業をラクにするアクション １.Retina対応画像を生成する Retinize Itを使えば、iPhoneやiPadに対応したRetina画像を自動生成できます。リサイズ〜名前変更の手間を一気に短縮しましょう。 Retinize It ２.リフレクションする 水面に反射したような効果が得られるリフレクションエフェクトが簡単に作れるアクションです。たったのワンクリックでAppleプロダクトの
Webサイトを魅力的にするAboutページまとめ8つ | Goodpatch Blog
こんにちは！みなさんはWebサイトを見ている時、Aboutページをチェックしますか？ 今回たまたま見つけたWebサイトのAboutページがとても個性的でおもしろかったので、Aboutページについて調べてみました！（そのWebサイトは最後にご紹介します） Aboutページについて調べていたところ、「16 Tips for a Better Website（Webサイトをより良くする16のTips）」という記事にWebサイトをより良くするTipsとしてAboutページのことが書かれていました。（以下翻訳抜粋） ビジネスパーソンや顧客がお仕事をお願いする時、たいていどんな人と仕事をするかに興味が湧きます。あなたのチームの写真や経歴をAbout usページに記載してみてください。技術的なスキルや資格などを書くのもいいですが、趣味や家族、好きな事を書く事で人間味がでます。 確かにAboutページで社
自分がロゴを作る時に意識してるポイント / Maka-Veli .com
こないだロゴを変えてサイトデザインも変えたわけですが、ロゴはもっともっともっと時間かけてやりたいところだったんですが、自分の性格上、それだといつまで経ってもやらないので一気に勢いでやりました。自分のブログですから、また気が向いたらマイナーチェンジを加えていく予定です。 自分のブログなんかでなく、お客さまのロゴ制作をする上で注意している点がいくつかありますので、今回はその辺りを書いてみようと思います。せっかくなのでMaka-Veli.comロゴと併せて とにかく最初は「作らない事」これにつきます まず、とにかく下調べ とにかく競合他社を調べまくります。 どんなロゴを使っているか そのロゴからどんな雰囲気を感じ取れるか どんな人が顧客、潜在顧客なのか（ターゲット） ここで仰天。教えてもらったんですが、なんと有名アニメ（？）のキャラと丸かぶりでしたよ。 良い悪例なので晒しておきます
Webサイトの表示速度を計測できる・「Pingdom」
Pingdomは、公開されているWebサイトの表示速度を計測し、速度を遅くしている要因を教えてくれるツール。URLを入力するだけで計測してくれます。 Pingdom
レスポンシブWebデザイン対応のテンプレ生成ジェネレーター・「Responsify」
Responsifyは、レスポンシブWebデザインに対応したWebサイトのテンプレートを作成出来るジェネレーターです。グリッドのカラム数やブレークポイントなどを指定してからダウンロードします。 Responsify
CSSで文書の段組表現を行うcolumnプロパティの使い方
CSSレイアウトやってると段組もボックス並べてやっつけちゃいたくなりますが、一連の文書を段組にそって記述するために途中でぶった切ってボックスまたいで書くのは面倒くさいし記述の方法としてももなんか変です。 というわけでビジュアルじゃなくて文書読ませるのに段組をするプロパティのご紹介。 段組にすると視線の横移動が少なくて済むお題のHTMLはこちら。 <div> <p>上海のある家の2階で、占い師をやっているインド人の老婆が、アメリカ人の商人と話し合っていた。商人は戦争で大儲けをする為に、日米戦争がいつ頃起こるのかを占って欲しいと頼む。始めは渋っていた老婆だが、前金として小切手をもらうと愛想が良くなり、自分にはアグニの神がついているから占いは絶対に外れないと言って引き受ける。商人が帰ると老婆は家にいる一人の少女を呼びつけ、今夜アグニの神にお伺いをたてるなどと話す。</p> <p>丁度その時、下の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Javascriptで前のページに戻るを実装 - Qiita
単一ページで作るHTML5製Webアプリ向けのフレームワーク・「BladeRunnerJS」
CSSの優先順位〜CSSテクニック〜