Web制作者が厳選したブックマークを晒してみる。Webツールやデザインサイトなど30選ブックマークしておきたいWebツール wordmark 自分のPC内にインストールされているフォントを利用して、テキストを一覧表示してくれるサイト。どんなフォントをインストールしていたか確認するのが目的…かな。私は、英数 ... Web制作者が厳選したブックマークを晒してみる。Webツールやデザインサイトなど30選はBruno[ブルーノ]で公開された投稿です。
VueとFirebaseの基本機能全部使ってぬるぬる動くポートフォリオサイトを作ったのでソースと解説 - Qiita
絵描きとかUXとかやりつつフロントもやってる「ゆき」です。ポートフォリオサイトは10年くらい前にMoveableTypeで作ったきり。最近流石に「これでフロントやってますとか言ったら絶対次転職できなくね？」と危機を感じたので0から作り直しました。 サイト： https://pf.nekobooks.com/ ソース： https://github.com/yuneco/portfolio 機能・性能・運用を考えて作った結果、VueとFirebase(Web)の機能を一通り使ったサイトが出来上がりました。これからちょっと凝ったポートフォリオサイトを作りたい方向けに、どういう目的でどの機能を使ったのか、その時のポイントはなんだったのかを共有します。 2019.4.18追記 春なので期間限定1で桜が咲くアニメーションを追加してみました。単体のアニメーションはテストページで試せます。複雑に見えるか
Web 制作リファレンス トップページ（目次ページ）/ Web Design Leaves
Web 制作リファレンス / Personal Web Reference（目次ページ） Web 制作に関する参考資料です。もし、どなたかのご参考になれば何よりです。 このページには各ページの索引を掲載しています。 各ページの内容を確認するには「索引を表示 」をクリックしてください。 ※ 記事中のリンクについて このサイトでは、記事中の大部分のリンクは、新しいタブで開くように target="_blank" rel="noopener" を指定しています。この動作が煩わしい場合は、各ページの右上の「リンクを別タブで開かない」のチェックボックスにチェックを入れると、新しいタブで開かないようになります。ページ内リンクには または のアイコンが付いています。但し、ブログ記事のページはこれらに対応していません。 関連ページ：リンクの target 属性の制御 更新日：2024年05月14日 更新日
CSS・デザインツールはコレがおすすめ | ブログ | コーディング代行・外注サービスなら即日対応のくまweb
ホームページを使って集客・PRするためには、見やすく美しい装飾が必要です。 ホームページを美しく装飾するためには、CSSのスキル・デザインツールなどを使用します。 「CSSの使い方があんまりわからない..」や「どんなデザインツールを使えばよいのかわからない」という人もいるでしょう。 今回は、そのような悩みを抱えている人のためにCSSのツールやデザインツールなどを紹介します。 ホームページを制作・リニューアルしたい人は、ぜひ参考にしてください。 CSSツール まずはCSSのツールから紹介します。 CSS3 Generator カラー設定・色合いなどを簡単に調整できるCSSツールです。 完成したイメージを見ながら調整できるのが、便利なポイント。 制作したCSSコードは、コピーして貼り付けるだけで使えます。 制作したコードは、WEBブラウザはもちろん、Android・iOSなどにも使用可能です。
プロトタイプも埋め込める、デザイナーの情報共有を加速させるDocBase
デザイナーの仕事は、成果物に対するデザインだけではありません。デザイン制作をしたら、「なぜそのデザインなのか」をステークホルダーに説明し、コンセンサスを取る必要があります。 デザイナーがカバーする領域も広がる中、私たちデザイナーはどのようにデザインを共有するべきでしょうか？ 今回は、UX MILKチームがどのように情報共有を行っているかを紹介します。 デザインドキュメントをどのように共有すべきか デザインドキュメントには、ワイヤーフレームやプロトタイプ、ビジュアルデザインなどさまざまなものがあります。 プロジェクトが進むにつれ、デザインドキュメントは増え、また変更が加えられていきます。すると、これらをどのように保存・整理し、共有するかという問題が出てきます。 UX MILKチームでは、こういった問題を解決するために、DocBaseを使ったデザインの共有を行っています。 なぜDocBaseで
実務経験3年すぎた現役Webデザイナーのリアル【勉強方法編】 - IT系女子ログ
（7月25日、コーディング編更新しました。） 私がWebのスキルアップのために行っている勉強方法をすべてご紹介します。 たくさんありますが、「今日は模写をしてみよう」とか、「今日は案出ししてみよう」とか、楽しんで勉強するのが一番だと思います。 今まで自分に合っているものを優先して取り入れてきましたが、「もっと効率いい方法があるよ！」というアイデアがあれば、ぜひ教えていただきたいです！ デザイン編 忙しくてもできること 毎日5分でもデザインを観察する ニュースを見る、読む いいと感じたデザインを自分なりに消化してから制作に取り入れる 部分的でもいいので2案以上作る 周りの人に自分から意見をいただきにいく 意見をいただいたら要点を控えておく 提出する時には自分の言葉での説明も添える 広告を見て、伝えたい内容や狙いを考察する 時間あるときにしたいこと 思い浮かんだ案をできるだけ作ってみる 素敵だ
Webデザインを上達させるために大切なこと。デザインが苦手なあなたや私へ。 - IT系女子ログ
Webデザイナーとして参加していた案件が炎上してしまい、デザイン業務をすることがとても怖くなってしまいました…。 そんなデザイン恐怖症を克服するため、デザインをもっともっと上達させよう！と決めました。 私の個人的な意見で恐縮ですが、同じようにデザインで悩める方が、デザインを前向きに捉えるきっかけのひとつにでもなれればと思い、自分なりに大切だと思うことを書き出しました。 関連記事 デザインは2年でどのくらい向上するものなのか。（ビジュアルはウソつかない） - IT系女子ログ Webデザイナー2年目を、まるっと棚卸し［デザイン編］ - IT系女子ログ デザインが仕上がらず炎上 デザインとはとても難しいのだと痛感 デザインを追求する、という覚悟を決める デザインと向き合い続ける 他責でなく自責で考える 制限があるから、デザインがより重要になる デザイナーが提案してもいい 良いデザインをたくさん知
スマホサイト制作の基礎知識まとめ | Web技術Tips | ホームページ制作のDOE【横浜】
参考 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> ロールオーバーは考えない スマホサイトはオンマウスによってhoverやロールオーバーの効果が使用できません。 jQueryなどを用いてタップした時にボタンの色を変える演出は可能です。 画像表示 CMSの利用でPCサイトで使う画像をそのままスマホサイトにも使用せざるを得ない時、幅が画面をはみ出してしまうのを回避する為、下記をCSSに記載します。 img { max-width:100%; height:auto; } 画像は写真以外はどんどんPNGを使用する スマホは問題なくPNGが表示される上に、PNG-8であればGIFよりも軽く書き出すことができる。 アイコンなどの画像は倍のサイズで作成しているはずなので、コーデ
ブラウザレンダリングを理解するため簡単にまとめてみた - Qiita
初投稿です。よろしくお願いします(/･ω･)/ 新卒入社してフロントエンドエンジニアとして働き始めて早半年。 最近は、自分の書いたコードが世の中にリリースされて嬉しさを噛み締めながら楽しく社会人生活を送っています。 こんな本を読み始めました Webフロントエンド ハイパフォーマンス チューニング -久保田 光則 (著) webパフォーマンスについて...要はサイトの 速度改善 について学べる本です。 冒頭に「ウェブパフォーマンスとは何か」が書かれてます。 ウェブパフォーマンスを改善することは、ユーザが目的の達成の為に費やす時間やリソースを節約させることであり、その節約した分ユーザを豊かにしているわけです。 ウェブページ遷移時の初期ロード時のパフォーマンスだけでなく ウェブページ内でのインタラクション(ユーザが起こした操作に対しての応答)の描画のパフォーマンスが重要になってきます。 読み込み
要素の高さを揃えたいときはjquery.matchHeight.jsなら導入が簡単！ | 福岡のホームページ制作会社 | シンス株式会社
CMSを組み込んだホームページの制作をしているときによくある、要素が横並びのレイアウト。 コーディング前のデザインだと綺麗に整列してるけど、実際にコーディングしてみると要素内テキストの長さの可変が前提になってない…。なんてこと、よくありますよね。 そんなとき、同じ段に横並びする要素の高さを揃えるのに便利なjQueryプラグインがjquery.matchHeight.jsです。 CSS3のFlexboxでも対応できますが、jQueryのほうが慣れてるし。。という方にはおすすめです。 実際の動きはデモサイトを見てもらえればわかりますが、要素内テキストの行数が異なっていても、横並びの要素同士ならうまい具合に高さを一緒にしてくれます。 実際に使ってみよう使い方はとっても簡単です。 jquery.matchHeight.jsのGithubページからダウンロードしたプラグインファイルを読み込んでjQu
画像圧縮サイト／TinyPNG
Smart WebP, PNG and JPEG Compression for Faster WebsitesOptimize now
レスポンシブWebデザインのブレイクポイント、何ピクセルにすればいいの？
レスポンシブWebデザインとは、画面の横幅に応じてWebサイトの表示を変化させ、最適化するデザイン手法です。 レイアウトが「シングルカラム」から「マルチカラム」に変化したり、ナビゲーションメニューが「ハンバーガーメニュー(三←こういうの)」から「横並び」に切り替わったりすることで、スマートフォンから、タブレット・PCまで、画面の横幅に合わせて、Webサイトを最も見易い形で表示します。 そして、そのデザインが変わる境目を「ブレイクポイント」と言います。 ブレイクポイントは、画面のピクセル数（CSSピクセル ※）で表されます。 ※ CSSピクセルについては記事：高解像度ディスプレイとデバイスピクセル比 さて、このブレイクポイントですが、特に、「何ピクセルにすべき」「何箇所設定すべき」といった決まりがありません。 Web制作者も「この辺りに設定すれば大体スマートフォンとタブレットの境目になるので
CSSリセットはこれで決まり！モダンブラウザによる相違を吸収するようカスタマイズされたスタイルシート -ress
ブラウザごとに異なるHTMLの各要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルが定義されたCSSリセット用のスタイルシートを紹介します。 normalize.cssを最近のWeb制作にあうようカスタマイズされたもので、対応ブラウザはすべてのモダンブラウザ、IEは8+対応です。 ress -GitHub 参考: normalize.cssの特徴とコード 2015年、Web制作者が押さえておきたいCSSの各種リセット ressの特徴 ress: html, グローバルセレクタの定義 ress: 一般的な要素の定義 ress: フォーム要素の定義 ress: メディア要素の定義 ress: アクセシビリティ用の定義 ress: ::selectionの定義 ressの特徴 ressは「normalize.css」をカスタマイズしたもので、スタイルシートを始める時のしっかりしたベースな
新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]｜クロノドライブ
新人コーダーが迷いやすいと言われている、ファイル名、id・class名の付け方。 この記事では、それぞれの命名規則やコツについてまとめたいと思います。 少しでも皆様の参考となれば幸いです。 共通事項 ファイル名、id・class名を付ける際の注意点 まず始めに、ファイル名、id・class名を付ける際の注意点から確認していきます。 難しいことはありません。 下記に注意して名前を付けるようにましょう。 １．半角英数字のみを使用する。 「日本語」、「全角英数字・記号」、「半角カタカナ」は使用することが出来ません。 ２．記号は「-」（ハイフン）、「_」（アンダースコア）のみ使用する。 「\」（エンマーク）、「/」（スラッシュ）、「:」（コロン）、「*」（アスタリスク）、「?」（クエスチョン）、「”」（ダブルクォーテーション）、「<」（左アングルかっこ）、「>」（右アングルかっこ）、「|」（パイプ
![新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]｜クロノドライブ](https://cdn-ak-scissors.b.st-hatena.com/image/square/c81495bec5cb3ed860ace323c97fffb85ea3e62c/height=288;version=1;width=512/http%3A%2F%2Fhtml-coding.co.jp%2Fogp_img.jpg)
hanatoweb.jp - このウェブサイトは販売用です！ - hanatoweb リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
印刷用CSS(@media print)の設定とデバッグ方法って? HTMLの印刷崩れを解決 | 初代編集長ブログ―安田英久
自作のWebツール集
【マンションバナー研究会】コンバージョンにつながる配色の基本 | がんばるマーキュリー
がんばるマーキュリー
おすすめのタイムスタンプ・属性 変更ツール - ｋ本的に無料ソフト・フリーソフト