CSSで美しいシャドウをつけるbox-shadowの書き方を紹介します。 少し大きめのシャドウを適用し、ネガティブに縮小させることで、通常のシャドウより少しだけ彩度が高くなり、要素がくっきり見えます。
CSSで美しいシャドウをつけるbox-shadowの書き方を紹介します。 少し大きめのシャドウを適用し、ネガティブに縮小させることで、通常のシャドウより少しだけ彩度が高くなり、要素がくっきり見えます。
Result よくある、テキストの文末を省略するやつです。 1行に限らず、3行目、5行目など、n行で省略可能でWebkitやFirefoxはもちろん、IE11やEdgeもサポートしたコードです ↑ IE11で確認したスクショです。Penは非対応だったのでjsfiddleで確認しています ※Winodws10でIE11、Edge、Firefox 68.0.1、Opera 62.0.3331等で表示確認しました css p {/*基本設定。設定した高さより長くなった場合に文末以降が省略される*/ line-height: 1.4; max-height: 4.2em; overflow: hidden; position: relative; text-align: justify; text-overflow: ellipsis; width:50%; margin:auto; } p::b
[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。 こんにちは、@yoheiMuneです。 フロントエンドとしてHTML,CSS,JSを中心と開発を行うことを仕事にして早くも半年が経ちました。 最近はだいぶ効率的にコーディングが出来てきたとやっと実感してきたので、ブログにも自分のコーディングスピードアップのコツを書きたいと思います! 「こんなのよりももっと良いのあるよ」などたくさんの感じる点があるかと思います。ぜひTwitterなどで教えて頂けると助かります。 コーディングをスピードアップする6つ+αのポイント 自分が思うにコーディングをスピードアップする最も大切なポイントは以下ではないかと思います。 めんどくさいと感じること、そして改善に動くこと 幸い自分はかなりのめんどくさがり屋で、コーディング中も「これ手動!?」「マウ
構造やクラス名、プロパティの記述方法などをルール付ける「CSSコーディング ガイドライン」策定のための参考記事を紹介します。 チームでの共有、コーディング効率やメンテナンス性などの改善のためにも、これを機会にガイドラインを導入してみてはいかがでしょうか。 コーディング規約を作ろう"制作チームの規模が大きくなればなるほど、コードの統一性は大切" ▶ コーディング規約を作ろう Webクリエイターボックス コーディング規約を見直すうえで抑えておくべきポイントを紹介。 チェックポイントコーディング規約に含むべき項目 ・ディレクトリやファイルの階層・名前 ・記述順やインデント、単位などのフォーマット ・ID,classなどの命名規則 ・対応ブラウザー CSSガイドラインを翻訳してみた"多くの開発者が関わる場合、メンテナンス可能、コード見通し良く、拡張可能にするために統一された方法を用いることが重要"
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
Textastic is an advanced code editor for iPad with support for syntax highlighting, remote file transfer, and SSH. Versatile Highlights more than 80 different types of files while you're typing; HTML, XML, Objective-C, C++, PHP, Perl, Python, SQL, JavaScript, CSS, Tex, shell scripts, and many more. You can even use your own TextMate- and Sublime Text-compatible syntax definitions. Speedy Textastic
2017年7月25日 Webサイト制作, 便利ツール 今より少しでもコーディングを早くできれば、細かいデザインや機能にも時間をかけて取り組めそう…という事で今回はコーディングのスピードを上げるためにできる事を紹介します。便利なツールを使ったり、ちょっとやり方を変えるだけでより早くコーディングができるようになると思います! ↑私が10年以上利用している会計ソフト! 1. コーディング手順を簡略化する これは自分のコーディング能力を高めて手順を省く、便利なツールを使って手間を省くという事です。例えば私は昔このような手順でコーディングを進めていました。 CSSのレイアウトをノートに書き出す レイアウト部分(ヘッダー・メイン・サイド・フッター)のHTMLマークアップ CSSでレイアウト部分のスタイリング 表示確認 うまく表示できない箇所の修正 ヘッダー内のHTMLマークアップ CSSでヘッダー内の
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 cssとHTMLタグのマークアップ のみで実装出来るテクニック集 です。クロスブラウザ対応のみ をcss-playから探したので、 ついでにご紹介します。 jsが使えない環境でデザインする機会があったのでメモがてらエントリー。css-playを中心に、あとはググったりSBMで探したり。マークアップはリンク先をご確認下さい。css-playはソースを。 シンプルなドロップダウンメニュー シンプルなドロップダウンメニューです。マルチレベルのメニューも可能。 demo 縦並びのフライアウトメニュー 横に出るフライアウトタイプ。画像を使用しています。 demo クロスブラウザ対応のグラデーション webkit系でもmozでもIEでもcssのみでグラデーションを実装。 Cro
最近、MacのWebオーサリングソフト「Espresso」を使っています。これ、なかなかいいですよ。コードを書くのが気持ちいいソフトです。ちょこっと気づいたことなどを書いてみます。 いいところ zen-codingがちゃんと動く ローカルサイトとリモートサイトとの差分が分かりやすい HTMLはもちろんCSSもコードヒントが出る(CSS Editは出てこない) FTP機能もある プレビュー機能もある Sugarという拡張機能を入れて自分好みにカスタマイズできる イマイチなところ 検索機能が普通(文字列の検索・置換程度) インラインスタイルでCSSのコードヒントが出ない オリジナルのスニペットが作れるけど再配布できる形にはなってなさそう つまづいたところ ローカルサイトの設定の変更方法はどうやるの? アップしたファイルの権限の値が書き込み不可の状態だったので変更が反映されなかった→まずPref
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く