いずれもli要素と組み合わせて使えそうなリストアイコンのサンプルで、画像は使用せずに全てCSSのみで実装してみたものです。 最近ならwebフォントやSVGで使い勝手良いものが実装できたり、あとは使用できるブラウザは限られてきたりしますが、問題ないブラウザであればサイズやカラー変更といったこともCSSのみで簡単に変更できます。 はじめに 最後のサンプルのみol要素使ってますが、その他に関しては全てHTMLは下記のように単純なul, li要素を使ってます。 <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet,

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

2014年、当サイトで公開した記事の中からPocketにたくさん登録された記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。 コリス Web制作全般 デザイン論、Photoshop, Illustrator関連 フォント・タイポグラフィ関連 UI/UX・カラー関連 便利ツール・サービス関連 HTML, CSS, JavaScript関連 無料素材関連 その他 当サイトの購読は、RSS Feedをご利用すると便利です。 コリスのRSS Feed ※旧Feedに登録されている人が多いので変更をお願いします。 Web制作全般 2014年これからのウェブ制作業界の流れ、伸びる職種、ウェブデザインのトレンドなどのまとめ 2014年後半、現在これからのWebデザインのトレンドと制作動向を知る26のキーワード Web制作者は要ブックマーク！制作時にいろいろと役立

Windows専用の無料FTPソフト「WinSCP」の使い方｜多様な暗号化通信も可能。 2024.09.11

毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。 今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。 1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。 また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェ

position:fixedを使ってヘッダを固定した場合 ページ内リンクの位置がヘッダの高さ分ずれてしまいます。 ヘッダを固定する案件が増えてきましたので覚書です。 CSSで調整する方法と、JavaScriptで調整する方法があります。 ヘッダの高さ：100px ■HTML <div id="header"> ヘッダーがはいります </div> <div id="content"> <a href="#link01">なんとか</a> <div name="link01" id="link01">かんとか</div> </div> CSSで調整する padding-topでヘッダの高さ分ずらして、margin-topでマイナスの値をいれるとうまくいきます。 margin-top:-100px; padding-top:100px; ■CSS #header { width: 100%; m

Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp

こんにちは。まだ何一つ夏を感じていないmackyです。 今日は、RWDでdisplayプロパティを使ってtableレイアウトのデザインを変化させる方法をまとめてみました。 RWDでテーブルレイアウトを定義リスト風に変化させてみよう tableタグのdisplayの値はデフォルトではtable、thとtdタグはtable-cellとなっていますが、この値をblockやlist-itemなど他の値に変えてみます。 (1) (2) (1)の状態から(2)の状態へデザインを変化させます。 メディアクエリ―を使ってブレイクポイント（480px）を設定し、その中に上書きするCSSを書いていきます。 今回はこんな感じです。 HTML <table border="1" cellpadding="5" cellspacing="0"> <tr> <th>項目A</th> <td>この文章はダミーです。</

Event Organiser offers the most comprehensive, and yet easy to use, event and calendar plug-in for WordPress. Additional support & features, such as booking management are available with Pro Advanced event management Complex event recurrence schedules, multi-day events and the ability to add or remove individual dates are all available in the free version. Use your favourite payment gateways Colle

「Circliful」は、の円グラフをアニメーションつきで表示できる jQuery プラグインです。カスタムデータ属性に値を渡すだけでグラフを簡単に描画でき、豊富なオプションでデザインをカスタマイズできます。ランディングページで製品のシェアを訴える際などにいいでしょう。 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、CirclifulをGitHubからダウンロードします。ページ右下の「Download ZIP」ボタンからダウンロードできます。 利用するWebページの body の閉じタグ直前で、jQuery本体と「Circliful のminifyファイル」、「jquery.circliful.min.js」を読み込みます。 //(中略) <script src

cloudpackエバンジェリストの吉田真吾（@yoshidashingo）です。 今までドメインのレジストラはお名前.comをよく使ってましたが、以下のアップデートでRoute 53から使えるようになったみたいなので、ちょっと新しく購入してみようと思います。 Route 53 Update – Domain Name Registration, Geo Routing, and a Price Reduction | AWS News Blog Amazon Route 53 の管理画面 なんか全体的にデザインが変わりましたね。 新規購入 1.左の「Domains」を選択して「Register Domain」を押下します 2.取得したいドメイン名の検索ができるので、TLDを選択して（最安は .me.uk の年間$8でした）チェック 3.ポピュラーなTLDの検索結果が出てくるので 4.購入

ブルーレイ再生のためのライブラリを導入VLCはデフォルトではブルーレイを再生できないので、それを可能にするためのライブラリを導入していきます。 以下のページを参考にさせていただきました。 MacでBlu-ray @ ウィキ – VLC media playerの使い方① 「libaacs.dylib」と「KEYDB.cfg」をダウンロード以下のページにて、ブルーレイ再生のために必要なファイル「libaacs.dylib」と「KEYDB.cfg」をダウンロードします。 VLC Blu-Ray② 「lib」フォルダを作成し「libaacs.dylib」をコピーホームフォルダ（ユーザー名のフォルダ）に「lib」フォルダを新規作成し、 ①でダウンロードした「libaacs.dylib」をコピー（移動）します。 ③ 「~/Library/Preferences/」に「aacs」フォルダを作成し「KE

印刷する紙のデザインと異なり、Webデザインは環境によって見た目が変わります。どの環境でも同じレイアウトで見せるには画像として書き出せば確実なのですが、テキストの部分はそうもいきません。 DTPデザイナーの方からも「こんな文字のレイアウトはWebだと無理？」といったご相談を受けることがよくあります。 今年に入って、HTML5＆CSS3に対応したブラウザのシェアもかなり増えてきましたので、今回は文字のレイアウトに関するHTMLとCSSをご紹介したいと思います。 目次：段組み縦組み（縦書き）行末揃え（両端揃え）先頭文字スタイル（ドロップキャップ）段落先頭1字下げ2行目から1字下げ（ぶら下げインデント）行頭禁則文字ふりがな（ルビ）圏点（傍点、脇点）大文字と小文字の変更スモールキャップス（スモールキャピタル）長体、平体（水平比率、垂直比率）※IE以外のブラウザは、2014年7月4日現在の最新版にて

fukasawaです。こんにちは。 クナイプのグーテナハトが安眠に良いと聞いたので試してみたのですが、風呂場中にタイカレーのようなスパイシーな香りが広がりました。安眠…？ Animate.cssは要素にclassをつけるだけで、簡単にいろいろな種類のCSS3アニメーションを実装してくれる便利なスタイルシートです。多くのブログで既に紹介されているものではあるのですが、バシャログではまだ誰も書いていないようなのでここぞとばかりに書いてみます。 公式サイト（デモ&ダウンロード） http://daneden.github.io/animate.css/ GitHub(使い方など) https://github.com/daneden/animate.css ※CSS3アニメーションに対応しているブラウザで動作します。 簡単な使い方 animate.min.cssを読み込みます。 <head> <

当ブログで書いたWordPressの管理画面周りに関連するカスタマイズやプラグインのエントリーが大分増えてきたのもあって、見たいと思ったときにすぐ見返せるようにまとめた自分用のリンク集です。 また、今後エントリー化したものや覚えておきたい管理画面周りのカスタマイズやプラグインを見つけた場合も随時ここに追記していこうと思います。 各エントリーで紹介しているカスタマイズやプラグインは、WordPressのバージョンによってはそのまま使用できないものもあるのでご注意ください。 「投稿画面（新規・編集）関連」に該当するカスタマイズは、基本的にクラシックエディタ利用時のものになります。 管理画面カスタマイズ時に使えるハック #1 管理画面のロゴを変更 ／ 管理画面のロゴを非表示 ／ 管理バーに項目を追加 ／ 管理画面のファビコンを変更 ／ フッターの文字を変更 ／ アップデート通知を消す ／ プラグ

WordPressでプラグインを使用する際、プラグインによっては見栄えを整えたり動きを付けるために独自のCSSやJSを自動的に読み込むものがありますが、多くの場合それらはプラグインの機能を使用していないページにまで読み込まれます。 それを特定のページでしか読み込ませないようにしたり、いっそのこと全ページから削除する方法です。 今回はプラグインを有効化するとCSSとJavaScriptがそれぞれ全ページで読み込まれるもので、WordPressを使ったことがあるなら多くの方が使用したことがあると思う「Contact Form 7」を例に説明します。 September 14, 2014 追記 エントリー公開時に紹介した方法はそれぞれwp_print_styles()とwp_print_scripts()を使用していましたが、これらはWordPress Ver 3.3から非推奨となっていました。