今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！
2019年2月3日 CSS 要素の四隅の角を丸めるためのCSSプロパティー「border-radius」。ボックスや画像などの要素に対して適応でき、角丸にしたりまん丸にしたりと、様々な表現が可能です。このプロパティーが使えるようになってから、どれだけコーディングが楽になったか…！今回はそんなborder-radiusの基本的な使い方と、応用表現を紹介します！ ↑私が10年以上利用している会計ソフト！ 無難で王道！正円の円弧を使った角丸 border-radius は「border」とついているものの、border プロパティーの指定がなくても大丈夫。background によって与えられた背景や、img 要素で指定された画像の四隅も丸まめられます。 四隅に同じ値の丸みを与えるなら border-radius: 10px; と記述すればOK。半径10pxの正円の円弧をベースにした角丸を実装で
構造化データによるマークアップのメリットや書き方、検証方法まで解説 | ウィルゲート
「構造化データのSEO評価への影響が分からない」「構造化データの書き方が分からない」と悩んでいるWebサイト運営者の方もいるのではないでしょうか。 構造化データとは、Web上の情報を規則に従って記述し、検索エンジンに意味が伝わるようにするためのデータです。 検索エンジンのロボットがコンテンツ内容を認識しやすくなるため、構造化データのマークアップはSEOの観点から有効と言えます。 本記事では、構造化データの基礎知識から書き方、検証方法まで解説します。 構造化データとは？ 構造化データとは、Web上の情報を規則に従って記述し、検索エンジンに意味が伝わるようにするためのデータです。 Googleなどの検索エンジンはWeb上のコンテンツ内容を把握して検索結果にランキングをつけて表示させます。 しかし、検索エンジンは人間と同じようにコンテンツの内容を理解することができないため、検索エンジンに正しく内
デベロッパーツールの賢い使い方！テキストが多い少ないで崩れないかなど、デザインの検証や調整方法のまとめ
CSSについてあまり詳しくないデザイナーでも、デザインのさまざまな検証や調整ができるデベロッパーツールの使い方を紹介します。 テキストや要素が多い少ないでコンテンツのデザインが崩れないか、要素のデザインを簡単に比較したり、画像や要素のカラーを一括で変更したりなど、制作にすぐに役立つものばかりです。 Using DevTools to Tweak Designs in the Browser 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 要素に与えられたclassを切り替える コンテンツの量でデザインが崩れないかテストする 指定した要素を非表示にする デザイン要素のスクリーンショット デザインのカラーを変更する CSSの変数を使用する（カスタムCSSプロパティ） 「filter: invert();」で要素のカラーを反転する C
Web業界は進化が速い！自分がHTML, CSS, JavaScriptで何を知らないか、スキルをチェックができる -Know it all
HTML, CSS, JavaScriptをはじめ、Web制作に必要とされる知識で何を知らないかが分かり、自分のスキルをチェックできる「Know it all」を紹介します。 自分の現状を知ることで、次に何をすべきかに役立ちます。
サイトのパフォーマンス改善で重要なクリティカル レンダリング パスについて | コリス
ブラウザがページを表示する際にサーバーからHTMLのレスポンスを受け取ると、スクリーンにピクセルが描画されるまでに多くのステップが必要になります。ブラウザがページの最初のペイントを実行するために必要とするこのシーケンスは「クリティカル レンダリング パス(Critical Rendering Path)」と呼ばれます。 クリティカル レンダリング パスを理解することで、サイトのパフォーマンスを改善するのに役立ちます。 Understanding the Critical Rendering Path 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 クリティカル レンダリング パス(Critical Rendering Path)には、6つの段階があります。 クリティカル レンダリング パスの6つの段階 01. DOMツリーの構築
ホームページの作り方《事前準備〜デザイン起こし》 | クリステ
何回かに分けてWebサイトができるまでの流れをまとめていきたいと思います。1回めはデザインを起こし始めるところまで紹介します。 様々なやり方があるのでこれが正解というのもないかと思うので、アイデアの1つとして思っていただけたら幸いです。 デザインを起こす前に行うこと Webサイトの制作は最初が肝心。開設するサイトの目的や何をアプローチしたいかを常に考えなければなりません。「とりあえず作る、とりあえず作って」は一番良くない考えかと思います。 あいまいなスタートだと後々後悔してしまう恐れがあります。サイトがいろいろな意味でごちゃごちゃしてしまうかもしれません。そうならないためにも最初に行うことをしっかりまとめていきましょう。 サイト全体を考え考えをまとめる まず最初に取り組んでおきたいのが全体像の把握です。 例えば飲食店であればチェーン店なのか個人経営なのかだけでも考えが変わってきます。 チェ
LINE Social Plugins
Click here if your browser does not automatically redirect you...
マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法
Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミック デザインにおけるHTMLとCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in Modular Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様・元サイト様にライセンスを得て翻訳しています。 最近のWeb制作の手法は、数多くあるフレームワークやUIキットからあらゆる種類のコンテンツのブロックを組み立てています。しかしながら、モジュール性と汎用性はまだWeb要素レベルでは達成されていないと言えるでしょう。 LEGOブロックの考え方を
無料でレスポンシブサイトをクリックだけでデザインしてダウンロードも可能な「Launchaco」
閲覧者の環境に応じてレイアウトが変化するレスポンシブサイトを手軽に無料で作成できるサービスが「Launchaco」です。このサービスを使うと、ほんの数クリックだけでレスポンシブなレイアウトのページを作成して、必要なファイルをダウンロードすることが可能です。 Launchaco - Name a business http://launchaco.com/build/ ページを開くとすぐにレイアウトを開始できる状態になっています。 「Step 1/4」ではまず、レイアウトのテンプレートを選択。 すると次のページで、選択したテンプレートによるページデザインが表示されました。上部のテンプレートをクリックすることで、リアルタイムで変化させることが可能です。 ページ上部のテキスト欄の内容を自由に書きかえることも可能。日本語も問題なく利用できます。 もちろん、レスポンシブデザインになっているので、横幅
1日1000個のA/Bテストを行う「Booking.com」の開発の裏話を聞いてきました【前編】
宿泊予約サイトの「Booking.com」は社員数人のスタートアップから始まり、1万3000人の世界的規模にまで成長した会社。「2つの選択肢のうちいずれがユーザーにとって優れているか？」ということを調べるためにA/Bテストを行うウェブサービスやウェブサイトは多くありますが、Booking.comでは何と毎日1000個のA/Bテストを行っているとのことで、開発の裏側はどうなっているのか、最高製品責任者(CPO)のデイビッド・ビシュマンズ氏に話を聞いてきました。 国内も海外も！ホテル・旅館の予約はBooking.com http://www.booking.com/index.ja.html 写真の男性がデイビッド・ビスマンズ氏。 「Booking.comで行われているA/Bテストとはどういうものなのか？」ということで、まずサンプルを見せてもらいます。1つ目のA/Bテストは、検索結果として現れ
WEBライターが教える「読みやすい文章」を書くためのライティングのコツ | ayan's style
ayan's style > サイトコンテンツ作成 > WEBライターが教える「読みやすい文章」を書くためのライティングのコツ 私はブロガー13年目、最近はWEBライター／旅ライターとしての仕事もしています。 先日、「視点の違いで作り出せるものは変わる！ 新たな視点を獲得する方法」という記事を書きました。読んでいただけるとわかるのですが、書籍のレビューを通常とはちょっと違う切り口で書いた文章となります。 通常は書籍のレビューというと、「○○という本を読みました。その本は…」と、まず本を最初に持ってくると思うのですが、今回はすでにネット上に同じ書籍のレビューがたくさん公開されている状態だったため、最初に本のことを書かず、文章の後半で自然な形に本の内容に触れられる構成を意識しました。 この記事を公開した後、その文章の書き方について、まわりのブロガーさんから以下のようなお言葉をいただきました。
確実に速くなる、リニューアルで行ったサイト高速化への手順を全公開 - コムテブログ
TL;DR レンタルサーバでの運用を止め、VPS に移行し、Apache の制約から開放されるため軽量・高速な Nginx に変更し、テーマをカスタマイズし軽めのリニューアルをしました。随分と早く使いやすくなったので、会社 HP とコムテブログに行った高速化への手順を全公開します。 今回のリニューアルに伴い、今回行った高速化処理。ちなみに会社 HPはこちら。 PC は 96 点、アナリティクスとメインの CSS を外せば 100 点が出そうでしたが断念。 Pingdomでは 97。ブログの方は、アドセンスや外部読み込み（こちらで調整できないため）で、どうしても遅くなってますが、これに近づけるようにしていきたいです。 なにはともあれ、サーバのスペックそのものを変えないと駄目だということでさくらの VPS 4G（SSD 4G）をチョイス。コーポレートサイトなら 2G くらいでもよいですが、ブロ
Webデザイナーに最低限知っておいてほしい、検索と置換(正規表現) - kojika17
置換前の文字と検索、置換の対応 特定の文字からHTMLを作成 (.*)と$による呼び出しを覚えれば、様々なことに応用ができます。 下記の文字から、HTMLのリストを作成してみましょう。 Google https://www.google.co.jp/ Yahoo! http://www.yahoo.co.jp/ Bing https://www.bing.com/ Yandex https://www.yandex.com/ 百度 http://www.baidu.com/ 用意した文字は「タイトル」「スペース1つ」「URL」というルールになっています。タイトルとURLを(.*)に置き換えて検索し、li要素とa要素に置き換えます。 例 置換前の文字 Google https://www.google.co.jp/ Yahoo! http://www.yahoo.co.jp/ Bing ht
行政サイトを作る時に気をつけておいた方がいい事 - Qiita
県や市の公式ホームページ制作の経験から、気をつけておきたい点をメモに残しておきたいと思います。 納品前 納期が３月に集中する 行政サイトの場合、お金は年間予算や国からの特別補助金などから支払われます。つまり基本的に年度を跨ぐことが出来ません。（保守にかかる費用は別です）その為、行政の案件に頼っている制作会社は納期が重なり３月が滅茶苦茶忙しくなります。 年度末は余裕を持ったスケジュールを組んでおきましょう。 見積もりは２割増しで ここで言う見積とは入札時の見積もりではありません。行政の案件をいくつかこなして担当者と仲良くなってくると、コンペの上限金額を決めるために事前に見積を頼まれる事があります。「もし○○みたいな案件だったらいくら位でできそう？期間と見積もり貰えると助かるんだけど。」みたいな感じです。サラリーマン金太郎の東北編で出てきたアレです。大事なのはここで割引など一切考えずに、むしろ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Ultimate Website Code Generator
納品用のWebサイトのスタイルガイドが簡単に作成できるHTMLのテンプレート -Style Guide Guide
Web制作者がブックマークしておきたい、HTMLやCSSで困った時にチェックしたいリソースのまとめ
初心者におすすめな作業効率が上がるテキストエディタ5選 | クリステ
ガオログ – ガオログはWebデザインや制作について、iPhoneやMac、ガジェットなどの使い方、暮らしのやりくりをお届けするブログです。
レスポンシブの表示も完璧に定義できる優れもの！スタイルガイドを作成するのに役立つテンプレート -Styleguide | コリス
