おじさんが若者たちにモテるためのモダンなHTML/CSSマークアップ
タイトルに含まれる語に関する補足 おじさん： 筆者の便宜上、30歳前後のフロントエンドエンジニア、マークアップエンジニア等を指す。性別は問わない。 なぜ「モテ」なければいけないのか 「モテる」とは、最先端の流行を知り取捨選択することで、自由意志を謳歌することで実現する。 PHPとjQueryの時代は廃れ始め、AngularやReactに代表されるUIフレームワーク、ES2015やTypeScriptを流暢に扱えることがフロントエンドの責務となり、HTMLやCSSも、EJSやPug・SassやPostCSSなどのトランスパイル言語を介すことがほぼ常識になってきた（と思う）。 ところが、HTMLやCSSを何の言語で書くか以前に、中身をどうするべきかはあまり議論されていないので、「モテる」ための方法をいくつかかいつまんでまとめてみた。 セマンティックなコーディングは、開発者の課題理解度を図り、意
今すぐ知っておくべき！モダンな10のWeb技術
エンジニアやデザイナー、Web担当者が今すぐ知っておくべきモダンな10のWeb技術を紹介しています。Webデザインの世界が根本的に変化し、Webサイトの構築ははるかに簡単に高い技術でできるようになりました。ぜひ覚えておきましょう。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、ライターのJake Rocheleau氏によって投稿されました。
コピペで実装OK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ
ますます進化するウェブデザインの世界を体感でき、コピー&ペーストで利用することもできる HTML/CSS スニペットをまとめてご紹介します。ただいま流行中のWebトレンドの実装を可能にする最新レイアウトから、どんなプロジェクトにも活用したくなるエフェクトやテクニックなどを中心にまとめています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 詳細は以下から。 コピペでOK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ 01. Fixed Images That Fades as You Scroll 画面を２分割し、スク
無料で使える！レスポンシブWebデザイン対応のHTMLテンプレート素材まとめ
ウェブサイトをもっと簡単に作成したいというときは、HTMLやCSS、JavaScript、画像などをセットにしたHTMLテンプレート素材を活用してみましょう。あらかじめデザインや機能が実装されているので、テキストエディタで文字を編集するだけで、魅力的なサイトデザインに仕上げることができます。 今回は、デザイン性だけでなく使いやすい、無料ダウンロードできるHTMLテンプレートをまとめています。素材はどれもあらゆる画面サイズに対応できるレスポンシブWebデザインという点もポイントです。 詳細は以下から。 無料で使える！レスポンシブWebデザイン対応のHTMLテンプレート素材まとめ Synthetia 余白たっぷりのコンテンツ用レイアウトに、洗練されたアニメーションエフェクト、落ち着きのある配色カラーパレットなど、すぐにウェブページを作成したいときに。 デモページ ダウンロード Apollo 写
デザイナーが書くコードについて思うこと（1） | ツクロア - DESIGN LAB
あらためてなるほどな、と思えるいい記事でした。 【これからのスキル】デザイナーとエンジニアの境界線がどんどん無くなる | freshtrax | btrax スタッフブログ 自分にも重なる部分があると思って経験と雑感込みで書いてみた、毎週水曜更新のデザインラボbyツクロア、今週私のターンではデザイナーがコードを書く意味についてです。 一枚絵では通用しないアプリデザイン 某携帯電話メーカーからAndroidアプリデザインの依頼があったときの話です。 電話着信画面や起動直後の待受ロック解除のデザインを含め、使い心地や操作感から画面構成まで一緒に考えてもらえるデザイナーを探しているということでした。 担当者いわく「静止画だけではアプリデザインの良し悪しが決められないんですよ」という話から始まり、では「実際うごくデザインモックを作りながら一緒に考えましょう」という作業の流れを提案して検証からリリー
HTML／CSS、PHP、jQueryの基礎を学ぶなら超オススメ！プログラミング学習サービス「Progate」
まずはProgateへアクセスしてアカウントを作成。私はTwitterで認証しました。 現在学べる言語は HTML & CSS PHP jQuery の3言語の基礎部分。 とりあえずHTML & CSSをやってみましょう。 学習の流れ 学習の流れは3ステップ。 スライドで基礎知識を学習 ブラウザ上のエディタにコードを書いて実際に学習 プレビュー画面で実際に挙動を確認→答え合わせ といった感じです。 スライド スライドは非常に丁寧な作りとなっておりますので、よく読みこめば初心者でもしっかりと理解をしながら学習することが出来ます。 矢印キーでページ送りができるのがCool。 1レッスンにつき数枚のスライドが表示されますので、見終わったらエディタ画面へとGO！ エディタ画面 こちらがブラウザ上で動作するエディタ画面。左側が問題文、真ん中がエディタ、右側がプレビュー画面となります。 もう一度スライ
HTMLとJSとCSSだけでスクリーンセーバーが作れるHTMLScreenSaverBuilderを作った - kurainの壺
作った 表題のとおりで、HTML と JavaScript と CSS の知識があればMacのスクリーンセーバーを作れるツールを作りました。Xcode も不要です。 html でできることは大概できるので、flash 貼るとか audio ダグで音をならすとか、WebGLで3Dで遊ぶとかかなり何でも出来るのではナイかと思っています。 ダウンロード 下のリンクからどうぞ！HTMLScreenSaverBuilder 本体と、サンプルで作った ScreenSaver が入っています。 HTMLScreenSaver.zip 作り方 HTMLを準備 全画面表示されても、綺麗に表示されるような HTML を書きます。必ず名前は index.html にしてください。例として、はてなフォトライフの人気の写真を表示する HTML を書きました。 https://github.com/kurain/Ho
HTML/CSS/PHP等のコーディングに、無料のNetBeansが快適過ぎる件
私は結構エディタ難民で、HTML/CSS/PHP等をコーディングする際のエディタをWindows・Mac含め色々試してきましたが、最近は NetBeans IDE に落ち着いています。 NetBeans IDE は厳密にはエディタではなく、Windows・Mac・Linux用の無料で利用できるIDE（統合開発環境）の一種です。 ちなみに、↓のキャラクターは NetBeans IDE 日本語コミュニティの公式マスコットの「ねこび〜ん」です。 私はWordPressのテーマファイルを作成しているときに、PHPで独自のCMSを開発されている @kawagooch さんに勧められて使い始めたのですがとてもしっくりきたので、以後 HTML/CSS/PHP などWebサイトのコーディングには NetBeans IDE をメインで使っています。 私自身、NetBeans IDE を使うようになってからサ
MOONGIFT : PHPのコーディングチェックに「Spike PHPCheckstyle」 オープンソース・ソフトウェア/フリーウェアを毎日紹介
Spike PHPCheckstyleを使えばコーディング規約に沿っていないコードをすぐに発見できる。 Spike PHPCheckstyleはPHP製のオープンソース・ソフトウェア。ある程度の人数で開発を行う場合、コーディング規約が必要になる。そうしないと見やすい、または見づらいコードが増え、品質もばらつきが出る。品質の悪いコードはバグを生みやすい。 コードの品質チェックに ドキュメントで規約を作成し、それを守るようにというのは簡単だ。だがどうしたって規約に外れるコードは生まれてしまう。そこで使うのが規約に沿って書かれているかチェックするツール、Spike PHPCheckstyleだ。 Spike PHPCheckstyleはPHPのコードをチェックし、規約に沿って書かれているか確認してくれる。結果はHTMLファイルでレポートしてくれる。規約外の箇所があると、一覧にしてくれるので問題の
15 Free Bootstrap Admin Themes
In the past, the admin sections of web applications were often built with functionality as the only priority, with little or no consideration given to the design. Thankfully, times have changed, and in recent years, there has been a pleasing convergence of powerful functionality and beautiful design. This trend has been supported by the popularity of the Bootstrap framework, which has made it easi
40+ Elegant Free CSS/(X)HTML Templates from 2010 - noupe
Today we present some useful free CSS/(X)HTML templates which are available for free download and use. You may want to consider using them for your next projects or build upon them, creating more advanced themes from these basic templates. [fblike] Blue Jeans (Demo | Download) Stand out from the crowd with this cool, free template for a portfolio website based on blue jeans texture. Portfolio (Dem
モバイルサイトXHTMLコーディングのチェックポイント など10記事（海外&国内SEO情報） | 海外&国内SEO情報ウォッチ
モバイルサイトにおけるXHTMLコーディングのチェックポイント （これからゆっくり考L +α）日本の携帯電話は“ガラパゴス携帯”とも揶揄され、独自の進化を遂げている。これが影響を与えているのか、モバイルサイトのコーディングもPCサイトよりずっと難解なようだ SEOも大切なのだが、アクセスを集めた後にユーザーにサイトに滞在してもらい、コンバージョンアクションを起こしてもらうための見やすく使いやすいデザインも、重要である。こちらの記事では、携帯サイトをXHTMLでコーディングする際のチェックポイントを解説している このコーナーでも以前にお伝えした携帯サイト（html）の制作に入る前に確認しておきたいチェック項目も秀逸だったので、こちらも併せて参考にしてほしい。 2009年 ヤフー 検索キーワードランキング 発表 （ヤフー・ジャパン検索ランキング）日ヤフーが、Yahoo!検索の年間ランキング「2
Webページを速く見せるための5つのちょっとした工夫（1/3） - ＠IT
株式会社ライブドア マークアップエンジニア 浜 俊太朗 2009/4/30 ページ表示高速化をサーバの設定だけに任せていませんか？ HTMLやCSS、JavaScriptの書き方でも速くできます（編集部） 連載第1回の「Webサイトを“速く”表示させる7つの計測ポイント」では、YSlowを使って速度に関する問題を調査しました。 今回は、CSS・JavaScript・HTMLの工夫で速度を改善する下記5つの方法を紹介します。中にはYSlowの指摘に含まれないものもありますが、併せてチェックしていきましょう。 CSSはソースコードの上部に記述する JavaScriptはソースコードの下部に記述する CSSとJavaScriptを書く順番 JavaScriptを圧縮して読み込みを速くする 読み込みが遅いブログパーツには要注意 【1】CSSはソースコードの上部に記述する 連載第1回では、「CSSは
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
re-dzine.net situs togel online toto 2023 -
HTMLやCSSが手間なく書けるZen Coding | Zen Coding 1-1 | HTML+CSSコーディングが10倍速くなるZen Coding