あなたのネット老人度は？ CPIが25周年記念で「ネット老人会クイズ Web制作編」を公開中【やじうまWatch】
ウェブがますます進化することで、表現の可能性がぐんと広がっており、CSSはその代表と言えます。 ほんの数年前までJavaScriptなどで実装していた複雑な仕様も、CSSのみで実現できるようになってきています。 この記事では、ほんのわずかなCSSで実装できる小技テクニック12個をまとめてご紹介します。 Web制作で活用できる、実用性の高いテクニックを中心に揃えています。ソースコードは、「HTML」と「CSS」タブを切り替えることで確認できます。 CSSで実装できる小技テクニック目次 1. テキストグラデーション 2. 左線グラデーション付きの見出しタイトル 3. アニメーション付ボーダーライン 4. テキストリンクがすーっと通過するホバーエフェクト 5. リンク用CSSラインホバーアニメーション 6. SVGで画像の周りをデコレーション 7. 文字テキストを回転させる方法 8. 長い文章を
2023年9月7日 CSS CSS小技集シリーズの第5弾！「【第4弾】少しのコードで実装可能な10のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！ 目次 ネストで親子セレクターを管理 チェックボックスやラジオボタンの色を変更 アスペクト比を指定する 新しいメディアクエリーの範囲指定方法 背面の要素をぼかす 要素を画面のど真ん中に固定表示 空の要素にスタイルをあてる 条件に合致しないセレクターにスタイルをあてる スムーススクロールのジャンプ位置 動いているCSSアニメーションを止める HTML・CSSの全コードは各サンプルの「HTML」や「CSS」タブを、別タブでのサンプル表示は右上の「EDIT ON CODEPEN」をクリックしてご覧ください！ 1. ネストで親子セレクタ
こんにちは、デザイナーの花ちゃんです！ 最近イラストのご依頼をいただくことが増えています。描くのは楽しい反面、時間がかかってしまうこともしばしば……。 そんなときの時短テクニックとしておすすめしたいのが、「ロイヤリティフリーのイラスト素材」です。自分のイラストと組み合わせることもできますし、構図や配色の参考としても役立ちます。 この記事では、無料で使えて、商用利用もできるフリーイラスト素材サイトをカテゴリーやテイスト別にまとめています。イラストは作者によって絵柄や表現の仕方に個性が出やすく、イメージに合ったものを見つけるのが難しいですよね。日頃からさまざまなテイストのイラストをストックして、引き出しを増やしておくことが大切です。ぜひイラストを探すときの参考にしてみてください！ イラストも作れるWebデザイナーを目指すなら…… イラストの制作のテクニックや基礎的なデザインスキルを一から学びた
dappiの件、詳しい人教えて/追記
追記) ①buzzfeeedも有田もdappi＝ワンズクエストだと思っている。 ②小西議員が漏らしたのでないとすれば何故記者達がその情報を持っているのかは謎 ③裁判で不利になったり侮辱罪に当たるかもしれないので具体的な社名を書いたり特定可能な情報を流すのは本来は良くない(これもアウトか？) ④階数間違いは単純に見間違えてる。 てなとこでしょうか (スマホからアクセスしてるから改行とか変かも) 追記終わり） ざっくり言えば聞きたいことは１つdappiの法人名ってなんなん？ 後は誰も大っぴらにその法人名を明かさないのって何か理由あるの？って事です。 俺が読んだ記事とかツイートは以下の 1 小西ひろゆき議員のツイートhttps://twitter.com/konishihiroyuki/status/1445685875380133889 TwitterアカウントDappi（@dappi2019
技術記事を書くことは、最初はなかなかハードルの高い作業に思えます。文章を書くにはある程度の慣れが必要である考えています。 誰しも初めのうちはうまく文章を書くことができず、文章を書く訓練を重ねることで、内容を伝えやすい・理解しやすいある種の「型」を発見されているのではないかと思っています。 この記事では id:azukiazusa が普段記事を書く時に考えていることを書き下していきます。 見出しを先に書く コードは実行可能にする 文法エラーがないように 文脈依存にならないように foo や bar のような名前を使いすぎない 記事は1日寝かせる その他文法的な事項 見出しは ## から始める インラインコードブロックは装飾目的で使わない 英語と日本語の間に半角スペースを空ける おわりに 参考 見出しを先に書く 私が技術記事を書くときには最初に見出しから書き始めます。下記のような感じです。 見
2023年6月8日 Webサイト制作, 便利ツール おしゃれなフォントが気軽に実装できるGoogleフォント。みなさん使っていますかね？登録やダウンロード不要なので便利ですが、日本語フォントはなかなか容量が大きくてページの読み込み速度に影響が出てしまいます。そこで必要なフォントのみを指定できるサブセット化をしてみましょう！ ↑私が10年以上利用している会計ソフト！ Googleフォントの設定 まずは通常通りGoogleフォントを設定しましょう。GoogleフォントのWebサイトから、今回は例として「Kosugi Maru」というフォントを設定したいので検索。一覧から「Kosugi Maru」をクリックします。 続いて見本の右側にある「Select this style」をクリック。 HTML 画面右側に選択したフォントが表示されます。「Embed」タブをクリックしてコードを取得しましょう。
＜この記事の著者＞ ばんか（bamka） - Tech Team Journal Web制作会社の会社員として働きつつ、個人でブログ／メディアライターとしても活動するパラレルワーカー。 ChatGPT等AIを公私で駆使し、ITツール・ガジェットを用いて人々の生活をより豊かにするための活用術を提供するブログも運営。 Webサイトや本で学んだ知識を、自分のものにして活用できるレベルまで引き上げるには、アウトプットが重要だと考えて、積極的にアウトプットするようにしています。 ただ、アウトプットの仕方も大事。知った知識をただSNSにコピペで貼り付けるようなやり方は、良質なアウトプットとは言えないと考えています。 そこで今回は、私が実践している「良質なアウトプット」に転換するために気を付けているポイントについてお話しします。 【目次】 １：第三者に見てもらう ２：自分の言葉で語る ３：図にまとめる
今や数え切れないほど存在するWeb制作会社。 大手から個人事業まで、一説では国内に1万社以上存在するといわれています。 競争は激しく、それぞれの強みを生かしながら、生き残りに必死です。 そんな中、画期的な戦略で注目を集めている会社が MS社です。 主語のない文章 MS社のサイトにアクセスすると、最初に飛び込んでくるのが、会社のキャッチフレーズですが、いきなり意味不明です。 MS社 デジタルメディアが拡大し続ける現代において、幅広いターゲットに大きな影響力を与えています。 「メディアスターツ」ではテレビ業界出身の専門スタッフが、知見によるノウハウを活用し、最適なメディアリレーションをご提供します。 「デジタルメディアが拡大し続ける現代において、幅広いターゲットに大きな影響力を与えています。」と、主語が読み取れない意味不明な日本語が書かれていますね。 ところが、ほぼ同じ文章が書かれている会社が
転職してもう丸3年。ありがたいことに2021年3月からは本格的にチームをもつようになりました。前職でもLIGでも「リーダー」という肩書きはもともと持っていたものの、管理職としての役割はほぼなく、人生初の挑戦にドキドキしています。そんな私がいま一番克服したいこと、克服するために取り組んでいることを今日はご紹介します。 まだ見ぬ全国の同じ病をもった方に、「わかる。私も克服したい。一緒にがんばろう！」なんて思ってもらえるととっても嬉しいです。 「自分でやった方が早い」という病 私がいま一番克服したいこと、それは「自分でやった方が早い病」です。病名は小倉広さん著『自分でやった方が早い病』から拝借しています。この病気はその名前のとおり、「自分でやった方が早いわ」と、ついつい手や口を出して周りから仕事を奪ってしまう行動癖を指します。 たとえば、みなさんにこんな心当たりはありませんか？ □ メンバーが出
IE終了後にWeb制作の現場で使えるHTML&CSSコード14選！おさえておきたいコードを集めてみた | Pulp Note
マイクロソフトから正式にInternet Explorer 11 デスクトップアプリケーションのサポートを終了する発表がありました。期限は2022年6月15日です。Webサイト制作者としては歓喜の出来事ですね。 ただ、IEを気にしなくてもいいという事は、IE対応をしてきたコードの見直しも必要となります。そこで今回は、IE未対応で泣く泣くスルーしてきた即戦力なHTMLやCSSコードを14個紹介します。2022年6月以降のために今から知識を蓄えておいてはいかがでしょうか。 ちなみに、『Windows10 LTSC』や『Windows Server上のInternet Explorer11 デスクトップアプリケーション』といった一部のIE11には影響はないとの事ですが、一般ユーザーが利用する『Windows10のInternet Explorer』はサポート対象外となりますので、これはIE終了と
好きなときに筋トレできる、ホームジムがある家を建てた【趣味と家】 - MY HOME STORY │スーモカウンター注文住宅
音楽やマンガなど、圧倒的な熱量を注ぐ「好きなもの」をおもちの方に、こだわりの住まいをご紹介いただく本企画「趣味と家」。第12回目は夫婦ともに筋トレが趣味で、トレーニングルームのある家を建てたManaさんに寄稿いただきました。 動線の工夫や天井・床の補強等により、賃貸時代はかなわなかった「最高のホームジム」を手に入れたManaさん。加えてペットたちが快適に暮らせる空間も意識したことで、大切な家族が幸せに過ごせる“宝箱”のような家になったそうです。 こんにちは。Webデザイナーとしてサイト制作を行うかたわら、制作に関する技術書を執筆しているManaです。「Webクリエイターボックス」というブログも運営していたりします。 自分のブログでは専門的なことばかりで、プライベートなことはあまり書かないのですが、今回は2019年末に広島の郊外に建てた自慢の家を紹介させてください！ 上から時計回りにきなこ、
RのWeb制作 Webサービス制作のための技術情報を。データ分析（Python、機械学習コンペ他）や自作野球ゲームMeisyoのこと中心。 最近、駆け出しエンジニアをTwitter上で数多く見るようになりました。 ただ、揃いも揃って「フロントエンドエンジニア」になりたい（意訳）とプロフィールに書いてあります。 なぜでしょうか。 それは何が問題なのでしょうか。 私が何を問題視しているかというと、フロントエンドエンジニアってそんなにコストパフォーマンス良くないぞ？ということです。 なぜなら、バックエンド等に比べて要求される技術の種類が多くなりがちであるからです。 そこで今回、給与や技術などの視点から、この原因を読み解いてみました。 ※すべてのベースとなる情報科学の知識については全く触れていません。 目次 給与 技術 目指してしまう理由 解決策 あとがき 給与 indeedをはじめ、リクナビネク
この記事では、Webデザインやグラフィックデザインの制作スピードが爆速になる、便利な最新オンラインツールをまとめています。 うまくツールやサービスを利用することで、時間や労力の必要な作業もラクラクこなし、よりプロジェクトを円滑にすすめることができるでしょう。気に入ったツールを制作ワークフローに取り入れ、さらなる制作スピードアップを目指しましょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. イラスト系ライブラリ 2. Web制作お役立ちツール 3. モックアップツール 4. デザインからコードへの変換ツール 5. プロトタイプツール 6. アイコン素材パック 7. デザインコレクション 8. 面白ツール Webデザイン制作が変わる！便利な最新オンラインツールまとめ イラスト系ライブラリ Fresh Folk スタイリッシュなイラストを作成で
ヘッドレスCMSのメリットデメリット・比較おすすめ13選まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。元LIGのWebディレクターで、いまはとある事業会社で開発ディレクターをやっているともぞうです。 さっそく本題ですが、みなさんはなんのCMSを使っていますか？ WordPress、Drupal、Movable Typeあたりでしょうか？ 最近ではヘッドレスCMSというものも出てきて、CMSの選択の幅が広がりました。 今回はそのヘッドレスCMSに焦点を当て、ヘッドレスとは？ というところから、ヘッドレスCMSのメリットデメリット、各ヘッドレスCMSの比較ができる記事をお届けします。 ※この記事は株式会社ディバータの提供でお届けします。 ヘッドレスCMSとは まずヘッドレスCMSの説明からはじめます。 ヘッドレスCMSとは表示機能を持たないCMSのことを呼びます。「ヘッドレス」で調べてみると以下のような説明がでてきました。 ソフトウェアについてヘッドレスという場合は、通常は用意され
この記事では、Webデザインやグラフィックデザインの制作スピード、生産性がアップする、便利な最新オンラインツールをまとめてご紹介しています。 カテゴリ分けされたこれらのツールやサービスを利用すれば、面倒な作業をラクにこなし、作業の効率化をアップできるでしょう。「なぜ今まで使っていなかったのか」、そんな気持ちにさせる便利ツールが揃いました。 各ツールはカテゴリごとに整理しています、以下のリストを参考にどうぞ。 コンテンツ目次 1. Web制作便利ツール 2. イラスト系ライブラリ 3. 配色ツール 4. デザインコレクション 5. プロトタイプツール 6. コラボレーションツール 7. 面白、クリエイティブツール Web制作フローが変わる！便利な最新オンラインツールまとめ Web制作便利ツール BrowserFrame 各種ブラウザ付きでスクリーンショットを撮影できるオンラインツール。目的の
Webページを実装する際に重要なのは、HTMLです。しっかりと確かなHTMLが書けないと、CSSやJavaScriptにも影響を与えてしまいます。 HTML Living Standardに基づいた知識、アクセシビリティやユーザビリティに配慮したコーディングを学べる、HTMLのみに特化された解説書を紹介します。 本書は仕事としてWeb制作に携わっている人、真剣に取り組んでいる人向けの解説書。確かなコーディング力を身につけるためのHTMLのみに特化されています。私の見落としがなければ、CSSに関して本書は0です。 HTMLの基礎知識から、文章構造、ページ構造、アクセシビリティやユーザビリティに配慮したマークアップについてしっかりと学べ、スキルアップになる一冊です。
心を掴んで離さない！採用サイトデザイン7選【2024】
みなさんこんにちは！ デザイナーのまいまいです。 毎日花粉と低気圧が猛威を振るってますね。 今回はそんな憂鬱な気分も吹き飛ばしちゃうくらいワクワクしちゃう2024年度の採用サイトを紹介します💖！ 就活シーズン真っ只中！ 不安な気持ちを、ときめきの気持ちに変えてくれるようなそんな素敵なサイトが目白押しです！ 💡クリエイターが推薦する、採用サイト制作に強いWeb制作会社15選はこちら 心ときめく2024年度採用サイト7選 1. 2024年度定期採用｜フェリシモ https://www.felissimo.co.jp/company/recruit2024/recruit2024_cy.html もう見た瞬間からかわいい〜！ 昨年度のサイト、本当に大好きだったので見れなくなっちゃって悲しいなあ、なんて思っていたら……今年も超超最高に可愛いですね！！！！！ スマホファーストのサイトなのですが、
大学・大学院の6年間｜d0iasm
大学と大学院の6年間について振り返ります。 この6年間は自分でも予期しなかったほど大きな方向転換をしました。元々はデザイナー兼ファッションモデルとして仕事ができたら良いなと思って大学に入学しましたが、いつの間にかプログラミングの虜になっていました。夢中でプログラミングをしているときは人生で一番楽しい！と思えました。しかし全て順調だったわけではなく、今思い出しても恥ずかしくなるような失態や、周りに迷惑をかけてしまい謝りたいことなどがたくさんあります。でも失敗にめげずにたくさんの挑戦をしてきたからこそ、自分の向き・不向きを知ることができ、自分のやりたいことを見つけることができました。 この文章で伝えたいことは「迷ったらやってみる」ことです。これから社会人として新しい経験をして忘れてしまう前に、6年間でやってみたことを書き残しておきます。 私のように学業や仕事で大きな進路変更をした人・これからし
Webアクセシビリティと合理的配慮｜ymrl
2024年（令和6年）4月1日に日本では「障害者差別解消法」という法律の改正が施行され、民間の事業者にとっては「合理的配慮」が義務化されます。義務化するのはあくまで「合理的配慮」であって、法律の条文にはどこにも「Webアクセシビリティ」とは書かれていません。 ここについての誤解が数多く出回ってしまっていて、先日「2024年4月や6月の時点では、まだ日本でWebアクセシビリティが義務化されません」という記事を書きました。 この記事について、以下のような声をもらいました 「専門用語が多くてわかりにくい」 「アクセシビリティは『合理的配慮』ではなかったの？」 「なぜアクセシビリティを推進したい人たちが急に『義務ではない』と言い出したの？」 そこで、もう少し的を絞って、「合理的配慮」「環境の整備」「Webアクセシビリティ」などの言葉の意味や関係について、説明しようと思います。 （筆者は法律に関して
SEO関係者がコアアップデートやら何やら騒いでいるなか、 「へーそうなんだー、Googleに振り回されるお仕事は大変だねー」 と他人事で過ごせる時間がこんなに清々しいなんて！！ 株式会社アイレップを、2021年12月末をもって退職します。 入社のきっかけ アイレップか、某社か 入社して最初にしたこと SEOサービスの設計・開発 SEOサービスの価格戦略 SEO専門家としての25年のキャリア SEO専門家を育てる アイレップで良かったこと なぜ、このタイミングで退職するの？ 今後もアイレップにかかわるの？ 次は何をするのか？ SEOの仕事はどうするの？ 書籍「Standard SEOシリーズ」は二冊で終わり？ 株式会社アイレップを、2021年12月末をもって退職します。 創業者の高山雅行さんと出会い、その後、ご縁があって2005年3月から正社員として働き始めました。社長は創業者から紺野俊介*
はじめに 今回の記事では個人の独断と偏見でプログラマー向けに必ず確認しておきたいIT企業の公式ブログを共有する。なお、今回の記事で紹介している公式ブログはあくまで一例に過ぎない。 AppBrew 文章が易しく初心者でも読みやすい 主に業務効率化を中心に書かれている 実務・プログラミングのイメージができない初心者や新人には非常にオススメ ABEJA Tech Blog 主に保守・運用を中心に発信している ドローン・機械学習に興味があるならオススメ 専門用語が多めなので理解に苦労する可能性が高い UUUMエンジニアブログ あの有名なクリエイター(YouTuber)を数多く輩出している会社「UUUM」の公式ブログ Rails・PHP・インフラ(AWS、Dockerなど)の情報が多い 技術記事が非常に読みやすく、画像とソースコードを使って的確に技術ややっていることを説明している Wantedly
こんにちは、デザイナーの花ちゃんです！ アイキャッチやバナー、プレゼン資料などにも欠かせない写真素材、みなさんはどうしていますか？ もちろんできることならぜんぶ自分で用意するのに越したことはないのですが、実際に撮影用のセットを組んだり現地に行って撮影したりするのは、時間や予算の関係でなかなか難しいときもありますよね。 そんなとき、役に立つのがロイヤリティフリーの写真素材です。私は素材を組み合わせたり、合成をしたりしてフル活用しています！ でも、イメージに合う素材を見つけるのってなかなか大変で、探し始めたらあっという間に1、2時間過ぎてしまうことも……。なんとか作業時間を短縮できないか……と思い、無料で使えて、商用利用もできる素材サイトと効率的な写真の探し方をまとめてみました！ 未経験からWebデザイナーを目指すなら…… Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教え
東京生まれ、神奈川、埼玉育ち、東京在住。Web制作をしたり小さなバーで主に生ビールを出したりしていたが、流れ流れてデイリーポータルZの編集部員に。趣味はEDMとFX。（動画インタビュー） 前の記事：ねっとりVSほっくりスイートポテト（デジタルリマスター版） ＞ 個人サイト まばたきをする体 Twitter @eatmorecakes わさびの代表はまぐろ刺の赤身、しょうがの代表は冷ややっこ、そしてからしの代表はシュウマイ チューブ薬味、こういうやつ 調査は薬味のチューブを出しているスパイスメーカー（ハウスとS&Bの2強完全なるだった）のサイトと、左記2社以外のメーカーはプライベートブランドのサイトやネットショップから「しょうが チューブ」などで検索することで実施した。 パッケージに使用例として料理の写真を使っていないものもあり（トップバリュの国産シリーズ等）そういったものは除外してある。
さようなら、ビッグマック
東京生まれ、神奈川、埼玉育ち、東京在住。Web制作をしたり小さなバーで主に生ビールを出したりしていたが、流れ流れてデイリーポータルZの編集部員に。趣味はEDMとFX。（動画インタビュー） 前の記事：こしあん、粒あん、味噌あんに続く、柏餅「酢あん」 ＞ 個人サイト まばたきをする体 Twitter @eatmorecakes ビッグマックの写真がたくさん出てくる記事です！ この記事は 大人になり量が食べられなくなってきた人が もう一生食べないだろうなあとなんとなく気づいたビッグマックを今あえて食べ そして別れを告げる 告げながらにして、あらためて「ビッグマック」の「ビッグ」さを確かめる 通常なんとなく好みが変わって食べなくなっていくものに、あえてわざわざ「さようなら」をするとどう感じるのか確かめる という内容になっています。 そういえばビッグマックってどんなハンバーガーだっけ？ と、思い出し
先日リリースされたChrome 90のデベロッパーツールに、Flexboxの実装に役立つ新機能が2つ加わりました！ 1つ目はFlexboxエディタでデバッキングツール、2つ目はFlexboxのオーバーレイ、どちらもWeb制作でFlexboxを使用する時に大活躍すること間違いなしです。
ランディングページのデザインまとめサイト11選！デザインを作る際のポイントとは | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、マーケターのまこりーぬです。 Webサイトのランディングページを作成することになったけど、どのようなデザインにしたらよいのかさっぱりわからん……と悩んでいる方も多いのではないでしょうか？ この記事では、Web制作担当者向けに、ランディングページとはなにか、デザイン作る際の注意点やおすすめのデザインのまとめサイトを紹介します！ ランディングページとは ランディングページ（LP）とは、ユーザーが広告・外部サイトなどをクリックした際に、一番最初に訪れるページのことです。一般的には縦長の1枚構成になっています。 ランディングページの役割 ランディングページの役割は、ユーザーに、自社の商品やサービスへの関心を持たせ、商品購入や問い合わせといったコンバージョン（結果）を引き出すことです。ユーザーを他のページに移動させないために、1ページ中に情報を集約する、イメージ画像を多用する、情報を提示
この記事では、2020年に入ってから公開された、Webデザインを快適にする最新オンラインツールをまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな新しいツールを中心に揃えています。 新しいツールや機能をうまく駆使することで、時間のかかる面倒な作業もラクにこなし、より円滑にプロジェクトを進めることができます。お気に入りのツールをワークフローに取り入れ、より快適で、スピーディーな制作を目指しませんか。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. デザインコレクション 2. イラスト系ライブラリ 3. デザインからコードへの変換ツール 4. Web制作お役立ちツール 5. プロトタイプツール 6. コラボレーションツール 7. アイコン素材パック 8. 面白ツール Web制作フ
VSCodeを使ってHTML/CSS/JavaScriptなどを使ったWeb制作、Webコーディングを行っている人も多いのではないでしょうか。 VSCodeは様々な拡張機能が公開されていて、それらを活用するとさらにWeb制作の作業効率が向上したり、使い勝手が良くなったりします。 今回は、Web制作者、WebコーダーにおすすめのVSCode拡張機能をご紹介したいと思います。 VSCodeとは VSCodeとは、Microsoftが提供するテキストエディタ「Visual Studio Code」のことです。つい数年前までは、人によって使っているテキストエディタが違うことも多かったのですが、最近ではVSCodeを使ってコーディングやプログラミングを行っている人がかなり多くなってきました。 VSCodeは、設定や拡張機能の追加など、マウス操作で行うことができ、初めてコーディングやプログラミングをす
2022年5月1日 JavaScript, React Viteは2020年に発表されたフロントエンドのビルドツールです。最初「ヴァイト」と読んでたんですが、「ヴィート」と読むみたいですね。フランス語で「速い」という意味だそうです。絶賛Reactのお勉強中なので、ViteでReactの環境を作る流れを備忘録的にまとめておきます！ ↑私が10年以上利用している会計ソフト！ この記事は動画でも解説しています。動画派の方はぜひご覧ください！ Viteとは？ Viteを使えばベースのプログラムを予め準備しておいてくれているので、開発をすぐに始められるようになります。スターターキットとか、テンプレートみたいなものですね。他にも複数のファイルをひとつにまとめたり、SassをCSSに変換するなどの作業を爆速でできるようになります。 また、ファイルを保存すると同時に、確認画面も自動的に更新されます。ホット
2020年4月21日 フリーランス, 便利ツール このご時世、自宅でお仕事をしている人も多いかと思います。私はもう長い間在宅ワークなので慣れっこですが、在宅ワークを始めたばかりの人だと集中力の維持がひとつの課題になりますね。まったく音がない場所よりも適度にノイズがあったほうが集中しやすい環境なのだとか。そこで今回は自然の音や街の環境音、生活音などをまとめたWebサイトをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ I Miss the Office 「自宅勤務やったー！」と思っていても、そろそろオフィスが恋しくなってきた人もいるのでは？I Miss the Officeはオフィスの環境音を流せるWebサイト。人が話す声や歩く音など、オフィス内でよくある音を再現しています。画面右下の数字はオフィス内の人数を表していて、好みに合わせて増減可能。画面左下のスタートボタンから音が
CSSやHTMLやJavaScriptをはじめ、カラーやフォントやアクセシビリティなど、Web制作時に役立つオンラインツールをまとめたTiny Helpersを紹介します。 無料で利用できるツールがまとめてあるので、非常に便利です。
著： 玉置 標本 2018年のデビュー作『死にたい夜にかぎって』がテレビドラマ化され、今年の2月に『もはや僕は人間じゃない』、3月に『働きアリに花束を』、4月に『クラスメイトの女子、全員好きでした』と、3カ月連続で単行本を出版した人気作家の爪切男（つめきりお）さん。 文章を書く仕事に漠然と憧れて香川県から上京し、町田駅（東京都）の横の相模大野駅（神奈川県）、中野駅も利用できる新井薬師前駅、その一駅先の沼袋駅と引越して作家になるまでの経緯を、散る桜を愛でつつ散歩しながら伺った。 ゲームブックを自作する子どもだった爪さんは1979年生まれの42歳。嫌いなものは虫。まだ幼いころに両親が離婚をしたため、アマチュアレスリングの猛者だった厳格な父親によって育てられる。細かい話は『働きアリに花束を』を読もう。 ――爪さんはどんな子どもだったんですか。 爪切男さん（以下、爪）：「ガキのころはすごくイヤな子
どうも、まさとらん（@0310lan）です！ 今回は、人気のグラフィックデザインツール「Canva」に搭載されている多彩な機能のうち、Web開発者に役立つ機能を厳選してご紹介します。 「Canva」は、アイキャッチ画像やバナー広告・ポスターを作成するなど、さまざまな画像編集やデザインを作成できるのですが、実はそれ以外にも驚きの使い方ができる多くの機能が搭載されています。 新しい「Canva」の使い方を知りたい方も含めて、ぜひWeb制作に役立ててください！ 【 Canva 】 ■Webサイトのプロトタイプを作って公開！ 「Canva」を使うと画像やテキストなどを組み合わせて、手軽にWebサイトのデザインを構築できるのをご存知でしょうか。そのうえ、ホスティングも同時にしてくれるので、簡単なプロトタイプを作ってネット上に公開できる仕組みがあります。 方法は簡単で、「Canva」の検索ボックスに「
最近、「ストレスとどう付き合うべきか」ということをよく考えるようになり、メンタルヘルス、マインドフルネス、ストレスマネジメント、認知行動療法、ウェルビーイングなどの書籍を読み漁っています。 こうしたインプットを踏まえた上で、「仕事のストレスを軽減させる8つの思考」というのを私なりに考えてみました。元々は社内向けに作ったものですが、ストレスマネジメントは多くの働く人に共通する課題だと思いますので、皆さんにも共有します。 (1) 起こったことに、負の感情を加えない起こってしまったことについて、悪い、嫌だ、頭にくる、がっかりだ、大変だ、失敗だ、期待外れだ、といった負の感情を抱くことは、巻き戻せない時間を相手に、心をすり減らすだけです。結果論でしかないことに囚われず、起こった事実をありのまま受け入れ、余計な負の感情に飲み込まれずに、今やるべきことに集中しましょう。 ストレスが多い考え方：「納期間際
CSSの:has()疑似クラスの便利な使い方を徹底解説
先日の記事で:has()疑似クラスがSafariでサポートされ、こんなことができるというのを紹介しましたが、さらに:has()疑似クラスを掘り下げ、Webサイトやアプリでの便利な使い方を紹介します。 :has()疑似クラスは、指定した要素がある場合にのみスタイルを適用できるCSSの新機能で、これからのWeb制作に活躍するかなり便利な機能です。こういう機能を待ち望んでいた人も多いと思います。 たとえば、カードに画像がある場合、ナビゲーションに子メニューがある場合、ラッパーがある場合など、複雑なCSSが必要だったものやJavaScriptが必要だったものが簡単でシンプルなCSSで実装できます。 CSS Parent Selector by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに :has
はじめに HTML+CSSコーディングにおいて、Sass管理ディレクトリを標準化する方法を紹介します。 CSS設計は、サイト種別やプロジェクト規模、分業の有無や人数によっても最適解が異なります。 この仕組みは、様々な設計を同じロジックで受け入れることによって、CSSコードの管理効率を画一的に最大化する狙いのものです。 コーポレート・ポータル・ブログ・EC・LP・管理画面…など、様々な種別のサイトのCSSを、同じ仕組みで設計して管理できるようになります。 前提事項など SassなどのCSSプリプロセッサの使用を前提とします。 本記事の一部は、後で見られるよう別記事として切り出しています。（📝のマークのもの） この記事は標準化ノウハウ公開の一環として書いています。 仕組みの概要や前提事項などについては「UltimateCoding 概要・前提事項」のエントリをご確認ください。 セクション一覧
脱・Atomic Design - HTML+CSSコーディングの粒度分類法（HTML Parts） - Qiita
はじめに HTML+CSSコーディング専用の粒度分類を紹介します。 この仕組みは、デザインやワイヤーフレームなどの視覚情報を分解することに焦点をあて、分解した対象を部品化する流れも併せてガイド化した汎用手法です。 世の中には、コーポレートサイト / ポータルサイト / サービスサイト / システム管理画面 / ブログサイト… といった様々な種別のサイト、Webページがありますが、これらの「完成予想図（視覚情報）」を同じ方法で分解して、コーディング用の部品にできます。 粒度と言えばAtomic Designが有名ですが、この「HTML Parts」も粒度そのものの考え方についてはAtomic Designの踏襲です。その上で「思考の入り方・捉え方」や「名称と定義」をコーディング側に寄せることで、CSS設計やコーディング業務を標準化しやすくしています。 ※この記事は標準化ノウハウ公開の一環とし
Web制作者が知っておくと便利なCSSの小ネタ
CSSの進化はすごいですね🚀 一昔前はJavaScriptが必要だったり、トリッキーなCSSで記述しないとできなかったことが、1行もしくは数行のCSSで簡単に実装できるようになりました。 Web制作者が知っておくと便利なCSSの小ネタを紹介します。 CSS Tips by Marko Denic 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スムーズなスクロールはたった1行のCSSで CSSだけでテキストを省略 複数行のテキストも省略できます 水平と垂直方向のすべてに中央揃え 影を画像のコンテンツのみに与える CSSでカーソルをSVGに変更 CSSだけでタイピングのエフェクト テキストのハイライトカラーを変更 どんな要素でもサイズを変更 CSSで実装するモーダル サイズ指定にcalc()関数が便利 空の要素をスタイ
[Webデザイナーさんへ] そのデザインがコーディングしにくい理由と、改善ポイント詳説 更新日：2019/12/27 Webデザイナーにとって、自分のデザインがコーディングしやすいのかどうかは意外と気になるもの。 コーダー側は受け取ったデザインを粛々とコーディングするだけなので、あまり「こうしてほしい」と声を上げることはありませんが、デザイナーの観点だけでは気付きにくい問題が埋もれてしまっているかもしれません。 ということで今回は、日々のコーディング作業で気になった覚えのあることをどどんとまとめてみました。 このデザインだとどんな風に困ってしまうのか、そしてどう変えれば改善できるのか、なるべく具体例を挙げて説明していきます。 どのデザインツールでも共通の内容が多いと思いますが、基本的にはPhotoshopでの作業を想定しています。 常識的な内容も多いので、そのレベルは当然できてますという方
![[Webデザイナーさんへ] そのデザインがコーディングしにくい理由と、改善ポイント詳説 | 東京のホームページ制作 / WEB制作会社 BRISK](https://cdn-ak-scissors.b.st-hatena.com/image/square/61015d8f4b04fb0dced52a6a21c4bd7213a4ba99/height=288;version=1;width=512/https%3A%2F%2Fb-risk.jp%2Fwp%2Fwp-content%2Fuploads%2F2019%2F12%2Fcode-friendly-kv2-1.png)
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ほんの数行のCSSで実装できる小技テクニック12個まとめ 【簡単＆実用的】
【第5弾】少しのコードで実装可能な10のCSS小技集
フリーイラスト素材サイト39選【デザイナー厳選】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
私の技術記事の書き方 - azukiazusaのブログ
Googleフォントをサブセット化してページの読み込みをスムーズに
意味のないアウトプットをやめる７つの方法 - paiza times
【注意喚起】「コピペ疑惑」のあるWeb制作会社と付き合ってはいけない - 畳之下新聞
「自分でやった方が早い病」を克服したい。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
駆け出しエンジニアは本当にフロントエンドエンジニアを目指すべきなのか – RのWeb制作
Webデザイン制作が変わる！便利な最新オンラインツール45個まとめ
便利で爆速！ウェブ制作向け最新オンラインツール、無料素材37個まとめ
HTMLが強みになる解説書、アクセシビリティやユーザビリティに配慮したコーディングを学べる -武器になるHTML
（株）アイレップを2021年末で退職します - SEMリサーチ
【プログラマー必見】情報収集で絶対に役立つIT企業の公式ブログ 30選
フリー画像・写真素材サイト15選【デザイナー厳選】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
からしを使う料理の代表はシュウマイかおでんかとんかつか ～練り薬味パッケージ上の熱き戦い
デベロッパーツールがさらに便利に！Flexboxの実装と検証が簡単になるFlexboxエディタとオーバーレイが搭載
Web制作フローが変わる！便利な最新オンラインツール43個まとめ【2020年版】
Web制作者必見！VSCodeのおすすめ拡張機能15個まとめ | Web Design Trends
Vite + React で新規プロジェクトの開発環境を作ろう
在宅ワークの集中力を高めよう！環境音が聴ける作業BGM用Webサイト
Web制作にすごい役立つ！無料で使える便利なオンラインツールのまとめ -Tiny Helpers
父親にうどんをぶつけられて上京を決意し、恥をかくことで作家になれた爪切男さんのターニングポイント【いろんな街で捕まえて食べる】 - SUUMOタウン
それ、Canvaで作れます。Web開発者が知っておくべき10のスゴ技！ - paiza times
仕事のストレスを軽減させる8つの思考 | knowledge / baigie
CSS設計・Sassディレクトリ管理の標準化（CROCSS） - Qiita
[Webデザイナーさんへ] そのデザインがコーディングしにくい理由と、改善ポイント詳説 | 東京のホームページ制作 / WEB制作会社 BRISK