Webで調べると、ol要素を丸数字で実装する時はspanとか①②③とかを使うしかないように思えますが、クリーンなHTMLで数値文字参照を使わずに、丸数字を実装するスタイルシートのテクニックを紹介します。 対応ブラウザはすべてのモダンブラウザで、IEは8+です。
Webで調べると、ol要素を丸数字で実装する時はspanとか①②③とかを使うしかないように思えますが、クリーンなHTMLで数値文字参照を使わずに、丸数字を実装するスタイルシートのテクニックを紹介します。 対応ブラウザはすべてのモダンブラウザで、IEは8+です。
Webサイトやスマホアプリで人気が高い、色相を変化させた美しいグラデーションがCSSのコード・デザイン素材で利用できるオープンソースの無料サイトを紹介します。 制作者(@fmaldonadoy)は15歳のデザイナー兼Webデベロッパーで、この美しいグラデーションは日々更新され、どんどん増えています。
2018年上半期にリリースされたものを中心に、ひらがな・カタカナ・漢字が使える日本語のフリーフォントを紹介します。 手書き風の味のあるフォント、明治や昭和風のレトロなフォント、ホラーフォント、ピクセルフォント、ジョークフォントなど、たくさんのフォントがリリースされています。 日本語では珍しいステンシルフォント「木漏れ日ゴシック」は特にお勧め! ロンドB 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 廻想体ネクストBをベースに、角を丸くしたスピンオフ・フォント。作者様が「あぁ、ホントは『丸い方』を所望なんだろうな。」とモヤモヤしたのを解消するために制作されたそうです。ひらがな・カタカナ・英数記号文字をはじめ、JIS第1水準漢字2,965字、JIS第2水準漢字486字を収録。
Bootstrapは既に多くの人が知っていると思います。 では、Bootstrapで採用されているCSSのリセットは知っていますか? Reset CSSやNormalize.cssよりも使いやすく、これからのWebサイトやスマホアプリのCSSリセットとして設計された「Reboot.css」の特徴と使い方を紹介します。 A Look at Bootstrap 4's New Reset: Reboot.css 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Reboot.cssとは Reboot.cssの使い方 「box-sizing: border-box;」がどのように定義されているか remを使用したサイズとスペースの指定 ネイティブのフォントファミリー margin-topは死んでいる 共通要素はクリーンなスタイル タッチ
商用でも無料で利用できる2,000px, 4,000px, 8,000pxの超高解像度のテクスチャ素材がダウンロードできるCC0 Texturesを紹介します。 8,000pxまで揃ってるフリーテクスチャは、かなり貴重ですね。 しかもライセンスはCC0、クレジット表記なしで利用できます。 CC0 Textures CC0 Texturesの特徴 CC0 Texturesでは、無料で利用できるテクスチャ素材がダウンロードできます。ライセンスはCC0で、クレジット表記の必要はありません。また、サインアップやメールアドレス登録などの面倒なことも一切不要です。 PBR(フィジカルベースドレンダリング)ベースの素材 テクスチャは物理ベースのレンダリングで作成されており、シームレスで利用できます。 超高解像度のテクスチャ素材 ダウンロードできる素材は、2,000px, 4,000px, 8,000px
WordPressのローカル環境を構築するといえば、XAMPPやInstant WordPressを利用している人が多いと思いますが、これらより簡単に、そして一度のインストールで複数の環境を構築でき、PHPなどのバージョンも簡単に変更することができる高性能な無料ツールを紹介します。 サーバーの知識がない人でも簡単に利用でき、あっという間にWordPressのローカル環境が構築できます。 UIも洗練されて使いやすく、かなりオススメです! ローカルに、WordPressの制作環境を簡単に構築できます。 WordPressの制作環境は、複数構築できます。 サーバーの知識がない人でも、4クリックするだけでOK。 WordPress日本語版にも対応。 ローカルSSLサポート。 SSH/WP-CLIアクセス。 共有可能なURLを作成して、クライアントに見せることも可能。 柔軟な環境オプション。 PHP
ボックスの内部に配置したテキストなどの子要素はそのままで、背景の色相やコントラストやぼかしを変更して、ガラス板のような美しいエフェクトを与えるCSSの新しいプロパティ「backdrop-filter」を紹介します。 今までは非常に長いCSSが必要でしたが、たった一行で簡単に実装できます。 The backdrop-filter CSS property 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 アップデート 2020/6/8: サポートブラウザを現在の状況に変更しました。 「backdrop-filter」だと、一行のコードで実装できる ガラス効果のさまざまなスタイル backdrop-filterののサポートブラウザ 「backdrop-filter」だと、一行のコードで実装できる 私はbackdrop-filterとい
レスポンシブ対応のパンくずとマルチステップのナビゲーションを紹介します。 HTMLもCSSも非常にシンプルで、カスタマイズ性にも優れた有用なスニペットとしても利用できます。 デモページ HTML HTMLの基本構造です。 <nav> <ol class="cd-breadcrumb"> <li><a href="#0">Home</a></li> <li><a href="#0">Gallery</a></li> <li><a href="#0">Web</a></li> <li class="current"><em>Project</em></li> </ol> </nav> nav要素で実装し、各アイテムはol要素に「.cd-breadcrumb」で基本のスタイルを適用します。 基本のスタイル 基本のスタイルでは各アイテムを並らべるために「display: inline-block;
さくっと短時間で、慣れれば1分! デスクトップやスマホに対応したページを作成したい時にぴったりな無料のオンラインツールを紹介します。 HTMLやCSSの作業は一切不要で、Bootstrap 4ベースのさまざまなページをドラッグ&ドロップで積み木のように組み合わせて簡単に作成できます。 Froala Design Blocks Froala Design Blocks -GitHub Froala Design Blocksでは170種類以上のレスポンシブ対応のコンポーネントが用意されており、それらを好きなように組み合わせて、誰でも簡単にWebページを作成することができます。 作成したページは個人でも商用でも無料。詳しくはライセンスページをご覧ください。 短時間で、Bootstrap 4ベースのページを作成してみる 用意されているコンポーネント 短時間で、Bootstrap 4ベースのページ
Bootstrapで実装したページをスマホなどの幅が狭いスクリーンで表示した際に、横からオフキャンバスのナビゲーションをアニメーションでスライド表示させるJSとCSSのパックを紹介します。 Off Canvas -Bootstrap Bootstrap Offcanvasの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="../dist/css/bootstrap.offcanvas.min.css"/> </head> <body> ... <script src="../dist/js/bootstrap.offcanvas.js"></script> </body> Step 2: HTML まずは、オフキャンバスのナビゲーションを開くボタン。 <butt
WordPressのどんなテーマファイルでも、どんなページでも、どんなデザインでも、ページごとに自由なレイアウトを作成できる便利なプラグインを紹介します。 これ系のプラグインは有料が多いですが、レスポンシブ対応で高性能、そして無料というのはありがたいですね。 Elementor Elementor -wordpress.org Elementorの特徴 Elementorのインストール・使い方 Elementorの特徴 Elementorは、どんなテーマファイルを使っていても、どんなページでも、どんなデザインにでも適用できます。 大きな特徴はコードの知識は不要、ドラッグ&ドロップで要素やコンポーネントを配置し、簡単に調整できます。 自身のブログやポートフォリオに使ってもよし、クライアントが自由にレイアウトをしたい時にもいいですね。
Dirty 個人・商用利用無料。 素材の利用は無料で、商用の場合は一報ください、とのことです。 PinkBlossom -Contact 追記: メールで確認したところ、Floral以外は商用利用OKとのことです。 他のリソースを用いて作成したものはダメ、と。
無料のPSDの素材探しにこれは便利、数多くの素材配布サイトからキーワードで簡単に探せる -PSD Hunter
ナビゲーションはウェブサイトにとって重要なエレメントであり、基盤となるものです。素晴らしいナビゲーションは豊かなユーザエクスペリエンスを与えます。 ユーザーは使いにくくない困惑されないナビゲーションを望み、シンプルなナビゲーションはたいていの場合、ダイナミックなものよりユーザフレンドリーなものです。ここではダイナミックでクリエイティブなナビゲーションの素晴らしいインタラクションと若干の欠点をSmashing Magazineから紹介します。
ウェブページのスピードを改善することは最適なユーザエクスペリエンスを提供するだけでなく、Googleの検索結果にも影響を与える大切な要因です。 すぐに実施できる、あなたのウェブページのスピードを改善する10のチップスを紹介します。 10 Tips for Decreasing Web Page Load Times [ad#ad-2] 下記は各ポイントを意訳したものです。 1. 現在のスピードをチェック 2. 画像の最適化 3. 画像は実寸で配置 4. コンテンツを圧縮して、最適化 5. スタイルシートは上に配置 6. スクリプトは下に配置 7. スクリプトとスタイルシートは外部ファイルで 8. HTTPリクエストは最小限に 9. キャッシュの利用 10. 301リダイレクトは避ける 参考資料とツール 1. 現在のスピードをチェック まず、現在のあなたのウェブページのスピードの分析からはじ
SEO担当者はもとより、デザイナー、コンテンツライターのための、サイトのユーザーエクスペリエンスも強化するSEOのテクニックを紹介します。 User-Friendly SEO [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに 1. 見出しの最初にプライマリキーワードを 2. キーワードのために太字のテキストを 3. リストの活用 4. 重要なリンクにはキーワードを 5. タイトルの始めにプライマリキーワードを 6. 内部リンクの強化 7. イメージの最適化 多くのキーワードが必要ですか? デザイナーとSEO担当者とライターのチームワーク はじめに 若干のデザイナーが、そして多くのコンテンツライターが、ウェブの効果的な戦略においてSEOを必要悪だと見なします。 しかしながら、SEOを適切に行えば、それは減るよりむしろ、ユーザーエクスペリエンスの強化をはかることができます。こ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く