####目標
横スクロールできるコードの上に、言語名、コピーを指示するテキストのみのみを固定する。
####大まかなコード構成
HTML
1<pre class="言語名"> 2 コード 3</pre> 4<script> 5 コード表示諸々のJavaScript 6</script>
css
1.pre { 2 コードを美しく 3} 4.pre:before { 5 言語を表示 ☆ここを固定したい☆ 6} 7.言語:before { 8 言語により言語名・デザインを変更 9} 10@media screen and (min-width: 769px) { 11 .pre:after { 12 コピーを促すテキストを表示 ☆ここを固定したい☆ 13 } 14} 15@media screen and (max-width: 768px) { 16 .pre:after { 17 スマホのみのコピーボタンを表示 ☆ここを固定したい☆ 18 } 19}
####詳細な情報
- 各テキスト(言語名・コピーボタン・コピーを促すテキスト)は content を使用して表示
- コードのハイライトにはhighlight.jsを使用
####やってみたこと
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1152711166
▲を参考に背景をテキストで指定しようとするが、うまくいかず。
####実際のサイト(サイト完成次第消去予定)
https://2001y.blogspot.jp/2016/01/test.html
####要望
- HTMLをいじりたくない
解決方法がわかる方は教えてください
回答2件
あなたの回答
tips
プレビュー