タグ

Web制作とWEB制作に関するabebe777のブックマーク (47)

  • フリーのWEBデザイナーによるWEB制作のノウハウや雑記

    覚え書きエントリ。CSSでの画像置換についてちょっと悩んでいるので色々調べてみました。 グローバルメニューなどでHTML上はテキストで記入し、 CSSで「text-indent:-9999px;」や「display:none;」を用いて画像に見せる方法(画像置換)ですが 最近の傾向では使用が推奨されていないようです。 なぜ使ってはいけないのか(アクセシビリティ) 「display:none;」 ... 音声ブラウザが読み上げてくれない、タブボタンでフォーカスできない「text-indent:-9999px;」 ... CSSは有効で画像表示は無効にしている環境(携帯、モバイルPCなど)では表示されない後者はモバイル用CSSなどで回避できると思いますが... SEO的にはどうなのか 色々調べてみたところ、今のところ画像置換によるSEOのペナルティはSPAMなどの明らかなテキスト隠し行為以

  • Web Design KOJIKA17

    1年に1回は更新する Container Queriesの沼へようこそ2023-03-08UAスタイルシートとリセットCSSとは - 20232023-02-26脳内フィルターで見るCSSレイアウト2022-11-22劇薬の The New CSS Reset2021-07-20Sassを@importから@useに置き換えるための手引き2020-05-26 / 2022-09-29Container Queriesという手法 / CSS Advent Calendar 20192019-12-23レスポンシブwebデザインのコーディングでやってること2018-12-28宣言ブロックのCSS設計2017-07-18Webデザイナーに最低限知っておいてほしい、検索と置換(正規表現)2016-05-21画像をCSSで斜めにマスクした時の知見2015-04-10CSSで2カラムを作ってみる201

    Web Design KOJIKA17
  • さくらのレンタルサーバ

    レンタルサーバなら「さくらのレンタルサーバ」! 月額換算でわずか131円、缶ジュース1分のお値段で使える格安プランから、ビジネスにも使える多機能&大容量プランまで、 用途と予算に合わせてプランを選べます。 さらにマルチドメイン対応でメールアドレスも無制限。無料ウイルススキャンや無料電話サポートもあるので安心して ご利用いただける共用レンタルサーバサービスです。

    さくらのレンタルサーバ
  • コリス

    ページは、アフィリエイト広告を利用しています。 🙏ソシム社大感謝祭🙏 Kindle特大セールが開催しています!! このセールを待っていた人も多いと思います! 今年発売された新刊をはじめ、ベストセラーのデザイン書も55%オフ。当ブログで紹介した書籍も多数あり、どれもお勧めです。 セール期間は7/31まで。 ソシム社のセールは貴重なので、気になっていた書籍は迷わず買いです!

    コリス
  • 最近のサイトで見かけるかっこいいエレメントがコピペで実装できるコンポーネント集 -Refills

    ヘッダやフッタ、ナビゲーション、タブ、アコーディオン、カードコンテンツ、モーダル、パンくず、オーバーレイコンテンツなど、最近のサイトで見かけるかっこいいエレメントがコピペで実装できるコンポーネント集を紹介します。

  • ここまで教えてくれていいの?!WEB屋のテンションと底力を上げる厳選チュートリアル色々! | バンクーバーのうぇぶ屋

    WEB制作のチュートリアルって当に多いですよね。 でも、当に役に立っている、制作に生かせてるチュートリアルって少なくないですか?チュートリアルの過程が中途半端だったり、途中からついていけなくなったり。はたまた、続きは有料なんて物も今までありました。 しかし!僕の短いWEB屋人生ですが、年に2、3は『お、おぉぉ!マジテンション上がるWA!』と叫びたくなるチュートリアルに出会うことが稀にあります。そんな感銘を受けたチュートリアルは速攻でFacebookにアップしているのですが、今回は今日まで見てきた中で、余りにクオリティが高かったり、確実に自分や周りのスキル、そしてテンションを上げたチュートリアルを厳選してご紹介! 英語記事メインですが、デザインよりならステップbyステップなのでなんとかなります!コードなら、Demoとか多いので見ながらついていけば理解できます!是非参考までに流し読みして見

    ここまで教えてくれていいの?!WEB屋のテンションと底力を上げる厳選チュートリアル色々! | バンクーバーのうぇぶ屋
  • あなたの作業を音速にするかもしれないWEB屋の作業スピードを上げるチートシート大量紹介 | バンクーバーのうぇぶ屋

    このブログがフロントに関する記事が多いもんだから、たまにデザイナーと呼ばれることがあるんですが、僕は業務としてはデザインよか制作ディレクションの方がどちらかと言えばメインなんですよね。 そんなディレクターとしての役割の一つに、周りにいる優れたデザイナーやプログラマー、デベロッパーの業務効率を考えることが挙げられます。 何を取るわけでもなく中途半端な僕ですが、ディレクターとして周りの各プロフェッショナルの役に少しでも立てればと、そして制作する上での効率を向上させるべく色々情報収集をする中で、よくチートシートの存在を目にします。(チートシートってどれだけ普及してるのかわかりませんが、つまりカンニングペーパーのことらしいです。) WEB屋にとってのチートシートって、どれだけ優れた技術力やデザイン力を持っていても、何かしら新しい発見がある物ですよね。以前書かせてもらった時間の価値は人によって違う!

  • バンクーバーのうぇぶ屋

    高卒でバカなのに最高に楽しい僕の生き方と守りぬいてきたこと 200.1k件のビュー 自分のやりたい事を仕事にしてる僕らに見られる10個の特徴 125.7k件のビュー 今更聞けない?!WEBデザイナーなら最低限知っておきたい有名フォントの数々 108.7k件のビュー 現代における留学が無意味だと思う5つの理由と、目標とすべき5つのこと 83.8k件のビュー 『海外に住めば英語は出来るように成る』は当か?5年間カナダに居座った僕が体感したTOEICとかの意味 82.1k件のビュー 英作文に時間をかけるな!英語圏のWEB制作現場でよく使われる英語表現テンプレート集!【メール編】 60.5k件のビュー 超かっこいいタイポグラフィを駆使した映像の数々!息をのむ程魅入った映像総まとめ 48k件のビュー チーム間のコミュニケーションを円滑にしたい時に試してみるべきツールやWEBサービス色々 46.3k

    バンクーバーのうぇぶ屋
  • スキルが増えた!今後を生き抜くためにWebデザイナーも習得しておきたい技術

    作成:2014/03/17 更新:2014/11/01 Webデザイン > クライアントさんの依頼やクラウドソーシングでもライティングや撮影依頼の需要が増えてきました。コンテンツファーストの時代になり、ライターだけじゃなく「コンテンツを作れる」デザイナーやエンジニアは、今後100%重宝されます。今回はフリーでも活躍できるように、ライバルのデザイナーさんと差別化できるように「コンテンツ作成」もできるデザイナーになるためのスキルをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コンテンツ設計 1.イラスト作成のスキル 2.写真の撮影技術と知識 3.動画編集の技術 4.コピーライティング 5.モーショングラフィック 6.電子書籍の作成 Webデザイナーの基知識とスキル 7.UXUI・IAの知識 8.レイアウト基原則 9.配色+色彩計画 10.フ

    スキルが増えた!今後を生き抜くためにWebデザイナーも習得しておきたい技術
  • Movable Type

    2023年11月、最新バージョン Movable Type 8 をリリース コンテンツタイプ機能でコンテンツを整理して管理することができ Data API を活用すれば、ワンソース・マルチユースも実現 資産であるコンテンツの「可用性」を高め、企業の情報発信を強力にサポートします CMSとして国内5万サイト以上に導入されている Movable Type の最新バージョン Movable Type は、コンテンツを構造化して保存し、その出し入れを容易にする、新しい形のCMSです。 「コンテンツタイプ」機能を使えば、構造化されたデータの作成が可能です。さらに、Data API で、柔軟なコンテンツ運用とワンソース・マルチユースが実現。さまざまなコンテンツを、PC/スマートフォン向けのウェブサイト、各種アプリ、デジタルサイネージなど、デバイスや出力形態を問わず使用可能。SNSやニュースアプリなどの

    Movable Type
  • Webクリエイターボックス

    WebクリエイターボックスのX: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったWeb関連の情報トップ10を紹介します。見逃してしまった人はこちらでチェック!まだフォローしてない人はお気軽にフォローしてみてくださいね! 続きを読む Web制作やデザインに関する情報は、インターネット上以外にも書籍を通して体系的に学ぶことができます。今月も様々なを拝読しました。その中でいいなと思った物、オススメの物をいくつか紹介します。 続きを読む WebクリエイターボックスのX: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったWeb関連の情報トップ10を紹介します。見逃してしまった人はこちらでチェック!まだフォローしてない人はお気軽にフォローしてみてくださいね

    Webクリエイターボックス
  • 初心者におすすめ!無料で使えるWordPressのテーマ10選【日本語対応のみ】 | TechAcademyマガジン

    初心者におすすめ!無料・有料で使えるWordPressのテーマ35選【日語対応のみ】 WordPress(ワードプレス)初心者におすすめする【無料テーマ(テンプレート)】を紹介する記事です。全て日語に対応。SEOに強いテーマや、テーマのカスタマイズに最適なテーマなど全部で35紹介しています。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査 WordPressと言えば、豊富なテーマ(テンプレート)で知られています。 自分でコーディングをし

    初心者におすすめ!無料で使えるWordPressのテーマ10選【日本語対応のみ】 | TechAcademyマガジン
  • Web Designer Wall - Design Trends and Tutorials

    This is an example of a detailed registration form with validation, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The body of the form is given a background color as RGB(252, 228, 236). The form consists of input text fields, radio buttons, drop-down lists, and a submit button. The banner section of the form is given a background color as RGB(233, 30, 99). The JavaScript methods

  • ひとりでWeb制作できた!Webデザインの勉強にもなる独学「スライド」総まとめ

    作成:2014/02/24 更新:2016/06/30 Webデザイン > デザインの流れや基的なフローなどを勉強しておくだけでも効率が良くなるし、起業の際にも役に立つと思います。デザイナーさんにもっとデザイン力を上げたいと言われたのもあり、今回は制作フローとデザインやその他の知識を学べるように、出来るだけ制作フローにそって、スライドをまとめました。膨大な量になったので簡潔にしています。全てスライドです。 エンジニア速報は Twitter の@commteで配信しています。

    ひとりでWeb制作できた!Webデザインの勉強にもなる独学「スライド」総まとめ
  • はてなブックマーク:ブログパーツ設置方法のメモ

    拡張ボタンからページ遷移なしでブックマーク! ブラウザメニューのB!ボタンをクリックするだけで完了。 コメントやタグを付けて素早く保存できる公式ツールです。 使い方をみる

  • SEO TOOLS

     NEW! 2020/04/07 「SEO一括見積もり」のサービスを終了致しました。 これまでのご利用、誠にありがとうございました。 2017/10/31 提供サービスの整理に伴い、「おしえて!SEOTOOLS」のサービスを終了致しました。 これまでのご利用、誠にありがとうございました。 2016/06/20 17日より発生しておりましたツールの解析スピードの低下を修正いたしました。ユーザの皆様にはご迷惑をおかけしてしまい、申し訳ございませんでした。 2016年04月 ツールの利便性アップのため、「SEOアクセス解析ツール」と「VERSUS」において、以下の項目を削除しました。 ・Yahoo!関連情報 ・トラフィックランキング ・カテゴリ登録状況 ・PRサービス利用状況 よりシンプルに洗練されたSEOアクセス解析ツールをご活用下さい。 2016/04/21 15日~18日の間で、サービス

  • フリー写真素材サイトまとめ15選

    こんにちは。学生ライターの池澤章太です。 Webで記事を書くときや資料を作るときに、フリー写真素材をよく使うと思います。しかし、イメージに合う写真や素材を見つけるってなかなか大変です。場合によっては商用利用できるか調べるなければいけませんし。 そんなときに、商用利用ができて、無料で使える素材サイトがまとめてあると便利ですよね。 ちなみに動画素材については送別会、結婚式に!映像制作に使える無料動画素材サイトまとめをご覧ください。 今回は、23個ほど素材サイトをまとめました。この記事をブックマークしておけば素材に困ったときに役立つはず! 【こちらもおすすめ】 無料で商用利用OKのサイト特集 商用利用できるフリー写真素材サイトまとめ23選 ここでひとつ注意を。「フリー」という単語は、なにかと誤解を招きやすいですが、著作権がフリーだったり、クレジット表記が不要だったりする意味ではありません。各素材

    フリー写真素材サイトまとめ15選
  • 無料ホームページ作成 | ホームページの作り方 | Wix.com

    Web デザインツール Wix の豊富な機能で Web サイトを思いのままにデザイン、制作できます。 ホームページテンプレート 800以上のテンプレートの中からご自身のサイトに最適なデザインを選べます。 AI サイトビルダー 強力な AI でビジネス対応のサイトをスピーディに作成できます。 Web 開発 オープンプラットフォームで Web アプリケーションを開発できます。 モバイルアプリ サイトの作成、編集、管理をスマホから。いつでも、どこからでも行えます。 制作代行を依頼 サイトの作成、デザイン、集客代行をプロに依頼できます。

    無料ホームページ作成 | ホームページの作り方 | Wix.com
  • かちびと.net

    Kachibito.net is a website to writing tutorials and code snippets for Web Developers, the main subjects are WordPress, javascript, CSS, OSS, tools and resources. Links About/Privacy Policy Contact X(Twitter) Facebook

    かちびと.net
  • 無料なのに高機能! 入力補助付きのHTMLエディタ5つ紹介 - Webデザイン初心者向けのあれこれ

    あけましておめでとうございます! 今年も当ブログをよろしくお願いします。 皆さん、お正月をどのようにお過ごしでしょうか。 新しい年を迎えたということで、Web制作の新しいお供を探してみるのはいかがでしょう? 今日は「入力補助付きのHTMLエディタ」をご紹介します。 ■Crescent Eve http://www.kashim.com/eve/ 軽くて多機能なエディタです。HTML5に対応しています。 タグ、属性の入力補助の他に文法チェックやショートカットの機能もあります。 「Ctrl」+「Enter」でその場所の適切な閉じタグが入力出来る、という機能がかなり便利です。 ■ez-HTML http://www.w-frontier.com/software/ezhtml.html コードの編集からFTPでのアップロードまで出来るエディタです。タブ機能付き。 ちょっと編集してアップロードする

    無料なのに高機能! 入力補助付きのHTMLエディタ5つ紹介 - Webデザイン初心者向けのあれこれ